본문 바로가기
2. React Component 컴포넌트 종류 클래스형 컴포넌트 state 기능 사용가능 라이프사이클 기능 사용가능 임의의 메서드 정의 가능 constructor 작성시 반드시 super(props); 메서드를 호출하여 리액트의 Component 클래스가 지닌 생성자를 호출 render 함수가 반드시 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다 함수형 컴포넌트 클래스형 컴포넌트 보다 메모리 소모가 적음 state, 라이프사이클 대신 hooks 사용 Props properties의 줄인 표현으로 컴포넌트 속성을 읽을 때 사용하는 요소 해당 컴포넌트의 부모 컴포넌트에서 설정하며 컴포넌트 자신은 해당 props를 "읽기전용"으로 사용 defaultProps : 부모컴포넌트에서 따로 props 값을 설정하지 않을 때 보여지.. 2020. 10. 24.
express (2) : 요청과 응답, 쿠키와 세션, REST API와 라우팅 1. 요청과 응답 - 클라이언트에서 서버로 request를 보내고, 서버에서는 request내용을 읽고 처리한뒤 클라이언트에게 response를 보낸다. - 클라이언트로부터 요청이 왔을 때 어떤 작업을 수행할지 listen 메서드에 콜백함수를 넣거나, 서버에 listening 이벤트 리스너를 추가한다. 2. 쿠키와 세션 - 쿠키 : '키-값'의 쌍, reques와 response의 header를 통해 오고 감 - 서버는 요청에 대한 응답을 할 때 쿠키라는 것을 클라이언트에게 보냄 -> 서버로 부터 쿠키가 오면 '웹 브라우저'는 쿠키를 저장해 두었다가 요청할 때마다 쿠키를 동봉해서 보냄 -> 서버는 요청에 들어있는 쿠키를 읽어서 사용자가 누구인지 파악 - 브라우저는 쿠키가 있으면 자동으로 동봉해서 보내므로.. 2020. 10. 24.
express (1) : 웹서버 생성, 미들웨어, 라우팅 1. 웹서버 생성 yarn add express //src/index.js const http = require('http'); const express = require('express'); //익스프레스 서버 객체 const app = express(); //웹 서버의 port속성 설정 app.set('port', 3000); http.createServer(app).listen(app.get('port'), ()=>{ console.log('express server starts : ' + app.get('port')); }); express server object의 메소드 - set(name, value) : 서버 설정을 위한 속성 지정 - get(name) : 지정한 속성 반환 - use([p.. 2020. 10. 24.
SNS 로그인 flow 1. 클라이언트서비스에서 플랫폼(카카오) 로그인 2. 플랫폼(카카오)에서 유저정보확인 및 클라이언트서비스에게 토큰1(유효기간매우짧음) 응답 3. 클라이언트서비스는 플랫폼에게 받은 토큰1을 자신의 백엔드서버에 전달 4. 토큰1을 받은 백엔드서버는 플랫폼(카카오)에게 해당 토큰1에대한 유저정보를 받기위한 요청전달 5. 유저정보를 응답으로 받은 백엔드서버는 유저정보를 db에 저장, 토큰2발행, 토큰2를 프론트에게 전달 2020. 10. 24.
AWS django 배포 AWS cloud storage platform : ebs, s3 saas :sas, amazon aws, google cloudplatform, microsoft azure ec2 : 몇분안에 구동 가능한 가상 서버 (서버를 하나 빌려줌) vpc : aws 네트워크안에서 사용자 전용의 사설 네트워크 망 (네트워크 망을 빌려줌) virtual private cloud EBS: 스토리지 타입 s3 : 파일 업로드 및 공유 rds : 클라우드에서 데이터베이스 관리 (mysql, oracle 등등 왠만한 db지원) elb : 서버로 들어오는 트래픽을 여러개의 머신으로 전달 (load balancing) rds 접속하기위한 우분투 쉘 커맨드 $mysql -h "rds엔드포인트주소" -u root -p 덤프 빼는.. 2020. 10. 24.
Django - select_related() & prefetch_related() select_related와 prefetch_related는 무엇인가 select_related 와 prefetch_related 는 하나의 QuerySet을 가져올 때, 미리 related objects들까지 다 불러와주는 함수이다. 비록 query를 복잡하게 만들긴 하지만, 그렇게 불러온 data들은 모두 cache에 남아있게 되므로 DB에 다시 접근해야 하는 수고를 덜어줄 수 있다. 이렇게 두 함수 모두 DB에 접근하는 수를 줄여, performance를 향상시켜준다는 측면에서는 공통점이 있지만, 그 방식에는 차이점이 있다. select_related Database에서 JOIN 쿼리를 수행하여 두 테이블의 정보를 가져와서 캐싱 select_related 은 SQL의 JOIN을 사용하는 특성상 ma.. 2020. 10. 24.

티스토리툴바