Study Log
JS DeepDive 정리 1장 - 20장
JS DeepDive 정리 1장 - 20장
2022.08.11자바스크립트 딥다이브를 읽으며 중요하거나 모르는 내용 위주로 정리했습니다. 1. 프로그래밍이란? 프로그래밍이란 컴퓨터에게 실행을 요구하는 커뮤니케이션이다. 구문과 의미의 조합이다. 문제 해결을 위해 컴퓨팅 사고력을 요한다. 우리는 프로그래밍 언어를 작성하고, 컴파일러는 그것을 기계어로 번역한다. 문법적으로 틀리지 않아도, 요구사항에 부합하지 않으면 의미가 없다. 결국 프로그래밍은 요구사항을 분석하고, 함수의 집합으로 변환하고, 흐름을 제어하는 일이다. 2. 자바스크립트란? 넷스케이프에서 브라우저에서 동작하는 프로그래밍 언어를 도입하기로 결정 → 모카 → 라이브스크립트 →자바스크립트 JScript 의 등장으로 위기를 맞았으나 표준화 기구 ECMA 인터내셔널에 JS의 표준화를 요청, ECMAScript로 명..
리액트 쿼리 공식문서 번역 및 요약
리액트 쿼리 공식문서 번역 및 요약
2022.07.20React Query 리액트 쿼리 공식문서를 정주행하면서 중요한 내용을 정리해보았습니다. Overview 리액트 쿼리는 종종 누락된 데이터를 가져오는 라이브러리로 설명되곤 하지만, server state를 fetching, caching, synchronizing, updating할 수 있습니다. 기존의 상태관리 라이브러리들은 비동기적인 업무를 처리하거나 서버 상태를 관리하는데 좋지 않았습니다. 서버 상태는 우리가 통제할 수 없는 원격에서 유지되고 있으며, 비동기적인 API 호출을 요구하고, 다른 사용자에 의해 변경될 수 있고, 당신의 클라이언트에 있는 서버 상태는 oudated 상태가 될 수 있습니다. 서버상태를 관리하다보면, 캐싱, 요청의 중복 처리, 데이터의 최신 상태 관리, 최적화와 lazy lo..
git branch 공부하기
git branch 공부하기
2022.02.26들어가며 https://learngitbranching.js.org/ 를 통해 깃허브 브랜치를 공부하고 개념들을 정리해본다. Git commit 소개 커밋은 스냅샷 이다. Git은 커밋을 가볍게 유지하고자 하기 때문에, 변경내역(delta)을 저장한다. 정답 코드: git commit git commitGit 브랜치 브랜치는 커밋에 대한 참조이다. 하나의 커밋과 그 부모 커밋들을 포함하는 작업내역이라고 생각하면 된다. 브랜치는 많이 만들어도 메모리나 디스크 공간에 부담이 되지 않는다. git branch명령어는 현재 지점에 새로운 브랜치를 만들어 놓는다. 즉 가장 최근 커밋을 참조하는 다른 브랜치를 생성한다. 생성만 할 뿐, 이동하지는 않는다. 이동 명령어는 git checkout 브랜치명으로 할 수 있..
Redux Toolkit 알아보기
Redux Toolkit 알아보기
2022.02.10들어가며 출처: 코딩애플 프론트엔드에서 중요한 문제 중 하나가 전역상태를 어떻게 관리할 것인가 라고 생각한다. 특히나 React로 프로젝트를 구성했다면 여러 컴포넌트들 사이에서 props를 주고 받는 것이 프로젝트 규모가 커질수록 부담스러워질 수 있다. 컴포넌트 깊이가 깊어질수록 상위 컴포넌트의 state를 갱신하는 과정이 복잡해지고, 이는 컴포넌트 간의 결합도를 강화시킨다. 컴포넌트 간의 독립성을 추구하기 위해, 그리고 state 갱신에 관한 에러를 방지하기 위해 redux가 등장하였다. Redux에 대한 자세한 설명은 생략하기로 하고, 이 글에서는 Redux Toolkit을 이용해서 프로젝트를 어떻게 구성했는지를 설명해보려고 한다. 그냥 바닐라(?) 리덕스 대신 리덕스 툴킷을 이용한 이유는 보일러플레..
Redux 공부하기
Redux 공부하기
2022.01.01들어가며 Velopert의 모던 리액트를 읽으면서 알게 된 중요한 내용들을 정리해본다. 1월에 하기로 한 프로젝트에 리덕스를 도입할 것인지 말지를 결정하기 위해 빠르게 공부해보기로 했다. 6장 리덕스 리덕스의 흐름은 아래와 같이 진행된다. createStore에 reducer함수를 넣어서 store를 만드는 것으로 전역 상태를 관리한다. reducer함수는 state와 action을 입력받고, action의 타입에 따라 state를 불변성을 지키며 갱신한다. reducer를 위해 초기 State, action type(문자열), action 생성함수를 정해주어야 한다. action 생성함수는 dispatch를 깔끔하게 하기 위함이고.. (store.dispatch(액션생성함수)의 형식으로 쓴다) 기본적으..
브라우저 공부
브라우저 공부
2021.11.20들어가며 여기에 있는 내용을 통해 브라우저에 대해 공부해본다. 정리 전역 객체는 window이고 크게 세 갈래(DOM--document, BOM--navigator, JavaScript--Object)로 나뉜다. DOM의 모든 요소는 객체이다. 태그도 객체, 텍스트도 객체, 주석도 객체이다. 개발자 도구에서는 띄어쓰기만 있는 빈 텍스트노드는 나타나지 않는다. 돔요소를 선택하면 그 요소는 $0으로 접근 가능하다. 가장 마지막에 접근한 요소는 $0, 그전은 $1 ... document가 최상단 노드이고, document.documentElement가 그 하위 노드이다. 이는 html태그와 동일하다. 그 아래는 document.body로 body태그랑 일치한다. (head = document.head) nod..
React.js 공식문서 정리 - Hook
React.js 공식문서 정리 - Hook
2021.11.18들어가며 개발자에게 가장 중요한 습관은 문서를 읽는 습관이라고 생각합니다. 이 글은 리액트 공식 문서를 정독하며 내용을 정리하기 위해 작성하게 되었습니다. 모든 내용을 정리하기 보다는, 모르는 내용이나 기억하고 싶은 내용 위주로 정리합니다. 공식 문서의 주소는 https://reactjs.org/docs/accessibility.html입니다. Hook 1. Hooks Intro 훅의 장점으로, 기존 클래스 기반에서 생명주기에 따라 로직을 복잡하게 구사했던 것을 간편하게 개선할 수 있다. 2. Hook overview useEffect는 sideEffect를 커버하기 위한 hook이다. useEffect는 렌더링 이후에 effect를 수행한다 useEffect에서 반환하는 함수를 이용하면 effect를 ..
React.js 공식문서 정리 - Advanced Guides
React.js 공식문서 정리 - Advanced Guides
2021.11.17들어가며 개발자에게 가장 중요한 습관은 문서를 읽는 습관이라고 생각합니다. 이 글은 리액트 공식 문서를 정독하며 내용을 정리하기 위해 작성하게 되었습니다. 모든 내용을 정리하기 보다는, 모르는 내용이나 기억하고 싶은 내용 위주로 정리합니다. 공식 문서의 주소는 https://reactjs.org/docs/accessibility.html입니다. ADVANCED GUIDES Accessibility WCAG의 기준을 만족하는 web content를 작성할 필요가 있다. 아무런 의미없는 -묶어주기위한- 용도로 div를 쓰지 말자. Fragment를 이용할 것. props를 넘겨줄 수 있다는 장점이 있는데 없으면 빈 엘리먼트 를 써도 된다. 원칙상으로는 input, textarea요소에 label을 제공해야한..
Event
Event
2021.11.09들어가며 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events Introduction to events - Learn web development | MDN Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user selects a button on a webpage, you might want to respond to that a de..
JavaScript export와 export default 차이
JavaScript export와 export default 차이
2021.11.09export vs. default export export는 이름을 그대로 살려서 보내는 것이고, default export는 default로 내보낸다. export default로 내보냈다면 import시 아무이름으로나 받아올 수 있다. (as로 바꾸는 것이 아니라 바로 import로 다른 이름으로 받아오는 것이 가능하다.) 한 모듈 안에 여러 가지를 export하는 경우에는 export를, 한 모듈 안에 export 대상이 하나면 export default를 사용한다. Reference https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export
React.js 공식문서 정리 - Main Components
React.js 공식문서 정리 - Main Components
2021.11.08들어가며 개발자에게 가장 중요한 습관은 문서를 읽는 습관이라고 생각합니다. 이 글은 리액트 공식 문서를 정독하며 내용을 정리하기 위해 작성하게 되었습니다. 모든 내용을 정리하기 보다는, 모르는 내용이나 기억하고 싶은 내용 위주로 정리합니다. 공식 문서의 주소는 https://reactjs.org/docs/hello-world.html 입니다. MAIN CONCEPTS 1. Hello World ReactDOM.render로부터 리액트 앱이 시작됨. 첫번째는 보낼 react element, 두 번째 인자는 html문서로부터 id = root인 태그를 가져옴. 2. Introducing JSX JSX는 JS의 syntax extension이다. JSX 자체는 문법(syntax)의 이름이고, JSX의 생성물은..