본문 바로가기

분류 전체보기

 (397)
nodeJS - req.params, req.query, req.body에 대하여 1. Request Properties 1-1. req.params 예를 들어 /user/:name 경로가 있으면 "name"속성을 req.params.name으로 사용할 수 있다. https://params/user/12341234 일 경우 12341234를 받는다. req.param은 더이상 사용하지 않음 1-2. req.query 이 속성은 경로의 각 쿼리 문자열 매개 변수에 대한 속성이 포함 된 개체다. 예를 들어 https://query/search?searchWord=구글검색 이면 searchWord 매개변수(parameter)의 구글검색 이라는 값(argument)을 가져온다. 1-3. req.body JSON 등의 데이터를 담을때 사용한다. (주로 POST로 유저의 정보 또는 파일 업로드를..
CORS 에러는 무엇이고 어떻게 해결하는가 참고: https://evan-moon.github.io/2020/05/21/about-cors/ https://beomy.github.io/tech/browser/cors/ https://xiubindev.tistory.com/115 실질적 해결 영상: 7:40초 가량 https://www.youtube.com/watch?v=d6suykcsNeY&t=257s 요약: Cross-Origin Resource Sharing의 줄임말로, 한국어로는 교차-출처 리소스 공유라고 한다. 교차 출처가 무엇이냐, 쉽게 말해 다른 출처라고 말할 수 있다. CORS 에러가 어려운 이유 중 큰 이유가 CORS 에러를 실질적으로 겪는 곳은 프론트엔드이지만 해결해야하는 쪽은 백엔드이기 때문이다. (출처(Resource)는 Pr..
loadable() 이란? 요약: 코드스플리팅은 초기 로딩속도를 향상시키기 위한 것이다. CodeSplitting(코드분할)이란? 필요한 모듈을 정적으로 받아오는 것이 아닌 동적으로 런타임시에 필요할 때 필요한 모듈만을 불러오는 것. 즉 JS 코드 번들을 잘게 쪼개서 필요할 때마다 로드할 수 있도록 사용하는 기술! 즉, 미리 로드해야 하는 코드의 양을 줄여서 초기 로딩 시간을 개선할 수 있다! 코드 예시 import Component1 from "Components/Component1"; const Component2 = loadable(() => { return import("Components/Component2"); }); ... ... 협업하는 팀원이 만들어놓은 App 파일에서 6주차에야 눈에 들어온 loadable(). ..
React Hooks -Custom Hooks 실습: https://github.com/dhflekddy/ReactHookPractice/tree/main/customhooks 커스텀훅이 조금 어렵다고 느껴질 수 있는 내용은 원래 제 자리에 있어야 할 내용이 커스텀훅의 사용으로 커스텀 훅 안으로 감춰져 버렸기 때문이다. 즉, 내용은 서로 연관되 있지만 커스텀 훅 파일과 커스텀 훅이 적용되는 파일이 분리되어 있어 조금 어렵게 느껴진다. 1. Custom Hook이란? 커스텀 훅은 개발자가 직접 만든 hook이다. 반복되는 로직을 묶어 하나의 컴포넌트로 만들듯이 반복되는 메서드를 하나로 묶어 사용한다. 보통 Input과 Fetch를 관리할 때 자주 쓰인다. 2. Custom Hook, 왜 사용할까? 앞서 말했듯이 커스텀 훅은 리액트에서 컴포넌트를 만드는..
React Hooks - React.memo로 컴포넌트 최적화하기 (useMemo, useCallback) 정리: 리엑트에서는 기본적으로 부모컴포넌트가 랜더링되면 반드시 자식컴포넌트 역시 랜더링된다. 따라서 자식컴포넌트에서는 부모로부터 받는 props에 변화가 생길때만 랜더링이 발생하도록 해주면 최적화에 도움을 준다는 생각을 할 수 있다. 리액트로 개발을 하다보면 굳이 반복해서 렌더링될 필요가 없는 컴포넌트가 계속해서 반복적으로 많이 렌더링이 되는 문제를 한번쯤은 겪어봤을 것이다. 대부분의 경우 컴포너트의 렌더링 문제를 크게 고민할 필요는 없다. 하지만 렌더링이 너무 지나치게 자주 발생하거나 매번 렌더링마다 무거운 로직을 처리해서 성능에 부담을 준다면 이는 컴포넌트 성능에 매우 좋지 않으므로 해결하는 것이 좋다. 이러한 문제를 해결하기 위해 리액트에서 제공하는 React.memo를 알아보자. 더불어 useMe..
React Hooks - useCallback (실습포함) useCallbck과 useMemo의 차이점은? useCallback도 useMemo와 같이 컴포넌트 최적화를 위해 사용된다. 다만 useMemo는 결과로 return된 값을 memoization하지만 useCallback같은 경우  콜백함수 그 자체를 메모이제이션 해준다.(잠깐 복습. 컴포넌트 최적화를 위해 사용되는 대표적 2가지 Hooks ==>> useMemo, useCallback 두번째 인자로 배열을 취하는 훅스 useEffect, useMemo, useCallback.useEffect는 component life cycle과 밀접하게 연관됨. 2번째 인자로 아무것도 안주면 componentDidUpdate의 역할을, 빈배열을 주면 componentDidMount의 역할을 함.useMemo 함수..
input 태그 속성정리 input태그는 그 안에 값을 입력할 수 있는 방법이 여러가지 존재한다. 그것을 정리해보고자 한다. 위와 같이 type="text"로 하여 입력을 받을 수도 있고 onChange와 value속성을 이용해서 입력을 받을 수도 있다. 또 아래와 같이 필요하다면 type, onChange, value속성을 모두 사용하여서도 값을 입력받을 수도 있다.
React Hooks - useContext + Context API 참고: https://www.youtube.com/watch?v=LwvXVEHS638&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=5 https://react.dev/reference/react/useContext 이문서를 봐라. 모든게 여기서 부터 시작하고 여기서 부터 끝난다. 이거 해석하면 매번 두려움에 떨지 않아도 된다. 1️⃣ contextAPI와 useContext 사용이유 🤬 전역적인 정보들을 props로 전달하려면 단계별로 일일이 다 써주고, 수정시에도 불편하다. 🤬 전역적인 정보: User, 테마, 언어 ✅ 이럴때 사용하는 contextAPI, useContext ✅ 리액트에서는 이러한 문제점을 해결하기 위해서 contextAPI를 제공한다. conte..

티스토리툴바