본문 바로가기
반응형

분류 전체보기144

Express 폴더 구조 express는 node.js를 이용해서 서버를 개발할 수 있는 프레임워크이다. 직접 폴더 구조를 구현할수도 있지만 cli명령어들을 제공해준다. global 설치 npm install express-generator -g 제대로 설치되었는지 확인해보기 express -h 만일 파일 실행시 오류가 난다면 express 모듈을 다시 설치해주자 npm install express express 프로젝트 생성 명령어를 통해서 프로젝트를 생성 view 엔진을 'ejs'를 사용하겠다는 의미이고, 맨 마지막은 프로젝트 이름이다. express --view=ejs myapp ejs템플릿 사용을 위해 ejs모듈 설치 npm install ejs [생성된 프로젝트 구조 알아보기] app.js: 생성 후 기본이 되는 파일로.. 2022. 10. 31.
React 로그인 API _ 1 (앞서 회원가입 로직을 완료한 상태) * 추가글: 정리를 하다보니까 이해가 조금 더 편한 상태가 되려면 server부터 참고해주세요. 먼저 클라이언트 //[client] signin.jsx const onValue = (data) => { axios.post('http://localhost:3000/auth/login', { email: data.email, pw: data.pw }).then(res => { localStorage.setItem('토큰', res.data.userToken) // header에 토큰 넣는 로직 setInterceptor(res.data.userToken) history('/main') }) } // 헤더에 토큰을 넣어줌 import axios from 'axios'; e.. 2022. 10. 31.
React 회원가입 API (로그인 기능 전) (React Hook Form을 가지고 회원가입, 로그인페이지 유효성 검증까지 해놓은 상태임) 1. express모듈을 설치했고, Mongoose library로 mongoDB를 연결했다. 2. model과 schema를 생성 3. clinet - server 통신 test해봄 (body-parser 설치 후) 4. mongoURI보호를 위해 환경 변수를 나눠주었다. 5. bcrypt를 통해 비밀번호 암호화 먼저 클라이언트 //[client] signup.jsx const onValue = (data) => { axios.post('http://localhost:3000/auth/register', { email: data.email, pw: data.pw, pwComfirm: data.pwComfirm.. 2022. 10. 31.
브라우저 렌더링 SSR, CSR 브라우저 렌더링 가져온 페이지 정보를 브라우저가 어떻게 출력할까? 브라우저 종류: 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 등 브라우저 주요기능: HTML 페이지, PDF, 이미지등 서버에게 요청해서 보여주는 것 브라우저가 화면에 나타나는 요소를 렌더링 할 때 렌더링 엔진을 사용한다. 렌더링 엔진을 사용해서 유저가 요청한 컨텐츠를 표시해준다. EX) 크롬: 블링크, 사파리: 웹킷 HTML회면 요청 => HTML, CSS 파싱 => 화면에 표시 파싱이란? 브라우저가 코드를 이해하고 사용하기 쉬운 구조로 변환하는 것이다. 파싱의 결과: DOM트리, NODE 트리로 표현된다. DOM트리: HTML페이지를 구조화해서 계층으로 표현한 개념으로 최상단 루트 태그를 시작으로 페이지에 대한 각 요소가 노드로 만.. 2022. 10. 31.
728x90
반응형

티스토리툴바