나의 성장 개발일지

프로젝트 Hi School 💻 사용한 기술 스택 Develop(Front) Develop(Back) Communication 👨‍🔧 인원 및 개발 기간 팀 멤버 : 5명 2023.12.14 ~ 2023.12.30 프로젝트 소개 HiSchool 프로젝트는 고등학교 학생을 대상으로 하는 동아리 및 커뮤니티 웹 사이트입니다. 모든 지역을 대상으로 하며, 학생들은 직접 동아리를 만들어, 동아리 관리, 일정 추가 등 친구들과 대외활동을 하거나 자신들의 취미 생활을 공유할 수 있는 웹 사이트입니다. (*현재는 서울 지역만 설정) 기본적으로 동아리 내에서는 실명을 사용하며, 자유(익명) 게시판에서는 닉네임을 사용하여 평소 또래 친구들에게 물어보기 힘든 질문, 고민 등을 공유할 수 있도록 설계 했습니다. 전체 기능 홈..

포스팅 주제 React 특징 React 사용법 [ React JS ] React 란 무엇인가? FaceBook에서 만든 자바스크립트 라이브러리 사용자와 상호 작용이 가능한 동적 UI 제작 가능 라이브러리 React의 특징들! Data Flow 단방향 데이터 흐름 부모에서 자식으로 데이터 전달 Component 기반 구조 Component => 독립적인 단위의 소프트웨어 모듈로 소프트웨어를 독립적인 하나의 부품으로 만드는 방법 React는 UI(view)를 여러 Component를 쪼개서 만듬 한 페이지 내에서 여러 부분을 Component로 만들고 조립해 화면 구성 Virtual Dom React는 DOM Tree 구조와 같은 구조를 Virtual DOM으로 가짐 이벤트 발생 시 Virtual DOM을 ..

포스팅 주제 환경변수 ENV 환경변수 환경변수 ENV 환경변수란? 운영 체제(OS)나 어플리케이션에서 사용되는 데이터 값을 저장하는 메커니즘 프로그램의 동작을 조정하거나 구성 node.js에서도 이러한 환경변수를 활용하여 애플리케이션의 설정과 동작을 조정 Node.js에서 process.env 객체를 통해 환경변수에 접근 .env 환경변수를 관리하기 위해 .env파일을 사용하는 것이 일반적 환경변수 .env에는 사용자들에게 보여주지 말아야할 정보들을 담는다. 보안을 위하여 git 저장소에 업로드 하지말자, 보여주지 말아야할 중요한 정보들이 노출될 수 있다. 서버에 파일만 업로드 환경변수를 사용하기 위해서는 npm을 설치해야 한다. npm install dotenv const exp..

포스팅 주제 Web Session 실습 Session 실습 const express = require('express'); const session = require('express-session'); const app = express(); const PORT = 8000; app.set('view engine', 'ejs'); app.use('/static', express.static(__dirname + '/static')); app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use(session({ secret: 'mySessionSecret', resave: false, sav..

포스팅 주제 Web Cookie 실습 이번 실습에서는 모달창을 띄워, 모달창의 오늘 하루안보기를 클릭하면 쿠키에 값의 정보를 주어 클라이언트 웹에 부여한다. 실습. Cookie 연습 페이지 접속했을 때 위와 같은 창 보이게 하고, “오늘 그만 보기” 선택한 후 “닫기” 하면 브라우저를 껐다 켜도 창이 보이지 않게 하기 개발자도구 > Application > Storage > Cookies > 주소 클릭 후 쿠키를 삭제했다면 브라우저 새로고침시 alert 창이 나타나야 함! cookie 실습 광고! 어쩌구 저쩌구 쿠키 실습 오늘 하루 보지 않음. 닫기 쿠키 제거하기 로그인 세션 실습 pop에 값을 주지 않으면 모달창을 계속 보여준다. pop에 값이 들어가면 모달창 sh..

포스팅 주제 Session (세션) Session을 설정하고 연결해보자! Session 이란? 웹 서버에 저장되는 쿠키 사용자가 웹 브라우저를 통해 접속한 시점부터 연결을 끝내는 시점까지의 시간 동안 일련의 요구를 하나의 상태로 보고 그 상태를 유지시킨다. ( 로그인 유지 ) Session의 동작 방식 1) . 클라이언트가 서버에 접속 시 세션 ID 발급 => 2). 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있는다 => 3). 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 서버에 전달해서 사용 => 4). 서버는 세션 ID를 전달받이서 별다른 작업 없이 세션 ID로 세션에 있는 클라이언트 정보를 가져온다 => 5). 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에..

포스팅 주제 쿠키(Cookie) 쿠키와 세션을 사용해보자! 쿠키란? 웹 브라우저(클라이언트)에 저장되는 키와 값이 들어있는 작은 데이터 파일 이름, 값, 만료일, 경로 정보를 가진다. 쿠키의 동작 방식 1). 클라이언트가 페이지 요청 => 2). 서버에서 쿠키 생성 => 3). HTTP 헤더에 쿠키를 포함 시켜 응답 => 4). 브라우저 종료 후에도 쿠키 만료 기간이 있다면 클라이언트에서 보관 => 5). 같은 요청이 올 경우 HTTP 헤더에 쿠키를 함께 전송 => 6). 서버에서 쿠키를 읽어 이전 쿠키와 비교해 정보가 변경 되었으면, 쿠키를 업데이트하여 변경된 쿠키를 HTTP 헤더에 포함 **쿠키의 사용 예시 (자동 로그인, 오늘 그만보기) 쿠키는 개발자도구에 Application 탭에서 확인가능하다!..

포스팅 주제 종속 관계, FK 사용법 api.http RDBMS를 보이기 위한 Sequelize 종속관계 표현 이번에 각 테이블의 관계를 FK를 주어 종속관계로 만들려고 합니다. 관계는 1:1 -> 서로 한가지 정보만을 공유하는 관계, ( 사용자와 프로필, 주문과 송장 등 ) 1:N -> 부모와 자식의 관계와 같이 한쪽이 다른 한쪽 레코드 여러개와 관계, (학교와 학생, 부모와 자식 등) N:N -> 한 쪽 레코드가 다른 쪽 레코드 여러 개와 관련되고, 반대 쪽도 동일한 관계( 학생과 과목, 주문과 제품 등) 종속관계, FK 사용법 우선 기본 폴더 구조부터 만들고 시작한다. 기본적으로 사용하는 모듈은 이전 포스팅과 동일하기에 아래와 같이 설치해 준다. npm init -y npm express ejs m..

포스팅 주제 Sequelize 실습 이번 실습에서는 이전에 만든 MVC로그인 실습을 sequelize로 만드는 실습이다. 먼저 sequelize를 구성하는 폴더부터 설정해 주었다. { "development": { "username" : "user", "password" : "1234", "database" : "kdt", "host" : "127.0.0.1", "dialect" : "mysql" }, "production" : {}, "test" :{} } const express = require('express'); const app = express(); const PORT = 8000; const db = require('./mod..

포스팅 주제 Sequelize Sequelize란? 자바스크립트 구문을 알아서 SQL로 변환해준다 DB작업을 쉽게 할 수 있도록 도와주는 ORM 라이브러리 중 하나 Object-Relation Mapping Sequelize 설치 방법! npm install sequelize sequelize-cli myslq2 이번 Sequelize에서는 몇개의 폴더가 달라지거나 추가된다. * 기존에는 모델 폴더 안에 여러개의 파일이 있다면 데이터베이스 명을 바꾸게 된다면 모든 파일을 다 바꿔줘야 했다. => config.json 파일로 한번에 처리가 가능해졌다!! 새로 추가된 폴더들 ** config, models 폴더가 추가된 것을 확인 가능하다. => config 폴더의 파일은 .json 형식을 가진다. < co..