데굴데굴

⚙️ 오늘 학습한 내용 제어, 비제어 컴포넌트 🗝 키워드 제어 컴포넌트, 비제어 컴포넌트, ref 🗣 스스로에게 설명 제어 컴포넌트와 비제어 컴포넌트는 CDD에서 중요한 개념이다. push와 pull로 두 형식의 차이를 이해하면 조금 쉬워진다. 제어 컴포넌트 push & Single source of truth 제어 컴포넌트는 값이 완전히 제어되는 컴포넌트이다. input의 값을 상태에 저장해두고 onChange 속성에 핸들러를 넣어 값의 변경을 감지하는 방식이다. 값이 변경될 때마다 핸들러가 동작하며 state에 바뀐 값을 업데이트하고 리렌더링이 발생한다. 값의 변경을 form에 push한다고 이해하면 된다 input의 값은 상태에 저장되어 항상 최신 상태로 유지된다. 따라서 input 값에 따라 버튼..

⚙️ 오늘 학습한 내용 Provider Pattern 🗝 키워드 Provider Pattern, Context API, ThemeProvider 🗣 스스로에게 설명 Patterns.dev에 설명된 내용을 기반으로 정리했습니다. Provider Pattern 여러 자식 컴포넌트에서 데이터를 사용할 수 있게 한다 보통 데이터를 여러 컴포넌트에서 사용하고 싶은 경우 props를 이용할 수 있다. props 전달이 깊어지게 되면 props drilling이 발생하게 되고 이는 코드의 유지보수를 어렵게 만든다. props에 의존하지 않으면서 데이터를 필요로 하는 곳에만 쓸 수 있도록 해주는 방법이 필요한데 이 때 Provider Pattern을 적용할 수 있다. Provider 만들기 리액트에서는 Context ..

⚙️ 오늘 학습한 내용 Proxy Pattern 🗝 키워드 Proxy Pattern, Reflect 🗣 스스로에게 설명 앱 전체에서 하나의 전역 인스턴스를 공유하는 방식 여기까지는 SIngleton Pattern과 유사하지만 Proxy Pattern은 Proxy 객체가 추가된다는 차이가 있다. 앱 전체에서 공유 중인 객체에 접근하려고 할 때 객체에 직접 접근하지 않고 proxy 객체로 우회하는 방식이다. JavaScript의 Proxy 객체 이용하기 const person = { name: "Park", age: 24, nationality: "Korean" } 자바스크립트에 내장된 Proxy 객체를 이용해 위 객체로의 직접적인 접근을 우회할 수 있다. Proxy - JavaScript | MDN Pr..

⚙️ 오늘 학습한 내용 Singleton Pattern 🐹 오늘의 기분 디자인 패턴이 늘 궁금했었는데 관련 내용을 찾아보면 Java에 관련된 내용이 많이 나와서 쉽게 와닿지가 않았었다. 그러다가 patterns.dev를 알게 되었는데 여기서 자바스크립트, 리액트 기반으로 디자인 패턴을 설명해주고 있어서 공부해보게 되었다. pdf, epub으로도 자료를 제공해주고 있는데 이게 전부 무료다! 패턴이 정말정말 많은데 모든 패턴을 다 학습하는 것은 현실적으로 힘들 것 같고, 자주 언급되는 패턴들을 우선적으로 정리해나가보려고 한다. 🗝 키워드 Singleton Pattern 🗣 스스로에게 설명 Patterns.dev의 책을 기반으로 정리한 내용입니다. Singleton Pattern 앱 전체에서 하나의 전역 인스..

⚙️ 오늘 학습한 내용 async, defer 🗝 키워드 async, defer, DOM 🗣 스스로에게 설명 브라우저는 DOM 트리를 생성하다가 태그를 만나면 파싱을 중지하고 자바스크립트 파일을 실행한다. 태그를 태그 시작점에 작성하면 DOM 트리가 생성되지 않은 상태이므로 작성한 자바스크립트 코드가 예상대로 작동하지 않을 가능성이 크다. 또 스크립트 파일이 크다면 이걸 파싱하는 동안 DOM 트리는 생성되지 않기 때문에 사용자에게 빈 화면이 보여지게 되어 나쁜 UX를 제공할 수도 있다. 따라서 DOM 트리가 완전히 생성되고 나서 자바스크립트 파일이 실행되도록 태그가 끝나기 직전에 태그를 삽입하는 것이 흔한 해결 방법이다. ES6부터 로드 옵션에 async와 defer가 추가되었는데 두 방식이 어떤 차이를..

⚙️ 오늘 학습한 내용 Map 🗝 키워드 Map 🗣 스스로에게 설명 Map도 ECMAScript 2015(ES6)에서 도입되었다. '모던 자바스크립트 딥다이브'를 참고해 정리했다. Map 키와 값의 쌍으로 이루어진 컬렉션 객체와 유사하지만 몇몇 차이가 있다. Map은 객체를 키로 사용할 수 있다. Map은 이터러블이다. Map은 map.size로 사이즈를 확인할 수 있다. Map 생성 const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]); console.log(map1) // Map(2) {"key1" => "value1", "key2" => "value2"} 키와 값의 쌍으로 이루어진 요소를 넣어야 한다. 개수 확인 const map1 = ne..

⚙️ 오늘 학습한 내용 Set 🗝 키워드 Set 🗣 스스로에게 설명 Set은 ECMAScript 2015(ES6)에서 도입되었다. 오늘 면접에서 관련 질문이 나왔는데 필요할 때 갖다쓰기만한 정도라 제대로 대답을 못해서 정리해보았다. '모던 자바스크립트 딥다이브'를 참고했다. Set 중복되지 않는 유일한 값들의 집합, 수학적 집합을 구현하기 위한 자료구조 배열과 유사하지만 몇몇 차이가 있다. 값 중복 불가 순서에 의미가 없음 인덱스로 접근 불가 Set 생성 const set1 = new Set([1, 2, 3, 3]); console.log(set1); // Set(3) {1, 2, 3} const set2 = new Set('world'); console.log(set2); // Set(5) {'w', ..

⚙️ 오늘 학습한 내용 유니코드, UTF-8, charCodeAt() 🗝 키워드 유니코드, UTF-8, `charCodeAt()` 🗣 스스로에게 설명 문자 인코딩 컴퓨터가 이해할 수 있도록 문자를 숫자로 바꾸는 과정 인코딩의 종류는 굉장히 많고, 유니코드는 그 중 하나이다. 유니코드 (Unicode) 컴퓨터 처리를 위한 텍스트 표현에 사용되는 범용 문자 인코딩 표준 전세계 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준 유니코드를 사용하면 한글, 한자, 아랍 문자 등을 통일된 환경에서 사용할 수 있다. UTF-8 (Unicode Transformation Format 8bit) 유니코드 가변 길이 인코딩 형식 8비트를 기준으로 인코딩하기 때문에 숫자 8이 붙는다. (8비트 = 1바이..