전체 글46 [Redux] 리덕스 사용법 및 예제 (1) https://taehyeon-smilestudy.tistory.com/48부모->손자) 부모 " data-og-host="taehyeon-smilestudy.tistory.com" data-og-source-url="https://taehyeon-smilestudy.tistory.com/48" data-og-url="https://taehyeon-smilestudy.tistory.com/48" data-og-image="https://scrap.kakaocdn.net/dn/c0cvtc/hyWvTJkPCB/qj6Td4hsYkneXxjydB3vPk/img.png?width=500&height=315&face=0_0_500_315,https://scrap.kakaocdn.net/dn/yGnkn/hyWvTWS.. 2024. 7. 5. [Redux] 리덕스 설치하기! (feat. 설치하는 이유는?) 리덕스(Redux)가 필요한 이유 useState의 불편함조부모 컴포넌트에서 손자 컴포넌트로 값을 보낼 때 반드시 부모 컴포넌트를 거쳐 전달해야 되는 문제점이 있습니다. (조부모->부모->손자) 부모 컴포넌트는 그 값이 필요로 하지 않아도 단순히 손자 컴포넌트에게 값을 전달하기 위해 불필요하게 거쳐야만 되기 때문에 중간 컴포넌트가 많아지면 엄청난 불편함과 동시에 리-렌더링이 일어나게 되어 성능도 저하되는 현상이 발생합니다.이러한 불편함을 겪지 않기 위해 [전역 상태관리 라이브러리]를 사용하는데 그중 하나가 리덕스(Redux) 입니다.Redux를 사용하게 되면 Store에서 상태를 관리하고 업데이트해 줍니다.스토어는 컴포넌트 밖에서 관리를 해주기 때문에 컴포넌트를 차례대로 타고 가서 데이터를 주지 않고 어.. 2024. 7. 4. [React] React-Hooks 간단 정리 (2) 대표적인 최적화 React-Hooks리-렌더링의 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두리액트에서 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법memo(React.memo) : 컴포넌트를 메모이제이션(memoization)useCallback : 함수를 메모이제이션(memoization)useMemo : 함수가 리턴하는 값을 메모이제이션(memoization) •React.memo 부모가 리렌더링 되면 자식은 모두 리렌더링 됩니다.1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484.. 2024. 7. 3. [React] React-Hooks 간단 정리 (1) 대표적인 React-Hooks• useState12345678910111213141516171819202122232425// 기존에 우리가 사용하던 일반 방식setState(number + 1); // 함수형 업데이트 setState((currentNumber)=>{ return currentNumber + 1 }); **차이점 button onClick={() => { setNumber(number + 1); // 첫번째 줄 setNumber(number + 1); // 두번쨰 줄 setNumber(number + 1); // 세번째 줄 }} />// 코드가 3개를 써놔도 1번만 실행되어서 1만 증가 button .. 2024. 7. 3. [Next.js] Prisma 개념 및 사용법 프리즈마는 대중적인 타입스크립트 지원 ORM 중 하나입니다. 프리즈마 설치 전에 기본적인 DB 개발 환경은 갖춰두어야 합니다. 설치 명령은 아래와 같습니다.npm i prisma 사용법설치 후 프로젝트에 프리즈마 적용을 위해 아래 명령을 실행합니다. 그러면, 루트에 prisma 폴더와 함께 그 아래 schema.prisma 파일이 새로 생성됩니다. 덤으로 데이터베이스 스키마 정보 연동을 위한 환경변수 설정에 필요한 .env 파일도 알아서 생성해줍니다.npx prisma init✔ Your Prisma schema was created at prisma/schema.prismaYou can now open it in your favorite editor.warn You already have a .giti.. 2024. 6. 11. [React] scrollTo 스크롤 이벤트 오류 (찔끔찔끔 올라가는 버그) 홈페이지를 만들면서 클릭하면 최상단으로 올라가는 버튼을 만들었습니다. 123const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); };Colored by Color Scriptercs 문제 상황엄청나게 간단한 코드인데 원인 모를 버그가 생깁니다.버튼을 누르면 찔끔(?) 올라갔다가 멈추는 현상이 발생합니다.왜 그런걸까 아무리 생각해봐도 답이 안나오는 상황에 구글링을 열심히 하여 해결방법을 찾았습니다. 12345678910const scrollToTop = () => { const scrollStep = -Math.floor(window.scrollY / 15); const scrollInterval = se.. 2024. 6. 11. [React] 뒤로가기 막는 방법 (feat.모달창) 문제 상황모달을 열고 닫은 뒤 뒤로가기 버튼을 누르면 이전 URL로 넘어 가면서 모달창이 다시 열리는 현상이 발생했습니다. 이 현상을 해결하기 위해 useEffect를 사용하여 뒤로가기를 누를때 동작을 정의해주는 함수를 만들어 주었습니다.홈페이지 전체에서 뒤로가기를 막아야 되기 때문에 App.js에 추가해 주었습니다. 1234567891011function App() { useEffect(() => { const preventGoBack = () => { window.history.go(1); console.log("prevent go back!"); }; window.history.pushState(null, "", window.location.pathname);.. 2024. 6. 11. [Next.js] build할 때 checkFields<Diff<LayoutProps, FirstArg<TEntry['default']>, 'default'>>() 오류 기록 문제상황next.js 프로젝트 빌드 과정에서 빌드가 안되는 오류가 발생하였습니다. 해결과정아무리 구글링을 해도 오류에 대한 원인이 분명하게 나오지 않아서 github의 next.js에 Discussions 부분에 동일한 문제가 있나 살펴보았습니다.빌드 시 이런 오류가 뜨면 app의 page중에 같은 이름으로 된 파일이 있는지 확인 해야 됩니다.이 오류가 뜬 이유가 components의 layout.tsx와 app의 layout.tsx가 똑같은 이름으로 export 되어 충돌이 일어나서 생긴 오류였습니다.components의 layout을 layout-bar로 이름을 변경하니 오류가 사라졌습니다.참고 : NextFont gives a type error on Build mode · vercel/nex.. 2024. 4. 18. [React] React에서 SVG 쓰는 방법 기존에 쓰고 있던 png, jpeg 등의 파일에 비해 svg 파일은 생소하기도 하고 다루기 까다롭다고 느껴서 쓰지 않고 있었는데 최적화를 진행중 이미지가 너무 커서 어떻게 할까 생각을 하다 svg를 사용하기로 했습니다. -SVG란 'Scalable Vector Graphics' 의 약어로 각 위치 값을 표시하는 벡터와 같은 방식의 2차원 그래픽용 XML 기반의 형식입니다. -XML이란? HTML과 같은 마크업 언어이고 HTML이 브라우저가 분석할 수 있는 태그로 기술되어있는 문서라면, XML은 웹페이지에서 데이터를 주고받기(통신하기) 위한 태그들로 기술된 문서입니다. png, jpeg와 svg의 차이점 1. png, jpeg는 비트맵 기반의 이미지라서 원래의 크기보다 크게 보여지게 될 경우 이미지가 깨진.. 2023. 10. 31. [React기초] 리액트 Routing & SPA & CSR html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.공식문서Routing이란? -어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 -ROUTER = 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 -ROUTE + ING = 경로를 정해주는 행위 자체, 그런 과정들을 다 포함하여 일컫는 말 -요청받은 내용을 브라우저 화면에 표시하는것 PAGE ROUTING이란? -웹서버가 요청이 명시되있는 경로에 따라 알맞은 페이지를 선택하고 페이지를 반환하여 사용자가 페이지에 접속하는 과정 자체 여러개의 페이지를 가진 어플리케이션 => MultiPage Application (MPA)라고 부른다 .. 2023. 6. 21. 이전 1 2 3 4 5 다음
