본문 바로가기
반응형

분류 전체보기130

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.
React.memo, useCallback(), useMemo() 리액트는 컴포넌트를 렌더링 한 뒤에 이전 결과와 비교하여 DOM을 업데이트 한다. 컴포넌트를 나누는것은 재사용성을 위해서 이지만, 컴포넌트의 렌더링 최적화를 위해서 이기도 하다. 결국 렌더링이 최대한 덜 될 수 있있게 해야하는데, 이때 리 렌더링이 필요없는 컴포넌트의 렌더링을 방지하여 성능을 높일 수 있는 방법들이 있다. React.memo 컴포넌트 렌더링 최적화 리 렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있다. 예를들어 todoList 리액트 앱에서 todo list form영역에서 input에 입력을 하게 된다면, value를 가지고 있는 부분만 렌더링이 아닌 연관이 없는 컴포넌트까지 같이 렌더링이 되는것을 확인할 수 있다. 이러한 부분은 react.memo를 적용해서 컴포넌트에.. 2022. 10. 26.
express 사용해 보자! express는 node.js를 이용해서 서버를 개발할 수 있는 프레임워크이다. 직접 폴더 구조를 구현할수도 있지만 cli명령어들을 제공해준다. global 설치 npm install express-generator -g 제대로 설치되었는지 확인해보기 express -h 만일 파일 실행시 오류가 난다면 express 모듈을 다시 설치해주자 npm install express express 프로젝트 생성 express --view=ejs myapp 명령어를 통해서 프로젝트를 생성한다. view 엔진을 'ejs'를 사용하겠다는 의미이고, 맨 마지막은 프로젝트 이름이다. npm install ejs ejs템플릿 사용을 위해 ejs모듈 설치 (ejs, pug는 express에서 웹페이지를 동적으로 처리하는 템플.. 2022. 10. 24.
728x90
반응형

티스토리툴바