https://tech.kakao.com/posts/344이 문제는 자카드 유사도 J(a,b) 를 설명해주고 자카드유사도 값을 직접 계산하는 프로그램을 작성하는 문제이다. 자카드 유사도를 구하는 공식은 간단하다. 교집합을 합집합으로 나눈 수이다. 이 값은 늘

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/class객체를 생성할 수 잇는 템플릿(청사진, 틀)클래스를 이용해서 만든 객체를 인스턴스(instance)라고 한다.apple

| createPortal 공식문서 바로가기흥미를 끄는 리액트의 기능이 생겨 이를 알아보는 글입니다.이름도 무려 포탈이다..! 포탈이란 무엇인고? 게임을 하다보면 캐릭터가 어떤 포탈 속에 쏙 빨려들어가서 이곳에서 저곳으로 이동하게 된다.리액트 공식문서에서는 create

무한스크롤\_작은용량원티드 프리온보딩 챌린지의 사전과제로 intersection observer를 활용하여 무한스크롤 구현하기를 해보았다.사실 전에 프로젝트에서 이미 react-query의 useInfiniteQuery를 활용하여 만들어본적이

Next.js의 페이지 라우터는 page 폴더의 구조를 기반으로 한 라우팅 방식으로써, React Router 처럼 페이지의 라우팅기능을 제공한다.srcpages \- api \- \_app.tsx 페이지의 역할은 하지 않으나, Next 앱의 모든 페

증분 정적 재생성 이란, SSG 방식으로 생성된 정적 페이지를 일정시간을 주기로 다시 생성하는 기술이다.빌드타임에 생성된 페이지에 유통기한을 설정유통기한이 끝나기 전에는 계속 똑같은 페이지 응답유통기한이 끝난 이후에는 Next서버에서 다시 새로운 페이지를 정적으로 생성

이란 SSR의 단점을 보완하는 사전렌더링 방식으로 빌드타임에 페이지를 사전 렌더링해둔다.SSG에서는빌드타임에 백엔드 서버에 데이터를 요청하기 때문에 데이터의 양이 많아서 응답 속도가 느리더라도 즉,장점 ) 사전렌더링에 많은 시간이 소요되는 페이지더라도 사용자의 요청에는

가장 기본적인 사전 렌더링 방식브라우저 접속 요청이 들어올 때 마다 사전렌더링을 진행페이지 내부의 데이터를 항상 최신버전으로 유지할 수 있음데이터 응답속도가 느려지면, 사용자는 로딩을 기다려야 함루트 페이지 컴포넌트를 서버사이드 랜더링방식으로 동작하도록 만들어 보자 i

사전렌더링 포스트에서 언급하지 않고 넘어갔던 데이터패칭부분을 정리해 보려고 한다.단점) 초기 접속 요청으로 부터 데이터 로딩까지 오랜 시간이 걸림이유 ) 컴포넌트 마운트 시점에 데이터 요청이 이루어지기 때문기존의 리액트앱에서는 FCP가 이루어진 시점 = 컴포넌트가 마운

앞서 발생한 Next.js의 사전렌더링 포스트에서 페이지 이동 전 프리패칭이라는 단어가 끼어든것을 볼 수 있다. 이것은 무엇일까?이란 현재 사용자가 보고 있는 페이지에서, 이동할 가능성이 있는 모든 페이지의 javascript 코드를 사전에 불러놓는 기능이다.예를들어

작년 9월, 팀원들과 새로운 프로젝트를 Next.js를 사용하여 구현해보던 중이었다. 그 때 당시에는 졸업 프로젝트와 학업에 떠밀려 Next.js의 여러 장점을 채 알지 못한채 기존의 CSR로 작동하는 React프로젝트처럼 사용했던 것 같다. 구현하면서도 Image최적

이번주 스터디 주제인 redux로 todolist 만들기를 진행하면서 투두리스트의 각 아이템을 만드는 컴포넌트인 Todo 컴포넌트와, Todo컴포넌트들의 목록으로 이루어진 Todolist컴포넌트를 만들면서 React.memo로 최적화 하는 코드를 알게 되었다.기존에 알

이번 주차에는 Redux를 모듈화하는 방법에 대해 공부해보았다.Todo나 User 처럼 특정 상태에 따라 분리해서 관리할 수 있다.먼저 이전의 User에 대한 경우는 ContextAPI로 관리하고 있기 때문에 투두리스트에 관한 리듀서를 만들어 보았다.만드는 순서는 다음

author: tave web study - 이정수요 문제를 해결하려고(red, green, blue 박스마다 각각 fire 버튼이 있고, 버튼을 누르면 해당 박스의 색상으로 container의 색상들이 모두 변경된다.이를 위해서는 각각의 container들이 (que

React 날짜 선택 input&calendar 컴포넌트 만들기(1) 에서 이어지는 글 입니다.사용자가 입력한 날짜가 올바른 날짜인지 확인한다.? 올바른 날짜의 조건?1\. 인풋값에 들어올 날짜는 이미 목격한 신고에 대해 접수하기 때문에 오늘 날짜보다 이후의 날짜는 들

이전에 편지를 보관하는 서비스인 서함 프로젝트를 진행하면서 다양한 인풋값들을 다룬적이 있었다. 그 중에는 날짜를 입력받는 필드가 있었는데 웹버젼에서는 모달창을 띄워서 입력받았고, Electron.js를 사용하여 만든 데스크톱 어플리케이션에서는 react-calendar

컴포넌트를 잘만든다 -> 유지보수를 용이하게 한다.컴포넌트를 잘 설계하는 방법<해결하고자 하는 문제>재사용 가능한 컴포넌트 만들기변경에 따른 부수효과를 최소화 하기<목표>관심사가 분리된재사용성이 높고 유지보수하기 용이한 컴포넌트 만들기<컴포넌트의 역할>

onClick 이벤트가 발생한 상황에서 event 객체의 event.target과 event.currentTarget의 차이점을 정리하고자 한다.표준은 targetrhk currentTarget이지만, IE에서는 target은 srcElement로 사용되며 curren

contextAPI + styledComponent를 가지고 재사용이 가능한 아코디언 UI를 만들어보자아코디언 UI란 ?모바일/웹에서 콘텐츠를 접어서 페이지길이를 관리할수 있도록 만든 UI이다. 시각적인 복잡성을 줄이고 사용자가 당면한 작업과 가장 관련이 있는 콘텐츠에

useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다.useMemo에서 memo는 memoization을 뜻하는데, 해석하면 '메모리에 넣는다'는 의미이다.컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장