신발 벗고 들어오세요 신발 벗고 들어오세요

api/server.js const express = require('express'); const cors = require('cors'); const path = require('path') const app = express(), bodyParser = require("body-parser"); port = 3080; // place holder for the data const books = [{ book: "폭풍의 언덕", category: "영미/고전", author: "에밀리 브론테" }]; app.use(cors()); app.use(bodyParser.json()); app.use(express.static(path.join(__dirname, '../my-app/build'))); pa..

TypeScript TypeScript 사용하는 이유 : JavaScript 코드 양이 폭발적으로 늘어나고 상호작용이 증가하여 한계가 나타났음. 타입의 명시성이 부족 ➡️ 정적타입 검사 기능을 제공, 코드 가독성과 유지 보수성 높여줌 (에러 최소화하며 코드 작성시간 단축) interface User { id: number; name: string; } function greetingUser(user: User) { console.log(`Hello, ${user.name}!`) } const parkUser = { id: 1, name: "박해커" }; greetingUser(parkUser); User의 정보를 쉽게 파악할 수 있고, greetingUser 함수에도 매개변수로 User 타입으로 어떤 인..

d

App.js import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Home from './Home'; import Navbar from './component/Navbar'; import CreateBlog from './blogComponent/CreateBlog'; import BlogDetails from './blogComponent/BlogDetail'; import NotFound from './component/NotFound'; import Footer from './component/Footer'; import { useEffect, useState, Suspense, lazy } from 'react'; /* r..

Custom Hooks ➡️ 스스로 커스텀한 훅을 의미하고 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있음. 여러 url을 fetch할 때 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 주로 사용 상태관리 로직의 재활용 가능 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있음 함수형으로 작성하기 때문에 보다 명료 (e.g. useSomethting) function FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' :..

Virtual DOM ➡️ JavaScript 객체로 이루어진 가상의 DOM 트리를 사용하여 실제 DOM 조작을 최소화하고 성능을 최적화하는 기술 DOM의 형태 : 가상 DOM은 추상화된 자바스크립트 객체의 형태를 가지고 있음 Virtual DOM의 동작 과정 리액트는 상태 변경하는 작업 (e.g. 이벤트)이 일어났을 때, 가상 DOM에 저장된 현재와 이전을 비교하는데 리액트는 Diffing 알고리즘 사용하여 변경된 부분을 감지함 알고리즘이 직접 감지할 수 있도록 setState와 같은 메서드를 활용해 상태 변경 가상 DOM을 새로운 가상 DOM과 비교해 필요한 부분만 반영하는데 이것을 재조정 Reconciliation 이라고 함 여러개의 상태 변화가 있을 경우엔 한 번에 업데이트를 해서 성능 최적화, ..

App.js import React from 'react'; import Main from './page/Main'; import Product from './page/Product'; import { useEffect, useState } from 'react'; import "./App.css"; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Footer from './component/Footer'; function App() { const [isProduct, setProducts] = useState([]); useEffect(() => { fetch('http://cozshopping.codes..

상세 요구사항 Main page (메인 페이지) path: / Header와 Footer를 갖고 있으며, 해당 GNB(Global Navigation Bar)와 Footer는 어느 페이지를 가더라도 항상 존재해야 합니다. Header 내에는 메인 로고와 햄버거 버튼이 있어야 합니다. Header는 페이지 내 스크롤이 발생하더라도 항상 상단에 붙어있어야 합니다. 메인 로고 클릭하면 / 페이지(메인 페이지)로 이동해야 합니다. 햄버거 버튼 OOO님 안녕하세요! 부분에는 본인의 이름을 넣습니다. 상품리스트: 클릭하면 /products/list 페이지로 이동해야 합니다. 북마크 페이지: 클릭하면 /bookmark 페이지로 이동해야 합니다. Footer 일련의 텍스트 정보들을 넣어줍니다. Header.js exp..