Dev
-
React :: 13. 리액트 라우터로 SPA 개발하기Dev/프론트엔드 2021. 7. 22. 10:54
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 그동안 책의 내용을 그대로 적었는데 올바른 학습방법이 아닌것같다. 이제부터는 먼저 읽어보고 이해한 내용을 토대로 작성하도록 해보겠다. 13.1 SPA란? SPA는 Single Page Application의 약어이다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다. 기존의 웹 페이지는 여러 페이지로 구성이 되어 있었다. 기존에는 사용자가 다른 페이지로 이동할 때 서버에서 html을 받아 오고, 페이지를 로딩할 때 서버에서 리소스를 전달받아 브라우저가 해석한 뒤 렌더링이 되었다. 즉 사용자에게 보이는 화면은 서버 측에서 준비하였다. 사전에 html 파일을 만들어서 제공하거나, 데이터에 따라서 유동..
-
React :: 12. immer를 사용하여 더 쉽게 불변성 유지하기Dev/프론트엔드 2021. 7. 21. 11:13
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 11장에서는 컴포넌트 업데이트 성능을 어떻게 최적화해야 하는지, 불변성을 유지하면서 상태를 업데이트하는 것이 왜 중요한지 배웠습니다. 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있죠. 하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하는것이 매우 힘듭니다. 값 하나를 업데이트하기 위해 코드를 열 중 정도 작성해야 합니다. 이렇게 전개 연산자를 자주 사용한 것은 기존에 가지고 있던 다른 값은 유지하면서 원하는 값을 새로 지정하기 위해서죠. 간혹 실제 프로젝트에서도 이렇게 복잡한 상태를 다룰 때가 있는데, 그럴 때마다 전개 연산자를 ..
-
React :: 11. 컴포넌트 성능 최적화Dev/프론트엔드 2021. 7. 20. 16:15
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 10장에서는 학습한 지식을 활용하여 멋진 일정 관리 애플리케이션을 만들어 보았스니다. 현재까지는 이 애플리케이션을 사용할 때 불편하지 않습니다. 추가되어 있는 데이터가 매우 적기 때문이죠. 그러나 데이터가 무수히 많아지면, 애플리케이션이 느려지는 것을 체감할 수 있을 정도로 지연이 발생합니다. 이번 실습은 다음과 같은 흐름으로 진행합니다. 많은 데이터 렌더링 하기 - 크롬 개발자 도구를 통한 성능 모니터링 - React.memo를 통한 컴포넌트 리렌더링 성능 최적화 - onToggle과 onRemove가 새로워지는 현상 방지하기 - react-virtualized를 사용한 렌더링 최적화 11.1 많은 데이터 렌더..
-
React :: 10. 일정관리 애플리케이션 만들기Dev/프론트엔드 2021. 7. 19. 17:19
지금까지 리액트의 기본기부터 시작해서 컴포넌트를 스타일링하는 방법까지 배워 보았습니다. 이 장에서는 지금까지 배운 지식을 활용하여 프런트엔드를 공부할 때 많이 구현하는 일정 관리 애플리케이션을 만들어 보겠습니다. 이번 실습은 다음 흐름으로 진해앟ㅂ니다. 프로젝트 준비하기 - UI 구성하기 - 기능 구현하기 10.1 프로젝트 준비하기 10.1.1 프로젝트 생성 및 필요한 라이브러리 설치 create-react-app을 사용하여 프로젝트를 생성하세요. $ yarn create react-app todo-app 프로젝트가 생성되면 todo-app 디렉터리로 들어가서 yarn을 사용하여 필요한 라이브러리를 설치하세요. $ cd todo-app $ yarn add node-sass@4.14.1 classnames..
-
React :: 8. HooksDev/프론트엔드 2021. 7. 16. 10:44
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. Hooks는 리액트 v16.8부터 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있도록 해 주었다. Hooks 배우기 리액트 내장 Hooks 사용하기 - 커스텀 Hooks 만들기 8.1 useState Counter.js import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {val..
-
React :: 컴포넌트의 라이프 사이클 메서드Dev/프론트엔드 2021. 7. 14. 13:41
7.1. 라이프 사이클 메서드의 이해 라이프 사이클 메서드의 종류는 총 아홉가지. Will 접두사가 붙은 메서드는 작업을 하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 메서드들은 우리가 컴포넌트 클래스에서 덮어 써 선언함으로써 사용 가능. 라이프 사이클을 총 세가지가 있다. 1. 마운트 2. 업데이트 3. 언마운트 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다. 마운트 할 때 호출하는 메서드 컴포넌트 만들기 - constructor - getDerivedStateFromProps - render - componentDidMount constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 g..
-
ReactDev/프론트엔드 2021. 7. 14. 13:40
컴포넌트 : 클래스 컴포넌트, 함수형 컴포넌트가 있다. 클래스 컴포넌트와 함수형 컴포넌트는 Props를 사용하는 방법은 비슷하지만 State 사용에 차이가 있음 클래스 컴포넌트 : 생성자에 state초기값 세팅 후 this.setState() 함수 호출하여 사용 함수형 컴포넌트 : 배열 비구조화 할당 문법을 사용하여 useState() 함수 호출하여 사용 JSX 문법에서 이벤트 바인딩은 자바스크립트 코드가아닌 객체를 전달해야함. ref란 ref란 특정 DOM에 작업을 해야할 때 사용한다. ID를 사용하지 않는 이유는 컴포넌트를 여러번 사용하였을 경우 ID의 Unique 에 위배되기 때문이다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에만 작동을 하기 때문에 이러한 문제가 생기지 않는다. ref를 사..
-
알고리즘 - 최대공약수 : 유클리드 호제법(Euclidean algorithm) GCDDev/알고리즘 2021. 5. 3. 19:24
유클리드 호제법 (BPEuclidean algorithm) GCD - 최대 공약수 구하기 유클리드 호제법(-互除法, Euclidean algorithm) 또는 유클리드 알고리즘은 2개의 자연수 또는 정식(整式)의 최대공약수를 구하는 알고리즘의 하나이다. 호제법이란 말은 두 수가 서로(互) 상대방 수를 나누어(除)서 결국 원하는 수를 얻는 알고리즘을 나타낸다. - 위키백과 예시 2958, 1088 의 최대공약수를 구해보자 2958을 1088로 나눈다. 정확히 나누어지지 않기때문에 나머지를 구한다. 나머지 -> 782 1088을 782로 나눈다. 정확히 나누어지지 않기때문에 나머지를 구한다. 나머지 -> 306 782을 306로 나눈다. 정확히 나누어지지 않기때문에 나머지를 구한다. 나머지 -> 170 30..
-
백준 BAEKJOON[2292] : 벌집 - JAVA (Class-2)Dev/코딩테스트 2021. 3. 28. 12:01
문제 링크 : www.acmicpc.net/problem/2292 3052번: 나머지 각 수를 42로 나눈 나머지는 39, 40, 41, 0, 1, 2, 40, 41, 0, 1이다. 서로 다른 값은 6개가 있다. www.acmicpc.net 문제 위의 그림과 같이 육각형으로 이루어진 벌집이 있다. 그림에서 보는 바와 같이 중앙의 방 1부터 시작해서 이웃하는 방에 돌아가면서 1씩 증가하는 번호를 주소로 매길 수 있다. 숫자 N이 주어졌을 때, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈 때 몇 개의 방을 지나가는지(시작과 끝을 포함하여)를 계산하는 프로그램을 작성하시오. 예를 들면, 13까지는 3개, 58까지는 5개를 지난다. 입력 첫째 줄에 N(1 ≤ N ≤ 1,000,000,000)이 ..
-
스타트업 코딩 페스티벌 2021 후기 (Startup Coding Festival 2021)Dev/코딩테스트 2021. 3. 22. 20:26
3월 20일 토요일 스타트업 코딩 페스티벌의 참가하였다. 국내 유니콘기업왓챠, 쏘카, 오늘의집, 마켓 컬리, 브랜디, 번개장터 총6개의 유니콘기업들이 진행하는 코딩 테스트.각 기업들이 한 문제씩 총 6문제를 4시간 안에 풀이하는 형식이었다.결과는 1솔.. 이제 막 알고리즘과 자료구조에 관심을 가지고 시작한 나에게는 문제 하나 하나가 정말 어려웠다.하지만 이번 문제는 각 기업에서 쓰이거나 필요한 문제들고 구성되어 있어 앞으로 공부를 어떻게 해야하는지길을 터준 느낌이었다.처음으로 나의 의지로 코딩대회에 도전하여 쓴 굴욕을 맛보았지만 앞으로 전진하여 다음엔 All Solved 하는 날이 오길 바란다. 처참했지만 의지가 불타는 토요일이었다.