분류 전체보기

2023.09 - 2023.12 , 중고나라 웹 개발팀에서의 4개월   이라는시간 동안 인턴십을 수행하고 나서, 정규직 전환이 이루어져 2024.02.01에 신입 웹 개발자로 입사를 하게 되었다.  2024년도 중고나라의 핵심 프로젝트인 셀러지원센터를 웹 개발팀 리딩의 자리에서 이끌어가면서 느꼈던 부분들을 회고로 기록하고자 이 글을 작성하였다. 셀러 지원센터의 시작한 달의 공백기 이후 입사하게 되었지만, 인턴의 경험이 있었기 때문에 그간의 중고나라 웹 개발팀의 작업 내용들을 수월하게 따라올 수 있었다. 올해의 중고나라 핵심 프로젝트는 셀러 지원센터와 J쿠폰 이었다.  물론 두 가지 프로젝트에 관심이 있었지만, 웹 개발팀 전체가 비슷한 수요를 가지고 있었기에 우리는 공정하게 사다리 타기를 진행해서 어떤 프..

✨ 들어가기 코드에 대한 설계를 자신할 수 있다는 것은 소프트웨어 설계를 잘했다는 이야기이다. 그렇다면, 소프트웨어 설계는 어떻게 잘할 수 있는 것일까...? 바로 이를 도와주는 것이 계층형 설계이다. 지금부터는 계층형 설계가 무엇이고, 어떻게 활용하면 되는지 차근차근 살펴보자. 💡 계층형 설계란..? 위의 예시처럼 소프트웨어를 고치고, 읽고, 테스트하고, 재사용하기 쉬운 코드를 만드는 것이 바로 계층이다. 사실, 각 계층을 정확히 구분하기는 어렵지만 계층을 구분하기 위한 다양한 변수를 찾고, 찾은 것을 기반으로 어떻게 이를 활용해야 하는지 알아내야 한다. 좋은 설계를 위한 신호를 찾는 방법을 입력과 출력으로 나눈 것이다. 입력 함수 본문 계층 구조 함수 시그니처 길이 화살표 길이 함수명 복잡성 응집도 ..

💡 준비 2023년 상반기는 파트장으로 가득 차있었다면, 하반기는 4-2라는 막학기만 남은 상태였다. 누군가에게 개발의 재미와 실력을 쌓게 해주는 사람으로 달려왔기에, 이번에는 배움의 위치에서 성장해나갈 수 있는 시간들을 보내고 싶었다. 그렇게 여러 기업들에 부딪혀보며 취준으로 달려나가는 중. 세종대 학사 공지에서 ICT 학점 연계 프로젝트 인턴십을 발견하게 되었다. 총 3군데에 지원이 가능했고, 프론트엔드 직무에 관심이 있었기 때문에 직무 적합도를 우선으로 살펴보았다. 이후에는 내가 관심있는 도메인의 영역인지, 해당 기업을 가게 된다면 어떤 기여를 할 수 있을지 고민하며 기업 서류를 작성하였다. 그렇게 코테를 무사히 진행하고 나서, 기업 면접에는 중고나라로부터 연락이 왔다. 긴장되는 마음으로 그동안 공..

우선 , Next.js는 기본적으로 모든 페이지를 pre-rendering한다. 즉, 모든 페이지의 HTML를 미리 생성하고, 생성된 HTML은 자바스크립트 코드와 연결되어 유저와 페이지가 상호작용 할 수 있는 interactive한 페이지를 만들어낸다. 이것이 hydration이다. 🔥 문제상황 중고나라 웹사이트를 개발하며 처음으로 sentry를 들여다보며 자주 발생하는 error를 확인했다. Hydration failed because the initial UI does not match what was rendered on the server. 오류 문구 그대로 서버에서 그려지는 HTML 페이지와 클라이언트에서 그려지는 HTML 페이지가 다르기 때문에 문제가 발생하는 것이다. 즉, Pre-Rende..

✨ 들어가기 우선, 뒤죽박죽 섞여있는 회사 코드 안에서 비즈니스 로직을 분리하기 전에 프론트엔드 개발자로써 view와 business logic이 어떻게 다른지 명확하게 알고 있어야 한다. 📍 View 우선, view는 기본적으로 HTML을 보여주는 UI이며 사용자 이벤트를 통해 HTML을 업데이트 하는 것이다. 즉, view는 단순히 주입받은 정보를 보여줄 뿐이다. 여기서 주의할 점은 해당 과정안에 business logic과 관련된 부분이 있다면 view가 아닌 비즈니스 로직으로 작동하게 된다는 것이다. 다른 말로 비즈니스 로직이 개입되지 않아야 컴포넌트를 재사용할 수 있다는 것이다. 📍 View Logic isValid, errorText와 같은 UI/UX를 개선하는 코드 예를 들면, 비밀번호를 6..

💡 들어가기 현재 개발 중인 중고나라 기능에서 useMutaion을 내부에서 호출하는 커스텀 훅을 만들게 되면서 중첩 구조가 발생하는 문제가 발생했다. 그래서 지난 화요일에 수강하였던, [원티드] 프리온보딩 챌린지 12월 에서 알게 되었던, Function의 액션/계산/데이터로 리팩토링하기를 적용하고자 해당 기능개선 작업을 진행했다. 📍 문제상황 거래 하기 전, 상품 상세에서 채팅하기 or 안전거래 버튼을 눌렀을때, 일일 채팅방 생성 횟수 제한에 걸리게 되면 안내 모달을 띄워야 했다. 그러나, 두 버튼의 비즈니스 로직이 달랐다. 커스텀 훅으로 api 결과값을 확인했던 로직에서 클로저 문제가 발생해 중첩 모달을 제어하지 못하는 문제가 발생되었다. 버튼 작동 방식은 아래와 같았다. 채팅하기 채팅방 생성 ap..

📍들어가기 리액트는 함수형 프로그래밍이다. 하지만, 이에 맞게 기능을 개발하지 않고 함수를 만들게 된다면 의존성이 깊은 함수를 구현해내 의도하지 않은 버그를 마주할 가능성이 높아진다. 그래서 [원티드]프리온보딩-12월챌린지를 수강하면서 알게 된 액션/계산/데이터로 구현하기를 정리해보려 한다. ✨ 액션 / 계산 / 데이터 함수형 프로그래밍에서 구분해야 될 것은 단 3가지이다. 액션 👉 실행 시점과 횟수에 의존, 즉 부수효과가 있는 순수하지 않는 함수 ex) 이메일 보내기, 데이터 베이스 읽기 단점 외부 세계에 영향을 줄 수 있음, 테스트 시 로직과 외부 세계를 함께 재현해야 하는 문제 발생 실행하기 전까지 어떤 일이 발생하는지 알 수 없음 계산 👉 입력으로 출력을 계산, 순수함수 ex) 최댓값 찾기, 이메..

🌼 들어가기 모던 리액트 : Deep Dive 책을 정독하던 도중, useState의 lazy initialization에 대한 원리를 이해하고 싶었다. 콜백 함수로 넘기면 처음 초기화일때만 실행되는것일까...? 내부 구조가 어떻게 되어있길래, 값과 함수, 콜백함수의 양상이 다르게 발생되는 것일까...? 그냥 그렇구나..하기에는 너무 이해하고 싶었다. 이를 위해서 React 패키지의 구조를 살펴보며 useState를 불러오는 react 코어를 알아야 했다. 따라서 이번 글에서는 리액트의 패키지 구조를 살펴보고자 한다. ✨ React 패키지 구조 리액트 패키지는 총 5가지로 나눌 수 있다. 1️⃣ react 코어 컴포넌트 정의와 관련된 패키지이며, createElement( ) 와 다른 패키지의 모듈을 제..

💡 들어가기 어떤 경우에 useQuery와 useMutation 사용하는지, 또 타입 지정의 방식은 어떻게 이루어지는지 살펴보면서 기능개선을 한 작업을 바탕으로 해당 내용을 공유하려 한다. ✅ useQuery react 개발자라면 모두가 알고 있는 fetching, caching, 서버 데이터와의 동기화를 지원하는 라이브러리일 것이다. useQuery의 데이터 타입은 아래와 같다. export declare function useQuery (queryKey: TQueryKey, queryFn: QueryFunction, ..

📍 들어가기 이번에는 리액트 Deep Dive의 첫번째 장을 톺아보며 부족한 부분을 메꿔보려고 한다. 간단한 요약보다는 중요하거나 미처 간과했던 부분들을 짚어보고자 한다. ✅ 자바스크립트의 또 다른 비교, Object.is == 👉 같음을 비교하기 전에 양쪽이 같은 타입이 아니라면, 비교할 수 있도록 강제로 형변환을 진행한다. === 👉 강제 형 변환을 진행하지 않으며, Object.is와 달리 개발자가 기대하는 방향으로 비교되지 않을 수 있다. 5 == '5' // true Object.is(5, '5'); // false Number.NaN === NaN// false Object.is(Number.NaN, NaN)//true ❗️다만, 주의해야 할 점은 객체 비교에서는 차이가 없다는 것이다. Obj..