Suyeon BLOG

PedroTech님의 풀스택 강의 6일 차를 참고하였습니다. 📌 Comments 테이블 생성하기 // ./server/models/Comments.js module.exports = (sequelize, DataTypes) => { const Comments = sequelize.define("Comments", { commentBody: { type: DataTypes.STRING, allowNull: false, }, }); return Comments; }; models 안에 위 코드와 같이 작성하면 DB 안에 자동으로 Comments 테이블이 생성된 것을 확인할 수 있습니다. 📌 Posts 테이블의 id를 Comments 테이블의 외래키로 추가하기 // ./server/models/Post.js ..

PedroTech님의 풀스택 강의 5일 차를 참고하였습니다. 📌 포스터 내용 보여줄 Router 생성하기 // ./client/src/App.js function App() { return ( Home Page Create A Post // 포스터 내용 보여줄 Router 생성해줍니다. ); } Route의 URL은 웹에서 사용하는 URL이라서 DB 경로와 관련되어있지 않습니다. useParams()를 사용할 것이기 때문에 path="/경로/:매개변수명"을 써줘야 합니다. 📌 Post.js 코드 작성하기(포스터 내용 부분 코드 작성) // ./client/src/pages/Post.js import React, { useEffect, useState } from "react"; import { usePa..

PedroTech님의 풀스택 강의 4일 차를 참고하였습니다 📌 Form 만들기 준비 npm install formik npm install yup 1. Formik: Form의 필드를 초기화하고, 전송할 때 어떤 함수를 실행시킬지 등 전체적인 부분을 컨트롤하기 위해 사용됩니다. 2. yup: Form의 필드들의 데이터 형태와 필수로 작성해야 하는지를 정의할 때 사용됩니다. 📌 Form 만들기 import { Formik, Form, Field, ErrorMessage } from "formik"; import * as Yup from "yup"; function CreatePost() { return ( Title: Post: Username: Create Post ); } Formik의 속성들 📍ini..

PedroTech님의 풀스택 강의 3일차를 참고하였습니다. 📌 React 생성하기 // ./client 안에 프로젝트를 생성했습니다. npx create-react-app . React 프로젝트를 생성해줍니다. 만약 미리 폴더를 만들어놓은 상태라면 따로 프로젝트명을 입력하지 않고 . 을 해주면 해당 폴더 안에 React 프로젝트가 생성됩니다. 📌 Axios로 서버 연결하기 // ./client/src/App.js import "./App.css"; import axios from "axios"; import { useEffect, useState } from "react"; function App() { const [listOfPosts, setListOfPosts] = useState([]); useE..

PedroTech님의 풀스택 강의를 참고한 포스팅입니다. 📌 DB 연결 준비 // ./server/config/config.json { "development": { "username": "root", "password": "password", "database": "springdb", "host": "localhost", "dialect": "mysql" }, "test": { "username": "root", "password": null, "database": "database_test", "host": "127.0.0.1", "dialect": "mysql" }, "production": { "username": "root", "password": null, "database": "databas..

TypeScript를 사용할 땐 props의 타입은 서로 동일해야만 오류가 발생하지 않습니다! 이때 타입을 정의하는 방법에 대해 포스팅하겠습니다~ 📌 예시 코드 // 부모 코드 function App() { const [datas, setDatas] = useState([]); const [listLength, setListLength] = useState(0); return ( Seoul Restaurant Website // props 전달 ); } // 자식 코드 // props 타입 정의하기 type ShowListProps = { list: apiType[]; listLength: number; }; // 타입 적정하기(: 사용) function ShowList({ list, listLength..

서울 열린 데이터 광장에서 서울에 있는 음식점들을 모아서 검색 사이트를 만들었습니다. React만 사용하다가 Vue를 사용하면서 좋은 점 등을 포스팅하려고 합니다. 📌 만들게 된 계기 JSON으로 데이터를 생성해서 다루기만 했지 API를 활용한 프로젝트를 만들어 본 경험이 없었고, Vue가 React보다 데이터를 다루는 데 훨씬 효율적이라는 지인의 얘기를 듣고 Vue를 기반으로 한 API 프로젝트를 만들게 되었습니다. 📌 Vue를 사용하면서 느낀점 1. Vue에서 template와 script가 나눠져 있는 덕분에 가독성이 좋은 코드를 구현할 수 있습니다. Vue를 처음 접했을 때 다소 어색했던 부분이었습니다. 하지만 HTML과 JavaScript 부분이 따로 나누어져 있어서 프로젝트를 구현할 때 깔끔하..

API를 이용한 프로젝트를 하다보니 사용하는 데이터의 양이 늘어나면서 이들을 더 구체적으로 표현하면 좋은 코드가 될 것 같아 시작하게 되었습니다. 📌 React에 TypeScript 적용하기 React 프로젝트를 생성하기 전일 때 npx create-react-app 프로젝트명 --template typescript React 프로젝트를 생성한 후일 때 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 📌 결과 TypeScript를 적용하기 전인 React 프로젝트의 파일들입니다. 확장자명은 js, css로 이루어져 있는걸 확인할 수 있습니다. TypeScript를 적용한 후인 React 프로젝트의 파일입..

React 기반으로 REST API를 활용한 프로젝트를 구성 중에 TypeScript를 활용해서 만들면 더 구체적인 코드로 구현할 수 있을 것 같아 새로운 도전을 해보았습니다. 📌 TS로 API Type 만들기 export type apiType = { CRTFC_UPSO_MGT_SNO: number; UPSO_SNO?: string; UPSO_NM: string; CGG_CODE?: string; CGG_CODE_NM: string; COB_CODE_NM?: string; BIZCND_CODE_NM: string; OWNER_NM?: string; CRTFC_GBN?: string; CRTFC_GBN_NM: string; CRTFC_CHR_NM?: string; CRTFC_CHR_ID?: string;..

React에서 TypeScript를 활용할 수 있다는 정보를 접한 후 프로젝트에서 활용하고 싶어서 배우기 시작했습니다. 📌 TypeScript를 적용하지 않을 때 발생하는 문제들 function printItem(arr) { arr.forEach(v => { console.log(v); } } function sum(num1, num2) { console.log(num1 + num2); } 일반적인 JS를 활용한 함수입니다. TypeScript를 사용하지 않을 때 나타나는 큰 차이점은 함수를 호출할 때 나타납니다. printItem([1, 2, 3]); // 1 2 3 printItem(1, 2, 3); // 숫자에는 forEach라는 메서드가 없기에 오류가 발생합니다. sum(1, 2); // 3 su..