Suyeon BLOG

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님의 풀스택 강의 2일차를 참고하였습니다. 📌 테이블에 데이터 추가하기 저는 Table에 데이터를 추가하기 위해 HeidiSQL를 사용했습니다. 강의에서는 insomnia를 활용해서 데이터를 추가했습니다. 📌 Table 데이터 가져오기 // ./server/routes/Posts.js const express = require("express"); const router = express.Router(); const { Posts } = require("../models"); router.get("/", async (req, res) => { // Table에 있는 데이터 전체 다 가져오고 json 형태로 결과를 출력합니다. const listOfPosts = await Posts.fin..

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..

MySQL을 삭제하고 다시 재설치할 때 발생한 오류 해결방법에 대해 포스팅을 해볼 생각입니다. 📌 발생한 오류 원인 MySQL을 재설치 하기 위해서 제어판 -> 프로그램 제거 -> MySQL 제거 이 단계를 거친 후 설치를 해도 아래와 같은 오류가 발생했습니다. 이와 같은 오류가 발생한 이유는 MySQL을 설치한 후 남아있는 폴더를 삭제하지 않았기 때문입니다. 해당 폴더는 아래 사진에 나와있는 MySQL 폴더입니다. 반드시!!! 숨긴 항목을 표시한 후 확인하셔야 합니다. 📌 오류 해결 방법 C:\ProgramData\MySQL 이 폴더를 삭제해주면 재설치할 때 이와 같은 오류는 발생하지 않고 정상적으로 설치가 가능해집니다.

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 부분이 따로 나누어져 있어서 프로젝트를 구현할 때 깔끔하..

프로그래머스에서 JS를 활용한 코딩테스트를 하는 과정에서 더 좋은 코드를 구현할 수 있는 방법을 배웠습니다. 그것들을 여기에 써볼려고 합니다. 📌 동일한 코드가 여러번 사용될 때는 함수를 만드는 것이 좋습니다. 코딩테스트를 처음 시작 했을 때 코드를 쭉~ 나열하면서 시간 초과로 실패한 경험들이 많으실텐데 함수를 활용하면 시간초과로 실패하던 문제를 가볍게 성공할 수 있게 됩니다. JS의 기본 상식! function을 사용한 일반 함수와 화살표 함수의 차이점을 잘 알고 알맞게 사용하시는 걸 추천드립니다. 추천 참고 자료: 자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 출처: 드림코딩 엘리 📌 반복문 안에서 indexOf와 splice를 되도록이면 시간이 덜 걸리는 것으로 대체하..

프로젝트를 하던 도중 데스크탑에선 잘 보이던 텍스트가 모바일 화면에선 줄바꿈이 되어 보기 불편해지는 현상이 발생한 경험이 있습니다. 이를 해결하기 위해 after를 활용한 예시를 보여드리겠습니다. 📌 ::after CSS에서 요소의 맨 마지막 자식으로 또 다른 하나의 요소를 만들어 줍니다. 요소에 장식용 콘텐츠를 추가할 때 자주 사용됩니다. 📌 코드 구현 /* CSS */ .store-vegetable-data > span::after {/* 모바일 화면일 때 적용됩니다. */ content: "채식"; font-size: 0.97em; padding: 1px 5px; border-radius: 12px; border: 1px solid var(--main-color); } @media screen an..

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;..