study blog

Hook이란? 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능 Hook은 리액트 16.8 버전 이후 추가된 기능이다. 기존에는 Class형 컴포넌트에서만 상태(state)를 관리 할 수 있었고, 함수형 컴포넌트에서는 상태를 관리할 수 없었다. Hook의 등장으로 상태 관리를 할 수 있게 되었고, 상태 관리 뿐만 아니라 기존 클래스형 컴포넌트에서만 가능하던 여러 기능을 사용할 수 있게 되었다. 즉, Hook으로 인해 더 이상 상태를 관리하기 위해 Class를 쓸 필요가 없어졌다는 것이다. 컴포넌트의 Lifecycle 생성, 삭제, state 변경으로 인한 재렌더링 등이 Lifecycle에 속함 이 때 Hook을 사용하여 Lifecycle을 관리 Hook의 정확한 명칭은 Lifec..

styled-components 글로벌 스타일 특정 컴포넌트가 아니라 전역에 스타일을 추가하고 싶을 때 사용한다. import { createGlobalStyle } from 'styled-components'; 상단에 위의 코드를 추가하고 사용한다. import { createGlobalStyle } from 'styled-components'; const AppBackground = createGlobalStyle` body { background: #ddd; } `; function App() { return ( ); } Appbackground라는 변수는 #ddd라는 색상이 body에 적용되었고, 사용 시 return 안에서 변수명을 태그로 사용한다. 자기 자신 선택: & &문자를 사용하면 Sas..

state 값 변경 첫번째 시도 let [title, setTitle] = useState(['여성 코트 추천', '파주 고기 맛집', '남성 향수 추천']); {setTitle(title[0]='남성 코트 추천')}}>버튼 onclick 안에서 대체할 값을 직접 썼더니 제대로 출력이 안 됨 두번째 시도 function 제목바꾸기 () { title[0] = '남성 코트 추천' } 버튼 새로운 함수를 만들어서 함수 이름을 onclick에 넣기로 결정. 하지만 위 코드는 버튼을 클릭해도 아무 변화가 없다. state는 ' = '(등호)로 직접 조작할 수 없기 때문이다. 대체될 데이터 값이 하나라도 나머지 데이터를 다 써주어야 한다. function 제목바꾸기 () { setTitle(['남성 코트 추천',..

폴더 생성 npx create-react-app 폴더명 터미널에 만들고 싶은 폴더명을 적어 폴더 하나를 생성해준다. 폴더를 다 생성했다면 터미널에 npm start를 적어 미리보기를 할 수 있게 해준다. JSX로 데이터바인딩 데이터 바인딩이란? 자바스크립트 데이터를 HTML에 넣는 작업 리액트가 데이터바인딩 쉽게 구현 가능 JSX란? 자바스크립트 파일 안에 HTML 문법 작성 직관적으로 작성하기 위해 도와주는 리액트의 기본 내장 문법 자바스크립트의 확장버전 function App() { var data = '안녕'; return ( 개발 blog data라는 변수를 여기에 넣어보자 ); } 리액트에서 데이터를 집어 넣고 싶을 때는 중괄호{}를 사용해야 한다. 즉, 위의 코드에서 div태그 안에 변수 da..

REST API 서버 만들 때 restful하게 API를 짜는게 좋다고 한다. restful하다는 것은 REST API를 옳바르게 준수하여 만들었다는 것이다. REST API란 REST 아키텍처 스타일의 디자인 원칙을 준수하는 API(애플리케이션 프로그래밍 인터페이스)이다. 자원(resource)을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미하는데 자원이란? 일반적으로 말하는 문서, 이미지, 데이터, 일반적인 서비스, 객체 등이 있다. 모든 자원에는 고유한 ID가 존재하고, 이 자원은 Server에 존재한다. 자원을 구별하는 ID는 '/exgroups/:exgroup_id'와 같은 HTTP URI 이다. Client는 URI를 이용해 자원을 지정하고 해당 자원의 상태(정보)에 대한 조작..

this를 사용해 '안녕 나는 지지'를 출력해보자 문제 var 사람 = { name: '지지', } 사람.sayHi(); //안녕 나는 지지 나 var 사람 = { name: '지지', sayHi: function () { console.log('안녕 나는'); return this.name } } 사람.sayHi(); 살펴보니 return을 쓴 게 문제였다. return은 콘솔창에 출력되지 않고, 값을 대체해준다. 그렇다면 console.log 안에 this를 사용해야 하며, arrow function은 사용하면 안 된다. var 사람 = { name: '지지', sayHi: function () { console.log('안녕 나는 ' + this.name); } } 사람.sayHi(); return..

서버를 띄우기 위한 기본 셋팅 서버를 띄우기 위해서 express 라이브러리를 이용할 건데 express 측에서 아래의 코드를 사용하라고 한다. const express = require('express'); const app = express(); app.listen(8080, function(){ console.log('listening on 8080') //8080 port에 서버 띄워주세요 }); 코드를 저장하고 터미널에 node server.js를 입력하게 되면 8080이 뜨게 된다. 브라우저에 localhost:8080 을 치면 8080포트로 직접 들어가 확인해볼 수 있다. 요청을 처리하는 기계 제작 예를 들어 beauty/home으로 get요청하면 뷰티 상품들 보여주고, pet/home으로 ..

Node.js 란? 태초에 HTML이라는 언어가 있었고, 자바스크립트는 HTML과 함께 사용하는 언어로 자리 잡혀있었다. 자바스크립트는 수학적 계산을 하기 위해 만들어진 언어가 아닌 HTML 조작과 변경을 위한 언어이다. 여기서 자바스크립트의 해석은 브라우저가 담당하는데, 브라우저란 크롬, 익스플로어, 파이어폭스 등을 뜻한다. 또한 브라우저마다 자바스크립트 해석 엔진이 다르다! 크롬은 V8, 익스플로어는 Chakra, 파이어폭스는 SpiderMonkey 등 다 다른데 여기서 크롬이 자바스크립트 해석을 잘해서 제일 빠르다. 그래서 크롬에서 V8이라는 해석 엔진을 떼서 개발하고 출시하는데 이게 바로 Node.js이다. Node.js는 브라우저 내 말고도 다른 환경에서도 자바스크립트를 실행할 수 있게 도와주고..