본문 바로가기

분류 전체보기

(108)
[React] 함수형 vs 클래스형 컴포넌트 1. React에서 컴포넌트를 어떻게 생성하나요? 리액트에서 컴포넌트를 생성하는 방법은 크게 두 가지가 있습니다. 1.1) 클래스형 컴포넌트 리액트에서 컴포넌트를 정의할 때 EcmaScript6에 도입된 class문법에 의해 정의된 컴포넌트를 클래스형 컴포넌트라고 합니다. 컴포넌트에서 라이프사이클 API를 사용해야 하거나 state를 사용하는 경우 클래스형 컴포넌트로 정의해야 합니다. (하지만, 리액트 16.8 버전에서 새롭게 공개된 Hook을 사용하면, 함수형 컴포넌트에서도 state를 사용할 수 있습니다.) 리덕스를 사용하여 Container, Presentational 컴포넌트를 구성할 때, 여기서 Container 컴포넌트가 클래스형 컴포넌트에 해당합니다. import React, {Compone..
[Redux] 🏃‍♂️ 리액트와 리덕스 함께 사용하기 (feat. ant-design) (2) 이전 글에 이어서 이번 글에서는 노트 앱의 컨테이너와 컴포넌트를 구성해보겠습니다. 폴더 구성은 컨테이너와 컴포넌트 두 가지로 나눌 예정인데, 결국 컨테이너도 마찬가지로 컴포넌트입니다. 하지만, 명칭을 나누는 이유는 상태 값의 변화를 담당하고 불러와야 하는 역할을 하는 똑똑한 컴포넌트를 컨테이너라 부르며, 유저에게 보이는 view 만을 구성하면 되는 컴포넌트를 멍청한 컴포넌트라 부릅니다. 이를 구분하여 파일을 구성하면 컴포넌트를 관리하고 구성하는데 훨씬 수월해지는 효과를 가져옵니다. 더 자세한 내용은 아래 링크를 참고하시면 좋을 것 같습니다. Functional vs Class-Components in React In this article I want to show you the differences b..
[Redux] 🏃‍♂️ 리액트와 리덕스 함께 사용하기 (feat. ant-design) (1) 이 글에서 함께 만들어볼 간단한 노트앱의 최종 소스는 아래 링크에 있습니다. youthfulhps/noteapp-react-redux-antd Ant-design을 이용한 간단한 노트앱입니다. Contribute to youthfulhps/noteapp-react-redux-antd development by creating an account on GitHub. github.com 그리고, 아래와 같은 모습의 앱을 만들 예정입니다. 1. create-react-app 우선, 새로운 앱을 생성하겠습니다. ~$ create-react-app noteapp-redux ~$ npm start //test 2. npm install ant-design UI framework, UI 디자인을 책임질 프레임워크입니..
[Redux] 🔧 리덕스는 무엇이고, 왜 사용하는가? 본 글은 아래 링크를 보고 공부하기 위해 정리한 것입니다. Redux (3) 리덕스를 리액트와 함께 사용하기 3-1. 리덕스의 3가지 규칙 리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다. 1. 하나의 애플리케이션 안에는 하나의 스토어가 있습니다. 하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용합니다. 여러개의 스토어를 사용하는것은 사실 가능하기는 하나, 권장되지는 않습니다. 특정 업데이트가 너무 빈번하게 일어나거나, 애플... velog.io ant design UI를 통해 노트 앱을 만드는 중 state를 전달받은 하위 컴포넌트, 그 하위 컴포넌트의 하위 컴포넌트에서 발생한 이벤트에 의해 다른 컴포넌트의 하위 컴포넌트에 상태 값 변화해야 한다면 실제로 해당 props..
[Node.js] 요청 및 사용자 간 데이터 공유 11. 요청 및 사용자 간 데이터 공유 지금까지, title이라는 이름을 가진 input란에서 유저의 입력이 들어오면, 아래와 같이 로그를 남기고 다시 main page로 돌아가는 response를 보내주었습니다. -admin.js router.post("/add-product", (req, res, next) => { console.log(req.body); //유저의 입력값을 받아 로그를 남김 products.push({ titls: req.body.title }); res.redirect("/"); }); 이제는, 유저의 입력값을 보다 더 값어치 있게 사용하고 입력값에 적합한 response를 보내주기 위해 입력값을 변숫값에 저장해보도록 하겠습니다. 아래와 같이 입력값을 저장할 배열을 하나 선언해주..
[백준 1912] 연속합 https://www.acmicpc.net/problem/1912 1912번: 연속합 첫째 줄에 정수 n(1 ≤ n ≤ 100,000)이 주어지고 둘째 줄에는 n개의 정수로 이루어진 수열이 주어진다. 수는 -1,000보다 크거나 같고, 1,000보다 작거나 같은 정수이다. www.acmicpc.net [문제] n개의 정수로 이루어진 임의의 수열이 주어진다. 우리는 이 중 연속된 몇 개의 수를 선택해서 구할 수 있는 합 중 가장 큰 합을 구하려고 한다. 단, 수는 한 개 이상 선택해야 한다. 예를 들어서 10, -4, 3, 1, 5, 6, -35, 12, 21, -1 이라는 수열이 주어졌다고 하자. 여기서 정답은 12+21인 33이 정답이 된다. [입력] 첫째 줄에 정수 n(1 ≤ n ≤ 100,000)이..
[백준 1697] 숨바꼭질 https://www.acmicpc.net/problem/1697 1697번: 숨바꼭질 문제 수빈이는 동생과 숨바꼭질을 하고 있다. 수빈이는 현재 점 N(0 ≤ N ≤ 100,000)에 있고, 동생은 점 K(0 ≤ K ≤ 100,000)에 있다. 수빈이는 걷거나 순간이동을 할 수 있다. 만약, 수빈이의 위치가 X일 때 걷는다면 1초 후에 X-1 또는 X+1로 이동하게 된다. 순간이동을 하는 경우에는 1초 후에 2*X의 위치로 이동하게 된다. 수빈이와 동생의 위치가 주어졌을 때, 수빈이가 동생을 찾을 수 있는 가장 빠른 시간이 몇 초 후인지 www.acmicpc.net [문제] 수빈이는 동생과 숨바꼭질을 하고 있다. 수빈이는 현재 점 N(0 ≤ N ≤ 100,000)에 있고, 동생은 점 K(0 ≤ K ≤ ..
[백준 14501] 퇴사 https://www.acmicpc.net/problem/14501 14501번: 퇴사 첫째 줄에 백준이가 얻을 수 있는 최대 이익을 출력한다. www.acmicpc.net [문제] 상담원으로 일하고 있는 백준이는 퇴사를 하려고 한다. 오늘부터 N+1일째 되는 날 퇴사를 하기 위해서, 남은 N일 동안 최대한 많은 상담을 하려고 한다. 백준이는 비서에게 최대한 많은 상담을 잡으라고 부탁을 했고, 비서는 하루에 하나씩 서로 다른 사람의 상담을 잡아놓았다. 각각의 상담은 상담을 완료하는데 걸리는 기간 Ti와 상담을 했을 때 받을 수 있는 금액 Pi로 이루어져 있다. N = 7인 경우에 다음과 같은 상담 일정표를 보자. 1일2일3일4일5일6일7일TiPi 3 5 1 1 2 4 2 10 20 10 20 15 40 ..