본문 바로가기

전체 글123

Event Loop & Task queue 이벤트 루프와 태스크 큐 비동기 프로그래밍 공부 전에 자바스크립트 코드 동작 원리인 실행 컨텍스트 개념부터 잡고 들어가면 좋겠다. 자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌 실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관 code-designer.tistory.com 📌 브라우저 환경 📍 자바스크립트 엔진 (싱글 스레드) 대부분의 자바스크립트 엔진은 크게 2가지 영역으로 구분할 수 있다. ✔ 콜 스택 call stack (실행 컨텍스트 스택) 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조이다. === 실행 컨텍스트 스택 자바스크립트 엔진은.. 2021. 9. 18.
HTML attribute와 property 차이 📌 attribute란? 리스트 HTML element의 추가적인 정보를 전달한다. 태그 내에서 이름="값" 쌍으로 작성된다. div 태그는 "label" 이란 값을 지닌 class 어트리뷰트를 가지고 있다. 📌 property란? HTML DOM tree 내부에서 attribute를 가리킬 때 쓰인다. (예시의) 해당 엘리먼트는 HTML DOM tree에서 이름이 className이고 값이 "label" 인 property를 가진다. 📌 그렇다면 !! attribute와 property의 차이는 무엇인가? 위치적 관점에서 본다면, attribute는 HTML 문서 안에 있고, property는 HTML DOM tree 안에 있다. 즉, attribute의 값은 변하지 않고, property는 (자바스크.. 2021. 9. 16.
styled-component, useState 사용해서 Tag 만들기를 가장한 testCase 삽질기 📌 Tag 란? 키워드 중심의 버튼버튼 아닙니다이라고 볼 수 있다. (정확히는 버튼은 아님. "버튼처럼" 동작할 뿐) 일반적인 버튼과의 차이가 있다면, 클릭했을 때 새로운 이벤트를 즉각적으로 실행하지 않는다. 버튼이 아니니까 당연한 이야기 ... 다만, 선택된 태그를 바탕으로 정보를 조합해 새로운 이벤트가 구성된다. ex. 핀터레스트에 처음 들어갔을 때 관심사 태그들을 클릭하면 내 피드가 태그 관련 이미지들로 채워진다. ex. 노션에서 노트를 작성하며 내가 원하는 태그들을 달아놓는다면, 나중에 해당 태그가 있는 노트들만 취합해 볼 수 있다. 📌 Tag를 구현해보자. ◾ Tag 상태만 추적할 때 export const Tag = () => { // dsfault 값은 넣어도 되고 안 넣어도 됨 const .. 2021. 9. 15.
styled-component, useState 사용해서 Modal창 만들기 📌 Modal 창이란? 평소에 우리는 "팝업창이 차단되었습니다" 란 메세지를 종종 접한다. 여기서 말하는 팝업창은 현재 위치한 브라우저 이외에 또 다른 브라우저 페이지를 띄운 것을 말한다. 홈페이지에 접속했을 때 광고나 공지 등이 파바박 떠올라서 해당 창을 일일이 닫아줬던 경험이 있을 것이다. 그에 반해 기존의 브라우저 위에 하나의 레이어를 까는 것을 말한다. "새로운 창"이 아니다. 팝업창과 달리 브라우저 단에서 차단할 수 없기 때문에 반드시 표시해야하는 정보를 다루기 좋다. 그리고 개인적으로 UI적으로 정리가 잘 된 느낌을 받아서, 앞으로도 애용할 것 같다. 📌 Modal 창의 장단점 (feat. Pop-up 창의 장단점) 그렇다면, Modal 창은 장점만 있나 ? Nope. Pop-up 창과 비교해.. 2021. 9. 14.
URI 그리고 URL, URN 📌 URI URL URN URC 모두의 관계성 📌 URI? (Uniform Resource Identifier) Identifier 식별자 네트워크상의 자원을 가리키는 고유 식별자(*ID)이다. ◾ URI 구조 scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment] 1. scheme : 사용할 프로토콜 (네트워크 통신 규악)(OSI 7계층) 2. user 와 password : (서버의)데이터에 접근하기 위한 사용자의 이름과 비밀번호 3. host 와 port : 접근할 대상(서버)의 호스트명과 포트 번호 포트 번호는 보통 웹이 알아서 생략해준다. (http는 80, https는 443) 호스트명 대신 도메인명 또는 IP주소로 표현되기도 한.. 2021. 9. 11.
Client - Server : SOP와 CORS 📌 SOP? (Same Origin Policy) 동일 출처 정책으로, 하나의 Origin에서 로드된 문서나 스크립트가 다른 Origin의 자원과 상호작용하지 못하도록 제한하는 것. 여기서 말하는 Origin은 아래 3가지 요소를 조합한 것이다. ✔ URL Scheme (http, https ... etc URL SCHEME 종류 참고) ✔ Hostname [NodeName] (localhost, 내 블로그 기준 -> code-designer) ✔ port (3000, 8080 ...) 예전에는 브라우저에서 요청을 보내면, 서버에서 해당하는 로직을 수행한 뒤 "HTML을 완성시켜 반환"해줬다. 즉, 하나의 서버(동일한 Origin)에서 모든 작업이 수행되었다. 다른 브라우저와 교류할 일도 적었고, 만약 .. 2021. 9. 10.
자기소개서 && 면접 참고 자료 https://techblog.woowahan.com/2531/ 이직초보 어느 개발자의 이력서 만들기 | 우아한형제들 기술블로그 {{item.name}} 안녕하세요 저는 올해 2월부터 우아한형제들의 배라개발팀에서 일하고 있는 구인본입니다. 작년 연말에 잠시 휴식을 가진 후 1월부터 이직을 준비하면서 경험했던 것 중에 이력서를 techblog.woowahan.com 프론트엔드 면접 1 프론트엔드 면접 문제 1탄 ⭐️ 프론트엔드 면접 문제은행에서 면접에 실제 나올 만한 것들로 준비해봤습니다..! 저를 포함한 많은 프론트 주니어 개발자를 꿈꾸는 취준생분들에게 조금이나마 도움이 되었으면 합니다 🙂 2탄 velog.io 프론트엔드 면접 2 프론트엔드 면접 문제 2탄 ⭐️ 지난번엔 HTML편이었는데 이번엔 CSS .. 2021. 9. 9.
Node JS 서버 다루며 만난 에러 [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client 서버가 클라이언트에 2개 이상의 응답을 보내려고 할 때 발생하는 오류 ex. response.end( ) 를 2번 이상 보냈다던가 ... response.end( ) 를 2번 이상 보냈다던가 ... ex. 로직이 잘못된 경우니까 코드를 잘 살펴보자 !! Access to fetch at 'http://localhost:3000' from origin 'http://127.0.0.1:8000 has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No.. 2021. 9. 9.
REST API 기본 정리 📌 REST란 (REpresentational State Transfer)? HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처. 🏁 REST 특징 더보기 ◾ Uniform URI로 지정한 리소스에 대한 조작을 한정적이고 통일된 인터페이스로 수행하는 아키텍쳐다. --> REST가 지정한 API대로만 조작하게 하니까 ! ◾ Stateless 작업을 위한 상태 정보를 저장하거나 관리하지 않습니다. API server는 들어오는 요청만 처리하면 되기 때문에 서비스의 자유도가 높아지고 구현이 단순해진다. --> 요청만 단순하게 처리 ! ◾ Cacheable REST는 HTTP라는 기존 웹 표준을 그대로 사용하기 때문에 웹에서 사용하는 기존 인프라를 활용할 수 있다. 따라서, HTTP.. 2021. 9. 8.
자바스크립트 모든 부분 집합(멱집합) 구하기 📌 멱집합 PowerSet? 구할 수 있는 모든 부분 집합의 집합 === 멱집합 "모든 부분집합 모음"이라고 쉽게 생각하자. 예를 들어, [1, 2, 3, 4, 5]와 같은 배열의 멱집합을 구한다고 한다면, 말 그대로 "부분" 집합이니까 각 요소들은 "있다"vs"없다" 라는 2가지 상태를 지닐 수 있다. 1이 있어도 부분집합, 없어도 부분집합이다. (믿기지 않겠지만 빈 배열도 부분집합으로 친다 !) 그래서 2(가지 상태)^5(요소 개수) 32개의 부분집합을 구할 수 있다. 32개의 부분집합을 모두 담은 집합을 멱집합이라고 할 수 있다. 📌 Tree로 구현하기 DFS완전 탐색을 이용해 그려보면, 일정한 패턴을 볼 수 있다. 왼쪽 노드를 선택했을 때 오른쪽 노드는 선택되지 않는다. "있다"와 "없다" 2가지.. 2021. 9. 7.
항공편 검색창 만들면서 useEffect 공부하기 📌 구현 결과 📌 구현 과정 Main.js 📌 2021. 9. 7.
자바스크립트 비동기 프로그래밍 Asynchronous Programming 비동기 프로그래밍 공부 전에 자바스크립트 코드 동작 원리인 실행 컨텍스트 개념부터 잡고 들어가면 좋겠다. 자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌 실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관 code-designer.tistory.com 📌 자바스크립트가 비동기적으로 작동해야하는 이유 변수를 선언하거나 함수를 호출하면, 자바스크립트에서는 실행 컨텍스트를 생성한다. 이때 생성된 실행 컨텍스트는 실행 컨텍스트 스택 (콜스택)에 push 되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 실행 컨텍스트는 실행 컨텍스트 스택에서 pop 되어 .. 2021. 9. 6.
자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌 실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관리하는 방식 ✔ 호이스팅이 발생하는 이유 ✔ 클로저의 동작 방식 ✔ 태스크 큐와 함께 동작하는 이벤트 헨들러 ✔ 비동기 처리의 동작 방식 실행 컨텍스트를 이해했을 때, 이 모든 것을 자연스럽게 습득할 수 있다. 📌 실행 컨텍스트execution context 코드가 실행되려면 스코프, 식별자, 코드 실행 순서 등의 관리가 필요하다. ✔ 선언에 의해 생성된 모든 식별자(변수, 함수, 클래스..)들을 스코프를 구분하여 등록하고 상태 변화(식별자에 바인딩된 값의 변화)를 지속적으로 관리해야 한다. ✔ 스코프는 중첩 관계에 의해 스코.. 2021. 9. 5.
백준 자바스크립트 입력 방식 메모 ● test case (1줄 \n1줄 기준) good morning hello world! ● test case 받아오기 // 줄 바꿈 기준으로 가져오기 const fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().split('\n'); console.log(input); // ['good morning', 'hello world!'] ● test case (여러줄 \n여러줄 기준) case 1 5 1 2 3 4 5 case 2 4 2 3 1 0 0 1 1 1 1 1 0 1 0 1 0 1 1 1 ● test case 받아오기 const solution = (N, data) => { console.log(N); console... 2021. 9. 4.
01 Big O Notation ( in JavaScript ) Udemy | JavaScript Algorithms and Data Structures Masterclass 01 Big O Notation ● Big O Notation 이란 ?? 좋은 코드, 더 나은 코드란 무엇일까? 란 질문을 던졌을 때 우리는 3가지 정도를 고려해 볼 수 있다. 01 기존 코드보다 처리 속도가 더 빠른가? 02 기존 코드보다 메모리를 덜 잡아먹는가? 03 기존 코드보다 로직이 더 직관적인가? 1번 조건을 평가하기 위해 쓰이는 도구가 바로 Big O Notation이다. "시간 복잡도"라고 부르기도 한다. 알고리즘의 수행 시간을 분석할 때 이 시간 복잡도를 사용한다. 수행 시간은 실행 환경에 따라 다르게 측정되므로, 기본 연산의 실행 횟수로 수행 시간을 평가한다. Big O 표기법.. 2021. 9. 3.
if문과 switch문의 성능 차이 ? 둘 중에 뭘 써야 하나 며칠 전 stack 자료 구조를 자바스크립트로 구현하다 깨달은 사실이 몇 가지 있어 글을 남기려 한다. ISA 관점 에서 ... 봤을 때, (궁금증 1) MIPS 에는 (궁금증 2) branch statement 와 jump statement 가 있다고 한다. branch statement는 레지스터 2개를 비교해서 (혹은 레지스터 and 상수 비교) 특정 메모리 번지로 이동하냐 마냐를 결정한다. jump statement는 (비교 없이) 즉시 !! 특정 메모리 번지로 이동한다. if문은 branch statement에 기반을 두고 있고, switch문은 jump statement에 기반을 두고 있다. if문은 조건이 만족하면 실행, 만족하지 않으면 무시한다. (실행 할거여 말거여?) switch문은 입.. 2021. 9. 2.
자료구조 / 알고리즘 공부할 때 유의할 점 📍 공부하면서 스스로한테 지속적으로 던져야하는 질문들 자료구조 ✅ 자료 구조 안에 있는 데이터들의 순서가 보장이 되는가? ✅ 중복된 데이터가 들어갈 수 있는가? ✅ 검색할 때 얼마나 효율적인가? ✅ 내가 원하는 기능을 수행하기 위해 데이터를 수정해야할 때 얼마나 효율적인가? 알고리즘 ✅ Input(매개 변수)의 사이즈가 커질수록 O(n)은 어떻게 변화하는가? ✅ 작성한 코드의 시간 복잡도와 공간 복잡도는 어떠한가? ✅ 선택한 자료구조가 해당 알고리즘 문제를 풀기에 적절한가? 문제 푸는 skill 01 UNDERSTAND THE PROBLEM 02 CONCRETE EXAMPLES 03 BREAK IT DOWN 04 SOLVE OR SIMPLIFY 2021. 9. 1.
자바스크립트 돔 DOM 조작 연습 📌 JS가 받아오는 데이터 요약 더보기 const menu = [ { type: 'group', name: '음료', children: [ { type: 'group', name: '콜드 브루', children: [ { type: 'item', name: '나이트로 콜드 브루' }, { type: 'item', name: '돌체 콜드 브루' }, { type: 'item', name: '제주 비자림 콜드 브루' }, { type: 'item', name: '콜드 브루' }, ], }, { type: 'group', name: '프라푸치노', children: [ { type: 'item', name: '애플 쿠키 크림 프라푸치노' }, { type: 'item', name: '더블 에스프레소 칩 프라푸.. 2021. 8. 31.
재귀함수 Recursion Achivement Goals ✅ 재귀의 의미에 대해서 이해하고, 자바스크립트에서 재귀 호출을 할 수 있다. ✅ 재귀를 언제 사용해야 하는지 알고 있다. ✅ 재귀적 사고 연습을 통해 재귀 함수를 base case와 recursive case로 나눠서 작성할 수 있다. ✅ 자료 구조 중 Tree 구조에 재귀 함수를 사용하는 이유를 이해할 수 있다. ✅ 실생활에 사용되는 유용한 Tree 구조를 알고 있다. ✅ 깊이를 알 수 없는 Tree 구조에 재귀 함수를 활용하여 모두 순회(traverse)할 수 있다. 📌 재귀란? 어떤 문제를 해결할 때, 동일한 구조의 더 작은 문제를 해결함으로써 주어진 문제를 해결하는 방법이다. --> 처음 접했을 때는 이게 무슨말이야 ...? 했는데 공부해보니까 알겠다. --> 코드.. 2021. 8. 30.
자바스크립트 클래스 Class 입문 Achivement Goals ✅ 클래스와 인스턴스라는 용어를 이해할 수 있다. ( new 키워드 사용법 / class 키워드 사용법 ) ✅ 객체 지향 프로그래밍 특징을 이해할 수 있다. ( 캡슐화 / 상속 / 추상화 / 다형성 ) ✅ JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다. ✅ Prototype이 무엇인지 이해할 수 있다 ✅ 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다. ✅ 현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인하고 상속 관계를 가진 모델을 코드로 작성할 수 있다. ✅ Prototype chain을 이해하고 설명할 수 있다. (__proto__) 📌 돌아보기 ◾ 메서드 호출 : 1번만 쓸 수 있음 (단순)객체 .. 2021. 8. 29.
자바스크립트 클로저 활용 Closure private 변수, 메서드 흉내 내기 📌 Closure 활용 방법 대표적인 이점 중 하나가, private 변수나 메서드를 흉내낼 수 있다는 점이다. // counter에 할당된 이 익명 함수는 정의되는 즉시 실행된다. // 이 lexical environment는 privateCounter라는 변수와 changeBy라는 함수를 포함한다. // 2개 다 private item이다. 익명 함수 외부에서 접근될 수 없는 아이들이다. // 대신 익명 함수에서 반환된 3개의 public 함수를 통해서만 접근할 수 있다. let counter = (function() { let privateCounter = 0; function changeBy(val) { privateCounter += val; } return { // counter.increas.. 2021. 8. 28.
자바스크립트 클로저 Closure 📌 일단 Lexical Scope? Dynamic Scope? ◾ Lexical Scope 함수나 변수의 스코프를 선언된 위치를 기준으로 정함 ( Compile 시점 ) ◾ Dynamic Scope 함수나 변수의 스코프를 호출된 시점을 기준으로 정함 ( Runtime 시점 ) // 01 Lexical Scope와 Dynamic Scope 비교 let x = 1; function print() { console.log(x); // Lexical Scope : 1 -> 선언된 위치 기준 / 변수 x 전역 스코프 } function foo() { let x = 100; print(); // Dynamic Scope : 100 -> 호출된 시점 기준 / 변수 x 지역 스코프 } foo(); // 02 내부 함수.. 2021. 8. 27.
React To Do List 만들면서 useState, useRef 공부하기 2021. 8. 26.
React 좋아요 버튼 만들면서 state 공부 📌 구현 결과 📌 구현 과정 App.js ✔ /* eslint-disable */ npm 눌렀을 때 뜨는 노란 글씨 ( 오류는 아니지만 약한 경고 메세지 ) 를 지워주는 역할 ✔ 리액트는 데이터 바인딩이 굉장히 쉽다 데이터의 상태를 변화시키고 싶을 때, useState를 사용해 복사해 온 다음에 변경 사항을 적용시킨다. 절대 !! 원본 데이터는 직접 변경시키지 않는다. 꼭 복사해서 들고 올 것. // 01 const changeName = () => articleNameChange(["백엔드개발자" ,"자바스크립트", "리액트"]) // 02 const changeName = () => { const newArr = [...articleName]; newArr[0] = "백엔드개발자"; articleNa.. 2021. 8. 25.
자바스크립트 프로그래머스 프린터 문제 풀이 📌 문제 ◾ 해설 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 1. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 2. 나머지 인쇄 대기목록에서 J보다 중요도가 높은 문서가 한 개라도 존재하면 J를 대기목록의 가장 마지막에 넣습니다. 3. 그렇지 않으면 J를 인쇄합니다. 예를 들어, 4개의 문서(A, B, C, D)가 순서대로 인쇄 대기목록에 있고 중요도가 2 1 3 2 라면 C D A B 순으로 인쇄하게 됩니다. 내가 인쇄를 요청한 문서가 몇 번째로 인쇄.. 2021. 8. 24.
자바스크립트 배열 고차함수 forEach / map 📍 Array.prototype.forEach ( immutable △ ) 함수형 프로그래밍 은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고, 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. forEach 메서드는 for문을 대체할 수 있는 고차함수다. 반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다. const number = [1, 2, 3]; const pows = []; numbers.forEach(item => pows.push(item ** 2)); console.log(pows); // [1, 4, 9]; 🔔 forEac.. 2021. 8. 23.
브라우저 렌더링 과정 && 각종 용어 정리 📌 브라우저 렌더링? 1. [Parsing] HTML 파일과 CSS 파일을 파싱해서 각각 Tree 를 만듦. 2. [Style] 두 Tree 를 결합해서 화면에 표현되는 Node 를 기준으로 Rendering Tree 를 만듦. 3. [Layout/Reflow] Rendering Tree 에서 각 Node 의 정확한 위치와 크기를 계산. = 레이아웃을 계산. 4. [Paint/Repaint] 계산된 값을 이용해 각 Node 를 화면 상의 실제 pixel 로 변환하고 여러 개의 Layer로 생성. 5. [Composite] Layer 들을 합성하여 실제 화면에 나타냄. 대부분의 프로그래밍 언어는 운영 체제operating system이나 가상 머신virtual machine 위에서 실행된다. 그러나 웹 애.. 2021. 8. 22.
자바스크립트 배열 메서드 Array Method (계속 추가중) ◾ Array.isArray ( immutable ) // true Array.isArray([]); Array.isArray([1, 2]); Array.isArray(new Array()); 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다. 배열과 객체를 구분할 때 typeof 대신 Array.isArray를 사용한다. ◾ Array.prototype.indexOf ( immutable ) const arr = [1, 2, 2, 3]; // 배열 arr에서 첫 번째로 검색된 요소 2의 인덱스를 반환한다. arr.indexOf(2); // 1 // 배열 arr에 요소 4가 없으므로 -1을 반환한다. arr.indexOf(4); // -1 // 두 번째 인수는 검색을 시작할 인덱스다... 2021. 8. 21.
21.08.20 코드스테이츠 SECTION 1 기록 📌 SECTION 1을 마무리 하며 짧지만 굵었던 SECTION 1이 끝났다. 7월 19일부터 8월 19일까지 딱 1달이라는 시간이 지났다. 한 달간 블로깅한 기록들을 보니 시간이 빠른 건 사실이지만 매정하진 않다는 생각이 들었다. 코드스테이츠에 들어오기 전, 드림코딩 엘리님의 자바스크립트 강의를 보면서 독학했었다. 자바스크립트에 대한 기본은 잡혔지만 팀 프로젝트를 혼자 진행하기엔 무리가 있었다. 같이 공부할 스터디원이나 팀플을 진행할 팀원이 필요했고 그 계기로 코드스테이츠에 들어오게되었다. 팀 프로젝트를 할 목적으로 들어왔지만 생각보다 많은 것을 얻을 수 있었다. 첫째 다양한 사람들과 만나고 (zoom) 소통하면서 혼자 할 때와 달리 활기차졌다. 둘째 현업에 나가계신 분들의 이야기를 들을 수 있는 기회.. 2021. 8. 20.
React 시작 📌 React? React는 UI 기능만 제공한다. 따라서, 전역 상태 관리, 라우팅, 빌드 시스템 등을 개발자가 직접 구축해야한다. --> 직접 만져보면서 이 특징을 여실히 느꼈다. 같은 기능을 구현하더라도수십 수백가지의 방법이 있더라. 그래서 React를 UI 라이브러리 혹은 라이브러리라고 부른다고 한다. 빌드 시스템이나 라우팅 등을 직접 구축하는 것은 진입장벽을 높히기 때문에 이를 허물고자 React측에서 CRA를 만들었다. (프레임워크는 이를 모두 구축해서 제공한다 ㅎㅎ) 📌 입문 필수 지식 ✔ 프레임워크(Frame-work) 와 라이브러리(Library) 차이 ✔ React CRA ? 보일러 플레이트 ? ✔ (그동안 몰랐던) Babel의 역할 ✔ 자바스크립트 모듈 간 import와 export를.. 2021. 8. 19.

티스토리툴바