본문 바로가기

분류 전체보기

 (132)
React - React 기본 및 DOM, Babel, class, component 1) React 1-1) DOM & React 1-2) Babel 1-3) class & component 1) React 1-1) DOM & React 화면을 꾸밀 때 "Javascript"를 활용해서 HTML을 조작함! --> DOM parser 작업이 진행됨! 브라우저 rendering 과정 1. response body에 있는 HTML 내용(string type의 텍스트를 의미함)을 파싱(parsing)함! 2. 파싱 후 tree 구조를 만듦 3. 표현 준비 4. Render(화면이 그려짐) React와 무슨 관계가 있는가? - DOM 조작을 쉽게 하기 위해서 React는 언제 누가 만들었는가? - Facebook(현 meta)이 만듦 Facebook은 사용자 경험을 위해 SPA(Single Pa..
AWS - AWS 개념, EC2 생성, EC2 배포환경 설정 1) AWS 1-1) AWS 개념 1-2) EC2 생성 1-3) EC2 배포환경 설정 1) AWS 1-1) AWS 개념 배포 : 최종 사용자에게 소프트웨어를 전달하는 과정 즉, 우리가 만든 결과물을 실제로 다른 사람들이 사용할 수 있는 상황을 만드는 것이 "배포"이다. --> 결론: 브라우저에서 우리가 지정한 특정 URL로 http요청을 떄리면, 해당 화면이 나오고 실제 작업한 결과물이 나오는 행위 위의 결과물을 만들기 위해서는 아래의 준비사항이 필요하다! 1. 제3자가 접속할 수 있는 컴퓨터가 존재해야 함. 2. 그리고 그 컴퓨터가 24시간 켜져 있어야 함. 그래서 예전에는 이러한 컴퓨터를 빌려서 배포를 진행했다! 서버 컴퓨터(제3자가 접속할 수 있고, 컴퓨터가 24시간 켜져있는 것)를 빌려주는 것을 ..
Node.js(24) - HTTP & WebSocket 정리, WebSocket 사용 방법(ws, socket.io) 1) Node.js 1-1) WebSocket, HTTP 1-2) 사용 방법 1-2-1) ws 1-2-2) socket.io 1) Node.js 1-1) WebSocket, HTTP WebSocket은 HTTP(기존의 웹 페이지를 구상하는 방법)를 보완하고자, 즉 다양한 기능을 만들고자 등장함! HTTP의 단점 연결되어 있지 않음(한 번의 요청에 대해 한 번의 응답만 줄 수 있는 구조라는 의미이다!) 양방향 통신이 불가능함 WebSocket은 HTTP와 달리 기본적으로 양방향 통신이 가능하며, 연결되어 있다! WebSocket은 채팅, 실시간 예약 프로그램, 실시간 주식 차트 등과 같이 실시간으로 데이터가 왔다갔다 하는 것을 구현할 수 있다! TCP 통신의 연결은 논리적인 연결이다! 이와 마찬가지로 We..
Node.js(23) - Multer를 활용한 파일 업로드 1) Node.js 1-1) Multer를 활용한 파일 업로드 1-1-1) back 1-1-2) front 1) Node.js 1-1) Multer를 활용한 파일 업로드 1-1-1) back 파일 업로드 이미지 파일은 컴퓨터 입장에서는 어떤 내용을 가지고 있는가? 이미지도 컴퓨터 입장에서는 "text"이다!(이미지도 "binary file"이다!) 이미지 확장자를 ".jpg"에서 ".txt"로 변환해봤더니 이상한 텍스트들이 많았다! "http protocol"에는 request message와 response message가 있다. 이 중 request message에는 start line, header, body 내용이 있다! 여기서 request message의 header 영역에는 "Content-..
Node.js(22) - front(회원가입 및 로그인), 카카오 로그인 기능 구현 1) Node.js 1-1) front 기능 구현 - 회원가입, 로그인 1-2) 카카오 로그인 기능 구현 1) Node.js 1-1) front 기능 구현 - 회원가입, 로그인 ※ back-end 폴더 및 파일들은 지난번 블로그 글에 소개한 내용을 그대로 사용하고, 거기에 front-end 내용만 새로 만들어 추가함으로써 회원가입 및 로그인 기능을 완성함 (단, 지난 back-end 내용 중 app.js 파일에 cors, cookie-parser 모듈을 추가했기에 해당 파일만 다시 소개함!) 지난 블로그 글 : https://codetraveler-hwang.tistory.com/entry/Nodejs21-server-%EB%B0%8F-%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85-..
Node.js(21) - server 및 환경 세팅, TDD, back-end 회원가입 및 Login 기능 구현 1) Node.js 1-1) server 및 개발 환경 세팅, User 테이블 생성 1-2) TDD 1-3) back-end 회원가입 및 Login 기능 구현 1) Node.js 1-1) server 및 개발 환경 세팅, User 테이블 생성 $ npm init -y $ npm install express mysql2 sequelize dotenv 기본세팅 |-- config.js |-- app.js |-- server.js 본격적인 작업을 시작하기 전에 우선 database, 즉 "테이블 스키마"가 필요하므로 테이블 스키마를 어떻게 구성할지 먼저 설계하고 시작해야 한다! ERD: 테이블 스키마 설계도 --> 그렇기에 우리는 먼저 "models"을 만든다! server.js // app.js를 requi..
Node.js(20) - 로그인 기능(cookie, session), 암호화, JWT 개념 및 규격 1) Node.js 1-1) JWT 1-1-1) 로그인 기능 - cookie, session 1-1-2) cookie, session의 차이점 1-1-3) JWT 개념 1-1-4) 암호화 1-1-5) JWT 규격 정리 1-2) JWT 개념 이해 관련 코드 1) Node.js 1-1) JWT 1-1-1) 로그인 기능 - cookie, session "JWT"는 로그인 기능을 구현하기 위해 사용한다! 로그인에 대해 "cookie"와 "session"의 개념을 배웠다! "HTTP의 비연결성"을 해결하기 위해 등장한 것이 바로 "cookie"와 "session"이다! HTTP의 특징 : "비연결성"을 가진다! HTTP는 한 번 request와 response를 주고 받으면 연결을 끊기 때문에 다시 request..
Node.js(19) - N:M 관계(sequelize 활용), Board의 write/view 구현 1) Node.js 1-1) N:M 관계 구현 - sequelize 활용 1-2) Board의 write, view 구현 1) Node.js 1-1) N:M 관계 구현 - sequelize 활용 Sequelize User Board Comment Liked: N:M 관계 --> User(부모)-Liked(자식) => 1:N 관계 / Board(부모)-Liked(자식) => 1:N 관계 Hash Hashtag: N:M 관계 --> Board(부모)-Hashtag(자식) => 1:N 관계 / Hash(부모)-Hashtag(자식) => 1:N 관계 CREATE TABLE person( first_name VARCHAR(30) NOT NULL, last_name VARCHAR(30) NOT NULL, PRIMA..

티스토리툴바