ALL

인프콘 2023 짧은 후기 및 개인적인 인사이트

인프콘에 다녀왔다. 사진을 좀 못찍었는데 오후에 슬렁슬렁가서 4개의 세션을 들었다. 들은 내용을 바탕으로 간단한 인사이트를 정리해보려고 한다. 1. 김영한님의 김영한님은 인프런에서 자바 스프링분야 1타 강사로 유명하시다고 알고있다. 한 번도 강의를 들어보진 않았으나… 이번 세션을 한 줄로 요약하면 ‘기술에 대한 학습과 비즈니스에 대한 이해를 동시에 가져가야 한다.’ 임. 사실 어떻게보면 당연하고 기본적인 내용이긴 한데, 기술에 대한 열정이 너무 큰 나머지 비즈니스를 등한시하는 개발자가 있다고 함. 내 경우에 빗대어 보았을 때 나도 좀 그런 경향이 있는 것 같기도 하다. 물론 회사에서 진행하는 여러 사업들이 있기에 현재 하고 있는 것에 더 집중하려고 노력한 것도 있지만.. 아무튼. 비즈니스의 이해가 왜 중..

# 4 / 함께해요, 리팩토링 😇 + 사담 겸 푸념;;

TDD, Cleancode with JavaScript 카테고리의 4번째 글이다. 지난 글에서, 자동차 경주 게임이라는 과제를 진행중이라고 작성했는데 어제 1차 과제 PR을 올리고 리뷰를 받을 수 있었다. 개인적으로 어떤 태스크를 진행할 때 이렇게 글로 정리하고, 기록을 남기면서 했던 경험이 좋았어서, 이번 리팩토링 과정을 이렇게 기록해보려고 한다. (셀프 대화..?) 내 사고의 흐름을 추적할 수도 있고, 어디서부터 문제가 시작되었는지 알 수 있다는 부분이 좋다. 그리고 좀 더 집중도 되고, 나중에 아.. 이랬었구나 기억할 수도 있고, 블로그에 적는거니 나름 구조화도 시킬 수 있고.. 주절주절 사이드 이펙트 관리 이번 과제에서 내가 가장 헤맸던 부분은 1. 구현을 어떻게 해야하는가 2. 어떤 범위로 테스..

# 3 / 일급 컬렉션이 머에영? (우적우적 🍿)

현재 진행중인 (아직도..) 자동차 경주 게임 PR을 날리고, 드디어 리뷰를 받게 되었다. (벌써 이틀 지났어..) 리뷰 도중 일급 컬렉션에 대한 언급이 나왔는데, 이게 뭔지 잘 몰라서 정리해보려고 함. (들어는 본 것 같은데...) 상황은 아래와 같다. export class CarMover { #raceCars constructor(cars) { this.#raceCars = this.#getRaceCars(cars) } #getRaceCars(cars) { return cars.map((carName) => new Car(carName)) } moveCars() { return this.#raceCars.map((car) => { const score = makeRandomNum() car.move..

# 2 / 어떤 과정으로 문제를 해결해 나갈 수 있을까.

오늘은 두 번째 라이브 세션이자 OT 를 제외하고는.. 과제를 진행하며 참여한 첫 라이브 세션이었다. 첫 주차 과제로 '자동차 경주' 게임을 만들게된다. 과제는 STEP1, STEP2, STEP3 으로 나뉘어 있는데 이전 기수에서는 화면단을 가지고 cypress 로 테스트를 하는 방식이었다면, 이번엔 콘솔을 기반으로 jest 로 TC 를 짜는 방식이다. 개인적인 기록이니까.. 그냥 양식에 구애받지 않고 자유롭게 남겨보겠음. 사실 첫 과제 PR 을 이번 라이브세션 전까지 올리고 싶었는데, 생각보다 어려웠고 또 TDD 를 적용하면서 해야한다고 생각하니 어디서부터 시작해야할지 몰라 더더욱 어려웠던 것 같다. 다른 분들의 PR 을 보면 MVC 같은 패턴 구조까지 적용해서 깔끔하게 만드셨는데 나는 '입력을 어떻게..

# 1 / OT. TDD 란 무엇인가.

NEXTSTEP 에서 진행하는 Tdd,Cleancode with JavaScript 5기를 수강하게 되었다. 사내 동료 프론트 개발자분이 이 과정을 수강하면 실력 폭풍 성장 100% 보장한다고 하셔서 내돈내고 듣는다. ㅋㅋ 더 많이 얻어가려면 스스로 열심히 해야되니까 과정에 참여하는동안 간단하게라도 기록을 남겨보려고 한다. 오늘 라이브 세션은 OT 여서, 이 과정에서 무엇을 얻어갈 수 있는지 또 어떤 방식으로 진행되는지에 대한 내용 위주로 진행되었다. 이 과정은 TDD 방식을 자바스크립트로 경험해보는 것이 주된 내용이다. TDD는 Test Driven Development 그러니까 테스트 주도 개발이라는 개발 방법론이다. TDD 정말 좋다, 도입해야한다, 공부해야한다 말은 많이 들어봤지만 이를 실무에서 ..

[회고] 2023년 상반기 회고 (feat. 취업 회고)

들어가는 말. 잘한 점은 끊임없이 무언가를 했다는 점. 아쉬운 점은 그 무언가를 과연 적절한 수준과 난이도로 지속했는지 의문이 남는다는 것. 와~ 취업했다. 지나간 일을 잘 기억하지 못한다는 것은 좋은 걸까 나쁜 걸까... 분명 부트캠프를 수료하고 취업이 안되었던 5개월간 아.. 무척 힘들었던 것 같은데 지금 잘 생각이 나지 않는다. 역시 인간은 망각의 동물. 지난 기간은 '조급함'과 '하지만 난 나의 길을 가겠어'의 아슬아슬한 줄다리기였다. 결국은 그 둘 사이의 어딘가로 타협해 현 회사에 입사를 했다. 아직 입사 한 달이 채 안되었으므로 회사 얘기는 나중에 하고, 오늘은 상반기 회고라는 목적에 충실해보려고 함. 이번 상반기 목표는 "상반기 내 취업" 이었고 그 목표는 달성할 수 있었다. 취준 기간동안..

[Web] Next.js 로 PWA(Progressive Web App)를 적용해보자!

온보딩을 진행중인데, Next.js 를 사용한 PWA 페이지를 만드는 태스크를 받게 되었다. 이에 진행을 하면서 PWA 란 무엇이고 어떻게 만들 수 있는지 알아보며 정리를 해보려고 한다. PWA 의 정의 Progressive Web App 이란 쉽게 말하면 웹 기술로 네이티브 앱과 같은 유저 경험을 제공하는 기술이다. (전혀 쉽지 않은데?) 다시 말하면, 웹을 만드는 기술(Html, CSS, JS) 로 네이티브 앱처럼 홈 화면에 아이콘을 추가하거나, 푸시 알림을 보내는 등의 기능을 하게끔 만들 수 있다. (실행은 브라우저에서...) 브라우저에서 보안상의 이유로 접근하지 못하는 시스템 하드웨어 등에도 접근이 가능하다는 장점이 있다. 왜 사용하는가 웹 기술로 네이티브 앱처럼 만드는 것의 장점을 가지고 있기 ..

Notion API 를 연동해 블로그를 만들어보자 -2

주의! 정보성 글 보다는 삽질 기록에 가깝습니다. API를 연동한 뒤에 데이터를 불러오고, 화면에 표현하는 작업을 했다. 내용 자체는 간단한데 Next13 공식문서도 읽으면서 찾아보고, 또 여러가지 적용 방법을 고민하다보니 생각보다 시간이 오래걸렸다. 우선 글 목록을 불러오는데에는 성공했기 때문에, 이 블로그 아이템을 클릭했을 때 상세 페이지로 이동할 수 있도록 Link 컴포넌트를 적용해주었다. 원래 하고 싶었던 것은 예전에 Next12에 있는 getStaticPaths 처럼 미리 static paths 를 slug 로 만들어 둔 뒤 이를 통해 각 상세 페이지를 만드는 것이었는데, 나는 글 상세 페이지에서 데이터 요청을 위해 id 값이 필요했기 때문에 Notion DB 상에 설정해두었던 slug 문자열과..

Notion API 를 연동해 블로그를 만들어보자 -1

지금까지 개발을 하면서 꼭 해보고 싶었던 것이 바로 직접 기술 블로그를 만드는 일이었다. (매우 멋져...!) Tistory 나 벨로그처럼 이미 만들어진 서비스가 확실히 사용하기도 편하고 또 노출도 많이 되지만, 실제로 내가 운영을 하면서 꾸준히 유지보수를 할만한 프로덕트를 하나 만들고 싶었다. 내가 제일 좋아하고 자주 하는게 기록 남기는 일이기도 하니까, 그러면 블로그가 딱 적당하다고 생각해 진행하게 되었다. 기술 스택 선정 Next.js 먼저 SEO에 유리한 Next.js 를 사용하기로 했다. 하꼬 블로그지만 많이 노출이 되면 좋은거니까..! 그리고 이번에 Notion API를 연동하면서 알았는데, Next.js 에서 제공하는 api 디렉토리를 통해 엔드포인트를 만들 수 있어서 유용하게 쓸 수 있었다..

[React] Hooks의 동작 원리 파악하기 (useEffect 를 중심으로)

이전에 useEffect 훅을 사용할 때 발생했던 에러 때문에 동작 원리가 궁금해 공부를 했었는데, 오늘은 그 내용을 조금 더 깊게 정리하고 기록으로 남겨 공유하고자 한다. (나를 꽤 괴롭게 했던... 카운터 컴포넌트와 그 에러에 대한 기록) 대부분의 내용은 리액트의 공식 문서 (구버전 및 신버전)을 참고하여 작성되었다. useEffect 는 무엇이고, 어떤 상황에서 사용할 수 있는가? 공식문서에 따르면, Effect 훅을 사용하면 함수형 컴포넌트에서 Side Effect를 발생시킬 수 있다고 한다. 일반적인 의미에서 Side Effect는 부수 효과, 즉 원래 목적과 다르게 외부 상태를 변경하는 등, 변화를 발생시키는 효과 (혹은 부작용) 을 의미한다. 함수형 프로그래밍의 기본 개념인 '순수 함수' 란..