Web

JSX

JSX JSX는 JavaScript Xml 을 의미한다. 결국 HTML은 XML이라고 할 수 있기 때문이다. 그래서 JS 안에 HTML 을 갖고 있는 형태를 띄는 것이다. 하지만 코드는 이렇지만 실제로는 우리가 보는 화면 뒷단에서 변환과정을 거친다. 좀 더 브라우저 친화적인 코드로 변환시킨다. 이 변환된 코드를 크롬의 개발자도구의 Source 탭에서 확인할 수 있다. const element = Hello, world!; 위의 코드는 JSX의 한 예시이다. 리액트의 생김새를 정의할 때 사용하는 문법이라고 생각하면 된다. 보통 리액트에서 UI 디자인 시에 같이 많이 쓰인다. 또다른 예시를 보자. function App() { return ( Let's get started! ); } export defau..

리액트 설치

리액트를 설치하기전, node.js 설치가 필요하다. node.js 설치가 완료되었다면 순서대로 진행해보자. npx create-react-app 프로젝트명 본인은 코딩애플 강의를 보고 참고하여 blog라는 프로젝트명을 가진 프로젝트를 만들었다. 성공하면 위와 같은 프로젝트 폴더 구조를 가진다. App.js가 메인페이지라고 생각하면 된다. 위의 사진은 node_modules의 디렉토리 구조이다. 구동에 필요한 모든 라이브러리들의 소스코드를 모아놓은 폴더이다. (너무 많아서 사진은 중간에서 잘랐다) 위의 사진은 public의 디렉토리 구조이다. html 파일, 이미지 파일등을 잠깐 보관하고 싶을 때 사용하는 곳이다. static 파일 보관함이라고 생각하면 된다. 직접적으로 코드를 짜는 곳이다. App.js..

Modern Javascript / 함수 심화학습

목차 재귀와 스택 나머지 매개변수와 전개 문법 변수의 유효범위와 클로저 오래된 'var' 전역 객체 객체로서의 함수와 기명 함수 표현식 new Function 문법 setTimeout과 setInterval을 이용한 호출 스케줄링 call/aply와 데코레이터, 포워딩 함수 바인딩 화살표 함수 다시 살펴보기 재귀와 스택 문제 해결을 하다 보면 함수에서 다른 함수를 호출해야 할 때가 있다. 이때 함수가 자기 자신을 호출할 수도 있는데, 이를 재귀라고 부른다. 두 가지 사고방식 재귀와 스택 ko.javascript.info 가장 처음 하는 호출을 포함한 중첩 호출의 최대 개수는 재귀 깊이(recursion depth)라고 한다. pow(x, n)의 재귀 깊이는 n이다. 자바스크립트 엔진은 최대 재귀 깊이를 ..

Modern Javascript / 코드 품질 - Chrome으로 디버깅

Chrome으로 디버깅하기 디버깅은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다. 모던 브라우저와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로 디버깅 툴을 구비해 놓는다. 디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있다. 중단점 줄 번호를 클릭하면 중단점을 설정할 수 있다. 중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있다. 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다. debugger 명령어 function hello(name) { let phrase = `Hello, ${name}!`; debugger; // 여기서 실행이 멈춘다 say(phrase); } debug..

Modern Javascript / 자료구조와 자료형

목차 원시값의 메서드 숫자형 문자열 배열 배열과 메서드 iterable 객체 맵과 셋 위크맵과 위크셋 Object.keys, values, entries 구조 분해 할당 Date 객체와 날짜 JSON과 메서드 원시값의 메서드 원시값: 원시형 값이다. 원시형의 종류는 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 형으로 총 일곱 가지 이다. 객체: 프로퍼티에 다양한 종류의 값을 저장할 수 있다. {name: "John", age: 30}와 같이 대괄호 {}를 사용해 만들 수 있다. 함수도 객체의 일종이다. 숫자형 숫자를 입력하는 다양한 방법 let billion = 1000000000; billion = 1bn; billi..

Modern Javascript / 객체: 기본

객체 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체를 저장할 수 있다. 객체는 중괄호 {...}를 이용해 만들 수 있다. 중괄호 안에는 '키(key): 값(value)' 쌍으로 구성된 프로퍼티를 여러개 넣을 수 있다. 키엔 문자형, 값엔 모든 자료형이 허용된다. // 객체를 생성하는 두가지 문법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 리터럴과 프로퍼티 let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 "likes birds": true // 복수의 단어는 따옴표로 묶어야 ..