name https://images.velog.io/tags/React.png

# React

리액트(React)는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

629개의 포스트
post-thumbnail

redux-logger

redux-logger 및 redux-devtools-extension 설치/root/index.js/root/index.js

약 6시간 전
·
0개의 댓글

React LifeCycle API 생명주기

LifeCycle API 생명주기 출처-LifeCycle >## Mounting component가 브라우저에 나타날 때 constrctor : component가 만들어지는 과정에서 가장 먼저 실행되는 함수로 초기 state를 설정한다. getDerivedStat

약 6시간 전
·
0개의 댓글
post-thumbnail

React-Redux 핵심 요약본

아래 내용들은 빠르게 Redux를 사용하기 위해 핵심 부분만 정리해놓은 글이다. 필요한 부분만 쏙속 찾아서 보면 된다.components : 화면에 실제로 그려지는 컴포넌트를 담는 폴더containers : 리덕스 스토어와 컴포넌트를 이어주는 매개체를 담는 폴더modu

약 8시간 전
·
1개의 댓글
post-thumbnail

React Redux 프로세스 정리

리덕스를 사용하는 프로세스 정리 리액트를 공부하던 중 리덕스를 사용하기 위해 정형적인 프로젝트 속에서 Action과 State를 사용하는 법을 정리해 놓으면 좋을 것 같아서 정리하는 글임당. 프로젝트 구조 리덕스 사용해 프로젝트를 수정해가는 과정을 차례차례 적을 것

약 9시간 전
·
0개의 댓글

PROJ-FOODLY-DAY3 : 리액트에서 이미지 임포팅

리액트에서 이미지 불러오기 리액트에서 src속성을 사용한다면? 리액트에서 src속성을 사용하기 위해서는 가 필수적이다. 를 통해 해당경로를 변수에 담아주고, 변수를 src속성값으로 사용한다. 위 방법을 쓰지 않고 이미지 경로를 바로 src에 넣어봐야 화면에는 아무것

약 12시간 전
·
0개의 댓글

[TIL] 24. React - ESLint & Prettier

1. ESLint > ESLint란? 자바스크립트 문법이나 code convention을 검사하는 도구(linting utility)이다. 자바스크립트는 정적 컴파일을 하지 않는 인터프리터 언어이기 때문에 사소한 타이핑 실수를 알아채지 못한 채 잘못된 프로그램을 배

약 15시간 전
·
0개의 댓글
post-thumbnail

FullStack.instargramClone(1);

금일부터는 NomaderCoder의 instargram clone 강의를 공부하겠습니다. 스택은 prisma react react-native GraphQL 입니다. express는 GrpahQL 모듈안에 내장되었습니다. Part.1 GraphQL API 서버 만들기

어제
·
0개의 댓글

[TIL] 23. Mock Data

Mock Data란?단어 그대로 가짜 데이터(샘플 데이터)라는 뜻이다. 즉, 실제 API 데이터가 아닌 테스트를 하기 위해 샘플로 만들어진 데이터이다.프로젝트 진행 시 보통 API가 나오기 전에 페이지 레이아웃이 먼저 나오는 경우가 대부분이다. 이러한 경우에 API를

어제
·
0개의 댓글
post-thumbnail

[React] Day 3

React - Day3 [class형 컴포넌트, state]

어제
·
0개의 댓글
post-thumbnail

Next.js에 Redux-Saga 연결 해보기

Redux만으로는 비동기적인 작업을 처리하지 못 합니다. 그래서 미들웨어를 연결해서 비동기작업 처리를 하는 코드를 짜주어야 합니다. 대표적인 미들웨어로 thunk와 saga가 있는데 saga가 더 기능이 많고 많이 쓰이는 것 같아 saga로 해보도록 합니다.위 명령어를

어제
·
0개의 댓글
post-thumbnail

PROJ-FOODLY-DAY2 : 깃 적응하기 & 폰트어썸

프로젝트 2일차.첫날 로그인/회원가입 HTML, SCSS 까지 마무리하였고, 오늘은 MAIN CONTENT와 FOOTER 까지 끝내기가 목표. 하지만 다 못했지요프로젝트를 진행하면 각자 맡은 컴포넌트/기능에 맞춰 깃 브랜치를 생성하고 작업하게 된다. 나는 4가지의 컴포

2일 전
·
0개의 댓글

React - onClick 등에 조건을 넣는 방법

React 컴포넌트에서 button 등에 클릭 시 특정 function을 호출하려고 할 때, 조건을 넣으려면 다음과 같이 작성하여야 한다.만약 아래와 같이 작성한다면, 작동은 될 지 모르나, react에서 console창으로 경고를 보낸다.console 경고창

2일 전
·
0개의 댓글

[TIL] 22. React - Router

Create React App에는 routing을 위한 로직이 들어있지 않기 때문에 react-router를 추가해야 routing을 구현할 수 있다.설치한 디렉토리로 이동 후, package.json 파일에 dependencies 중 react-router-dom 이

2일 전
·
0개의 댓글
post-thumbnail

[React] Day 2

React - Day2 [함수형 컴포넌트, props]

3일 전
·
0개의 댓글
post-thumbnail

PROJ-FOODLY-DAY1 : react 초기세팅, 코딩컨벤션

2주간 진행되는 클론코딩 프로젝트가 시작되었다. 내가 속한 팀은 Foodly 사이트를 클론 하게 되었고, Front 3, back 3명 총 6명의 인원이 참여하게 되었다.프로젝트 시작에 앞서 앞으로 1주간의 일정을 확인했다. front-end팀은 main/login/r

3일 전
·
0개의 댓글

[Project] 1. 초기 세팅

src 폴더 안에 Components, Images, Pages, Styles 폴더 생성Styles 폴더에 기존에 있던 index.css를 이동시키고, reset.css와 common.css, media.css를 만들어준다.reset.css 기본 css값들을 초기화

3일 전
·
0개의 댓글
post-thumbnail

GraphQL React + Apollo Tutorial - 3. Query: 링크 불러오기

서버로부터 데이터를 불러오고 데이터를 React 컴포넌트에 표시하는 방법을 익힙니다. Apollo 클라이언트를 사용하여 GraphQL 쿼리를 다룹니다.

3일 전
·
0개의 댓글
post-thumbnail

React를 막 입문 한 사람들이 헷갈릴 수 있는 상황 01

제가 처음에 React를 배우고 API를 이용한 토이프로젝트를 진행할 때 "어? 나는 컴포넌트에서 분명 useEffet로 처음에 API 함수 호출했는데 왜 프로퍼티를 못 찾는다고 나오지? 🤔" 이런 경험을 했던 적이 있습니다.보통 다들 useEffect는 마운트(처음

4일 전
·
0개의 댓글
post-thumbnail

Github Action + S3 간단히 알아보기

금, 토, 일 주말을 DNS와 https에 모두 투자했다. 웹 개발자(프론트엔드 포지션)이지만 현재는 화면을 그릴수있는 능력밖에 없다고 생각된다. 이번 주말을 통해 웹 개발자라 하면 서버에 대한 지식이 꼭! 필요하다고 몸으로 체험했다. 이번 장에서는 github act

4일 전
·
0개의 댓글

2020-02-22 ~ 02-23 삽질

22일부터 23일까지의 삽질 및 생각을 적어본다DND 프로젝트 남은 기한이 1주일지 2주일지 잘 모르겠지만 최대한 열심히 해보려고 한다.현재 코로나 바이러스 때문에 밖에도 안 나가고 코딩 놀기 코딩 놀기만 반복중이다...흑흑ㅠㅠ주말동안 엄청 많은 작업은 하지 않았고 많

4일 전
·
2개의 댓글