Homile

사용자가 로그인해서 사용할 수 있는 블로그를 실제 배포해서 운영까지 해보려고 제작 중 일반 텍스트를 입력해서 블로그를 쓰는 대신 개발자에 특화된 블로그이므로 github에 올리는 것처럼 마크다운으로 작성할 수 있게 react-markdown 라이브러리를 적용 중 확인한 오류이다.

오류 코드

아래와 같이 오류 코드가 나왔다. 새로운 페이지에 방문했을 경우, 강제 새로고침을 했을 경우 로컬스토리지에 theme라는 객체의 값이 할당되어 있지 않아서 생긴 오류이다.

해결방안으로는 오류 코드에도 나와있듯이 localStorage에 값이 없을 경우의 예외처리를 추가해주면된다.

코드를 작성할 때 예외처리는 중요한데 이것을 놓친것을 지금에서야 확인했다. 아직 프론트화면 구성 단계에서 맞이했기 때문에 다행이라고 생각한다.

- error src/app/recoil/state/themeState.ts (8:31) @ localStorage
- error ReferenceError: localStorage is not defined
  at getTheme (./src/app/recoil/state/themeState.ts:13:26)
  at eval (./src/app/recoil/state/themeState.ts:22:14)
  at (sc_client)/./src/app/recoil/state/themeState.ts (/Users/homile/Desktop/Projects/NextJS-Blog/nextjs-blog/.next/server/app/write/page.js:1778:1)
  at __webpack_require__ (/Users/homile/Desktop/Projects/NextJS-Blog/nextjs-blog/.next/server/webpack-runtime.js:33:42)
  at eval (./src/app/recoil/utils/Theme.tsx:10:75)
  at (sc_client)/./src/app/recoil/utils/Theme.tsx (/Users/homile/Desktop/Projects/NextJS-Blog/nextjs-blog/.next/server/app/write/page.js:1789:1)
  at __webpack_require__ (/Users/homile/Desktop/Projects/NextJS-Blog/nextjs-blog/.next/server/webpack-runtime.js:33:42)
  6 | export const getTheme = (): ThemeEnums => {
  7 |  // 로컬스토리지 theme의 값을 추출
> 8 |  const theme: string = String(localStorage.getItem("theme"));
   |                ^
  9 | 
 10 |  // theme가 없을 경우 0 === ThemeEnums.DARK
 11 |  if (theme === ThemeEnums.DARK) {

수정 전 코드

import { atom } from "recoil";

// type
import { ThemeEnums } from "@/app/types/enum/themeEnum";

export const getTheme = (): ThemeEnums => {
  // 로컬스토리지 theme의 값을 추출
  const theme: string = String(localStorage.getItem("theme"));

  // theme가 없을 경우 0 === ThemeEnums.DARK
  if (theme === ThemeEnums.DARK) {
    return ThemeEnums.DARK;
  }

  return ThemeEnums.LIGHT;
};

export const themeState = atom<ThemeEnums>({
  key: "themeState",
  default: getTheme(), // 로컬스토리에서 가져온 값을 바로 사용
});

수정 후 코드

import { atom } from "recoil";

// type
import { ThemeEnums } from "@/app/types/enum/themeEnum";

export const getTheme = (): ThemeEnums => {
  // 로컬스토리지 theme의 값을 추출
  if (typeof window !== "undefined") {
    const theme: string = String(localStorage.getItem("theme"));

    // theme가 없을 경우 0 === ThemeEnums.DARK
    if (theme === ThemeEnums.DARK) {
      return ThemeEnums.DARK;
    }

    return ThemeEnums.LIGHT;
  }

  return ThemeEnums.LIGHT;
};

export const themeState = atom<ThemeEnums>({
  key: "themeState",
  default: getTheme(), // 로컬스토리에서 가져온 값을 바로 사용
});

위와 같이 type of window !== "undefined"를 추가하여 없을 경우의 예외처리를 해주면 해결되는 간단한 문제이다. 사소한 실수하나가 프로젝트를 망칠 수 있기 때문에 조금더 코드를 작성하는 것이 중요하다고 생각했다.

앞으로 작성 페이지를 마크다운으로 변경하고, 백엔드 스키마를 작성한 뒤 연동하는 과정만 하면 12월 안에 작게나마 배포할 수 있을 것 같다.
배포는 CloudFlare, DB는 MongoDB를 사용하여 배포할 생각이다.

10월에 퇴사하고 11월까지 한동안은 못했던 공부와 개인적인 일을 정리하는 시간을 가졌다.

최대한 많은 강의를 보고 프로젝트를 기획하며 다시 취업을 위해 준비하고 싶었지만 해낸게 별로 없는 것같다....

12월부터는 시간 계획표를 세워서 조금더 구체적으로 준비를 해야겠다.

10월 11일에 회사의 사정으로 권고사직을 받고 실업급여를 받기 위한 서류를 정리하고, 인수인계 자료를 작성하고 전달하는 작업을 진행했다. 

실업 급여를 타기위한 조건과 서류들이 은근히 많이 있었고, 강의도 시청해야했다. 강의 내용은 실업 급여를 지급받을 때 해야하는 일과 하지 말아야 하는 일에 대해서만 적혀있었다.

인수인계 자료를 작성하는데 운영하는 내용을 다른 사람이 볼 수 있도록 최대한 자세히 노션에 기록하고, 파일들을 정리하여 대표님께 전달하는 작업이었다. 함수 하나하나 알려주는 내용을 담고 싶었지만 9개월간 작업한 내용이 방대했고, 스타트업의 여건상 빠른 개발을 목표로 진행했기 때문에 간단한 함수들은 제외하고 컴포넌트를 재활용할 때 유의할점 필요한 인자값들에 대해 정리하고 컴포넌트가 어떤것인지 정리하는 작업을 했다.

그뒤로는 현 시점 프론트엔드 개발자 주니어 취업시장을 분석하는 시간을 가졌다. 

내가 첫 취업을 하기 전에는 React, Javascript가 대부분이었는데 현재는 Next.js와 Typescript가 기본 베이스로 알고 가야하는 것이었다. 전 회사에서 Next.js로 홈페이지를 제작하고 SEO를 설정하여 실 방문자수를 늘리는 작업을 했었기 때문에 이력서에 잘 녹아내야 할 것 같다. 또한, 이전에는 React Native를 사용한 앱개발이 많이 보였었는데 Flutter가 대부분 시작을 장악하고 있었기 때문에 Flutter에 대해서도 학습해야 함을 느끼게 되었다.

이렇게 시장을 분석했을 때 내가 부족한 부분은 Typescript와 React Native, Flutter와 같은 앱개발 부분이었다. 그리고 요즘은 풀스택개발자를 더 뽑는 추세라고 느꼇기 때문에 풀스택으로 기획, 디자인, 개발을 한 프로젝트를 진행해봐야 겠다고 생각했다.

이처럼 많은 것을 넘어야 다시 취업할 수 있을 것 같았고, 취업을 했을 때에도 회사에 민폐가 되지 않고 한명의 팀원, 개발자로서 회사와 팀에 도움이 되는 개발자가 되기 위해 학습할 동기부여를 갖게되었다.

우선 내가 해야할 일들을 정리해보았다.

1. 이력서 수정

2. 경력서 작성

3. 취업공고 확인

4. CS 및 개발 지식 학습

5. Next.js v13, Typescript, nodejs, express 등과 같은 것을 사용한 프로젝트 개발

6. 알고리즘 문제풀이

10월에는 이력서, 경력서를 작성하는 시간으로 대부분을 할애했고, 취업공고는 하루 한시간정도 확인하고 CS 및 개발 지식 습득과 기술면접을 위해 학습했던 것 같다.

쏘카 프론트엔드 개발자를 뽑는다는 얘기를 듣고 서류를 접수하고 코딩테스트를 봤지만... 아쉽게도 탈락했다.... 코딩테스트는 많은 문제를 풀어보고 사고하는 방식을 가지고 문제를 세세하게 분석하고 예외처리를 잘 할 수 있도록 하는것이 답인것 같다.

11월에는10월에 접수한 SQLD 자격증 시험이 11월18일에 있었기 때문에 대부분을 SQL을 학습하는데 시간을 할애했다. SQL의 필요성을 느겼던 것으로는 프론트엔드 개발자 이지만 실무에서 SQL을 확인해야하는 일도 간혹 있었는데 이때 확인할때 시간이 다소 소모됐던것이 있어서 이번 기회에 학부생때 배웠던 SQL을 조금 더 심화적으로 학습하는 시간을 가졌다. 결과는 12월 8일에 임시로 나온다고 한다.

끝나고 나서는 우아한형제들에서 새로 출시한 '우아한 타입스크립트 with 리액트' 책을 보면서 Typescript와 실제 사용하는 코드, 우아한형제들에서 개발자가 개발하는 방법등과 같은 내용을 알 수 있다고 하여 하루 2시간씩 책을 보고 있으며, 원래 프로그래머스 Level 2,3을 하루 한문제 풀고 오답을 작성하는 시간을 가졌었는데 문제의 유형은 다양하지만 유형별 문제수는 적었기 때문에 백준 실버 4부터 차근차근 다시 하루 2문제 이상씩 풀어보려 하고 있다. 이때, 이전과는 다르게 한번 풀고 끝나는 것이 아닌 리팩토링 하는 과정을 가지며 조금더 클린코드를 작성하고 실행시간을 줄일수 있도록 코드 리팩토링을 하고 있다.

이제 남은 연차를 다 사용하게 되면 10월 11일부로 퇴사가 되게 되는데 남은 기간동안 앞으로 어떻게 취준기간을 가질 것이며 어떠한 기술을 습득할 것인지에 대해서 생각해보는 날이 되었다.

우선은 이력서를 먼저 작성을 하는 것이 1순위로 생각했다. 현재 하반기 공채가 많이 없는 상황이지만 프론트엔드 개발자를 뽑는 곳들이 많이 적어진 것을 알 수 있지만 그래도 공채가 나왔을 때 바로 접수를 할 수 있도록 8개월간의 회사 경험을 토대로 이력서를 수정하는 작업을 진행해야 한다.

사실 이력서 수정은 매번 회사의 Fit에 맞게 작성해야 겠지만 큰 틀만 작성해두면 이후에 수정은 간단하게 할 수 있을 것이라 생각한다.

8개월 경력을 가지고 프론트엔드 개발자로서 이직을 하는 것에 대해서도 많은 생각이 들게 되었다. 위에서 말한대로 AI가 많아지며 기획서를 작성하거나 화면을 디자인하면 React, Nextjs, javascript등의 코드를 작성해주고 이를 백엔드 개발자가 API 연동만 하면 개발이 끝나는 상황이 있기 때문에 프론트엔드 개발자의 수요가 많이 적어졌다는 것을 알게되어 아직 8개월차 주니어 프론트엔드 개발자기 때문에 백엔드, 데브옵스, PM과 같은 길로 변경을 해야하는가에 대한 고민이 많아졌다....;ㅅ;

하지만, 나는 내가 계획한 커리어를 위해서 우선 프론트엔드 개발를 시니어 수준까지 끌어올리고 PM, PO, 풀스택과 같은 개발자의 커리어를 쌓아나아가기로 결정했다. 컴퓨터공학과를 다닐 때에는 백엔드, 앱, AI 개발등을 4년간 나눠서 배우고 졸업한 뒤 프론트엔드 개발자로 나아가기 위해 1년더 학습을 진행하고, 8개월간 회사에서 경험한 프론트엔드 개발을 쉽게 포기할 수 없었고, 아직 AI가 완성형이지 않는 지금 시점이 미래의 커리어를 위해서 프론트엔드 개발자로서 나아갈 수 있는 시기라고 생각한다.

이를 위해서는 다른 개발자들과는 차별점이 있도록 어떻게 성장해 나갈수 있는지 고민하고 실천하는 것이 나의 관문이라고 생각한다.

퇴사 후 첫 글

프론트엔드 개발자로서 첫 근무를 하게 되었던 곳을 8개월만에 퇴사하게 되었고, 앞으로 더욱 성장해서 좋은 개발자가 되기위해서 노력해 나가기 위한 첫 글이 될 것 같다..!
회사를 다니면서 개발적 지식과 소통하는 방법 등 많은 것을 배울 수 있었고, 회사의 성장을 위해 많은 시간을 투자하여 홈페이지 개편, 프로젝트 출시와 같은 성과를 이루었다. 그 과정에서 내가 부족했던점과 잘하는 것이 무엇인지 확실히 알게되었다.

내가 부족했던 점은 마감일이 다가올수록 시간에 쫓겨 간단한 오타, 오류 같은 것을 놓치는 것이 가장 큰 단점이라고 생각했다. 그래서 나는 나만의 체크리스트를 만들어서 버그가 나면 체크리스트를 토대로 하나하나씩 체크하여 버그를 해결하는 능력을 길렀다. 앞으로는 어떤 버그가 생기더라도 체크리스트를 따라서 해결할 수 있을 것이라 생각한다. (물론 체크리스트가 없어도 해결할 수 있도록 더욱 노력할 것 이다.)

내가 잘했던 점은 주관적으로 판단하지 않았고, 다른분들의 객관적인 시점으로 알 수 있었다.
이전에 회사에 취업하기 전에는 나의 주관적인 생각으로는 팀프로젝트를 진행했을 때 같이 버그를 해결하면서 코드를 하나하나 꼼꼼히 체크하는 것이라고 생각했다. 하지만, 이는 회사를 들어와서 혼자 개발하게 되었을 경우에는 단점이 되어 버린다는 것을 알게 되어서 다른분들이 말씀해주신 것으로 내가 잘했던 점을 적어본다.

다른분들이 내가 개발하면 작업속도가 빠르다고 말씀해주셨다. API가 나오면 바로 테스트를 진행할 수 있는 환경을 만들어주고, 배포까지 기간을 맞췄던 점에서 손이 빨라서 작업속도가 빠른 것 같다라는 말씀을 해주셨다.

생각해보니 이전에 팀 프로젝트를 진행했을 때에도 위와 같은 말을 들었던 점이 있다는 것이 생각났다.

부족했던 점과 잘했던 점을 합쳐서 빠르고 오류가 없는 남이 봤을 때 바로 이해할 수 있는 코드를 작성하는 것을 목표로 학습하며 더욱 좋은 개발자가 되도록 노력해야겠다.

앞으로의 계획

한달간(추석이후)은 공부를 하며 프로젝트를 진행하며 나의 개발적 성장 수치를 더욱 올려 한달뒤에는 다른 회사로 이직할 수 있도록 할 것이다.

프로젝트는 NextJS, React-query, NodeJS, express, mongoDB를 사용해서 간단한 블로그를 만들생각이다. 이 블로그에는 회원가입, 로그인과 같은 기능을 추가하여 나만 사용하는 블로그 페이지가 아닌 회원이 가입해서 사용할 수 있는 블로그를 만들어볼 생각이다. 어떻게 보면 풀스택 개발자로 가는 것 처럼 보일 수 있을 것이다.

하지만, 나는 풀스택으로 가기위해서 공부하는 것이 아니라 다음 회사에 취업했을 때 백엔드 개발자와의 소통을 더욱 잘하기 위한 과정이라고 생각한다. 내가 백엔드에 대한 지식을 더 쌓아둔다면 화면에 필요한 데이터를 요청할 때 이유를 더 잘  설명할 수 있을 거라고 생각하기 때문이다. 

대학교 4년간 배웠던 것이 JAVA, Spring, SQL 기반으로 백엔드를 학습했었기 때문에 NodeJS를 사용해서 작업하는 것은 조금 원활하지 않을까 생각한다.

회사에서 메인 서버에 배포를 진행하는 데 개발한 기능을 테스트 서버와 로컬에서는 잘 동작하는 것을 확인 후 메인 서버로 배포를 진행했는데 동작하지 않는 문제가 발생했다.

천천히 코드를 살펴보고 난뒤 이유는 null 값에 대한 처리를 해주지 않았던 문제였다....

너무 급하게 프로젝트가 진행되고 있다보니 3일에 2가지 기능을 구현해야하는데 디자인 -> 기능 구현 순으로 진행하고 처음 구현해보는 기능이다 보니 조금 여유가 없어서 놓쳤던 것 같다... ;ㅅ;

사실 급하다는 것은 핑계일 수 있다. 내가 조금만  더 열심히 자세히 체크 했더라면 생기지 않았을 문제이다. 
다음에는 배포하기 전에 더 유의해서 진행해야겠다. 

2월에 입사하고 부터 블로그와 Github에 소홀해 져버렸다....;ㅅ;
아무래도 스타트업이고 FE개발자가 나혼자 뿐이라(BE개발자 1분도 있다.) 해야하나가는 일들이 많았고, 입사후 런칭까지 2달 반정도의 시간밖에 없어서 내 공부보다는 실무에 집중해야했다. 하지만, 실무를 하면서 겪게된 에러들 사용해야 하는 라이브러리 학습 방법 등등 여러가지 경험을 쌓게 되었다. 

경험을 쌓고 나서 정리를 하지 않는다면 나중에 같은 문제에 부딪혔을 때, 다시 문제를 해결하기 위해 많은 시간을 쏟아야 할 수도 있기 때문에 정리하는 습관은 필수 인 것 같다. 내가 해결하기 위함도 있지만 추후에 다른 FE개발자 분이 들어왔을 때를 대비해서 문서작성해두는 기술을 더 쌓아야 할 것 같다.

내가 다시 시작해보려는 이유는 코드스테이츠 때 스터디를 같이하고, 수료한 뒤로도 연락을 하던 분의 꾸준한 블로그를 보며 나도 열심히 해야겠다는 생각이 들었고, 이대로 있으면 뒤쳐질 것 같다라는 생각이 조금 더 크게 든것 같다.

차근차근 어떤 일을 했고, 어떻게 해결했고, 다음엔 어떤것을 학습할지에 대해서 간략하게 나마 적는 시간을 가지도록 하려고 한다~~!