리액트 기초
리액트 시작하기
[React]리액트 시작하기HTML 조작하기
함수와 파라미터 사용하기
이벤트 리스너(Event Listener)
제이쿼리(jQuery)
부트스트랩(Bootstrap) 활용하기
조건문(if, else)
변수 활용하기
애니메이션(Animate)
정규식
이미지 슬라이드(Carousel)
라이브러리 활용하기
스크롤 이벤트(Scroll)
탭메뉴 만들기(반복문)
이벤트 버블링(Event Bubbling)
Array & Object 자료형
form 응용하기
상품 정렬하기(sort, filter, map)
Ajax(에이젝스)
position : sticky 응용하기...
JSX 기초 문법
[React]JSX 기초 문법1. 클래스(ClassName) 부여와 스타일 적용
2. 데이터 바인딩 : { 변수명 }, { 함수명() }, { 이미지별명 }
3. Style 속성 넣기...
state 사용하는 방법
[React]state 사용하는 방법state는 리액트에서 변수 대신 사용하는 데이터 저장공간으로 문자, 숫자, array, object 모두 저장 가능하다. 변수가 아닌 state를 사용하는 이유는 html을 새로고침 없이 자동으로 재렌더링할 수 있기 때문이다. 변경이 자주 일어나거나 중요한 데이터를 주로 저장하고 직접적인 값 변경이 불가능하기 때문에 대체함수를 사용한다....
Component 사용하는 방법
[React]Component 사용하는 방법컴포넌트란?
컴포넌트란 재사용 가능한 최소 단위를 뜻합니다. 리액트에서는 사용자에게 보여주는 UI를 컴포넌트화 해서 사용합니다. ...
조건문과 반복문
[React]조건문과 반복문[React]조건문과 반복문
조건문 - 삼항연산자
JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없다. ...
props 사용하는 방법
[React]props 사용하는 방법Props는 properties의 줄임말로 컴포넌트의 속성을 설정할 때 사용하는 요소입니다. 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다. 대표적으로 자식 컴포넌트가 부모 컴포넌트의 state를 공유하기 위해서 사용할 수 있습니다....
Input 활용하기
[React]Input 활용하기1.입력받은 값을 받을 state를 생성
2.입력받은 값을 state에 담기
3.입력받은 값을 불러오기...
클래스형 컴포넌트
[React]클래스형 컴포넌트컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다. 리액트에서는 최근에는 함수형 컴포넌트를 자주사용하지만 클래스형 컴포넌트를 사용한 예전 방식에 대응하기 위해서 클래스형 컴포넌트도 사용할 수 있도록 하자....
쇼핑몰 프로젝트
프로젝트 생성 및 부트스트랩 설치
[React]프로젝트 생성 및 부트스트랩 설치1.작업폴더 에디터로 오픈
2.터미널에 npx create-react-app shop
3.shop이라는 프로젝트 에디터로 오픈...
쇼핑물 레이아웃 디자인
[React]쇼핑물 레이아웃 디자인네브바 만들기
사이트 대문 만들기
상품 컨테이너 만들기...
데이터 바인딩(import/export)
[React]데이터 바인딩(import/export)[React]데이터 바인딩(import/export)
import & export
긴 코드를 관리하기 위해서 코...
Router 페이지 분할하기
[React]Router 페이지 분할하기1.Router 페이지 분할하기
- Router 시작하기
- Router 사용법
2.쇼핑몰 프로젝트 Router 적용하기
- 페이지 분할
- 페이지 연결
...
styled-components 사용법
[React]styled-components 사용법컴포넌트를 따로 파일로 분류하여 사용하다보면 css 작성시 클래스명의 중복 등으로 관리가 어려워진다. 그래서 이러한 실수를 막기 위해 클래스를 선언하지 않고 컴포넌트에 직접 css를 넣는 방법이 있는데 이 방법이 바로 styled-components를 사용하는 것이다....
SASS 기초 문법
[React]SASS 기초 문법SASS란 css를 프로그래밍 언어스럽게 작성 가능한 프리프로세서(Preprocessor). css에서 변수, 연산자, 함수, extend, import 등을 사용할 수 있게 만들어준다. 브라우저가 이러한 문법을 해석하기 위해서는 SASS라는 라이브러리를 사용하여 css 파일로 변환시켜줘야한다....
컴포넌트의 Lifecycle Hook
[React]컴포넌트의 Lifecycle Hook컴포넌트에는 생명 주기(Lifecycle)가 있다. 컴포넌트가 생성, 소멸, 업데이트(재렌더링)되는 것을 말한다. 이러한 라이프 사이클 중간에 간섭할 수 있는 것이 바로 라이프 사이클 훅(Hook)이다. ...
Ajax 요청하는 방법(axios)
[React]Ajax 요청하는 방법(axios)Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 서버에 요청할 수 있게 도와준다. 리액트에서는 주로 axios라는 라이브러리를 사용하여 ajax 요청을 한다. axios 라이브러리를 사용하면 JSON 자료형을 object로 자동 변경해준다....
중첩 컴포넌트 state 전송하기
[React]중첩 컴포넌트 state 전송하기하위 컴포넌트가 늘어나 최상위 컴포넌트의 state 사용하고 싶은 경우 한 단계씩 state를 props로 전송하는 방법이 있다....
리액트 프로젝트 build 및 Github Page로 배포하기
[React]리액트 프로젝트 build 및 Github Page로 배포하기리액트 프로젝트에는 state, JSX, SASS 등의 파일이 포함되어 있어 브라우저가 해석할 수 없습니다. 이러한 프로젝트를 build하여 브라우저가 해석할 수 있는 html, css, js 파일로 변경합니다. 이렇게 build된 프로젝트를 Github Page로 배포할 수 있습니다....
Context API 사용하는 방법
[React]Context API 사용하는 방법[React]Context API 사용하는 방법
하위 컴포넌트의 개수가 늘어나게 되면 props로 state 값을 전송하...
탭메뉴 만들기
[React]탭메뉴 만들기[React]탭메뉴 만들기
1.UI 만들기
리액트 부트스트랩 사이트의 탭메뉴 UI를 가져온다.
Detail.js
i...
애니메이션 넣기(react-transition-group)
[React]애니메이션 넣기(react-transition-group)애니메이션을 넣을 때 class로 제작하여 컴포넌트 등장 혹은 업데이트 될 때 className을 추가하는 방식으로 넣을 수도 있지만 react-transition-group이라는 라이브러리를 사용하면 transition 속성을 더 편리하게 사용할 수 있다....
Redux 시작하기
[React]Redux 시작하기1.redux는 props를 대신하여 사용하는 라이브러리다.
2.모든 컴포넌트들이 같은 값을 공유할 수 있게 만들어준다. 예를 들어 중첩 컴포넌트에서 props를 여러번 전송하지 않고 state를 직접 사용할 수 있다.
3.state 데이터 관리가 용이하여 에러 추적 용이하다. ...
실무에서 활용하기
리액트에서 사용하는 조건문 작성 패턴 5가지
[React]리액트에서 사용하는 조건문 작성 패턴 5가지1.컴포넌트 안에서 사용하는 if ~ else ~
2.JSX 안에서 사용하는 삼항연산자
3.&& 연산자를 if 대신 사용하기
4.switch ~ case ~ 조건문
5.오브젝트 자료형 응용 enum...
비동기 처리되는 setState 함수
[React]비동기 처리되는 setState 함수setState 함수의 비동기적 실행. 리액트의 setState(변경) 함수는 전부 비동기적으로 실행됩니다. 그렇기 때문에 코드 실행시에 다음과 같이 예기치 못한 문제가 발생할 수 있습니다....
리액트 프로젝트 성능 잡기
[React]리액트 프로젝트 성능 잡기1.함수와 변수 선언해서 사용
2.애니메이션은 transform 사용
3.Lazy Loading
4.리액트 개발자 도구...
PWA 세팅하는 방법
[React]PWA 세팅하는 방법PWA(progressive web app)의 줄임말로 웹사이트를 모바일 앱처럼 설치해서 사용할 수 있는 기술이다.
1.설치 마케팅 비용이 적다.
2.아날로그 유저들을 배려한다.
3.html, css, js만으로 앱까지 만들 수 있다.
4.앱에서 제공하는 푸시알림, 센서 등을 웹에서 사용할 수 있다....
localStorage 브라우저에 데이터 저장하기
[React]localStorage 브라우저에 데이터 저장하기장바구니에 추가한 데이터는 새로고침/재접속 시에 초기화가 된다. 이러한 데이터를 기억하기 위해서는 1. 서버로 보내서 데이터베이스에 저장, 2.브라우저가 가지고 있는 임시 저장공간(localStorage)에 저장한다. 이 글에서는 localStorage를 사용하는 방법에 대해 기록한다....
리액트와 NodeJS 서버 연동하기
[React]리액트와 NodeJS 서버 연동하기1.NodeJS 서버 만들기
2.리액트 프로젝트 만들기
3.리액트와 NodeJS 서버 연동하기...
