# 리액트스터디

18개의 포스트

[리액트 스터디] week 1.2 리액트 프로젝트의 개발 환경 설정

리액트 스터디 1주차 ★범위 -리액트에 대한 이해 -리액트 프로젝트의 개발 환경 설정 -리액트 기본 문법(JSX)과 컴포넌트 소개 2.리액트 프로젝트의 개발 환경 설정 node.js가 깔려있는 상태에서 터미널에 npx create-react-app my-app(폴더

2022년 8월 10일
·
0개의 댓글
·

기초 노드 리액트 - 섹션 0. Node JS (#25~34)

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 해당 학습 코드 25. Antd CSS Framework CSS Framework를 쓰는 이유? → 기능을 만드는데 더욱 집중하기 위해서 CSS Framework 종류 for React JS Material UI

2022년 8월 2일
·
0개의 댓글
·

기초 노드 리액트 - 섹션 0. Node JS (#15~24)

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의Library, Made by Facebookcomponents - module과 비슷하게 컴포넌트로 이뤄져 있어서 reusable이 뛰어남Virtual DOM원래 리액트 앱을 처음 실행 하기 위해선 webpack 이나

2022년 7월 28일
·
0개의 댓글
·

기초 노드 리액트 - 섹션 0. Node JS (#7~14)

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 7. BodyParser & PostMan & 회원 가입 기능 회원가입 기능 client ↔ server client - 크롬 브라우저 ex) git hub 회원가입 → 크롬 브라우저에서 server에서 받을 떄

2022년 7월 26일
·
0개의 댓글
·

[모집] Dapp 포트폴리오 프로젝트 스터디 팀원모집

웹프론트엔드 0/2블록체인 0/1Solidity, React서로 상의한 주제로 프로젝트를 만들어 공모전, 해커톤에 나가는 것을 목표로 합니다.회의를 통해 주제를 선정, 파트 배분 후 진행주 1회 오프라인 회의, Discord를 통한 지속적인 의견 나눔3개월 정도 진행할

2022년 5월 26일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 14장 외부 API를 연동하여 뉴스 뷰어 만들기

우선 외부 API를 호출하는 법을 알기 전에 동기 비동기에 대한 이해를 해보자.만약 작업들을 동기적으로 처리한다면, 한 작업이 끝날 때까지 기다렸다가 다른 작업을 시작한다. 하지만 비동기 방식은 동시에 여러 가지 요청을 처리할 수도 있고, 기다리는 과정에서 다른 함수도

2021년 10월 9일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 13장 리액트 라우터로 SPA 개발하기

기존 웹은 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여 줬다. 하지만 요즘은 웹 상의 정보가 매우 많기 때문에 화면이 전환될 때마다 html을 계속 서버에 새로 요청하면 U

2021년 9월 30일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 12장 immer를 사용하여 더 쉽게 불변성 유지하기

전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있다. 하지만 객체의 구조가 복잡하고 깊어질수록 불변성을 유지하며 컴포넌트를 업데이트 하는 것이 매우 힘들어진다. 이런 경우 사용할 수 있는 라이브러리로 immer라

2021년 9월 28일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 11장 컴포넌트 성능 최적화

10장에서 만들었던 todo-app에서 데이터가 폭증하면 앱이 느려지겠지? 성능 최적화 전에 실제로 랙(lag)을 경험할 수 있도록 많은 데이터를 렌더링해보자.App.js를 다음과 같이 수정해 데이터 2500개를 생성하는 함수를 통해 todos를 설정했다.주의useSt

2021년 9월 14일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 10장 일정 관리 웹 애플리케이션 만들기

CRA로 todo-app 프로젝트 생성필요한 라이브러리 설치Prettier 설정

2021년 9월 7일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 9장 컴포넌트 스타일링

프로젝트에 자동으로 만들어지는 src/App.js, src/App.css를 가지고 다양한 컴포넌트 스타일링을 살펴보자.App.jsApp.cssCSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것이다.명명 규칙자동으로 생성되는 App.css를 살

2021년 8월 31일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 8장 Hooks

Hooks는 리액트 v16.8에 새로 도입된 기능으로 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다.

2021년 8월 21일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 7장 컴포넌트의 라이프사이클 메서드

모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작해서 페이지에서 사라질 때 끝난다. 가끔 컴포넌트를 처음으로 렌더링할 때나 컴포넌트가 업데이트될 때 어떤 작업을 처리해야 하는 경우가 있다. 이럴 때는 클래스

2021년 8월 17일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 6장 컴포넌트 반복

map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다.arr.map(callback, \[thisArg])callback: 새로운 배열의 요소를 생성하는 함수thisArg(필수 X): cal

2021년 8월 10일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 5장 ref: DOM에 이름 달기 정리

일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. (<div id="my-element"></div>) 그렇다면 리액트에서는 어떨까? 리액트에서도 id를 사용할 수는 있으나, 컴포넌트를 여러 번 사용하는 것과 같은 경우에는 중복 id를 가진

2021년 8월 6일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 4장 이벤트 핸들링 정리

사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 이벤트라고 한다. 예를 들어 버튼에 커서를 올렸을 때는 onmouseover 이벤트, 클릭했을 때는 onclick, 폼 요소는 값일 바뀔 때 onchange 이벤트를 실행한다. 이벤트 종류는 여기(https&#

2021년 7월 29일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 3장 컴포넌트 정리

함수형 컴포넌트비교적 선언하기 편함메모리 자원을 더 적게 사용함클래스형 컴포넌트state, 라이프사이클 API 사용 가능임의 메서드 정의 가능하지만 리액트 업데이트 이후 Hooks 도입으로 함수형 컴포넌트도 클래스형 컴포넌트처럼 사용할 수 있게 됐다...! (나중에 자

2021년 7월 17일
·
0개의 댓글
·
post-thumbnail

[React] 리액트를 다루는 기술 - 2장 JSX 정리

자바스크립트의 확장 문법코드가 브라우저에서 실행되기 전에 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨이처럼 JSX를 사용하면, HTML 코드를 작성하는 것과 비슷한 형태로 매우 편하게 UI를 렌더링할 수 있음을 알 수 있다!li 태그 두

2021년 7월 15일
·
0개의 댓글
·