hanol hanol

🥕 왜 api들을 분리해야하는가? 개발하다보면 api가 점점 server.js에 늘어나게 되는데 각각하는 기능들도 다르고, 한번에 몰아넣으면 수정할 때도 찾기 힘들다! 그래서 우리는 routes라는 폴더를 만들어서 관련 api들을 분리해서 관리해주도록 하자! server.js app.get('/shop/shirts', (req,res)=>{ res.send('셔츠파는페이지') }) app.get('/shop/dress', (req,res)=>{ res.send('드레스파는 페이지') }) 쇼핑몰의 페이지에 관련된 api들을 shop.js파일에 담아줄것이다. (server.js와 같은위치로 폴더를 만들어줌) shop.js const router = require('express').Router(); rou..

🤷‍♀️ 리덕스란? Javascript 상태관리 라이브러리이다 컴포넌트들이 props없이 state 공유가능하게 해준다!! 상태 관리가 필요한 이유는 프로젝트 규모가 커지면서 상태 데이터의 전달과 업데이트가 복잡해지고, 코드의 가독성과 유지보수가 어려워지기 때문이다. Props를 통해 상태를 전달하게 되면 코드가 복잡해지고, 상태 변경 시 불필요한 컴포넌트 리렌더링이 발생할 수 있다. => Redux는 이러한 문제를 해결하기 위한 상태 관리 라이브러리이다 👾 Redux는 store.js 한곳에 state들을 저장해두어 모든 컴포넌트들이 직접 가져다 쓸수있다!! (즉, 상태관리를 컴포넌트의 바깥에서 하는 것임) 🤷‍♀️ 리덕스 툴킷(Redux-Toolkit) 이란? 효율적인 Redux 개발을 위한 저희의 ..

🥕 SCSS 란? ( Syntactically Awesome StyleSheet의 약어 ) Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) => 웹에서는 직접 동작하지 않기 때문에 CSS로 컴파일(Compile)함 🥕 SCSS 왜 쓸까? 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어 1. 코드의 재활용성 2. 가독성 => CSS에서 보이던 단점을 보완함 🥕 중첩(Nesting) 상위 선택자의 반복을 피하고 가독성이 좋게 작성 가능 .box { margin: { top: 10vh; left: 20vw; }; padding: { bottom: 40vh; right: 30vw;..

🥕 props ( properites(속성)의 약자 ) 부모 컴포넌트에서 자식 컴포넌트에 전달해 주는 값을 props 라고 함 (key : value) 객체형태로 컴포넌트에 넘겨줄 수 있음 App.js (부모컴포넌트) // 부모 컴포넌트 import React from 'react'; import Mypage from './Mypage'; function App() { return ( ); } export default App; 🥕 문자열 이외에 정수, 변수, 다른 컴포넌트 등이 들어갈 경우 중괄호를 사용해서 감싸줘야 함 Mypage.jsx (자식 컴포넌트) import React from 'react'; const Mypage = (props) => { return ( 자식컴포넌트{props.title..

요청을 보내기전 axios에 대해 간략하게 짚고 넘어가자 🥕 axios란? axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활용하는 HTTP 비동기 통신 라이브러리임 axios 설치 npm install --s axios 아래의 경로에 다음과 같은 axios 파일을 만들어준다 /src/axios.js import axios from 'axios'; const instance = axios.create({ baseURL: "http://localhost:3001" }); export default instance; => 사용자 정의 인스턴스 기본 설정 🤔 axios 파일을 왜 만들어서 사용할까? ⇒ axios 인스턴스를 만들 때 구성 기본 값 설정해주어 통신할 때 필요한 ba..

본격 실전 프로젝트 들어가기전 팀원들과 우아한 형제들 클론코딩을 해보자! 해서 일주일 정도 프로젝트를 진행하는데 역시 프로젝트를 하면서 배우는게 정말 많은 것 같다. 어떤 걸 써야하나라는 고민에서부터 이걸 왜 쓰지?라는 의문점도 생겨서 다시 그전에 공부했던 것들을 찾아보면서 개념 정리를 다시한번 하게 되는 것 같다. 페이지 navbar를 구현하려고 했을 때 머릿속에 a태그와 link컴포넌트, useNavigate라는 훅까지 한번에 떠올랐는데 어떤걸 써야할까?라는생각이들었고 우선 a태그는 html에서 사용하는 태그인데 리액트에는 link컴포넌트로 써라~ 라고 배웠고, useNavigate도 페이지를 써야하는데 link컴포넌트와 둘중에 무엇을 써야하는지 고민이 되었다. 그래서 차이점을 이해하고자 찾아보았다...

🥕 useEffect 컴포넌트가 렌더링 될 때 실행할 수 있도록 하는 리액트 Hook임 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 라이프사이클 메서드와 같은 역할 => 렌더링될때마다 매번 실행됨 (= 컴포넌트가 Mount 될 때에만 실행 ) useEffect(()=>{ //실행코드 }); 🥕 useEffect ( ( ) => { , [ array ] } => 마운트 + array 변경 시 실행됨 첫번째 인자는 함수, 두번째 인자는 배열이 들어감 mount될때 실행되고 array가 변경될 때마다 실행됨 // 렌더링될 때마다 매번 실행됨 useEffect(()=>{ //실행코드 }, [array] ); 🥕 useCallback..

🍄 동기식 (Synchronous) - 직렬,순차적으로 작동하는 방식 - 요청을 보낸 후 응답을 받아야지만 다음 코드가 실행되는 것 - 순차적으로 실행되므로, 어떤 작업이 수행중이라면 뒤의 작업은 대기함 🍄 비동기식 (Asynchronous) async/await - 병렬적으로 작동하는 방식 - 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것 - 동시다발적으로 업무를 수행하고 완료되는대로 loading되는 방식 자바스크립트는 ? 동기식 => 순차적으로 진행되어 이전 작업이 끝나야만 다음 작업이 실행되므로 작업시간 길어짐!! blocking => 어떠한 코드가 실행됨에 따라 해당 코드의 실행 때문에 다른 코드를 실행할 수 없음!! single-threaded 한 언어 =>..