Dahoon06 Store

Composition API Composition API는 Vue.js 3.0에서 새롭게 추가된 API로, 코드를 컴포지션(조합) 하는 방식을 제공한다. 기존의 Options API와 달리, 데이터와 메서드 등을 구분하지 않고 하나의 컴포지션 함수 내에 선언하여 사용하며, 이를 통해 코드의 가독성과 재사용성을 높일 수 있다. Composition API 의 가장 큰 특징은 Setup 이다.beforeCreate 나 created는 setup() 에 포함되고, 나머지 life Cycle은 아래와 같이 변경되었다. Life Cycle Vue2 Vue3 beforeCreate -> setup() created -> setup() beforeMount -> onBeforeMount mounted -> onMou..

이전 포스팅에서는 MySQL ConnectionPool을 만드는 부분까지 진행했습니다. 이번 글에서는 직접 DB에 접근하여 저장된 값을 가져오는 방식을 해보려고합니다. 저는 각각의 역할을 수행하도록 디렉토리 구조를 나눠서 사용하였습니다. 1. routes -> Controller의 역할을 수행 2. services -> service 로직을 수행 3. db -> 설정한 connectionPool 객체를 반환해주는 DB 설정 관련 이러한 구조로 구분하였습니다. routes 프론트에서 요청을 할때 /api/~~를 통하여 백엔드에 요청을 하게 됩니다. 따라서 /api 라는 요청이 들어오면 app.ts에서 api.ts로 접근을 하도록 하였습니다. app.ts import api from "../routes/ap..

이전 포스팅에서 express 프로젝트 생성과 server 연결까지 진행했습니다. 이번에는 데이터베이스를 연결하는 작업을 진행하도록 하겠습니다. 작업을 하기전에 필요한 모듈이 있습니다. npm i dotenv mysql2 dotenv는 사용자 정보를 담을 .env파일을 사용하기 위한 모듈입니다. 정보를 깃에 올리지 않기 위한 파일이니 다운받아주세요. 또한 mysql을 사용하지 않고 mysql2를 사용합니다. mysql은 콜백 기반이기 때문에 promise를 사용하지 못하고 npm에 있는 promise-mysql 모듈을 따로 설치해서 사용해야 합니다. 하지만 mysql2는 promise를 지원하기 때문에 다른 모듈을 설치하지 않고 사용이 가능합니다. * mysql을 사용하게 되면 async/await를 사..

프로젝트를 진행하면서 react와 javascript를 공부해 나가는 스터디에 나가게 되었습니다. 그러면서 프로젝트 주제를 정하게 되었고 커뮤니티 웹앱을 만들게 되었습니다. 그러다 보니 백엔드를 맡을 사람이 필요하게 되었는데 express를 좀 더 공부해보자는 제가 맡게 되었습니다. 물론 프론트쪽의 작업도 몇개 주어지긴 했지만 일단은 주는 백엔드이다보니 작업을 하면서 정리를 해보려고 합니다. express 프로젝트 생성 터미널에서 해당 명령어를 입력하면 프로젝트가 생성됩니다. express --view=ejs 프로젝트명 ** --view=템플릿 -> 이부분은 생략 가능합니다. 저는 프론트를 react로 진행하기 때문에 선언을 하지않고 바로 프로젝트를 생성하였습니다. express 환경에서 typescri..