전체 글
-
Express에서 절대경로 세팅Node/Express 2022. 11. 28. 17:35
Express에서 절대경로를 세팅하고 소스에 적용 React 프로젝트에서 상대경로를 쓰게 되면 폴더가 깊어지면 깊어질수록 import할 때 ../../ 를 입력하는 경우가 많습니다. 따라서 절대경로를 써서 @src/component/sample 이런 식으로 import하게 만듭니다. React에서 절대경로를 사용하고자 한다면 jsconfig.json / tsconfig.json이나 webpack을 건드려서 세팅할 수 있습니다. 다만 Node Express에선 좀 다르고 제약사항이 있으며 어떻게 사용할 수 있는지 살펴보겠습니다. 필요한 라이브러리: ts-node, tsconfig-paths tsconfig.json & tsconfig.paths.json 소스 // tsconfig.json { "extend..
-
Express MySql 연결 & Sql Injection 방어Node/Express 2022. 11. 28. 16:40
1. Express에 Mysql 연결하는 방법 해당 포스트에선 express와 mysql을 연결하는 방법에 대해 설명합니다. Sequelize 와 같은 Mysql용 ORM(Object-relational mapping)을 쓸 수 있지만 여기에선 순수하게 커낵션 정의하고 쿼리를 작성하는 방법에 대해 알려드립니다. 우선 mysql 라이브러리를 설치해줍니다 ( npm i mysql ) 커낵션 정의하는 방법은 크게 2가지가 있습니다. 1. createConnection import mysql from 'mysql'; const conn = mysql.createConnection({ host: 'localhost', port: 3306, user: 'root', database: 'sampledb', passw..
-
Express에 소캣 연결하기 & 이벤트 분리Node/Express 2022. 11. 27. 20:02
Express에 소캣 연결 및 이벤트 분리 http는 비연결성이라는 특징을 갖고 있습니다. 비연결성이란 client와 server가 한 번 연결을 맺고 요청-응답에 대한 통신을 마치면 연결 자체를 끊어버리는 것을 뜻합니다. 따라서 클라이언트에서 보내는 모든 요청에 대해 새로운 connection을 만들어야 합니다. 다만 채팅이나 알림같은 실시간 통신의 경우 client와 server간의 연결 자체가 계속 살아있어야 합니다. 이를 구현하기 위한 방법 중 하나는 Socket을 이용하는 것이며 이를 express에서 어떻게 구현하고 어떻게 이벤트를 분리시킬 수 있는지 살펴보겠습니다. 패키지: socket-io 우선 app.js부터 작업해야 합니다 app.js 파일 소스 import express from 'e..
-
[사이드 프로젝트] DTech App사이드 프로젝트/DTech App 2022. 11. 27. 18:26
앱 이름 : DTech App 프로젝트 기간 : 2022.06.16 ~ 2022.11.01 (추가적으로 계속 개발할 예정) 개요 : 팀 스킬현황 파악 및 정보공유 활성화 앱 DTech App은 팀 스킬 현황파악 및 정보공유가 원활하게 이뤄질 수 있도록 도와주는 앱입니다 모르는게 있어 어디에 질문할지 모르거나 팀에 새로운 인원이 많이 들어오면서 누가 어떤 스킬셋이나 도메인을 갖고 있는지 몰라 답답한 상황이 있었을 겁니다. 이를 해결하기 위해 팀 스킬 현황을 파악할 수 있는 DTech-App을 만들었으며 Slack 앱과 비슷한 구조를 가지고 있습니다. FE 소스 링크: https://github.com/biglol10/DTech_FE BE 소스 링크: https://github.com/biglol10/DTe..
-
Protected Routes & useRouter exceptionFront-end/Nextjs (12버전) 2022. 11. 27. 17:21
1. Protected Routes 설정 보통 토큰값을 쿠키에 저장할텐데 해당 쿠키값이 없을 경우 다른 페이지로 이동하게 하고싶으면 어떻게 할까요? 단순한 방법으론 페이지의 useEffect안에 쿠키값이 있는지 확인하고 redirect하면 될 것 같습니다. 정말 간단하지만 해당 방법으론 매 페이지마다 해당 로직을 적어야 하며 소스가 더러워 질 것입니다. Nextjs에선 middleware를 통해 이를 해결할 수 있습니다. 깃헙 링크 공유드립니다: https://github.com/biglol10/tistory_source/tree/main/route-example 우선 프로젝트 루트 폴더에 middleware.js를 생성해줍니다. middleware.js 파일 소스 import { NextResponse..
-
Nextjs Redirects 관련 팁Front-end/Nextjs (12버전) 2022. 11. 27. 16:34
특정 url을 입력했을 때 다른 곳으로 Redirect (Nextjs 12버전) Nextjs에서 어떤 특정 url을 입력했을 때 다른 페이지로 redirect하고 싶은 경우가 있습니다. 예를 들어 http://localhost:3000 로 접속 시 http://localhost:3000/dev 로 redirect하고자 하는 경우 특정 설정들을 건드려야 합니다. 이때 어떻게 하면 되는지 살펴보겠습니다. 깃헙 링크: https://github.com/biglol10/tistory_source/tree/main/basepath_redirects 우선 nextjs 프로젝트 폴더에서 next.config.js가 생성되어 있어야 합니다. next.config.js 파일소스 const prodEnv = process..
-
Dynamic Layout 적용 + Svg as ComponentFront-end/Nextjs (12버전) 2022. 11. 27. 16:34
1. 페이지마다 다른 Layout 적용 페이지마다 다른 Layout을 적용하고 싶을 때 매 페이지마다 Layout을 불러와서 render에 입히는 방법도 있습니다. 다만 그렇게 할 경우 매번 리턴문에 Layout 소스를 적용해줘야 하는 불편함이 있습니다. 이 문제는 컴포넌트에 custom속성을 부여하여 해결할 수 있습니다. 우선 Layout을 하나 만듭니다. 깃헙 링크: https://github.com/biglol10/tistory_source/tree/main/layoutandsvg Layout1.jsx 파일 소스 const Layout1 = ({ children }) => { return ( Link1 Link2 Link3 {children} footer ); }; export default Lay..