1. 이번 목표: 생명주기(라이프사이클)에 대해 알아보자 2. 배운 내용 요약리액트(React)는 컴포넌트 기반의 UI 라이브러리로, 각 컴포넌트는 특정 생명주기(Lifecycle)를 따른다. 이 생명주기를 이해하면, 컴포넌트가 화면에 추가되거나 제거될 때, 그리고 상태가 변경될 때 어떤 일이 일어나는지 알 수 있다.마운트, 언마운트, 렌더링마운트(Mount)컴포넌트가 처음으로 화면에 추가되는 시점.컴포넌트가 DOM에 추가되고, 화면에 나타남.초기화 작업(데이터 가져오기, 이벤트 리스너 등록 등)을 주로 수행.언마운트(Unmount)컴포넌트가 화면에서 제거되는 시점.컴포넌트가 DOM에서 삭제되고, 더 이상 화면에 표시되지 않음.타이머 정리, 이벤트 리스너 제거, 네트워크 요청 취소 등의 작업을 수행..
1. 이번 목표: ref에 대해 알아보자 2. 배운 내용 요약리액트의 ref란?ref는 React 컴포넌트나 DOM 요소에 직접 접근할 수 있도록 하는 기능. 일반적으로 상태(state)를 통해 UI를 제어하지만, 어떤 경우에는 DOM 요소에 직접 접근이 필요할 수 있다. 이런 경우에 ref 를 사용. ref가 필요한 경우1. 포커스, 텍스트 선택 관리2. DOM 요소의 크기나 위치 확인3. 비제어 컴포넌트 접근 (폼 요소 값 읽기)4. 외부 라이브러리와의 통합 ref 사용 기본 문법리액트에서 ref는 React.createRef() 또는 useRef()를 통해 생성.- 클래스 컴포넌트에서 refimport React, { Component } from 'react';class MyComponent..
1. 이번 목표: 리액트 시작, State와 Props에 대해 알아보자 2. 배운 내용 요약📌 리액트(React)란?리액트(React)는 페이스북(Facebook)에서 개발한 UI 라이브러리.사용자 인터페이스(User Interface)를 만들기 위해 사용. 주로 싱글 페이지 애플리케이션(SPA) 개발에 많이 사용되며, 컴포넌트 기반(Component-Based) 아키텍처를 통해 UI를 효율적이고 재사용 가능하게 구성할 수 있다. 리액트 주요 특징1. 컴포넌트 기반 아키텍처리액트는 컴포넌트(Component) 단위로 UI를 나누어 개발.컴포넌트는 재사용 가능하며, 각각의 컴포넌트는 독립적으로 동작.컴포넌트 기반 개발은 코드의 가독성과 유지보수성을 높임. 2. 가상 돔(Virtual DOM)리액트는..
1. 이번 목표: erd 수정, 발표자료 준비, 배포 2. 이번주 내가 한 일:AWS EC2 인스턴스를 사용하여 Nginx를 리버스 프록시로 설정하고, PM2를 이용해 Node.js 애플리케이션을 배포 3. 회고더보기드디어 2주간의 프로젝트의 마지막 발표 날이다.발표 전날부터 배포를 미리 해보고 연습을 해서인지 순조로웠던 것 같은데, pm2에 대한 개념을 아직 잘 이해를 하지 못했던 것 같다. 새로 git pull을 받으면 pm2도 다시 재부팅해줘야 하는데 그 작업을 계속 놓쳐서 많이 헤매었다.원래 발표를 하기로 했던 조장이 몸이 많이 좋지 않아서 발표자료를 만든 내가 발표를 하려 했는데 다른 팀원께서 본인이 발표하겠다고 해서 믿고 맡겼다. 초반에 설계 단계에서부터 우리 프로젝트에 대해 살짝 이해..
1. 이번 목표: api 수정, erd, 발표자료 준비 2. 이번주 내가 한 일:1. api 수정 및 테스트2. 시퀀스 다이어그램, erd 등 발표자료 PPT 만들기 3. 회고더보기이번 주는 고난의 한주였다. 팀원들 간 의견이 맞지 않아 언성이 높아지기도 하였고, 팀워크가 잘 맞지 않았다.서로가 맞다고 우기는 상황에서 답은 나오지 않으니 강사님께 물으러 가기도 하고 팀원들 간 얘기도 많이 나누게 되었다.이전 부트캠프에서도, 그 전의 국비에서도 프로젝트 기간에 의견충돌이 항상 있었는데, 시간이 지날 수록 조금 더 현명하게 충돌을 이겨나가는 법을 터득한 것 같다. 내 말 만이 맞다고 우길 게 아니라 상대방이 왜 그렇게 생각했는지 먼저 들어보고, 상대방 입장에서 생각을 해보면 나의 입장을 어떻게 더 잘..
1. 이번 목표: 와이어프레임, 화면단 완성 및 데이터베이스, api만들기 2. 이번주 내가 한 일:1. 데이터베이스 생성2. user 테이블 생성3. api 만들기 (회원가입, 로그인, 이메일 중복확인, 비밀번호 수정, 마이페이지 내가 쓴 고민과 답장 보기) 3. 회고더보기프론트엔드는 자신 있었지만 취약하다고 느껴졌던 백엔드를 더 익숙하게 만들기 위해 이번 프로젝트에서는 백엔드를 지원했다. 프로젝트 할 때는 자바와 스프링으로만 백엔드를 했었는데 이번에는 node.js express를 활용해서 할 수 있던 것이 참 좋게 느껴졌던 것 같다. 나는 매번 mysql workbench를 통하거나, sql파일을 작성해서 테이블을 생성했었는데 sequelize를 이용하니까 직관적이고 편하게 테이블을 생성할 수..
1. 이번 목표: jwt와 비밀번호 암호화를 배워보자! 2. 배운 내용 요약1. JWTJWT(JSON Web Token)는 두 시스템 간에 JSON 형식으로 정보를 안전하게 전송하기 위한 토큰.주로 인중과 정보 교환 목적으로 사용. JWT의 구성JWT는 .으로 구분된 헤더, 페이로드, 서명 세 가지 부분으로 이루어져 있다. 헤더(Header)JWT의 타입과 해싱 알고리즘 정보를 담고 있다.{ "alg": "HS256", // 알고리즘 (HMAC SHA256) "typ": "JWT" // 타입} 페이로드(Payload)토큰에 담을 실제 데이터를 포함.사용자 정보 같은 클레임(Claims)들이 여기에 포함되며, Base64로 인코딩되어 저장된다.{ "sub": "1234567890", ..
1. 이번 목표: Sequelize_relation (1:1, 1:N, M:N) 테이블 간 관계에 대해 알아보자! 2. 배운 내용 요약1:1 관계 (One-to-One)1:1 관계는 두 테이블 간의 각 행이 서로 하나씩 연결되는 경우const { Sequelize, DataTypes } = require('sequelize');const sequelize = new Sequelize('sqlite::memory:');const User = sequelize.define('User', { name: DataTypes.STRING,});const Profile = sequelize.define('Profile', { bio: DataTypes.STRING,});// 1:1 관계 설정// User가 ..
1. 이번 목표: Sequelize 2. 배운 내용 요약💡 Sequelize란?Node.js 환경에서 사용되는ORM(Object-Relational Mapping) 라이브러리. SQL 쿼리를 직접 작성하지 않아도 객체 형태로 데이터베이스를 다룰 수 있다.MySQL뿐만 아니라 PostgreSQL, SQLite, MSSQL 등 다양한 데이터베이스를 지원한다.// 기존 MySQL 연동 vs Sequelize 연동 비교// 1. 기존 MySQL 연동const mysql = require('mysql2');const express = require('express');const app = express();app.set('view engine', 'ejs');// MySQL 설정 및 연결const db =..
1. 이번 목표: MySQL을 MVC패턴에 연결시켜보자! 2. 배운 내용 요약폴더구조express-mvc-mysql/ ├── controller/ │ └── Cuser.js ├── model/ │ └── User.js ├── views/ │ └── index.ejs ├── routes/ │ └── user.js ├── app.js └── config.js config.js - 데이터베이스 설정// config.js// MySQL 데이터베이스 연결 설정 파일const mysql = require('mysql');// 데이터베이스 연결 정보const db = mysql.createConnection({ host: 'localhost', // 데이터베이스 호스트 user: 'root', ..