Dog foot print

글에 들어가기 앞서. 저는 현재 3년차 웹 프론트엔드 개발자입니다. 2023년은 제가 잘다니던 회사를 그만두고 개인의 자아실현과 안정된 직장을 얻기위해서 고군분투한 해였습니다. 처음에는 과도한 자신감으로 인하여, 면접과 이력서를 제대로 준비하지 않아 지원율 대비 합격률이 매우 낮았습니다. 그러나 면접과 이력서 및 코딩테스트도 갈수록 진화하여 잘 업데이트 되었고 합격률도 높아졌습니다. 능력있으시고 좋은 인성을 가지고 이직을 희망하시는 개발자분들 혹은 지망생분들에게 작은 도움이 되고자 이글을 작성합니다. 현재 구직 시장 상태 2020년 팬데믹으로 인하여, 모든것이 온라인화 자동화되며 투자상황도 매우 좋았기에 스타트업수가 폭증하고 이로인하여 개발자들의 몸값과 수요가 폭증하였고, 덩달아 한국에도 질좋은 부트캠프..

기존 pages와 달리 app은 매우 복잡한 폴더 구조와 파일구조를 가지고 있다. 이는 폴더구조를 이용하여, 다양한 기능들을 제공하려는 노력으로 보이는데, 개인적으로 “폴더구조가 너무 깊어 복잡하고 쓰임이 정해진 파일들을 얼마나 잘 활용 할 수 있을까?” 라는 생각이 든다. Page file 이제 더 이상 파일명을 기준으로 하위 경로를 생성하지 않는다. 하위 경로는 폴더명을 기준으로 생성된다. 이렇게 생성된 page 파일들은 자신이 속한 폴더의 인덱스 경로로 지정된다. 예를 들어 /about/page.tsx 파일은 /about 과 일치하며, /about/more/page.tsx 파일은 /about/more 경로와 일치하게 된다. Props interface Params{ [key in string] : ..

Next.js@v13의 등장 Next.js@v13은 너무나도 많은 변화로 인하여, 많은 프론트엔드 개발자들이 기존 프로젝트 마이그레이션과 변화에 적응하는데, 큰 고통을 받고 있다. 물론 편리하고 좋은 기능들이 많이 추가 되었지만 여전히 일부 신규기능들은 “프로덕트 레벨에서 사용하기에 불안하다”라는 것이 중론인 것 같다. 가장 큰 변화로는 pages 폴더를 이용한 라우팅 방식에서 app 폴더를 이용한 라우팅인데 기존 pages 디렉토리에서 사용되던 레이아웃, API, 미들웨어 등 거의 모든 것들이 변화했다. 특히 기존 getServerSideProps와 getStaticSideProps를 이용하여, 초기 페이지 화면에 필요한 모든 값들을 최상단에서 호출 하는 것과는 달리, server-component를 ..

엄청난양의 보일러 플레이트 코드. redux는 flux-pattern을 이용한 전역 상태관리 라이브러리이다. [React, 라이브러리] react-redux . redux를 사용하기 위해서는 action , reducer, store 의 관리를 위해 반복적인 코드 작성이 필요하다. 새로운 액션을 추가할때 마다, 액션 타입을 정의하고, 액션 생성자 함수를 만들어야 하며, 리듀서에서 해당 액션을 처리해야한다. 아래는 간단한 카운터를 구현한 “리듀서”이다. // Actions const INCREASE = "INCREASE"; const DECREASE = "DECREASE"; const UPDATE = "UPDATE"; const genAction = (action: string, f?: (arg?: T1)..

2차원 좌표 시스템. 우리가 흔히 보는 평면좌표(Cartesian Coordinate System)는 수평방향인 x와 수직방향인y 축으로 나누어져 있다. 두 지점이 만나는 점을 (0,0)으로 두고 이동하는 방향에 따라 각 축의 좌표는 양수가 되기도 하고, 음수가 되기도 한다. 아래는 2차원 좌표계에서 각축의 이동 방향에 따라, 좌표값의 변화를 나열한 예시이다. up : y값이 증가 down : y값이 감소 right : x값이 증가 left : x값이 감소3차원 좌표 시스템 3차원의 좌표시스템은 x와 y축에 이어 Z 축이 수직으로 추가된 형태를 띈다. z좌표의 변화도 x,y좌표와 동일하게 중심으로부터 멀어지는 것과 비례하여 값이 책정된다. 조금 더 쉽게 설명하면 모니터를 중심으로 나에게 가까이 올수록 값..

오늘은 가랑비가 오다말다 오다말다 해서, 실외애견운동장은 갈수가 없었다. 우리는 실내 애견카페 혹은 실내 애견운동장은 되도록이면 가지 않는 편인데, 그 이유는 너무 높은 밀도와 어설픈 실내 인테리어로 아이들이 쉽게 뛰어 놀 수 없거나, 사람이 너무 스트레스인 곳이 많았기 때문이다. 그러나 오늘 간 아크 플래닛(구 어몽더독)은 꽤나 높은 만족도를 선사하였다. 외관 및 주차 외관은 새로 단장한 건물답게 매우 깔끔했고, 왜 있는지 모르는 거대한 캐릭터 동상은 내가 있는동안 치웠기 때문에 이제는 아마 더 이상 볼 수 없을 것 같다. 주차는 꽉꽉채우면 10대정도 할 수 있는 공간이며, 주변에 주차할때가 없는 듯하여, 사람이 몰릴때는 주차가 어떻게 될지 모르겠다. 실내 실내운동장은 모든 체급의 아이들이 같이 놀 수..

nextJs/Image를 storybook에서 사용 할 때. Next.js에서는 import 키워드로 소스 파일로 끌어 올 때 StaticImageData라는 타입으로 전달 받게 된다. 이 타입의 형태는 다음과 같다. interface StaticImageData { src: string height: number width: number blurDataURL?: string } 보통 이 StaticImageData를 이용해서,image태그를 사용하지 않고 next/Image와 함께 사용한다. Next.js/Image는 이미지의 경로를 문자열 혹은 StaticImageData타입을 Props.src로 받기 때문에, 아래와 같이 보통 작성한다. import Image from "next/image"; im..

Memoization이란 ? useCallback, useMemo, React.memo 와 같은 기능에서 사용되는 memo 라는 개념은 파라메터를 기준으로 이전에 리턴한 해당 함수의 결과값을 리턴하는 개념이다. 순수함수는 파라메터가 동일할 때, 리턴값은 언제나 같다”라는 특징이 있다. 이런 특징을 이용해 연산이 오래걸리는 함수가 이전에 동일한 파라메터로 연산한 결과가 있다면 이전 리턴값을 줌으로써 연산에 필요한 시간을 단축할 수 있게 된다. 아래는 버튼을 클릭 할 때 마다 input값을 숫자로 변경해 O(2^n) 의 시간 복잡도를 가지는 fivo 함수의 결과가 출력되는 코드이다. function fivo(n : number) : number{ console.log("FivoStart") function ..