2월 초부터 거의 2달간 진행했던 구직이 끝나고, 입사를 확정한 후 1주일쯤 쉬었습니다. 8개 회사와 채용 프로세스를 진행하며 2번의 온라인 코딩테스트, 4번의 라이브코딩, 5번의 사전과제, 13개 세션의 각종 면접(기술, 팀핏, 임원) 을 거쳤고 쉽지 않은 여정이었습니다.

이번 외대 종강시계 2.0 버전을 만들면서, 신경썼던 것 중 하나가 시맨틱 태그의 사용과 웹 접근성 준수였습니다. 처음 써보는 여러 태그들과 role 속성, WAI-ARIA등을 학습하고, 스크린 리더 디버깅을 병행하면서 프로젝트를 진행했는데요.

2021년은 정신없었습니다. 다양한 일이 있었고 여러가지 공부를 했고, 직장인이었다가 학생이었다가 했습니다. 올해는 전반적으로 좋았다 나빴다 평을 내리기가 힘듭니다. 후회도 많이 되고, 얻은 것도 많은 한 해였습니다. 불편한 상황에 놓인 적도 많고, 깨지면서 배우는 것도 많았던 것 같습니다.

요즈음엔 외대 종강시계의 새로운 버전을 만들고 있습니다. Vue로 개발했던 프로젝트를 React+Typescript로 새롭게 만드는 프로젝트를 진행하고 있는데요. 기존의 보일러플레이트를 사용하지 않고 yarn init부터 시작해서 chrome extension 보일러플레이트를 처음부터 만들었습니다.

올해 4월에 있었던 토스 개발 컨퍼런스(SLASH 21) 세션 중 하나로 토스 데이터 플랫폼에 Recoil과 Suspense를 적용해 복잡한 비동기 로직을 우아하게 구현했다는 박서진 님의 세션을 보았습니다. 시간관계상 상세하게 설명되지 못했던 부분들(대수적 효과, runPureTask 구현체, concurrent mode 등)이 있었는데 이게 제 호기심을 자극했습니다.

최근에 컴퓨터 네트워크 공부를 다시 하면서 “브라우저 주소창에 URL을 치면 일어나는 일을 아는대로 말 하기”라는 웹 개발자 면접 단골 질문에 대해 다시 생각해보게 되었습니다. 해당 질문을 면접에서 받았을 때 어느정도 깊이로 말하는게 좋을까 생각하면서 브라우저가 웹 화면을 띄우는 과정들을 자세하게, 이야기하기 좋게 정리해 봤습니다.

최근 두 곳의 스타트업에서 프론트엔드 개발자로 14개월여의 근무를 마치고 퇴사했습니다. 그리고 이번 학기 다시 복학했습니다. 첫 6개월은 학점을 인정받는 학교 현장실습으로, 나머지 8개월은 시드 단계의 초기 스타트업에서 정규직으로 일했습니다. 이번 포스팅에서 잠깐의 회사생활을 회고합니다.

이전 글 Redux Toolkit과 자체 util 함수로 Redux+Saga 타이핑 줄이기 에서 이어지는 포스팅입니다!

최근 회사 프로덕트의 비동기 요청들을 관리하는 Redux Store, Saga들의 구조를 리팩토링하는데 많은 힘을 쏟았었습니다. 개선의 포인트는 크게 2가지였는데요.

이번에 회사에서 React Native를 사용해 만든 모바일 앱의 CI/CD 파이프라인을 구축해 보았습니다. 고도의 통합이나 테스트 자동화같은건 없고 거의 그냥 배포 자동화 정도만 구현한 상태라서 CI/CD라고 하기엔 좀 거창한 감이 있습니다..ㅎㅎ

지금 다니는 회사에 처음 입사했을 올해 1월, 모든 것들이 다 레거시였습니다. 프론트엔드의 경우 외주 개발로 만들어진 프로덕트였기 때문에 추가적인 확장이 힘들었고, 팀에서는 레거시 프로덕트를 인하우스 개발자들이 만든 프로덕트로 대체하려고 노력 중이었습니다.

앞으로의 기회와 선택을 위해 제가 어떤 개발자이고, 어떤 개발자가 되고 싶은지 생각하고 기록해봤습니다.

앞선 글에 이어 Redux Toolkit을 이용하여 Redux+Saga의 타이핑을 줄이는 방법을 탐구해봅니다. 무료 API인 Cat Facts API로 비동기 요청을 해야 하는 상황을 설정했습니다. 예제 전체는 이 레포지토리에서 보실 수 있습니다.

Redux에서의 비동기 로직 작성을 가능하게 해주는 Redux Saga가 참 잘 쓰기 힘든 기술이라는 생각을 많이 합니다. Saga에 대한 생각도 자주 바뀌었습니다. Saga를 배우고 조금 사용해본 시점에서는 비동기로 불러온 값들을 지금 쓸 것도 아닌데 왜 굳이 다 저장하고, 상태를 하나하나 매겨야 하나 이해를 하지 못하고 Saga를 쓰기 위한 타이핑이 쓸데없이 많다는 생각을 가지고 있었습니다.

깃헙에 제가 풀었던 알고리즘 문제들을 기록하는 레포지토리가 있습니다. 매달 폴더를 만들고 푼 문제의 답안을 저장하는 방식으로 기록하는 레포지토리인데요. Github Actions에서 cron job 설정이 가능하다는 것을 알게 되어, Slack과 연동해 매일/매주 단위로 알고리즘 풀이 관련 알림을 보내는 레포지토리 자동화를 진행해 보았습니다.

요즈음 격무에 시달리는지라 블로그에 글을 쓰지 못하고 있었습니다😭 회사에서 일하고, 집에 와서는 그동안 부족하다 생각을 많이 했던 알고리즘이나 인프라 공부를 하고 있어요. AWS같은 클라우드 컴퓨팅 서비스를 비롯한 인프라는 최근까지도 손에 잡히는 공부는 아니었습니다. 서비스 맨 앞단에서 일을 하고 있는 프론트엔드 개발자라서 그렇다고 생각했었는데요.

React-Query는 React앱에서 비동기 로직을 쉽게 다루게 해주는 라이브러리입니다. 그동안 제가 React로 개발할 때 가장 많이 써왔던, Redux와 Saga를 이용해 비동기 관련 로직들을 관리하는 것과 꽤나 다른 관점에서 비동기 로직들을 바라보고, 유용한 기능을 많이 제공하고 있어 매우 흥미로웠습니다.

혼란한 시국 속에서도 2020년은 개인적으로 꽤나 많은 변화들이 생겨서 여러모로 기억에 많이 남을 것 같은 한 해가 되었습니다. 개인 프로젝트를 여러개 진행했고, 블로그를 시작했고, 첫 번째 구직과 회사 입사도 경험했습니다. 2020년을 간단히 돌아보려 합니다.

최근에 회사에서 특정 키 입력이 안되게 입력과 동시에 바로 value 속성값에서 지워야 하는 기능을 지닌 input element를 구현해야 할 일이 있었습니다. <input/>과 관련한 모든 이벤트 요소들을 찾아보면서, 이벤트들의 발생 여부와 순서들을 정리해보면 어떨까 생각했습니다.

올해 7월 말부터 9월까지 약 두달동안 개인 프로젝트로 판례요지를 자동으로 트윗해주는 판례요지 트윗봇이라는 특이한 앱을 만들었습니다. 서비스의 서버와 클라이언트를 모두 빌드해보는 풀스택 프로젝트는 처음으로 시도해보았는데요. 판례요지봇을 개발하면서 느낀 점들을 정리해보았습니다.

Next나 Nuxt같은 SSR 라이브러리들이 이제는 널리 사용되는 것 같은데, 동작 원리를 비롯해서 프리랜더링이나 하이드레이션같은 용어를 다룬 한국어 포스팅은 잘 찾지 못했습니다. 그래서 회사에서 주로 사용하는 스택인 Nuxt를 통해 어떻게 SSR 라이브러리들이 SPA를 서버사이드 렌더링 시키는지에 대해 그 탐구의 결과를 포스팅으로 정리해보려 합니다.

이번 여름 구직 면접에서 콘솔로그 순서 문제 몇 개를 마주쳤습니다. .js파일 하나를 주고 실행시키면 어떤 것부터 출력되냐는 문제였는데요. 이벤트 루프와 비동기 프로그래밍이 무엇인지를 이해하면 쉽게 풀 수 있는 문제부터, 거기서 약간 더 나아간 내용을 물어보는 문제도 있었어요.

요즘 타입스크립트의 문법을 다시 복습중이고, 개인 프로젝트도 타입스크립트로 진행하고 있습니다. 원래 타입스크립트가 정적 타이핑 할 수 있어서 좋다! 요즘 대세다! 이런 느낌만 가지고 공부를 시작했는데, 제네릭이나 클래스같은 JS와는 좀 다른 문법을 접하고 사용해보니 몇가지 생각이 들어 정리해 봅니당.

자바스크립트는 특이하게도 값이 할당되지 않은 변수에 undefined를 할당합니다. 그래서 자바스크립트 객체에 포함되지 않는 키를 통해 객체 프로퍼티에 접근하면 undefined를 뿜습니다. 뭔가가 할당되어 있긴 하기 때문에 이 변수에 접근했다는 것 자체로 에러를 내지 않고 돌아는 갑니다.

지난 6월 말, 대학교에서 3학년 2학기를 마치고 웹 프론트엔드 개발자로 구직을 진행한 결과를 회고합니다. 결과부터 이야기하자면 4개 회사에 원서를 내고 3개 회사에서 면접을 진행했으며 면접을 본 3개 회사에서 모두 오퍼를 받았습니다.

이 포스팅은 제가 재학 중인 대학교를 다니는 학생들을 타겟으로 한 서비스에 대한 간단한 회고글입니다. 프로젝트를 소개하고, 학교 단위로 작은 서비스를 만드는 개인 프로젝트을 진행하면서 깨달은 점이나 어떻게 하면 더 잘할 수 있을지 생각해본 지점들을 적어보려 합니다.

테스트 주도 개발(TDD)에 대해 공부하는 중입니다. 그래서 빌드하고 유지, 보수중인 외대종강시계 크롬 확장앱 프로젝트에 테스트 코드를 붙여보는 연습을 했습니다. 먼저 프로젝트에서 가장 중요한 컴포넌트라고 할 수 있는 종강 시간을 표시하는 시계 컴포넌트, MainClock.vue에다가 테스트 코드를 붙여보았는데요. 이 경험을 공유하고자 합니다!

이 포스팅에서는 DOM요소의 수직 좌표를 얻는 법에 대해 알아보겠습니다. 프론트엔드 라이브러리를 사용하여 앱을 만들다 보니, DOM을 자꾸 잊어버리는 것 같아 복습 중입니다. 앱의 기능을 구현하면서 특정 이벤트가 발생하면 스크롤바를 특정 엘리멘트의 위치로 이동시켜야 할 때가 있는데요.

React에서 상위 컴포넌트의 state를 하위 컴포넌트에서 업데이트하기 위해서는 해당 state를 갱신하는 함수를 상위 컴포넌트에서 함께 props로 넘겨야 합니다. 이 방식이 Vue에서도 가능할지 궁금했습니다. Vue에서는 하위 컴포넌트에서 event를 발생(emit)시키고 상위 컴포넌트에서 이를 감지해 특정 로직을 수행하는 방법을 사용하죠.

이 포스팅에서는 eject를 실행해 Create-React-App의 기본 웹팩 설정이 어떻게 되어있는지 살펴보고자 합니다.물론 웹팩 설정 파일은 매우 길고(주석까지 다 합치면 700줄 정도) + 저의 짧은 지식으로(…)모든걸 다 설명할 수는 없다는 판단 하에 전체적인 흐름과 중요한 설정 프로퍼티들만 짚을 예정입니다.

리액트 클래스 컴포넌트를 작성할때는 this를 신경써야 합니다. 여러 리액트 튜토리얼을 따라해 보면 상태값(state)나 속성값(props), 컴포넌트에 선언한 메서드를 참조하기 위해 this를 사용하고 있음을 직관적으로 이해할 수 있습니다. 이 포스팅에서는 컴포넌트를 이루는 프로퍼티들의 this 바인딩이 정확히 어떤지에 대해 정리해봅니다.

깃을 사용하는 방법을 요점만 콕콕 찝어서 한번 정리해보려 합니다! 깃 명령어 일일히 공부하실 필요 없이, 이 포스팅대로 처음부터 끝까지 따라해보시면 혼자 깃을 사용하고, 깃헙 계정 관리하시는데는 문제가 없을 거에요!

리액트를 배우면서 상태값(state)은 불변해야 한다고 배웠고, 리덕스를 배우면서 순수함수라는 말을 처음 접했던 것 같네요. 이 개념이 무엇인지 숙지하고 앱을 만드는 것과 그렇지 않은 것은 차이가 있습니다.

작년 12월부터 약 한달간 개인 프로젝트로 외대 종강시계라는 크롬 익스텐션 웹 앱을 만들었어요. 코로나 바이러스 때문에 늦춰진 개강날짜에 맞춰 3월 중순쯤에 릴리즈를 하고, 교내 커뮤니티에 홍보를 했습니다. 생각보다 많은 분들이 다운받아 주셔서 놀랐어요!🙏

자바스크립트로 앱을 개발할 때 꼭 사용하는 자료형이 바로 객체(Object)일텐데요. 값을 키와 값으로 묶어 저장하고 조회하는 기능은 어떤 앱을 개발할 때나 쓰게 되는 경우가 많습니다. 이번 포스팅에서는 자바스크립트 객체를 좀 더 뺀-씨하게 사용할 수 있는 ES6 문법인 맵 객체에 대해 알아보려 합니다.

지킬 블로그가 쓸만해질 정도로 커스텀을 끝냈다고 생각해서, 테스트 포스팅을 지우고 뭘 하나 써봐야겠다고 생각했습니다. 진부하지만 나름 개발 블로그의 첫 시작이니까, 왜 인문학 전공자인 본인이 개발을 시작하게 되었는지 러프하게 정리해 보려고 해요.