전체 글
-
쉅정리 실행 컨텍스트, Closure, Hoisting, Scope, this위코드x원티드 2021. 8. 18. 12:31
*위코드X원티드 프론트엔드 프리온보딩코스 수업내용 복붙 정리 중 실행 컨텍스트 Execution Context - JS 가 실행되고 있는 컨텍스트 (환경) - 실행할 코드에 제공할 환경 정보들(변수 정보들)을 모아놓음. 코드를 실행하기 위한 여러가지 정보들 ( 어떤 변수가 있고, 어떤 변수를 hoisting 할 지, scope 는 어떤지, scope chain 은 어떤지 등등등등 ) - 함수를 호출할 때마다 그 함수에 대한 실행 컨텍스트가 생성되며, 함수는 자신만의 고유한 컨텍스트에서 실행된다 - Call Stack 과 함께 동작한다, Call Stack 은 현재 실행중인 작업에 관한 정보를 저장하는 Stack 자료구조 - 하나의 JS 코드를 실행할 때, 필요한 환경 정보들을 모아 Context 를 구성..
-
브라우저 동작 원리위코드x원티드 2021. 8. 14. 15:13
브라우저의 주요 기능 사용자가 입력한 URL 에 따라 Web Server 에 리소스를 요청(Request) 하고, 받아온 응답(Response) 을 브라우저 윈도우에 보여주는 것이다 - 리소스는 HTML 문서, PDF, image 외 여러 타입이 될 수 있다. 리소스의 위치는 사용자가 URI 로 특정할 수 있다 *URI (Uniform Resource Identifier) 는 하나의 리소스를 가리키는 문자열. URL 은 하위 개념으로, 웹상에서의 위치로 리소스를 식별함 - 브라우저가 HTML 파일을 해석하고 보여주는 방법은 HTML, CSS 명세에 특정돼 있다. 이 명세는 W3C, Web 표준화 기구에 의해 정해진다 브라우저의 구조 크게 7가지 요소로 구성된다. 받아온 리소스를 해석해 화면에 보여지는 데..
-
Event Loop위코드x원티드 2021. 8. 14. 13:52
JS 는 싱글 스레드 언어이다. JS 엔진은 메모리 구조로 Memory Heap 과 Call Stack 을 가진다 - Memory Heap 에서는 메모리 할당이 일어난다. 변수, 객체, 함수 등등 을 메모리에 할당한다 - Call Stack 은 코드가 실행됨에 따라 스택 프레임이 쌓이는 공간이다. 우리가 프로그램의 어느 위치에 있는 지 알려주는 자료구조이다 JS 에 Call Stack 은 1개 뿐이므로, 한 번에 1가지 일밖에 하지 못한다. 뭔가 비동기적인 일이 필요할 때 Blocking 없이 어떻게 처리할 수 있을까? 다행히 JS 엔진이 제공하지 않는 것을 브라우저가 제공하고 있다 그것은 바로 Web API! Web API에는 DOM API, AJAX, fetch, setTimout, Http Requ..
-
Redux thunk, Ducks pattern, Router 연결, Redux saga 등프로그래밍/React 2021. 8. 13. 18:29
Redux-devtools 이거는 그냥 디버깅에 도움 되는 모듈 middleware 를 설치해서 브라우저의 dev-tools 에 연결하는 작업이 필요함 redux-thunk 많이 쓰이는 Redux middleware, redux 에서 비동기 처리를 위한 라이브러리 Action 생성자를 활용해서 비동기 처리를 하는데, Action 생성자가 단순히 action 객체를 리턴하지 않고 function 을 리턴하는 처리방식 redux thunk 설치 후, 비동기 로직을 redux thunk 로 변경해보겠음 yarn add redux-thunk / npm i redux-thunk middleware 는 함수이므로, 라이브러리로부터 middleware 함수를 import, 그 함수를 applyMiddleware 안에..
-
Redux 와 React 연결, 비동기 with Redux프로그래밍/React 2021. 8. 12. 13:23
Redux 를 React 에 연결 - without 라이브러리 store 를 React 에 연결. react-redux 라이브러리를 안쓰고 자체적으로 연결 가능 단일 store 를 만들고, subscribe 해주고, 변경되는 state 데이터를 얻어 props 로 계속 전달하면 구현 가능 subscribe, unsubscribe 를 연결해서 구현해보겠음 index.js 에서 App 컴포넌트에 store 를 store props 로 내려주고, App 컴포넌트에서 didmount, willmount 에서 각각 subscribe, unsubscribe 해주겠음 -> useEffect 이용 store 를 props 로 받아오고, state 초기값은 store.getState() 로 설정하고, state 리턴 시..
-
Redux 강의 정리프로그래밍/React 2021. 8. 9. 11:03
Redux 1 - React 에서 component communication 을 배웠음. 데이터를 변경시키려면 props 를 전달, 전달하는 구조 - 문제점이 중간에 있는 component 들은 전달만 하는 component 로 사용된다는 것 이런 문제의 해결을 위해 Context API 를 사용할 수 있음 Context 를 사용할 경우, Context 가 가진 전역 data 를 잘 활용하는 게 중요함. Context 에 주어지는 전역 data 를 어떻게 효과적으로 관리할 것인지에 대한 라이브러리 = Redux Redux 가 사용하는 방식은? 파란공 자리에 STORE - STORE 안에 있는 상태를 보라색 공이 변경할 수 있고, STORE 의 상태를 가진 component 들이 STORE 의 상태가 변경..
-
npm, yarn프로그래밍/React 2021. 8. 8. 18:17
1. 에러 'react-scripts' is not recognized as an internal or external command, npm start, yarn start 로 React App 을 실행할 때, react-script 에러를 발견할 수 있다. 이 문제는 NPM 혹은 Yarn 프로그램이 node_modules 폴더에 설치되어 있어야 할 react-script 모듈을 찾지 못해 발생하는 것이다. react-script 패키지는 너가 새로운 React App 을 CRA 로 설치했을 때 설치 되었어야 한다. 이 문제를 해결하기 위해, package.json 파일을 확인하고, 프로젝트의 dependency 에 react-script 가 목록에 있는지 확인한다. 패키지가 이미 목록에 있다면, np..
-
수업 정리위코드x원티드 2021. 8. 8. 17:21
- Route 도 상수니까, Constants 폴더에 파일 만들어서 따로 빼서 관리하는 것이 좋다 - 디자인도 왠만하면 따라해보는 것이 좋다, 클래스명 / HTML 구조 / container 를 많이 쓰는지 등등 - Utils 에 JSON.stringify(), JSON.parse() 도 넣어주는 것이 좋다 - 조건문은 가능하면 중첩없이 사용하는 것이 좋다 SPA 의 장점은 한 페이지라는 뜻. URL 이 바뀌어도 페이지는 그대로인데, JS 가 DOM 을 바꿔서 깜빡임이 없는 게 정상 - URL 설계는 간략히 하기 - 컴포넌트 파일명은 습관적으로 대문자, 카멜 케이스. 소스코드나 Utils 안에 변수, 함수 다 들어가니까 뭐가 컴포넌트인지 아닌지 구분하다 보니 그렇게 사용하게 됨 - jsx 확장자도 jsx..