본문 바로가기

분류 전체보기296

1장-디자인 패턴) Factory 패턴 1.1 Factory pattern 이란? - 객체 사용 코드에서 객체 생성 부분을 떼어나 추상화한 패턴이다. - 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고 하위 클래스에서 객체 생성에 대한 구체적인 내용을 결정한다. - 상위클래스와 하위클래스가 분리되므로 느슨한 결합이 되며, 많은 유연성을 가지게 된다. - 객체 생성에 대한 로직이 분리되어있어 코드 리팩터링에 유리하다. (유지/보수성 증가) 1.1.1 JavaScript example 예시1) - 숫자를 전달하거나 문자열을 전달함에 따라 다른 타입의 객체를 생성한다. 즉, 전달 값에 따라 다른 객체를 생성하며 인스턴스의 타입을 정합니다. 예시2) 커피팩토리 - CoffeeFactory라는 상위 클래스가 뼈대를 결정하고 하위 .. 2023. 2. 20.
1장-디자인 패턴) Singleton 패턴 1.1 디자인 패턴이란? - 디자인패턴이란 ? : 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 '규약' 형태로 만들어 놓은 것이다. 1.1.1 Singleton Pattern - 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴 - DB 연결 모듈이 많이 사용한다. - 하나의 인스턴스를 만들어 놓고 해당 인스턴스를 다른 모듈들이 공유하며 사용하므로, 생성비용이 줄어든다. - 의존성이 높아지는 단점이 있다. - 단점1) TDD(Test Driven Development)할 때 걸림돌이 된다 : 단위테스트에서 각 테스트마다 독립적인 인스턴스를 만들기가 어렵다. - 단점2) 의존성 : 사용하기 쉽고 실용적이지만, 모듈 간의 결합을 강하게 만드는 단점이.. 2023. 2. 18.
React - 11장 : 컴포넌트 성능 최적화 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장 : 컴포넌트 성능 최적화(현재) 지난 10장에 이어서 같은 프로젝트를 이용해서 설명하므로, 10장의 프로젝트를 만든 다음에 실습해보자. 11.1 많은 데이터 렌더링해보기 - 실제로 Lag을 경험할 수 있또록 많은 데이터를 렌더링 해보자. App.js import {u.. 2023. 2. 18.
React - 10장 : To-do 앱 실습(컴포넌트 렌더링최적화, Hooks 활용) 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앱 실습(현재) 누구나 만들어보는 투두앱을 빠르게 만들어서 컴포넌트최적화와 Hooks를 적용해보자. 10-1. 프로젝트 생성 - npx create-react-app todo-app 10-2. UI 구성 - TodoTemplate : 화면을 가운데에 정렬시켜 주며, 앱 타이틀을 보여준다. chil.. 2023. 2. 17.
React - 9장 : 컴포넌트의 스타일링 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장 : 컴포넌트의 스타일링(현재) 리액트에서 컴포넌트를 스타일링 할때는 다양한 방식을 사용한다. 여러 방식 중에서 정해진 것은 없지만 자주 사용하는 방식을 알아보자. 어차피 css에 대한 포스팅은 아니므로 빠르게 넘어간다. 9-1. 일반 css (제일 많이 사용) - .css파일을 별도로 생성하여 사용한다. 별거 없다. - 이름 짓는 규칙 : BEM을 주로 사용.. 2023. 2. 16.
[Lv.2] 행렬의 곱 1. 문제 2차원 행렬 arr1과 arr2를 입력받아, arr1에 arr2를 곱한 결과를 반환하는 함수, solution을 완성해주세요. 제한 조건 행렬 arr1, arr2의 행과 열의 길이는 2 이상 100 이하입니다. 행렬 arr1, arr2의 원소는 -10 이상 20 이하인 자연수입니다. 곱할 수 있는 배열만 주어집니다. 2. 풀이 function solution(arr1, arr2) { var answer = []; //arr1 = m*p 의 행렬, //arr2 = p*n 의 행렬이라고 가정한다. (p가 동일해야 곱할 수 있다) for(i in arr1){ //m = 세로길이 = raw = 행의 개수 let arr = []; for(let k =0; k 2023. 2. 15.
React - 8장 : React 자주 쓰이는 Hooks 총 정리 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 (현재) Hooks는 v16.8에 도입된 기능으로 함수컴포넌트에서도 useState, useEffect등의 기능을 제공하여 다양한 작업을 할 수 있도록 해준다. 8-1. useState - 함수 컴포넌트에서 가변적인 상태를 지닐 수 있도록 해준다. import {useState} from 'react'; const Counter = ()=>{ const [value, setVa.. 2023. 2. 15.
[Lv.2] 멀리 뛰기 (피보나치 수열과 경우의 수) 1. 문제 멀리 뛰기 효진이는 멀리 뛰기를 연습하고 있습니다. 효진이는 한번에 1칸, 또는 2칸을 뛸 수 있습니다. 칸이 총 4개 있을 때, 효진이는 (1칸, 1칸, 1칸, 1칸) (1칸, 2칸, 1칸) (1칸, 1칸, 2칸) (2칸, 1칸, 1칸) (2칸, 2칸) 의 5가지 방법으로 맨 끝 칸에 도달할 수 있습니다. 멀리뛰기에 사용될 칸의 수 n이 주어질 때, 효진이가 끝에 도달하는 방법이 몇 가지인지 알아내, 여기에 1234567를 나눈 나머지를 리턴하는 함수, solution을 완성하세요. 예를 들어 4가 입력된다면, 5를 return하면 됩니다. 제한 사항 n은 1 이상, 2000 이하인 정수입니다. 입출력 예 4 5 3 3 입출력 예 설명 입출력 예 #1 위에서 설명한 내용과 같습니다. 입출력 .. 2023. 2. 14.