본문 바로가기

programming study

 (889)
[프로그래머스] 큰 수 만들기 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드(나의 풀이) 실패 코드 이중 for문으로 인해, 시간복잡도가 높아 오답처리가 되었음 function solution(number, k) { let answer = ''; // 아래의 로직을 k번 반복 for (let i = 1; i
[프로그래머스] 타겟 넘버 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드(나의 풀이) function solution(numbers, target) { let answer = 0; // 주어진 숫자의 개수 const numbersCount = numbers.length; // index: 접근할 배열의 인덱스, numbers: 주어진 숫자 배열, sum: 누적된 합, target: 목표합 function DFS(index, sum) { // 주어진 숫자 배열을 탐색 완료하면 if (index === numbersCount) { // target과 같으면 답으로 기록 if (sum === target) { answer += 1; } // 재귀 호출 종료 return; } els..
[프로그래머스] 하노이의 탑 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드(나의 풀이) // 하노이의 탑 function solution(n) { const answer = []; // from: 원반의 출발 기둥, to: 목표 기둥 other: 목표 기둥, disc: 원반 갯수 function hanoi(from, to, other, disc) { // 재귀 함수 호출 종료 if (disc === 0) { return; } else { // 원반 하나를 제외하고 목적지가 아닌 곳으로 이동시킴 hanoi(from, other, to, disc - 1); // 맨 아래 원반을 목적지로 이동시킴 answer.push([from, to]); // 다른 곳으로 옮겼던 원반을 목적지로 ..
Hook의 개요 Hook은 하위 호환성을 가지고 있음 1. useState useState는 현재의 state 값과 업데이트하는 함수를 쌍으로 return 이전 state와 새로운 state를 합치지 않음 새로운 state로 대체 인자로 state 값 하나를 받음 React state와 생명주기 기능을 연동할 수 있게하는 함수 import React, {useState} from 'react'; ​ function Header() { const [text, setText] = useState('헤더입니다.'); return {text} } 2. vs. Class 컴포넌트의 setState 선언 방법 // Class Component class Header extends React.component { constructo..
Hook의 소개 React 16.8부터 새로 추가 1. Hook의 특징 선택적 사용 코드를 다시 사용하지 않고 컴포넌트 안에서 Hook을 사용 이전 버전과의 호환성 React 개념에 더 직관적인 API 2. 동기 상태 로직 재사용의 어려움 컴포넌트 사이에서 상태 로직 재사용의 어려움 render props, HOC 패턴으로 해결 가능하나, 코드의 추적이 어려워짐 래퍼지옥(wrapper hell) 야기 Hook을 사용하면, 상태 관련 로직을 추상화할 수 있음 독립적인 테스트, 재사용 가능 복잡한 컴포넌트 로직 생명 주기 메서드에서 관련 없는 로직이 섞여들어가는 경우가 있음 componentDidMount, componentDidUpdate 생명주기 메서드를 기반으로 쪼개는 것 보다, Hook을 통해 서로 비슷한 것을 작은..
성능 최적화 1. 프로덕션 빌드 활용 React에서 보여주는 경고는 개발에 큰 도움을 주지만, 성능 상 좋지 않음 프로덕션 버전을 사용해야 함 React Developer Tools for Chrome Extenstion을 사용하여, 프로덕션 빌드가 되어있는지 확인 가능 2. Create React App 아래 명령어를 실행하면, build 디렉토리 아래에 애플리케이션 프로독션 빌드파일이 만들어 짐 npm run build 3. webpack webpack v4 이상에서는 프로덕션 모드에서 기본적으로 코드를 축소 const TerserPlugin = require('terser-webpack-plugin'); ​ module.exports = { mode: 'production', optimization: { min..
Fragments DOM에 별개의 노드를 추가하지 않고 엘리먼트들을 그룹화할 수 있는 방법 동기 특정 HTML은 부모와 자식의 종속관계가 분명할 수 있음 div를 사용하면 종속관계를 깨트려 렌더링이 유효하지 않음 React.Fragment는 그룹화만을 위한 컴포넌트로 렌더링이 되지 않음 const table = () => { return ( ) } ​ ------------------------------------------------------- const Columns = () => { return ( 리액트 예시 ) } 단축 문법 단, key가 존재하는 경우는 Fragment를 명시적으로 선언해야 함 const Columns = () => { return ( 리액트 예시 ) } Reference React 공식 문서
에러 경계 1. 에러 경계란 자바스크립트 에러가 전체 애플리케이션을 중단시켜서는 안 됨 이를 해결하기 위해 에러 경게가 도입 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 컴포넌트 에러 경계가 에러 메시지를 렌더링하는 것에 실패하면 그 위의 가까운 에러 경계로 전파됨 선언적인 표현 vs. try/catch 명령형 코드에서 동작 이벤트 핸들러에서 사용할 것 2. 에러 경계가 포착하지 못하는 것 이벤트 핸들러 비동기적 코드 서버사이드 렌더링 에러 경계 자체의 에러 3. 사용법 에러 경계 정의 에러 경계는 클래스에서 정의해야 함 생명주기 메서드인 아래 2 가지 메서드를 사용 static getDerivedStateFromError componentDidCatch ..

티스토리툴바