전체 글

입사한 지 2주째인 현시점에서 주절주절

이번 글의 제목은 "입사한지 2주째인 현시점에서 주절주절"이름하여, 주절주절 시리즈가 되겠다 !! (퇴사하고 주절주절편은 여기로) 시작. 2024. 06. 17 월요일 날씨 맑고 더움 어쩌구 저쩌구 ...  오늘은 2023년 12월까지 근무를 마치고 퇴사를 하고서 약 5개월간 내 자신이 정말 고생했다고 느껴질 만큼 열심히 이직 준비를 했던 지난날을 뒤로하고, 이직에 성공한 내가 새로운 회사에 입사한 지 딱 2주가 되는 오늘이다. 난 퇴사를 하고 본격적으로 이직하기 전까지 남들이 "요새 이직이 너무 힘들다."라고 말할 때, 나는 그 사람들이 눈이 높아서 취직을 못하는 줄 알았다. 하지만 내가 직접 채용시장에 놓여지니 "요새 이직이 너무 말도 안되게 꽁꽁 얼어붙어 힘들어 죽겠다"라고 곡소리가 절로 나더라...

[Next.js] Next.js 14에서 react-select를 사용해보자 (feat. 트러블 슈팅)

이번에 프로젝트를 진행하던중에 next.js 14버전에서 react-select를 쓰려는데 참고할만한 글이 그렇게 많지 않아서 정보도 공유하고 나도 나중에 다시 볼 겸 포스팅을 해본다 ! 시작은 똑같다. npm i react-select 해당 명령을 통해 설치하면 기본 셋팅은 끝. "use client"; import React from "react"; import Select from "react-select"; export default function SelectBox() { const areaOptions = [ { value: "전체", label: "전체" }, { value: "강동구", label: "강동구" }, { value: "강서구", label: "강서구" }, ]; return ..

[Next.js] Extra attributes from the server : ... 에러 해결

Next 14를 사용하는 프로젝트를 하다가 문제에 부딪혔다. "use client"; import React, { useId } from "react"; import Select from "react-select"; interface OptionData { value: string; label: string; } interface Props { area?: boolean; status?: boolean; options: OptionData[]; } export default function SelectBox({ area, options }: Props) { const placeholder = area ? "지역 선택" : "완료/미완료 여부"; const id = useId(); return ( ); }..

[Next.js] useSelectedLayoutSegment와 useSelectedLayoutSegments에 대해 알아보자 !

❗️useSelectedLayoutSegment ✅ 클라이언트 컴포넌트에서만 사용할 수 있는 훅으로 'use client'필수 ✅ 현재 active 한 segment의 값을 (/ 가 포함되지 않은) 반환 ✅ Header Footer와 같이 글로벌하게 사용되는 레이아웃 컴포넌트에서 이를 활용하여 조건부 처리가 가능 경로 url return app/layout.tsx /segment segment app/test/layout.tsx /segment null app/layout.tsx / null ❗️useSelectedLayoutSegments ✅ useSelectedLayoutSegment와 동일하게 클라이언트 컴포넌트에서만 사용할 수 있느 훅으로 'use client'필수 ✅ 현재 active 한 seg..

[Next.js] Next.js의 기본적인 정보에 대해서 알아보자

❗️클라이언트 컴포넌트가 될 수 있는 상황들 ✅ 훅을 쓸 때 ✅ onclick같은 이벤트 리스너를 쓸 때 ✅ 동적으로 UI를 업데이트 해야할 때 등등 ..? ❗️폴더명 대괄호와 소괄호의 차이 Next.js에서 괄호 ( )와 대괄호 [ ]로 묶인 폴더 이름은 라우팅 및 동적 경로와 관련된 특정 의미를 갖는다. ✅ 소괄호 ( ) 안의 폴더 이름 ]app 폴더 내부에 폴더를 정의하길 원하지만 route 경로설정은 되지 않기를 원할 때 폴더 이름을 소괄호( ) 로 생성할 경우 route 경로 설정이 되지 않는다. 소괄호를 사용하면 주소창에 관여를 하지 않기 때문에 특정 그룹을 만들어서 사용하면 좋다 ! 예시를 보여주자면, 해당 이미지에서 처럼 afterLogin과 beforeLogin이라는 주소창에 관여하지 않..

[React.js] TDD(Test-Driven-Development)방법론 사전

이번 포스팅은 여태 했던 포스팅과는 달리 React Testing Library와 jest, vitest에 대해 학습하며 얻은 지식들을 모두 한 곳에 모아서 포스팅 할 예정이라 학습에 대한 순서가 조금 뒤죽박죽일 수는 있다. 바로 시작해보자 ! ❗️ getByText()와 queryByText()의 차이 React Testing Library를 사용한 테스트 맥락에서 'getByText' 및 'queryByText'는 모두 React 구성 요소에서 렌더링된 요소를 쿼리하고 상호 작용하는 데 사용되는 메서드이다. 그러나 요소의 유무를 처리하는 방법에는 차이점이 있다. getByText와 queryByText는 텍스트 내용을 기반으로 요소를 찾는 데 사용되는 공통점을 가지고 있지만, getByText는 정의..

[React.js] TDD(Test-Driven-Development) 방법론에 대해서 알아보자

❗️ TDD란 ? TDD란 Test Driven Development의 약자로 '테스트 주도 개발'이라고 한다. 반복 테스트를 이용한 소프트웨어 방법론으로, 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현한다. ❗️ TDD를 사용하는 이유 ✅ 초기 버그 감지 기능을 구현하기 전에 테스트를 작성하면 개발 프로세스 초기에 버그와 문제를 파악하는 데 도움이 된다. 이렇게 하면 나중에 디버깅할 때 상당한 시간과 노력을 절약할 수 있습니다. ✅ 코드 신뢰도 TDD는 개발자에게 안전망을 제공하여 코드베이스 변경으로 인해 기존 기능이 중단되지 않도록 보장한다. 수정 시 테스트를 실행하여 모든 것이 여전히 예상대로 작동하는지 빠르게 확인할 수 있다. ✅ 튼튼한 객체 지향적인 코..

퇴사한지 3주가 조금 넘어간 현시점에서 주절주절

오랜만에 주절주절이다.주절주절이라는 게시글들은 그냥 쓰는 글이다. 미래의 내가 과거의 내 글을 보면 재밌더라고 ? 주절주절을 시작하기 앞서 이번 글의 해당 이미지는 내가 상당히 재밌어하는 이미지이다.내 블로그의 대문에도 사용 되고있는 이 이미지를 사용하게된 계기는 전 회사에서 아주아주 슈퍼 주니어 (신입 + 입사 초기) 때 짰던 코드를 약 1년?정도 경력을 쌓은 시점에서 코드를 리팩토링을 하고있는데 동료 백엔드 개발자가 이미지를 툭 던져주더라 보는 순간 아주 정확히 내가 속에서 "이건 코드들이 아니라 쓰레기 들이다"라고 속삭였던 나의 속마음과 일치하는 이미지라 박장대소를 하며 저장했었던 이미지이다. 여튼. 오늘은 퇴사를 한지 벌써 3주가 조금 넘어가는 시점이다.2023년 12월 31일부로 정식적으로 퇴..