본문 바로가기

Development(Web, Server, Cloud)/22) React.js & Node.js22

React.js & Node.js 18일차 - JWT, 회원가입, 로그인 구현 atoms를 사용한 이유는 결국 태그를 재활용하기 위해서이다. 모든 컴포넌트나 html 태그를 atoms에 선언할 필요없이 pages에 선언해도 된다. 여러 컴포넌트에서 재활용되는 것들은 따로 관리를 해서 중복되지 않게끔 하는것이 중요하다. 이를 가르켜 do not return yourself라는 말이 있다. 복붙하지마라. 먼저할것은 handler/user.js에 있는 false를 반환해주는 부분을 실패한 409 코드를 보내주어야한다. 위와같이 409 메세지가 온것을 확인할 수 있다. 이제 문제가 업는 경우 db user table에 사용자를 추가해주어 가입된걸로 처리해보자 그런데 password를 그냥 db에 저장하면안된다. 개인정보유출문제때문이다. 그래서 패스워드 저장시에는 이게 무슨 글자인지 아무도.. 2022. 1. 21.
React.js & Node.js 17일차 : 인스타 디자인 import { Link } from "react-router-dom"; import styled from "styled-components"; const Login = () => { return ( 로그인 페이스북으로 로그인 비밀번호를 잊으셨나요? 계정이 없으신가요? 회원가입 ); }; const PageWrapper = styled.div` display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #fafafa; `; 중앙정렬을 위해 위와같은 속성을 주었다. min-height: 100vh를 해서 보이는 곳의 100%를 먹을 수 있고 동시에 flex 속성으로 align-items와 j.. 2022. 1. 21.
REACT : Naver API를 활용한 사이트 만들기 ``` npm i axios styled-components react-router-dom qs ``` 1. 라우터 설정하기 2. 컴포넌트 만들어서 import 하기 default 속성들도 미리 넣어놓자 3. Main 컴포넌트 import { Link } from "react-router-dom"; import styled from "styled-components"; import { Title } from "../atoms/index"; const Main = () => { return ( 영화 & 책 검색 사이트 영화 검색 책 검색 ); }; const Wrapper = styled.div` //위치 display: flex; flex-direction: column; align-items: cent.. 2022. 1. 20.
React.js & Node.js 16일차 : 네이버API 서버구현하기 + 인스타 골격, URL, URI express server 폴더를 만들고 ``` npx express-generator ``` package.json을 보면 run 시 /bin/www 을 실행시킨다. 해당 파일을 보니 위와같이 3000번 포트를 쓰나보다 8080을 써주자 routes를 가보면 이 주소로 왔을때의 응답을 적어준다. 실재 조절은 controller을 만들어서 처리해준다. 성분으로 매개변수, 어떻게 처리할지 위의 방식은 index.html을 보내주겠다는 의미이다. 결국 app.js에서 어디로 처리를 할지를 결정하고 있다. 그게 바로 바로 전에보 routes 폴더안의 것들이다. ``` npm install npm start ``` 로 프로젝트를 시작하자 express가 켜져있다. 여기에서 title을 바꾼다고 해도 바로 바뀌지.. 2022. 1. 18.

티스토리툴바