전체 글 20

[SpringBoot] 01. 개발환경구축

1. 프로젝트 생성 스프링 사이트에서 템플릿 다운 : https://start.spring.io/ IDE : 인텔리제이 JDK : 11버전 빌드툴 : 메이븐 (의존성관리, 의존성 추가는 다른 라이브러리를 사용하기 위해 추가한다는 의미) 패키징 : Jar 의존성 : Spring web 2. 프로젝트 구조 src/main/java : 자바 소스코드 src/main/resources : html, css, js, image 등 정적 리소스 저장 src/test/java : 테스트 코드 작성 3. 빌드도구 프로젝트의 빌드를 자동화해주는 빌드 툴. (메이븐, 그래들) 개발 중 많은 라이브러리를 사용하기 위해 pom.xml 파일에 필요한 라이브러리를 등록하면 메이븐이 네트워크를 통해 자동으로 다운로드 후 경로까지 ..

Spring 2022.06.03

[React Native] 윈도우에서 안드로이드 에뮬레이터 실행하기

환경설정을 끝내고 앱 생성까지 해보았으니 안드로이드 에뮬레이터로 실행해봅니다. 1. 에뮬레이터 생성 1) 안드로이드 스튜디오 실행 - Tools - Device Manager 클릭 2) Create device를 눌러 가상장치를 만듭니다. (저는 Phone은 Pixel 3 , API level은 30 (R)로 선택했습니다.) 2. metro 서버 시작 - 리액트 네이티브 프로젝트를 빌드하여 실행할 때마다 Metro라는 패키지가 시작됩니다. - 메트로는 모든 자바스크립트 파일을 가져와 단일 파일로 결합하여 제공하는 자바스크립트 번들러입니다. (webpack 같은 느낌) - 이 서버에서 소스코드를 컴파일하여 앱으로 전송해 줍니다. 1) vscode 실행 - 리액트 네이티브 프로젝트 폴더 열기 2) 터미널 열..

React-native 2022.04.07

[React Native] 프로젝트 생성 & JSX 구문 사용

참고한 교재는 Do it 리액트 네이티브 앱 프로그래밍 입니다! 리액트 네이티브 프로젝트 만들기 타입스크립트로 개발하는 경우 --template 옵션에 react-native-template-typescript을 지정합니다. npx react-native init 프로젝트명 --template react-native-template-typescript code 프로젝트명 // vscode 폴더 열기 물리DOM과 가상DOM 리액트 프레임워크는 물리 DOM 구조와 가상 DOM 구조를 사용합니다. 물리 DOM 구조 웹 브라우저에서 자바스크립트 코드가 생성하는 실제 DOM 구조 const elem = document.createElement('p'); elem.innerText = '리액트 네이티브 공부해요';..

React-native 2022.04.06

[React Native] 윈도우에서 개발 환경 세팅하기!

리액트 네이티브 공부를 시작했습니다. 참고한 교재는 Do it 리액트 네이티브 앱 프로그래밍 입니다! 리액트 네이티브 - 안드로이드, iOS 운영체제에서 크로스플랫폼으로 제작할 수 있는 프레임워크 - 2015년 페이스북에서 리액트 네이티브 프레임워크 발표 - 네이티브 파트와 자바스크립트 파트로 구성 윈도우에서 개발 환경 세팅하기 설치 순서 1. Scoop 2. Node.js 3. 자바8 JDK 4. Vscode 5. 안드로이드 스튜디오 Scoop 설치 - 운영체제가 윈도우10이면 앱 개발에 필요한 소프트웨어를 각 웹 사이트에서 다운받아 설치해야 합니다. - 이 방식은 소프트웨어가 업데이트되면 다시 다운로드하여 설치해야 합니다. - Scoop란 설치 프로그램을 사용하여 scoop update * 명령으로 ..

React-native 2022.04.03

[javascript/jQuery] select box와 option 제어하기

select box를 제어해보기 selectbox를 사용하던 중 정리해두면 좋을 것 같아서 포스팅 해볼게요! 자주 사용하는 기능을 jQuery와 javascript로 분류했습니다. 신한은행 하나은행 국민은행 우리은행 농협은행 1. select box 의 selected 된 옵션값, 텍스트 가져오기 jQuery $("select[name=bank] option:selected").val(); // kb $("select[name=bank] option:selected").text(); // 국민은행 javascript document.querySelector("select[name=bank] option:checked").value; // kb document.querySelector("select[nam..

Javascript/HTML 2022.04.01

[Javascript] 콜백 함수 이해하기 (callback function)

Javascript Callbacks 콜백은 다른 함수의 파라미터로 전달되는 함수입니다. 이 콜백함수를 사용하면 함수가 파라미터로 받은 다른 함수를 호출할 수 있습니다. 콜백함수가 어떻게 구현되는지 간단한 예제를 봅시다. 간단한 계산식 후 로그를 찍는 함수 입니다. 계산기 함수(myCalculator)를 호출하여 결과를 저장한 다음, 출력 함수(myDisplayer)를 호출하여 결과를 로그로 남깁니다. 📄 콜백함수를 사용하지 않은 일반함수 호출 // 출력함수 function myDisplayer(result) { console.log('계산결과 : ', result); } // 계산기함수 function myCalculator(num1, num2, callback) { let sum = num1 + nu..

Javascript/HTML 2022.03.29

[javascript] Map 객체를 사용해보자

Map 자바스크립트 자료구조 중 map에 대해 포스팅 해보겠습니다. ES6에 도입된 Map은 Object객체와 동일하게 key-value 쌍으로 저장되며 삽입 순서도 기억하는 컬렉션 입니다. key-value의 형태로 이루어져있으며 삽입 순서를 기억 key는 모든 값 (함수, 객체 등)을 사용 가능 get, set 을 이용하여 키 값을 반환, 설정 기본 구문 const myMap = new Map([ ['a', 1], ['b', 2] ]); myMap.set('c', 3); Object.fromEntries(myMap); // {a: 1, b: 2, c: 3} new 생성자를 통해서만 생성이 가능합니다. key값으로 String과 Symbol 타입만 가질 수 있는 Object형과 달리, 어떠한 값이라도 ..

Javascript/HTML 2022.03.28