이 글은 next를 사용한 팀 프로젝트에서 인스타그램 크롤링을 하기 위해 어떤 방법들을 사용했고 어떻게 실패했는지의 기록이다. 팀 프로젝트에서 자연환경을 위한 챌린지를 진행하고, 챌린지 인증해 보상을 얻을 수 있는 웹 서비스를 기획했다. 챌린지 인증 방식을 의논 중 유저가 인증 사진을 인스타그램에 올리고 해당 url을 입력하면 url에서 사진과 해시태그를 크롤링해 DB에 저장시키고, 불러와서 보여주는 아이디어를 선택했다. 파이썬으로 크롤링해 본 경험이 있어 어렵지 않게 구현할 수 있을 거라 생각하고 진행했다. 찾아보니 node.js 기반으로 크롤링을 도와주는 여러 라이브러리가 있었다. 대표적으로 cheerio, poppeteer가 있었는데 cheerio를 먼저 사용해서 크롤링을 시도했다. const re..

리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요? 불필요한 렌더링을 줄여야한다. PureComponent나 React.memo, useCallback이나 useMemo를 통한 메모이제이션으로 중복 계산을 방지하고 렌더링 성능을 향상시킬 수 있다. 코드스플리팅이나 Lazy loading 및 이미지 최적화 등 다양한 방법이 있고 상황에 맞게 사용해 성능을 개선할 수 있다. tanstack-query에 대해 들어봤나요? 리액트 쿼리는 리액트에서 데이터 관리를 위한 상태 관리 라이브러리입니다. API 호출, 상태 캐싱, 데이터 업데이트 및 동기화, 오류 처리 등을 처리하는 간편하고 직관적인 방식을 제공합니다. 또한 보일러플레이트 코드를 제거할 수 있어서 개발자에게 큰 편의를 제공합니다. 서버상태로는 로딩,..

리액트에서 JSX 문법이 어떻게 사용되나요?⭐️ JSX의 기본 구조: JSX는 JavaScript 내에서 HTML과 유사한 문법을 사용합니다. JSX 엘리먼트는 각각 하나의 컴포넌트를 나타냅니다. JSX에서 자바스크립트 표현식 사용: JSX 내에서 자바스크립트 표현식을 사용하기 위해 중괄호 { }를 사용합니다. 이를 통해 동적 데이터를 JSX에 삽입하거나 JavaScript 함수 및 연산을 실행할 수 있습니다. 조건부 렌더링: JSX 내에서 조건부 렌더링은 삼항 연산자나 조건문(if-else)을 사용하여 구현할 수 있습니다. 반환하는 엘리먼트 제한: JSX 함수나 컴포넌트는 하나의 최상위 엘리먼트로 감싸져야 합니다. 두 개 이상의 엘리먼트를 반환할 때는 반드시 부모 엘리먼트로 감싸야 합니다. 왜 stat..

props와 state의 차이는 무엇인가요? state는 컴포넌트 내부에서 관리되는 데이터로 값이 변경되었을때 리렌더링이 되고 props는 상위컴포넌트에서 자식 컴포넌트로 값을 전달해주는것으로 읽기 전용으로 전달되기 때문에 자식 컴포넌트에서 해당 값을 변경할 수 없다. pure component에 대해 설명해주세요. setState가 호출될 때 항상 render함수가 호출된다. 렌더링 여부를 제어하기 위해 sholdComponentUpdate 함수를 이용할 수 있지만 sholdComponentUpdate 함수를 정확하게 정의하지 못하는 경우 렌더링이 필요한 경우에 안되는 버그를 만드는 실수를 하기 쉽다 이럴 경우 PureComponent를 이용할 수 있다. PureComponent는 props나 stat..

Virtual DOM 이 무엇인지, Virtual DOM 작동 원리에 대해 설명해주세요. 가상돔이란 실제 DOM과 구조가 완벽히 동일한 복사본 형태입니다. 객체(object) 형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것 보다 훨씬 더 빠르게 조작을 수행할 수 있습니다. 처음 웹을 실행하면 가상 DOM이 생성됩니다. 사용자가 동작 또는 데이터 변경으로 인해 웹의 상태가 변경되면 실제 DOM을 직접 수정하지 않고 상태가 update된 새로운 가상 DOM을 생성됩니다. 이후 가상 DOM과 새로운 가상 DOM간의 차이를 비교하고 변경된 부분을 실제 DOM에 Batch Update로 반영합니다. ⭐️React를 사용하는 이유에 대해 말씀해주세요. React는 가상 DOM을 사용하여 실제 DOM조작을..

공통의 컴포넌트에선 전달받는 Props의 타입이 두 가지였고 그 데이터가 다시 각기 다른 컴포넌트로 전달될 때 두 가지 타입 중 하나의 타입을 전달해야 했는데 type narrowing이 필요했다. 내가 지정한 interface의 타입이라 타입추론이 안됐다. 이때 type assertion을 이용해 보내는 데이터의 타입을 지정해 줬다. type assertion은 개발자가 컴파일러에게 변수나 표현식의 타입을 명시적으로 알려주는 것을 말한다. 각괄호 문법과 as키워드를 사용할 수 있지만 as키워드를 사용한 방식이 현대적이고 JSX와도 호완성이 좋아 권장되는 방법이다. 주의할 점은 type assertion을 남용하면 오히려 타입 안정성이 감소할 수 있다. 컴파일러가 올바른 타입을 추론하지 못하게 하거나, ..