🙌 안녕하세요! 소프트웨어 개발로 생계를 꾸리고 있는 김맥스의 블로그입니다. 생각, 고민, 공부를 정리해 글로 남깁니다. 저에 대해 더 알고싶으시다면 about을 확인해 주세요!

👔 대학 졸업 직전 프론트엔드 개발자 구직 회고

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

⏪ 주니어 프론트엔드 개발자의 2021년 회고

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

🍳 React 개발 환경 구축하며 알게된 것들

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

🪄 Suspense for Data Fetching의 작동 원리와 컨셉 (feat.대수적 효과)

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

⚡️ 브라우저 주소창에 URL을 치면 일어나는 일들

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

🧗 프론트엔드 개발자 대학생의 14개월 회사생활 회고

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

🚀 React Native 모바일 앱 CI/CD 파이프라인 구축기

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

👨🏻‍🍼 레거시를 미워하지 말자

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

🧐 나는 어떤 개발자일까

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

🧶 Redux Saga를 어떻게 써야할까

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

🕰 깃헙 액션 + 쉘 스크립트로 알고리즘 풀이 알림봇 만들기

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

🔩 프론트엔드 개발자의 인프라 공부

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

🎒 React-Query 살펴보기

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

⏪ 대학생 개발자의 2020년 회고

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

⌨️ input 요소 관련 키보드 이벤트 총정리

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

👩🏻‍⚖️ 판례요지 트윗봇 개발 후기

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

🌧 Nuxt로 살펴보는 서버사이드 렌더링의 핵심

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

🛹 console.log 문제 풀이 - 마이크로태스크 큐

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

🧐 TypeScript에 대한 생각들

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

🚧 undefined로부터 소중한 변수를 지키는 방법

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

👔 대학교 3학년 마치고 개발자 구직한 썰

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

🏫 학교 관련 서비스로 개인 개발 프로젝트 시작하기

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

🧪 개인 프로젝트에 Vue 컴포넌트 테스트 적용하기(+Vuex 테스트)

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

📍 스크롤에 따른 DOM 요소 위치(좌표) 얻는 법

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

🤨 function props는 Vue의 안티패턴일까?

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

📦 Create-React-App의 Webpack 기본 설정 살펴보기

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

👉🏻 React 컴포넌트와 this

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

🌴 깃신깃왕(1) - 가장 빨리 git/github 시작하기

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

📥 부수효과 없는 "순수함수" 맛보기

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

⏰ 외대 종강시계 크롬 익스텐션 개발 후기

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

👜 자바스크립트 맵 객체(Map Object)

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

💻 비전공자인 내가 개발을 공부하는 이유

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