데굴데굴

⚙️ 오늘 학습한 내용 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바이..

⚙️ 오늘 학습한 내용 안정 정렬, 불안정 정렬 🐹 오늘의 기분 정렬 알고리즘 종류는 돌아서면 자꾸 까먹게 돼서 아예 옵시디언에 각 알고리즘별로 파일을 따로 만들어 정리하며 공부하고 있다. 그러다가 안정 정렬, 불안정 정렬이라는 키워드를 보게 되었는데 뭔지 잘 모르겠어서 정리해보았다. 🗝 키워드 안정 정렬, 불안정 정렬 🗣 스스로에게 설명 중복된 값을 입력 순서에 따라 정렬하는가 아니냐에 따라 안정 정렬, 불안정 정렬로 나눌 수 있다. 안정 정렬 중복된 값을 입력 순서와 동일하게 정렬하는 방식 위 카드에서 중복되는 숫자는 5이다. 먼저 입력된 5 하트가 앞 순서로 정렬되고, 5 스페이드가 그 다음에 위치한다. 안정 정렬 알고리즘에는 버블 정렬, 삽입 정렬, 병합 정렬이 있다. 불안정 정렬 중복된 값을 입..

⚙️ 오늘 학습한 내용 css 전처리기, css-in-js 🐹 오늘의 기분 styled-components를 쓰기만 하고 막상 css 전처리와 css-in-js에 대한 이해는 상대적으로 부족했던 것 같아 정리해보았다. 비가 와서 그런가 날이 어두침침해서 너무 졸리다.. 체력살려 🗝 키워드 css 전처리기, SASS, SCSS, Less, CSS-in-JS 🗣 스스로에게 설명 우선 전에 부트캠프 하면서 정리했던 글 TIL: 2022-10-27 ⚙️ 오늘 배운 주제 Component Driven Development 🐹 오늘의 기분 월요일에 잠을 제대로 못 잤는데 그 여파가 이제서야 제대로 와버렸다. 학습 내내 너무너무 피곤했다.게다가 요즘 소화도 잘 안 돼서 haruisshort.tistory.com 프로..