Suyeon BLOG

PedroTech님의 풀스택 강의 11일 차를 참고했습니다. 📌 Logout 버튼과 Logout 함수 생성하기 // ./client/App.js function App() { const [authState, setAuthState] = useState({ username: "", id: 0, status: false, }); useEffect(() => { axios .get("http://localhost:3001/auth/auth", { headers: { accessTocken: localStorage.getItem("accessTocken") }, }) .then((response) => { if (response.data.error) { setAuthState({ ...authState, sta..

PedroTech님의 풀스택 강의 10일 차를 참고했습니다. 📌 Comments Table 수정하기 // ./server/models/Comments.js module.exports = (sequelize, DataTypes) => { const Comments = sequelize.define("Comments", { commentBody: { type: DataTypes.STRING, allowNull: false, }, username: { type: DataTypes.STRING, allowNull: false, }, }); return Comments; }; Comments 테이블에 username 필드를 추가해서 댓글 작성자 이름을 저장할 수 있게 수정합니다. 📌 사용자 ID 저장하기 // ...

PedroTech님의 풀스택 강의 9일 차를 참고했습니다. 📌 jsonwebtocken 설치하기 // server 터미널에서 설치합니다. npm install jsonwebtocken 특정 데이터를 암호화할 때 사용하는 것이 jsonwebtocken입니다. 특히 로그인 정보를 세션에 저장할 때 다른 사람들이 정보를 확인할 수 없도록 보안을 위해 자주 사용됩니다. 📌 로그인 정보 암호화하기 // ./server/routers/User.js const express = require("express"); const router = express.Router(); const { Users } = require("../models"); const bcrypt = require("bcrypt"); // 토큰을 암..

PedroTech님의 풀스택 강의 8일 차를 참고했습니다. 📌 로그인 정보를 저장할 Users 테이블 생성하기 // ./server/models/Users.js module.exports = (sequelize, DataTypes) => { const Users = sequelize.define("Users", { username: { type: DataTypes.STRING, allowNull: false, }, password: { type: DataTypes.STRING, allowNull: false, }, }); return Users; }; Users 테이블 안에는 username(사용자 이름)과 password(비밀번호)를 저장할 수 있습니다. 📌 bcrypt 설치하기 npm install ..

PedroTech님의 풀스택 강의 7일 차를 참고하였습니다. 📌 Comments 테이블의 데이터 가져오기 // ./client/src/pages/Post.js function Post() { let { id } = useParams(); const [comments, setComments] = useState([]); useEffect(() => { axios .get(`http://localhost:3001/posts/byId/${id}`) .then((response) => {... }); // Comments 테이블의 데이터를 가져오는 axios 입니다. axios .get(`http://localhost:3001/comments/${id}`) .then((response) => { setComme..

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

HeidiSQL을 사용해서 CSV의 데이터를 DB로 가져오는 방법에 대해 포스팅하겠습니다. 📌 CSV 파일 준비하기 저는 동물병원 CSV 파일을 준비했습니다. 혹시나 필요하신 분들은 아래 경로를 통해서 다운로드하시길 바랍니다. LOCALDATA - 지방행정인허가데이터개방:데이터다운로드 전체 데이터다운로드 전체 인허가 데이터에 대한 전체분,월 변동분, 일 변동분에 대한 자료를 제공받을 수 있습니다. 전체 다운로드 선택 업종다운로드 36개 그룹, 196개 업종에 대한 데이터를 업 www.localdata.go.kr 📌 CSV 파일을 메모장으로 열기 CSV에 있는 필터들의 구분자를 확인하기 위해서입니다. 필드 종결자: 필드의 구분자가 무엇인지를 의미합니다. ("번호","병원이름","주소" 에서 ,(쉼표)가 구..

요즘 반응형 웹을 만들면서 em과 rem을 배운 지식들을 포스팅해 볼 것입니다. 📌 em과 rem을 사용하는 이유 사용자가 임의로 브라우저의 폰트 크기를 변경했을 때, 그 설정에 맞게 웹의 폰트 크기도 변해야 합니다. 그러기 위해 사용하는 것이 em과 rem입니다. (px은 크기가 고정적이라서 저는 반응형 웹을 만들 때 사용하지 않고 있습니다.) (폰트 크기에만 사용하는 것이 아니라 크기를 변경할 때 다 사용 가능합니다.) 📌 em이란 부모의 폰트 크기에 영향을 받는 것이 em입니다. 예를 들어, 부모의 폰트 크기가 16px입니다. 이때 자식 폰트에 2em을 사용하면 16 * 2 = 32px이 됩니다. 가나다라1 가나다라2 가나다라3 📌 rem 이란 브라우저 폰트 크기에만 영향을 받는 것이 rem입니다...

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