여름이었다 .. 프로젝트 제작을 위해 필요한 데이터가 있다면 API 호출을 통해 받아올 수 있는데 리액트의 경우 JSX 파일 내부에 무작정 자바스크립트 코드(호출을 위한)가 너무 많으면 가독성에 좋지 않기 때문에 별도의 js 파일을 만들어 분리하는 것이 좋다. 프로젝트에서 api 호출이 빈번할 경우라면, service 폴더를 생성해 호출 관련 js 코드를 한곳에 관리해주면 깔끔한 분류가 가능하다. 😉 ex) 특정 사이트의 식단 데이터를 요청하는 경우 ( = API 호출을 통해 데이터를 받아와준다 ) 1 . 사이트를 방문해 API 호출을 원하는 데이터를 확인한다. 2 . 개발자 도구 ( F12 ) 속 - Network 창에 접속해 식단 데이터가 담긴 파일을 확인한다. Preview 창을 통해 자세한 데이터..

npm install -g typescript 타입스크립트로 파일을 작성해 줬다면 실행 결과를 얻기 위해 컴파일러을 이용해 .ts 파일을 -> .js 파일로 변환해주는 작업을 거쳐야한다. 1. npm install -g typescript 첫째, node를 사용해 글로벌로 타입스크립트를 설치해줬다면 기본적으로 타입스크립트를 자바스크립트로 변환해주는 '타입스크립트 컴파일러 ( tsc )' 실행이 가능해진다. 2. tsc main.ts 둘째, 우리가 작성한 ts 파일에 tsc 명령어를 실행하면 .ts 파일과 동일한 이름으로 변환된 .js 파일이 생성된다. 3. ts-node main.ts 셋째, ts -> js파일로 변환 과정을 거쳤다면 이제 ts 폴더명을 실행시켜 ts 파일의 결과값 확인이 가능하다. 2-..

| 1. React 설치 프론트앤드 폴더로 이동해 현재 폴더 내부(.)에 react를 설치한다. cd frontend npx create-react-app . | 2. 폰트 선택 fonts.google.com 리액트 설치가 진행되는 동안 구글 폰트.com에 접속하여 프로젝트에 사용될 폰트를 골라 해당 코드를 복사한다. [ 복사한 코드 ] // link 코드 // css 코드 font-family: 'Playfair Display', serif; 해당 코드를 프론트의 public폴더 > index.html 파일 내부에 붙여주면 프로젝트 속 글꼴 지정이 완료된다. index.html에 작성할 css 스타일 코드가 2~3줄로 짧기 때문에 별도의 css 파일을 생성하지 않고 html 문서 내부에 style 코드..

협업을 진행하면서 백엔드의 동작 과정을 이해하기 위해 공부하고 싶은 마음이 있었습니다. 본 프로젝트는 🧭 지도를 활용해 사용자 평점을 기록하고 핀으로 표시하는 프로젝트 제작하는 과정으로, 해당 포스팅에선 백엔드 초기 설정과 api 작성 단계에 대해 다루고 있습니다. 진행하기 앞서 프로젝트 폴더 내부에 백엔드 & 프론트 폴더를 생성해줍니다. | 1. 백엔드 초기 환경 설정 1-1 ) npm init _ node js 설정 및 애플리케이션 초기화 backend 폴더 내부로 들어와 초기화 설정을 진행합니다. cd backend npm init // 초기화 설정 진행 1-2 ) 백엔드 환경에서 필요한 라이브러리 사전 설치 백엔드 환경으로 express, monmongoose와 변경사항 존재할 때 restarti..

| 1. 애플리케이션 초기화 🐤 1-1. 빈 폴더에 code . > 빈 프로젝트 폴더 내부에 접속한다. 터미널에 npm init 입력 & 몇가지 질문 사항에 대해 답변 ( Enter 키 끝까지 눌러준다 ) 🐤 1-2. 생성된 package.json에 rest api에서 사용될 라이브러리들을 추가해준다. yarn add express mongoose dotenv helmet morgan nodemon [ 설치 이유 ] ** express ** - node.js 프레임워크에서 애플리케이션을 빌드할 것이므로 기본적으로 실행될 'express' 서버의 설치가 필요 ** mongoose ** - 몽고디비 내부에 문서를 생성할 수 있는 mongo 모델을 생성 ** dotenv ** - 몽고 디비 생성하면 제공되는 ..

React, css, javascript를 활용한 간단한 로딩 스크린 애니메이션 - 한번 알아두면 평생 써먹는, 사용자에게 더욱 친화적 환경 제공을 위한 프로젝트 속 필수 코드 ! 😋 [ 활용 프로젝트 ] 1. Feed Loading 화면 구현 | 구현 단계 및 실제 코드 단계 ( skeleton : 골격, 해골의 의미 ) skeleton 컴포넌트 생성 ( vscode에서 단축키 사용해 rafce - const 리액트 함수 또는 rfce - fcuntion 리액트 함수 생성 ) component 내부 함수에 실제 구조를 div 태그 이용해 만들고 나머지는 css에서 끝낸다 rafce 사용한 경우 [ const 함수 ] export default function skeleton({ type }) { con..