전체 글6 [Next.js] Hydration HydrationSever-Side에서 렌더링 된 정적 페이지(HTML)와 번들링 된 JS파일을 Client-Side에서 HTML 코드와 JS 코드를 서로 매칭 시키는 과정을 의미합니다. CSR과 Pre-Rendering기본적으로 리액트는 CSR 방식으로 랜더링을 하기 때문에 빈 HTML을 서버로부터 받고 클라이언트에서 모든 렌더링을 진행합니다.반면에 Next.js같은 프레임워크들은 서버에서 렌더링 된 HTML을 클라이언트로 보내고 클라이언트에서 매칭을 진행하는데 이 방식을 Pre-Rendering(SSG,SSR)이라고 부릅니다.이러한 prerendering 방식을 사용하면 서버에서 렌더링될 때 마크업이 생성되고 클라이언트에서는 해당 서버의 마크업과 일치하는 컴포넌트를 찾아 이벤트 처리 밎 매칭을 진행.. Frontend 2024. 5. 27. 더보기 ›› [Next.js] next.js 14 + typescript + redux toolkit 세팅하기 1. Redux Toolkit리덕스를 더 간편하게 사용할 수 있도록 도와주는 라이브러리로 리덕스 공식에서도 기본 세팅을 toolkit과 함께 사용하도록 권고하고 있다.https://ko.redux.js.org/introduction/why-rtk-is-redux-today RTK가 현재의 Redux인 이유: RTK가 어떻게 Redux 코어를 대체하는지에 대한 상세 내용" data-og-host="ko.redux.js.org" data-og-source-url="https://ko.redux.js.org/introduction/why-rtk-is-redux-today" data-og-url="https://ko.redux.js.org/introduction/why-rtk-is-redux-today" da.. Frontend 2023. 11. 8. 더보기 ›› [react] 동기와 비동기 처리 async/ await 를 자주 사용했고 동기 비동기처리에 대해서 이해하고 있다고 생각했지만 누군가 '동기가 뭐고 비동기가 뭐야'라고 물어봤을때 제대로 설명하지 못하는 상황이 있었다. 그래서 나만의 방식으로 여러가지 글들을 참고해서 정리해봤다. 1. 동기(Synchronous)와 비동기(Asynchronous) 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉 A작업이 모두 진행 될때까지 B작업은 대기해야한다. 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다. 즉 A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다. 이 사진이 동기와 비동기를 쉽게 설명하기 아주 적합한 사진이라고 생각해서 가져.. Frontend 2022. 10. 14. 더보기 ›› [react] 컴포넌트 생명주기, useEffect 정리 class형 컴포넌트와 함수형 컴포넌트에서의 생명주기에 대한 내용 정리 클래스형과 함수형의 비교 클래스형 Hook 없이 state,lifeCycle 구현 가능 표현방법 명시적, 기능이 조금 더 많음 함수형 Hook을 이용한 state,lifeCycle 구현 클래스형에 비해 간결한 표현 생명주기 메서드,훅 은 기본적으로 렌더(화면그리기) 이후에 실행 1. Class형 컴포넌트의 생명주기 컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드. 쉽게 말해, 특정 시점에 코드가 실행되도록 설정할 수 있다. 메서드에 대해 간략히 요약한다면 그리기 → render 인풋창 그리기 그리고 난 뒤 → componentDidMount -> 인풋에 포커스 그리고 난 뒤 변경 →.. Frontend 2022. 10. 12. 더보기 ›› [react] scroll-snap-type 옵션, react-intersection-observer 기본 활용 이력서와 포폴용으로 사이트를 만들기 위해서 초기 세팅을 하고 컴포넌트를 스크롤로 이동하면서 이동 시 해당 컴포넌트의 애니메이션을 추가하고 싶어서 CSS의 scroll-snap-type 와 react-intersection-observer 옵션을 활용해서 적용해봤다. 두 가지 기능을 사용한 이유 한 번 스크롤를 해서 한 번에 다음 컴포넌트가 보여지도록 하고 싶었고 스크롤이 되고 컴포넌트가 화면에 보여지는 순간 준비됐던 애니메이션이나 효과들이 적용되었으면 해서 팀프로젝트에서 사용했던 경험과 검색을 통해서 찾은 2가지 기능으로 아주 간단하게만 적용시켜봤다. 1. scroll-snap-type https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type .. Frontend 2022. 10. 10. 더보기 ›› 이전 1 2 다음
