어서와, 개발은 처음이지?

영상으로 보기 - https://youtu.be/8QtXKioQbl4 1. 들어가기 전에nextjs 13.4부터 본격적으로 도입된 app router와 react server componets 이후로 위젯 주도 개발 방법론 (https://alexei.me/blog/widget-driven-development/) 에서 언급하는 api wrapper layer가 하던일을 next fetch가, 무려 server 에서만 실행되는 코드로 동작할 수 있게 되었는데요.  이로인해 이제는 react query나 swr같은 라이브러리를 코드 베이스에서 제거하더라도 (어느정도 추가 구현에 대한 불편함은 있을 수 있지만) 이런 방법론을 구현할 수 있게 되었습니다.번들 사이즈로부터 훨씬 더 자유로워지면서요! 2. 코드를..

영상으로 보기 - https://youtu.be/aH4U6bfi_Ds 1. 옵저버 (이론이 지루하시다면 3번 단락으로 넘어가세요!) 옵저버 패턴은 상태(state)와 상태 관찰하는 관찰자(observer)라는 개념을 통해서 상태 변화가 있을때 각 관찰자가 인지하도록하는 디자인 패턴입니다. 프론트엔드 개발자라면 옵저버 패턴이라는 이름을 들어본적 없어도 상태가 변할때 어떤 동작이 수행된다는 개념은 이미 익숙하실텐데 dom에 event listener를 달아두어 dom의 상태 변화를 관찰하고 listener를 통해 기능을 수행한다거나, 모던 프론트엔드 세계에서 상태 변경에 따라 화면이 변화되는 것이 그 예가 될 것 같습니다. 이 철학을 간단하게 구현해보면 function createObserverState()..

영상으로 보기 - https://youtu.be/eSLrZbPHgoI 1. 팩토리 패턴 고전 자바 시절부터 내려오는 디자인 패턴 중 하나인 팩토리 패턴은, 모듈 내에서 객체 생성에 관련된 로직을 직접 구현하지 않고 객체 생성 역할을 대신 수행하는 layer를 두어 모듈과 객체 간 의존성을 낮추고 확장성을 높이는 패턴이라고 할 수 있습니다. 간단하게 예를 들면 class Human { void travel(String type) { if(type.equals("땅") { new Car().depart(); } else if(type.equals("바다") { new Boat().depart(); } else { new Airplane().depart(); } } } class Cargo { void del..

개요 git blame 명령어를 사용하면 라인별로 누가 어떤 커밋을 남겼는지 히스토리를 볼 수 있는데, vscode에서 git lens를 사용하면 git blame 기능을 쉽게 사용할 수 있습니다. 이 기능을 사용하면 개발중에 history를 추적하기 좋은데, 최근에 prettier rule을 바꾸면서 전체적으로 code style을 변경하게 되었습니다. 이로인해 아래 이미지처럼 수많은 diff가 생겨나게됐는데요. (왼쪽 노란 부분이 다 diff!) 사실 이런 코드 스타일 규칙 일괄변경 사항은 개발 시 큰 관심사가 아닌 내용인데, 이 변경 사항으로 히스토리가 오염(?)되고 기존 커밋이 가려져서 확인하기 번거롭게 만드는 불편함이 생겼습니다. 이번 글에서는 blame 시 이런 불필요한 커밋 히스토리를 가리..

mac에서 docker를 사용하려면 통상 docker desktop을 설치해야하는데, 22년 2월부터 기업용 유료화 정책이 적용되었습니다. 때문에 대안으로 podman을 선택했고, 간단한 설치 과정 및 docker 명령어처럼 사용할 수 있도록 symbolic link를 설정해보겠습니다. 1. 설치 brew 명령어로 podman을 설치합니다 $ brew install podman 설치가 완료되면 podman 명령어를 사용할 수 있음을 볼 수 있습니다. $ podman -v podman version 4.1.0 2. 가상머신 설정 podman은 QEMU기반 가상머신의 지원을 받아야하기 때문에 가상머신을 설정합니다. 상세 내용은 https://podman.io/getting-started/installatio..

다음 이직 때 복기하기 위해 2020년 이직기를 기록합니다.. 1. 서류 전형 (프로그래머스 Dev Matching) 카엔은 프로그래머스에서 진행하는 FE개발자 Dev Matching으로 지원했고, JD도 적합하고 도메인 지식까지 일치했기 때문에 사실상 5개 기업 중 메인으로 생각하고 준비했습니다. Dev Matching은 서류 + 코딩 테스트로 진행됐고 Dev Matching 결과가 나오기까지 9일 소요됐습니다. 2. 코딩 테스트 합격 안내와 함께 코딩 테스트에 대한 안내 메일을 받았습니다. 익히 알려진대로 해커랭크를 통해 진행되며, 제 경우에는 알고리즘 3문항 + 프론트엔드 과제 1문항이 있었습니다. 메일 수신일로부터 7주일 이내에 응시하면 되고, 시간제한은 알고리즘 문항 각 1시간 ( * 3문항) ..

다음 이직 때 복기하기 위해 2020년 이직기를 기록합니다.. 1. 서류전형 재직중이던 회사 근처를 기준으로 채용공고를 알아보던 중 커머스 도메인에 관심도 있고, JD도 잘 맞아보여서 카카오 커머스에 지원했습니다. 전형 일정은 당시를 기준으로 서류전형 - 코딩테스트 - 1차 면접 - 2차 면접 순으로 진행됐으며, 작년 상반기에 영입 사이트에서 진행한 Front End 개발자 영입 공고를 통해 지원했습니다. 지원 후 서류 결과가 나오기 까지 13일이 소요됐습니다. 2. 코딩 테스트 서류 합격 메일과 함께 바로 코딩 테스트 안내가 포함되어있습니다. 코딩 테스트는 과제형으로, 4문제 중 1문제를 선택하여 5일 내로 제출하면 됩니다. 제출 마감일 기준으로 결과 통보까지 17일이 소요됐습니다. 3. 1차 면접 코..

다음 이직 때 복기하기 위해 2020년 이직기를 기록합니다.. 1. 서류 전형 (프로그래머스 Dev Matching) 가비아는 프로그래머스에서 진행하는 FE개발자 Dev Matching의 5개 기업 중 하나로 지원했습니다. Dev Matching은 서류 + 코딩 테스트로 진행되었습니다. 서류 합격 연락까지는 8일 소요됐습니다. 2. 1차 면접 이 채용과정은 1차 면접에서 탈락했는데, 1차 면접은 면접관 4 : 면접자 2로 진행됐으며, 30분정도로 종료됐습니다. 저, 그리고 함께 입장한 면접자는 주 스택이 react였는데, 프로그래머스에서 봤던 JD의 내용과는 다르게 vue 위주로 서비스 구성이 되어있던 모양이였습니다. vue 스택 기술 보유자를 특정해서 찾고 있던 것인지 저희 둘에게 오는 질문 자체가 그..

다음 이직 때 복기하기 위해 2020년 이직기를 기록합니다.. 1. 서류전형 재직중이던 회사 근처를 기준으로 채용공고를 알아보던 중 경험을 쌓기에 좋아보이고, JD도 잘 맞아보여서 NHN Service에 지원했습니다. 전형 일정은 당시를 기준으로 서류전형 - 전화 인터뷰 - 1차 면접 - 2차 면접 순으로 진행됐으며 작년 상반기에 영입 사이트에서 진행한 Front End 개발자 영입 상시 공고에 지원했고, 서류합격 메일을 수신하기까지 23일 소요됐습니다. 2. 전화 인터뷰 서류합격 후 전화 인터뷰 일정을 정하기 위해 연락이 왔습니다. 편한 시간으로 협의할 수 있는 분위기니 본인 일정, 컨디션을 체크하여 협의하시면 되겠습니다. 협의된 시간에 인터뷰 진행을 위해 전화 연락이 오고, 군더더기 없이 면접관님의 ..

이번 글에서는 github repository에서 발생하는 이벤트(이슈, pull request 등록, push 등)와 jenkins의 빌드 알람(notification)을 slack에서 받을 수 있도록 하겠습니다. 1. Github App 추가 slack에서 github app을 추가하면 repository에서 발생하는 이벤트를 쉽게 구독할 수 있습니다. 우선 슬랙에서 app 관리 메뉴를 실행해봅니다.다음으로 검색창에 github을 입력하여 아래 이미지와 같은 Github app을 슬랙에 추가해줍니다. 그러면 Github app과 slack workspace 연결에 관련된 설정화면이 나오는데, 여기서 3가지 옵션을 선택할 수 있고 각 항목은 아래와 같습니다. - All Public Channels : ..