🐕 깊은 복사 구현하기 개 귀찮다. 리액트는 불변성을 유지해줘야 함과 동시에 객체의 중첩구조가 쉽게 만들어지는 모순을 갖고있습니다. 간편하게 쓸 수 있는 애들은 죄다 shallow copy이기 때문에 깊은 중첩 구조를 가진 애들에게는 얕은 복사를 여러번 해야하는 수고로움이 있어요 따라서 깊은 복사로 한번에 불변성을 유지해주면 참 편할 것입니다. const object = { somewhere: { deep: { inside: 3, array: [1, 2, 3, 4], }, }, }; 이따구로 된 중첩구조에서 하나하나 스프레드 연산자 다 넣어주면 어지럽겠다 그죠 https://xionwcfm.tistory.com/189 getter,setter까지 복사하는 deep copy를 구현하자 😎Shallow co..
🐕 React Router는... SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지는 않아요 전 라우터라고 해서 네트워크 공부할 때 나오는 라우터만 생각했는데 그냥 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다"라는 의미로 라우팅이라고 한다 하네요.. 리액트에서는 라우팅을 위해(주소에 따라 다른 화면을 보여주기 위해) React Router라는 라이브러리를 많이 사용합니다. 👻React Router의 주요 컴포넌트 React Rounter의 주요컴포넌트는 크게 세가지로 나눌 수 있어용 종류는 저 네가지인데 용도로 나눠서 보면 이렇습니다. router route matchers route changers 라우터 역할을 해줄 BrowserRouter 얘는 웹 애플리..
🐕 미니노드서버 과제 레퍼런스의 수도코드 작성 // Node.js HTTP 모듈을 불러온다. const http = require("http"); // 포트, ip 설정 const PORT = 4999; const ip = "localhost"; // 여기 구현한 내용은 가장 원초적인 방식입니다. // => 아무 라이브러리도 없는 경우에는 이렇게 할 수 있구나~ 정도 이해하면 OK // 나중에는 백엔드 라이브러리/프레임워크를 적극 사용하기를 권장. 원리 이해를 위한 과제 const server = http.createServer((request, response) => { console.log( `http request method is ${request.method}, url is ${request.u..
🐕 react-virtualized yarn add react-virtualized 전 yarn을 쓰고 있으니까 yarn add 명령어를 이용해 추가해주겠읍니다. 이 react-virtualized는 뭐하는 애냐면... 아직 보이지 않는 요소들은 스크롤 되기 전에 렌더링 하지 않고 크기만 차지하게 끔 만들어 줄 수 있다. 그리고 스크롤되면 자연스럽게 렌더링을 시킨다. 정말 좋네요... 이게 뭐 지연평간가 뭔가 하는 녀석이냐?(아닐수도) 👻최적화를 준비하자 얘를 제대로 써주려면 실제 요소들의 크기를 px단위로 알아내야한다고합니다. 개발자툴로 측정하면 뚝딱 어라...근데 선생님 선생님은 왜 480x24 에 패딩 16인데 전 463인거죠? 하하 아무튼 시키는대로 짜겠습니다. 🥶 TodoList.js 수정하기 ..
🐕 Context API contextAPI는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을때 유용한 기능이라고합니다. 그리고 이 기능은 리덕스 ,리액트 라우터, styled-components 등의 라이브러리에서도 사용한다고하네요 https://ko.reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces ko.reactjs.org 공식 문서의 설명은 다음 링크에서 확인할 수 있습니다. 전 간략히 요약만 해드리겠습니다. 1. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터 제공가능 마치 확성기 같다. 위치에 상관없이 props로 넘겨주..
🐕 redux 리덕스는 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리 시켜서 효율적으로 관리할 수 있도록 도와주는 라이브러리입니다. 또한 컴포넌트끼리 똑같은 상태를 공유해야 할 때에도 여러 컴포넌트를 거치지 않고 손쉽게 상태값을 전달하거나 업데이트 할 수 있게 도와줍니다. 리덕스 라이브러리는 위와 같은 설명을 보았을때 알 수 있듯이 전역 상태를 관리할 때 매우 효과적인 대안 중 하나입니다. ContextAPI를 기반으로 만들어진 리덕스는 일반적인 전역 상태 관리를 위한 목적으로만 사용한다면 ContextAPI를 이용하여서도 충분히 비슷하게 구현할 수 있습니다. ContextAPI에 대한 내용을 정리한 포스트가 있으니 ContextAPI가 궁금하시다면 아래 링크를 참고하세요 https://xion..
🐕 라운드 로빈 스케줄링(Round Robin Scheduling, RR) 이벤트 루프에서도 사용된 스케줄링 방법론이라고 하는데 시분할 시스템을 위해 설계된 "선점형" 스케줄링의 하나로 (CPU 스케줄링 방식은 크게 선점형과 비선점형으로 나눌 수 있다.) 프로세스들 사이에 우선순위를 두는게 아니라 순서대로(시간 단위)로 CPU를 할당하는 알고리즘이라고한다. 그래서 위 그림을 보면 우선순위 방식이 아니라 순서대로 실행이 되어 계단같아보이기도 한다. 보통 시간 단위는 10ms ~100ms 정도로 지정된다고 하는데 시간 단위 동안 수행한 프로세스는 준비 큐의 끝으로 밀려나게 된다. 즉 태스크를 수행한 프로세스는 준비 큐의 맨 마지막으로 들어가서 다시 실행을 기다리게 된다는 것! 이러한 라운드로빈 스케줄링을 사..
🐕 HTTP Messages 요청 (Requests) / 응답 (Responses) 두가지 유형의 HTTP Message가 있어요 HTTP Messages는 몇줄의 텍스트 정보로 구성되는데 구성파일 API 기타인터페이스에서 HTTP Message를 자동으로 완성해주니까 직접 작성할 필요는 없다네요 start line 요청이나 응답의 상태를 나타내며 항상 첫번째 줄에 위치합니다. 응답에서는 status Line이라고 불러요 HTTP headers 요청을 지정하거나 메시지에 포함된 본문을 설명하는 헤더의 집합입니다. empty line 헤더와 본문을 구분하는 빈 줄이 있습니다. body 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함합니다. 요청과 응답의 유형에 따라 선택적으로 사용해요 실제로..
