seohyun han

Github : https://github.com/HAN-SEOHYUN/Happy-Christmas ※ BackEnd ▶ data-source.ts require("dotenv").config(); export const AppDataSource = new DataSource({ ~ other code ~ host: process.env.MYSQL_HOST, port: Number(process.env.MYSQL_PORT), username: process.env.MYSQL_USERNAME, password: process.env.MYSQL_PASSWORD, database: process.env.MYSQL_DATABASE, }); DataSource 객체를 생성해 DB 연결을 관리하기 위한 환경변수들을..

▶ 소개 크리스마스 편지를 ('나' 한정) 주고 받을 수 있는 웹사이트 ▶ 요구사항 이름을 입력해 등록된 메세지가 있는지 확인할 수 있다. 비밀번호를 입력해 본인에게 등록된 메세지를 확인할 수 있다. sian(나)에게 크리스마스 편지를 쓸 수 있다. ▶ 개발환경 Backend : Typescript, TypeORM, Express Frontend : React, Typescript Test : Jest, Cypress ▶ 목표 Node.js 학습 React 학습 TypeScript & typeORM 학습 Express 학습 분리 서버 환경의 이해 프론트 테스트 코드 작성 ▶ 진행과정 JS 는 HTML 을 꾸미는 용도로만 사용해봤다. (jQuery 같은 ..) 관련지식이 많이 부족한 상태이기에 해당 프로젝..

※ React 를 사용해 만든 메모장 SPA 어플리케이션 인프런의 프로젝트로 배우는 React.js 강의를 듣고 응용하여 만든 프로젝트입니다. ⬇️ ✅ 목표 - React, Hook, SPA, ES6 이해 및 학습 ⚒️ Dependency - axios - json-server - prop-types - react-router-dom 🔫 요구사항 - 메모 등록, 조회, 수정, 삭제 - 조회 시 로딩 중 Spinner 보여주기 - NavBar 페이지 나누기 ▶ 라우팅 App.js , , , 이런 방법도 있지만 아래와 같이 작성하면 컴포넌트가 많아질 때 코드의 재사용성을 높일 수 있다. routes.js const routes =[ { path:'/', component: HomePage }, { path:..

~ 읽는중 ~ 펠리너씨는 틀림없이 mbti가 xxTx 일 것

TypeORM은 NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo 및 Electron 플랫폼에서 실행할 수 있고 TypeScript 및 JavaScript(ES5, ES6, ES7, ES8)와 함께 사용할 수 있는 ORM입니다 [ 공식문서] ▶ ORM 이란 ? Object Relational Mapping (객체 관계 매핑) : 데이터베이스를 사용하는 서비스를 객체지향적으로 구현하는데 큰 도움을 주는 도구이다 관계형 데이터베이스와 객체지향 프로그래밍언어의 중간에서 패러다임 일치를 시켜주기위한 기술이다 개발자는 객체지향적으로 프로그래밍을하고, ORM 이 관계형데이터베이스에 맞게 SQL을 대신 생성해서 실행한다 ORM 을 ..

▶ 매 연말 일년 회고를 하겠다는 다짐 올해에 어떤 것을 했고 어떤 것을 느꼈고 어떤 교훈을 배웠는지를 짚어볼 것 나 자신에게 얼마나 투자를 했는가 ? - 자기계발은 복리로 돌아온다. 습득한 지식이나 능력은 복리로, 이자가 붙는다. ▶ 1만시간의 법칙을 의심할 것 평생 세수와 양치질을 꾸준하게 반복했건만 왜 세수와 양치의 달인이 되어있지 않을까. 더 잘하고자 하는 동기가 없는 까닭이다. 단순히 반복만 한다고 해서 달인이 될 수 없다. 오랜시간 반복하고 있지만 실제로 전문성이 높아진 역량은 무엇이고, 거의 변화가 없는 것은 무엇일까. 둘의 차이점은 무엇일지 고민해볼 것. 내가 가진 노력의 양은 많은건 인정. 그렇지만 언제나 노력한만큼 결과가 따라주지 않는다. 그냥 소비되어버리는 노력이 많다는 생각. 공부한..

Express 가 무엇인지, 그리고 왜 사용하는지에 대해 정리해봤으니 이제 DB를 붙여 (MySQL) 아주 간단한 CRUD API 를 짜보겠다. 프로젝트의 구조는 다음과 같다. 메인 애플리케이션인 index.js, 쿼리를 작성해 DB 에서 데이터를 가져오는 db.js, 그리고 routes 폴더 내 jjigae.js 에서 데이터를 가공할 것 이다. ▶ index.js //1 const express = require("express"); //express 모듈 const bodyParser = require('body-parser'); const PORT = 3001; const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlenco..

인텔리제이에서 GUI 로만 pull / push / commit 을 하다가 vscode 넘어와서 한참 헤맸다. vscode 는 GUI 사용이 너무 불편해서 그냥 git 으로 컨트롤 하기로 했다. ※ 프로젝트 최초 커밋 by 터미널 ▶ github 최초 커밋 git init git add . git commit -m 'initial commit' git remote add origin {원격저장소} git push -u origin main ▶ != 최초커밋 git add . git commit -m '{커밋메세지}' git push git push ※ git config 로그인 정보 확인 git config --list 정보삭제 git config --unset user.name git config --..

Express 를 설명하기 전에 Node 에 대해 간단히 알아보고 넘어가겠다. Express 는 Node 를 위한 웹 프레임워크이기 때문이다. ▶ Node 란 무엇일까 ? 모질라 공식문서에서 Node는 개발자가 모든 종류의 서버사이드 도구들과 어플리케이션을 JavaScript 로 만들 수 있도록 해주는 런타임 환경이이라고 정의되어있다. 언어도 아니고, 프레임워크도 아니고, 라이브러리도 아니고, 런타임. ▶ 런타임 환경은 무엇일까 ? 런타임은 프로그래밍 언어가 구동되는 환경으로, 어떤 프로그램이 동작하는 장소이다. 이렇게 프로그램이 동작하기 위해선 빌드하기 위한 도구들이 필요하고 따라서 런타임에는 JavaScript 엔진과 Web API 가 필수적이다 ( JavaScript 엔진 = JavaScript 를..

※ CORS (Cross-Origin Resource Sharing) 추가 HTTP 헤더를 사용하여 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 ▶ 출처의 구분 어떤 조건에서 출처(Origin) 이 같다고 판단되어 CORS 에러가 발생되는걸까 ? URL 의 구성요소 중 Scheme, Host, Port 3가지가 동일하면 Origin 이 같으면 같은 출처로 인정된다. ex) http://localhost 를 예시로 Scheme = http:// Host = localhost Port = 80(생략되어있음) https://localhost > port 가 다름 (443) http://127.0.0.1 > 127.0.0.1 은 l..