본문 바로가기

자바스크립트71

1장-디자인 패턴) 노출모듈 패턴 1. 노출모듈 패턴이란? - 즉시 실행함수를 통해 private, public 같은 접근 제어자를 만드는 패턴이다. - 자바는 킹로그래밍언어라서 접근 제어자 설정이 편하지만, JS는 노출모듈패턴을 통해 구현한다. 2. 예시 - a와 b는 다른 모듈에서 사용할 수 없으며, private 범위를 가진다. - c와 d는 다른 모듈에서 사용할 수 있으며, public 범위를 가진다. - CJS모듈 방식이 이런 걸로 만들어졌다. 2023. 2. 27.
1장-디자인 패턴) 이터레이터 패턴 1. 이터레이터 패턴이란 - 이터레이터를 사용하여 컬렉션의 요소들에 접근하는 디자인패턴. - 뭔소린가 하면, 순회할 수 있는 여러 가지 자료형의 구조와는 상관 없이 이터레이터라는 하나의 인터페이스로 순회하면서 각각의 요소에 어떠한 짓거리를 할 수 있다는 얘기다. 2. 예시 - 다른 구조인 map과 set임에도 같은 'for a of b' 라는 이터레이터 프로토콜을 통해 순회할 수 있다. - 이터러블 프로토콜이란 ? : 이터러블한 객체들을 순회할 때 쓰이는 규칙 - 이터러블한 객체란 ? : 반복이 가능한 객체로 배열을 일반화한 객체 2023. 2. 27.
React - 14장 : 비동기작업 처리와 Axios 패턴을 이용한 예제 프로젝트 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트(현재) 오늘의 예제 실습 순서 비동기작업의 이해 -> axios로.. 2023. 2. 22.
React - 13장 : 리액트 라우터로 SPA 개발하기 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기(현재) 13-1. 싱글페이지 애플리케이션(SPA) 이란? - 멀티 페이지 애플리케이션(기존 방식) - 다른 페이지.. 2023. 2. 21.
[Lv.2] 튜플(카카오 인턴십 코딩테스트) 1. 문제 셀수있는 수량의 순서있는 열거 또는 어떤 순서를 따르는 요소들의 모음을 튜플(tuple)이라고 합니다. n개의 요소를 가진 튜플을 n-튜플(n-tuple)이라고 하며, 다음과 같이 표현할 수 있습니다. (a1, a2, a3, ..., an) 튜플은 다음과 같은 성질을 가지고 있습니다. 중복된 원소가 있을 수 있습니다. ex : (2, 3, 1, 2) 원소에 정해진 순서가 있으며, 원소의 순서가 다르면 서로 다른 튜플입니다. ex : (1, 2, 3) ≠ (1, 3, 2) 튜플의 원소 개수는 유한합니다. 원소의 개수가 n개이고, 중복되는 원소가 없는 튜플 (a1, a2, a3, ..., an)이 주어질 때(단, a1, a2, ..., an은 자연수), 이는 다음과 같이 집합 기호 '{', '}'.. 2023. 2. 20.
[Lv.2] 위장 (Hash와 경우의 수) 1. 문제 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류 이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다. cloth.. 2023. 2. 20.
React - 12장 : Immer 라이브러리를 사용하여 불변성 유지 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : Immer 라이브러리를 사용하여 불변성 유지(현재) 객체가 복잡해지고 깊어지면 불변성을 유지하며 업데이트가 힘들어진다. immer 라는 라이브러리를 사용하면 복잡한 객체도 쉽고 짧은 코드로 불변성을 유지하면서 업데이트.. 2023. 2. 20.
1장-디자인 패턴) 옵저버패턴 1.1 Observer pattern 이란? - 주체가 어떠한 객체의 상태를 관찰하다가 변화가 있을 때마다 메서드 등을 통해 옵저 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴. - 주체는 객체의 상태 변화를 보고 있는 관찰자. - 옵저버들은 이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 추가 변경 사항이 생기는 객체들이다. - 쉽게 말해 주체가 객체를 보고있다가 뭔가 바뀌면 옵저버들한테 뭐 하라고 알려준다. - 주체와 객체를 따로 두지 않고 상태변경 객체를 기반으로 구축하기도 한다. - 주로 이벤트 기반 시스템에 사용하며, MVC 패턴에도 사용된다. (리액트가 이거다) - model : 주체 - view : 옵저버 - controller : 작동하는 것 1.2 JavaScript에서.. 2023. 2. 20.