
▶환경변수 .env 데이터베이스 연결 설정 정보를 입력할 때 .env 파일을 이용하는 게 안전하다는 말을 들을 적이 있어서 이에 대해 정리해보려고 합니다. 🔎 환경변수 ? 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임 [ 위키피디아 ] 환경'변수' 라는 이름 그 자체로 어떤 변수값을 의미합니다. 🔎 그렇다면 dotenv는 뭘까 우선 env란 유닉스 및 유닉스 계열 운영 체제용 셀 명령어이다. 환경 변수의 목록을 출력하거나, 현존하는 환경을 수정하지 않고도 변경된 환경 내에서 다른 유틸리티를 실행하는데 사용할 수 있다. .env를 사용함으로써 변수를 추가하거나 제거할 수 있으며, 기존 변수는 새로운 값을 이들에 할당함으로써 변경할 수 있다. [ 위키피디아 ] dotenv는 환경변수..

▶sequelize 통해서 MySQL 연동 1. ORM(Object Relational Mapping)에 대해 ORM은 객체와 관계형 DB를 연결해줍니다. 객체 지향 프로그래밍은 클래스 사용 ↔ 관계형 데이터 베이스는 테이블 사용 객체를 통해 간접적으로 데이터베이스 데이터를 다룸 장점 쿼리문이 아닌 메서드로 데이터를 조작할 수 있음 코드의 가독성을 올려줌 재사용 및 유지보수의 편리성 증가 단점 프로젝트의 복잡성이 커질 경우 난이도 또한 증가 관계형 데이터베이스의 고유 기능을 이용하기 어려움 대표적으로는 TypeORM + nextJS Sequelize + express 가 있습니다. 이번에는 sequelize에 대해 알아보려고 합니다. 2. Sequelize sequelize는 ORM의 한 종류로 SQL문..

▶prettier&eslint 설정하기 1. prettier와 eslint에 대해 알아보기 prettier prettier란 모든 코드가 일관된 스타일을 준수하도록 만들어주는 도구입니다. 저장을 누르게 되면 자동으로 설정한 스타일에 맞게 포맷됩니다. eslint eslint는 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구입니다. 내가 설정한 부분에 대해서 에러나 경고문으로 알려주게 됩니다(에러로 띄울지 경로로 띄울지도 설정 가능합니다). 💡공통점💡 협업시 모든 페이지의 포맷과 lint과 설정한 포맷 형태로 맞춰지기 때문에 동등한 코드 컨밴션을 가지고 작업을 할 수 있게 해줌! → prettier와 eslint는 효율적인 협업을 위해서 꼭 필요하다! 2. pretti..

▶ body-parser란? 1. body-parser란? body-parser는 node.js의 모듈입니다. 클라이언트 POST/PUT request data의 body로부터 파라미터를 편리하게 추출합니다. 2. body-parser가 없을 때의 문제점: undefined 만약에 버튼을 클릭했을 때 서버에게 다음과 같은 데이터를 body에 담아 POST request를 보내기 위해 아래와 같은 온클릭 함수를 정의했다고 해 봅시다. const onClickPost = () => { const data = { title: "프론트엔드", label: "안녕하세요" }; axios.post("/api/hello", data).then((res) => { console.log(res); setData(res...

▶NodeJS(express)랑 React랑 연동하기 저는 처음에 express와 React를 따로따로 배웠던 터라 React에서 express를 연결하는 부분에 있어서 어려움이 좀 있었는데 그 방법에 대해서 좀 정리해보려고 합니다 :) 클라이언트 / 서버 시점에서 살펴보려고 합니다. 우선 react와 express를 연결한다는 의미는 무엇인가? express는 누군가 서버의 포트로 접속을 하면 react로 만든 파일들을 보여주는 역할을 수행하면 되는 것입니다. 1. Client(React) creat-react-app ./ 리액트 파일이 설치가 되었다면 이제 express와 연동하는 것을 해 봅시다. 우선 우리는 클라이언트를 서버와 연결할 것을 알고 있어야 합니다. 이 말은 클라이언트의 포트와 서버의 ..

▶nodeJS + mongDB + EC2 권한 문제 해결하기 학교 과제로 구현 + 배포를 다뤘었는데.. 구현은 잘 되었었는데 EC2의 권한 문제로 많은 어려움을 겪다가 해결을 하게 되어서 정리를 해보려고 합니다 :) 우선 저의 상황은 다음과 같았습니다. nodeJS + mongoose로 로그인/회원가입 API 구현 AWS EC2를 통해 배포 시도 문제 상황에 따라 해결하는 방법을 정리해봅시다. 1. Git ① private repository clone EC2를 통해 클론을 시도할 경우 클론하려는 private repository일 경우 권한 문제로 클론이 되지 않습니다. → EC2에 private repository를 pull 할 수 있는 권한 주기 해결방법 EC2에서 ssh key 발급 EC2에서 키..
- Total
- Today
- Yesterday
- 프론트엔드 기초
- 파이썬
- jest
- styled-components
- CSS
- 타입스크립트
- 인프런
- 딥러닝
- react-query
- JSP
- TypeScript
- 리액트
- 자바
- 프론트엔드
- testing
- next.js
- 디프만
- react
- 프론트엔드 공부
- 자바스크립트 기초
- Python
- 머신러닝
- frontend
- 스타일 컴포넌트 styled-components
- 프로젝트 회고
- HTML
- 자바스크립트
- 데이터분석
- rtl
- 리액트 훅
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |