2월부터 본격적인 인턴 취준에 들어갔고, 현재는 토스 증권 FE 어시스턴트로 자금세탁방지 시스템 화면을 개발하고 있다. 아무래도 정규직이 아니고 계약직이다 보니 취준을 멈출 수가 없기에, 토스에 입사하기 전까지 이력서, 면접 등 취준 했던 과정에 대해 회고해보려 한다.1️⃣ 이력서 준비강사로 근무했을 때는 이력서 준비를 거의 안했다. 강사는 프리랜서라서 일반 회사에 지원하는 과정과는 많이 다른 것 같다. 왠지는 모르겠는데 유독 IT 계열은 이력서 형식을 자유로 요구하는 경우가 많은 거 같다. 그리고 사람들이 디자인도 신경써서 이력서를 만든다고 느꼈다. 그러나 나는 디자인에 대한 감각이 전혀 없다 ... 0에 수렴하는 듯 .. 그래서 구글에 이력서 작성하는 법 등 서칭을 하였고, 생각보다 이력서를 넷상에 ..

카카오페이 채용연계형 개발자 인턴십[Front-End 모집]에 지원하고, 서류 합격 후 코딩 테스트를 보게 되었습니다. 서류 전형에 대한 얘기와 간략하게 코딩 테스트 후기에 대해 남기고자 합니다. 제가 알기로는 카카오페이에서 정말 오랜만에 신입 개발자 모집 공고를 올린 것으로 알고 있습니다. 훗날, 카카오페이뿐만 아니라 카카오 계열 인턴에 지원하실 때 이 글이 조금이나마 도움이 되길 바랍니다. 1️⃣ 채용 절차이번 인턴십 모집의 채용 절차는 다음과 같습니다.서류 접수: 2/17 (월) ~ 2/23 (일)서류 합격자 발표: 2/26 (수)과제 전형: 3/1 (토) ~ 3/2 (일)과제 전형 합격자 발표: 3/5 (수)인터뷰: 3/7 (금) ~ 3/25 (화)최종 합격자 발표: 3/26 (수)입사: 4/7 ..

TanStack-Query는 비동기 데이터를 효율적으로 상태 관리 할 수 있도록 강력한 여러 기능을 제공하는 라이브러리다. 그 중 대표적인 훅 중 하나로 useQuery 가 있다. useQuery는 서버의 데이터를 조회하는 훅으로, GET 요청에 사용된다. 이번 글에서는 서버의 데이터를 추가, 삭제 등 조작하는 훅인 useMutation 에 대해서 알아본다.mutation의 사전적 정의는 변경, 변이이다. 따라서, useMutation 은 흔히 POST, DELETE, PUT 등 서버의 데이터를 변경하는 요청에 사용된다. 또한, 해당 훅을 이용하면 낙관적 업데이트를 손쉽게 구현할 수 있다. 직접 서버를 생성하고 todo 앱을 만들어 하나하나 살펴보자. 1️⃣ 프로젝트 생성전체 디렉토리 구조는 다음과 같다..

네이버 부스트캠프 수료 후, 1월까지 리팩토링 기간을 거치고 현재 취준에 들어갔습니다. 개인적으로 희망하는 기업들이 아직 공고가 열리지 않아, 이 기간 동안 실무적 역량을 키워보면 어떨까 싶어서 몇몇 기업에 인턴으로 지원을 하였습니다. 그 중 하나가 넛지헬스케어고 서류전형 통과 후 코딩 테스트를 보게 되었습니다. 참고로, 넛지헬스케어는 캐시워크라는 서비스를 운영하는 회사입니다. 캐시워크 - 돈버는 만보기 | 캐시워크 - 돈버는 만보기걷기만 해도 돈이 되는 신기한 만보기 캐시워크를 사용해보세요!cashwalk.com 넛지헬스케어 코딩 테스트 후기에 관해 검색되는 글이 전혀 없어서 어떤 식으로 출제되는지 전혀 감을 잡지 못한 채 테스트에 임했습니다.훗날 넛지헬스케어 코딩 테스트에 응시하시는 분들께 도움을 드..

TanStack-Query 는 다양한 기능을 제공하며, 그 중 무한스크롤 기능도 제공한다. TanStack-Query에서 제공하는 useInfinityQuery 훅을 사용하면 쉽게 무한스크롤 기능을 구현할 수 있다.이번 글에서는 TanStack-Query를 이용하여 무한스크롤을 구현하는 과정을 정리해보겠다.  1️⃣ Mock Data외부 API나 서버를 사용하기 번거로우니 클라이언트 자체에서 Mock Data 를 만들어 사용하자.// mockData.jsconst mockData = Array.from({ length: 100 }, (_, i) => i + 1).map( (num) => `${num} 데이터입니다.`);export function fetchMockData(pageParam) { con..

대게, 프론트엔드에서 상태관리 하는 데이터를 두 가지로 구분할 수 있다.1. 일반 데이터특징:앱 내부에서 바로 생성되거나 사용되는 데이터.사용자 입력, UI 상태(모달 열림/닫힘, 탭 선택 등), 선택된 아이템 등.비교적 단순하며, 비동기 작업이 필요하지 않음.useState, useReducer 훅을 이용하여 상태 관리2. 비동기 데이터특징:외부 API, 데이터베이스 등에서 가져오거나 저장하는 데이터.일반적으로 서버와 통신해야 하므로 비동기 작업(Promise, async/await)이 필요함.단순할 경우 useEffect, fetch 를 통하여 상태 관리복잡하면 SWR, TanStack Query 등 라이브러리를 이용하여 상태 관리프론트엔드에서 외부 API를 사용하여 데이터를 받아오는 경우는 일반적이..

흔히, 디자인 패턴이라 하면 객체지향 언어의 원조인 자바에서 많이 활용된다. 디자인 패턴의 종류는 매우 많으며 쓰임새 또한 다양하다. 하지만 자바라는 언어 자체가 백엔드 언어이다 보니, 자바스크립트로 디자인 패턴을 공부하여도 프론트엔드 코드에 어떻게 적용시킬지 늘 고민이다.  이번 포스팅에서는 프론트엔드에서도 유용한 디자인 패턴 중 하나인 옵저버 패턴에 대해 알아본다. 또한, 옵저버 패턴을 적용하여 상태 관리 로직을 구현해보겠다. 1️⃣ 옵저버 패턴옵저버 패턴은 크게 주체(Subject)와 옵저버(Observer) 사이의 관계를 설계하는 패턴이다. 먼저, 각각 무엇을 뜻하는지 알아보자. 주체(Subject)옵저버들을 관리하는 객체이다. 옵저버는 원하는 주체와 결합할 수 있으며 주체는 결합된 옵저버들을 관..

현대 프론트엔드 프레임워크를 대표하는 기술은 단연코 리액트일 것이다. 물론, 리액트는 공식적으로 라이브러리지만 사실상 프레임워크라 해도 어색하지 않다. 일부 시각에서는, 바닐라JS보다 리액트를 사용했을 때의 장점이 부분 렌더링이라고 한다. 전체를 리렌더링 하는 것이 아니라 상태가 변경된 컴포넌트만 리렌더링 하는 것이 장점이라 한다. 그런데 필자의 생각은 조금 다르다. 실제로, 바닐라JS도 얼마든지 변경된 부분만 리렌더링이 가능하기 때문이다. 즉, 일부분만 리렌더링 하는 것은 리액트의 장점이라고 말하기 어렵다고 생각한다. 그렇다면 리액트를 사용했을 때의 장점이 무엇일까 ? 바닐라JS는 컴포넌트 내부의 상태가 변경되면, 직접 코드로 DOM을 조작하고 렌더링해야 된다. 하지만, 리액트는 직접 DOM을 조작할 ..

과거에는 서버에서 HTML을 완성하고 클라이언트에 넘겨주어, 클라이언트는 받아온 HTML을 그대로 렌더링 하는 SSR 방식으로 웹개발을 하였다. 그러나, JS의 발전과 함께 브라우저 단에서 직접 컴포넌트를 만들어 렌더링을 하고, 서버는 단지 REST API를 통해 브라우저에게 렌더링의 필요한 데이터만 보내주는 형식으로 웹개발 방식이 변화하였다. 즉, SSR 방식에서 CSR 방식으로 점차 변화한 것이다.  좀 더 구체적으로 정리하면 다음과 같다.SSR서버에서 완성된 HTML 파일을 브라우저에게 넘겨준다.과거에는 JSP, PHP 등과 웹서버 소프트웨어인 Apache, Nginx 등을 이용하여 SSR 방식을 이용하였다. 최근에는 웹서버 기능을 하는 Node.js의 Express.js 파이썬의 장고와 같은 프레..