위코드x원티드
-
React Router위코드x원티드 2021. 9. 6. 13:57
라우팅: 다른 주소에 따라 다른 뷰를 보여주는 것 SPA: Single Page Application, 페이지가 1개인 어플리케이션 React 빌드를 마친 후에는 JS 파일이 매 URL 마다 다른 컴포넌트를 그려준다. 그래서 번쩍임이 없는 URL 이동이 가능하다. 요런 기능 구현을 위해 React 에서는 주소마다 다른 뷰를 그려주는 React Router 가 필요하다 React Router introduces into your component the following objects: history, match, location every view, component, or whatever that's wrapped by Router has these objects. does its job as an H..
-
쉅정리 실행 컨텍스트, 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..
-
수업 정리위코드x원티드 2021. 8. 8. 17:21
- Route 도 상수니까, Constants 폴더에 파일 만들어서 따로 빼서 관리하는 것이 좋다 - 디자인도 왠만하면 따라해보는 것이 좋다, 클래스명 / HTML 구조 / container 를 많이 쓰는지 등등 - Utils 에 JSON.stringify(), JSON.parse() 도 넣어주는 것이 좋다 - 조건문은 가능하면 중첩없이 사용하는 것이 좋다 SPA 의 장점은 한 페이지라는 뜻. URL 이 바뀌어도 페이지는 그대로인데, JS 가 DOM 을 바꿔서 깜빡임이 없는 게 정상 - URL 설계는 간략히 하기 - 컴포넌트 파일명은 습관적으로 대문자, 카멜 케이스. 소스코드나 Utils 안에 변수, 함수 다 들어가니까 뭐가 컴포넌트인지 아닌지 구분하다 보니 그렇게 사용하게 됨 - jsx 확장자도 jsx..
-
Infinite Scroll 구현위코드x원티드 2021. 7. 28. 08:56
Scroll Event 를 이용해서 구현하려면, 리스너가 자주 호출되고, 메인 스레드를 사용하기 때문에 성능에 좋지 않다 따라서 Web API 중 1인 Intersection Observer API 를 사용한다. 이는 타겟 요소와 상위 요소/최상단 document 의 viewport 와의 교차 관련 변화를 관찰하는 비동기적인 방법이다 Intersection Observer API 는 다음의 상황에 콜백함수를 호출한다 - 타겟 요소가 기기의 뷰포트/특정 요소와 교차할때. 여기서 특정 요소는 root 요소 혹은 root - Observer 가 최초에 타겟 요소를 관찰하라고 요청받았을 때 1. Intersection Observer 의 생성 옵션과 콜백함수를 생성자에 넘겨준다. let options = { r..