본문 바로가기
반응형

코드스테이츠 SEB FE 41기

 (123)
section4/Unit4/[React] 심화(11/29) 과제 : React Hooks 적용하기 1. json-server 설치 가짜 REST API 서버를 이용하여 json 데이터를 직접 받아와 실제 블로그처럼 되도록 코드를 작성한다. 먼저 가짜 서버를 설치한다. // json-server는 라이브러리로, json 파일을 이용하여 REST API 서버를 구축해주는 라이브러리이다. // 터미널을 열어 npm을 이용해 전역 설치를 해준다. react 앱 파일 내에 설치하면 제대로 작동하지 않을 수 있다. $ npm i -g json-server // 그 다음에 앱 내에 존재하고 있는 data 폴더로 이동한 뒤, 다음 명령어를 입력해 준다. // —port 3001이라는 옵션을 뒤에 붙여주지 않으면 json-server는 저절로 3000번 포트를 점유하고 // 서..
section4/Unit4/[React] 심화(11/28) Custum Hooks 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다. 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용한다. 이를 이용하면 상태관리 로직의 재활용이 가능하고 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며 함수형으로 작성하기 때문에 보다 명료하다는 장점이 있다. (e.g. useSomething) 예를 들어 이런 컴포넌트가 있다고 보자. 해당 컴포넌트는 실제 React 공식 문서에 있는 컴포넌트이다. //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 function F..
section4/Unit4/[React] 심화(11/25) React 심화 Virtual DOM React에는 Virtual DOM이라고 하는 가상의 DOM 객체가 있다. 이는 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다. Virtual DOM이 나오게 된 배경 Virtual DOM은 Real DOM의 가벼운 사본과 같다. DOM을 Real DOM으로 부르는 이유는 Virtual DOM과 구분하기 위해서라고 생각하면 된다. Real DOM (DOM) Virtual DOM이 나오게 된 배경을 보기 전에, DOM의 개념을 다시 정리해 보도록 하자. DOM은 Document Object Model의 약자로, 뜻을 그대로 풀자면 문서 객체..
section4/Unit3/[HTML/CSS] 심화(11/24) 웹팩과 리액트 리액트 개발에 꼭 필요한 라이브러리 1. react, react-dom 너무나 당연한 이야기지만, 리액트 컴포넌트와 Hooks, 라이프 사이클에 대한 정보가 모두 들어있는 리액트와 이 리액트 코드를 브라우저에 보여줄 수 있는 react-dom은 꼭 필요하다. 2. babel React를 학습하기 전, JSX부터 배워야 했었다. 그런데, 브라우저에서 JavaScript는 읽을 수 있지만 JSX는 읽을 수 없다. 지금까지 React를 JSX로 작성해왔는데브라우저에서 내가 만든 React 애플리케이션을 볼 수 있었던 이유는 create-react-app에 포함되어 있는 babel이 jsx를 js로 변경해주어 번들링을 해줬기 때문이다. 참고로 babel은 JSX를 JavaScript로 변경하여 e..
[알고리즘/javascript]powerSet 문제 하나의 집합을 의미하는 문자열을 입력받아 각 문자를 가지고 만들 수 있는 모든 부분집합을 리턴해야 합니다. 입력 인자 1 : str string 타입의 공백이 없는 알파벳 소문자 문자열 출력 배열(arr)을 리턴해야 합니다. arr[i]는 각 부분집합의 원소로 구성된 문자열 주의사항 arr[i]는 각 부분집합을 구성하는 원소를 연결한 문자열입니다. arr[i]는 알파벳 순서로 정렬되어야 합니다. 집합은 중복된 원소를 허용하지 않습니다. 부분집합은 빈 문자열을 포함합니다. arr은 사전식 순서(lexical order)로 정렬되어야 합니다. 입출력 예시 let output1 = powerSet('abc'); console.log(output1); // ['', 'a', 'ab', 'abc', 'ac'..
[알고리즘/javascript]binarySearch binarySearch 문제 오름차순 정렬된 정수의 배열(arr)과 정수(target)를 입력받아 target의 인덱스를 리턴해야 합니다. 입력 인자 1 : arr number 타입을 요소로 갖는 배열 arr[i]는 정수 인자 2 : target number 타입의 정수 출력 number 타입을 리턴해야 합니다. 주의사항 이진탐색 알고리즘(O(logN))을 사용해야 합니다. 단순한 배열 순회(O(N))로는 통과할 수 없는 테스트 케이스가 존재합니다. target이 없는 경우, -1을 리턴해야 합니다. 입출력 예시 let output = binarySearch([0, 1, 2, 3, 4, 5, 6], 2); console.log(output); // --> 2 output = binarySearch([4,..
[알고리즘/javascript]orderOfPresentation 문제 말썽꾸러기 김코딩은 오늘도 장난을 치다가 조별 발표 순서가 담긴 통을 쏟고 말았습니다. 선생님께서는 미리 모든 발표 순서의 경우의 수를 저장해 놓았지만 김코딩의 버릇을 고치기 위해 문제를 내겠다고 말씀하셨습니다. 김코딩은 모든 조별 발표 순서에 대한 경우의 수를 차례대로 구한 뒤 발표 순서를 말하면 이 발표 순서가 몇 번째 경우의 수인지를 대답해야 합니다. 총 조의 수 N과 선생님이 말씀하시는 발표 순서 k가 주어질 때, 김코딩이 정답을 말 할 수 있게 올바른 리턴 값을 구하세요. 모든 경우의 수가 담긴 배열은 번호가 작을수록 앞에 위치한다고 가정합니다. ex) N = 3일경우, [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 입력 인자 1: N Number..
[알고리즘/javascript]uglyNumbers 문제 아래와 같이 정의된 ugly numbers 중 n번째 수를 리턴해야 합니다. ugly number는 2, 3, 5로만 나누어 떨어지는 수이다. 1은 1번째 ugly number 이다. 1, 2, 3, 4, 5, 6, 8, 9, 10, 12, 15, 16, ... 입력 인자 1 : n number 타입의 자연수 (n >= 1) 출력 number 타입을 리턴해야 합니다. 주의사항 ugly numbers를 배열에 저장했을 때, n번째 ugly number의 위치는 인덱스 n-1 입니다. 입출력 예시 let result = uglyNumbers(1); console.log(result); // --> 1 result = uglyNumbers(3); console.log(result); // --> 3 Ad..
반응형

티스토리툴바