뚝딱뚝딱 코딩 기록_

2024년의 상반기가 지나가고, 하반기가 시작되었다.많은 일이 있었던 2024년의 상반기를 회고를 통해 되돌아보려 한다.  1. 재취업 준비2023년 회고와 2024년 신년 계획을 기록하며 언급한 적 있지만 예기치 않은 퇴사로 인해 다시 취업준비를 해야하는 상황이었다.변명이지만 당시 나는 첫 회사에서 일단 배울 수 있는 모든 것을 배워보자는 생각에 아무런 준비도 되어있지 않은 상태였다.이직과는 거리가 멀다고 생각했던 것이다. 그런 상황에서 덩그러니 퇴사를 하게 되었고,누가봐도 애매한 6개월이라는 경력으로 취업 준비를 다시 시작하게 되었다. 취업 준비를 하면서 다른 개발자 분들과 커피챗, 모의 면접 등을 진행하는 기회가 있었고이 경험을 통해 다시 한 번 나의 부족함을 느낄 수 있었다. 많은 회사에서 서류가..

[Github Packages 배포하기] 여러 프로젝트를 개발하면서 같은 기능을 사용하는 경우가 많았다. 서로 다른 repository를 사용하기 때문에 같은 기능의 함수를 복사해서 가져와 사용하는 일이 많아졌고, 수정사항이 생기면 모든 repository에서 변경해야하는 상황도 종종 생겼다. 이런 중복되는 일을 줄이기 위해 프론트엔드 개발자인 팀원분과 고민하던 중 github packages에 대해 알게 되었다. 그래서 github packages와 npm의 차이점과 typescript, github packages로 패키지, 모듈을 배포하는 과정에 대해 공부해보려고 한다. ❓ Github Packages 소프트웨어 패키지를 private 또는 public으로 호스트하고 프로젝트의 종속성으로 사용할 ..

2022년 개발 공부를 시작한 이후 벌써 2년이란 시간이 지났다. 2023년의 마지막인 12월 31일인 오늘, 23년 한 해를 돌아보려고 한다. 2023년 상반기 - 본격적인 취업 준비 시작과 함께 찾아온 불안감, 좌절감 2022년에는 주로 공부를 하며 시간을 보냈다면, 2023년에 접어들면서 본격적으로 이력서와 자기소개서, 포트폴리오를 만들며 지원을 시작했던 것 같다. 특히 학생이었던 친구, 대학 동기들이 하나 둘 취업을 시작하면서 취업에 대한 부담감이 커지고 심리적으로 매우 불안한 시기가 시작되었다. 가까웠던 사람들이 꿈을 이루어 원하는 일을 시작하는 모습을 보며 부러운 마음과 동시에 빨리 취업을 해야한다는 부담감이 자리잡았다. 더불어 계속되는 서류 탈락 결과를 보며 '나는 할 수 있을까?', '내 ..

[Firebase_RDB vs NoSQL] 기존 RDB의 데이터를 Firestore로 이관할 때 어떤 구조로 설계해야할까? 관계형 데이터베이스의 데이터를 비관계형 데이터베이스(Firestore)로 옮길 수 있는 방법에 대해 고민하게 되었다. 이번 포스팅에서는 관계형 데이터베이스와 비관계형 데이터베이스에 대해 간단히 정리하고, RDB 기반의 데이터를 NoSQL 기반의 클라우드 데이터베이스인 Firestore로 옮겼던 경험을 소개하려고 한다. 1. 관계형 데이터베이스 vs 비관계형 데이터베이스 1️⃣ 관계형 데이터베이스 관계형 모델을 기반으로 데이터를 행과 열로 구성된 테이블로 구조화하고, 각 테이블 사이의 관계를 표현하는 데이터베이스 구조 📌 관계형 모델 데이터를 행(rows)과 열(columns)을 이루..

수학과 졸업생의 프론트엔드 개발자 취업 성공기_ 왜 프론트엔드 개발자가 되었느냐고 묻는다면, 내가 코딩하는대로 화면이 바뀌고 기능이 들어가는 것이 재밌어서?가 시작인 것 같다 이전에 ML/DL을 조금 공부해서 그런지 개발은 재미있지만 기다리는 것이 너무 힘들다는 생각이 컸던 것도 한 몫 했던 것 같다. 무엇보다 프론트엔드 개발이 적성에 맞다고 생각이 들 만큼 재미있는 이유가 가장 컸다. 취준 1년 6개월만에 취업에 성공했고, 그 과정을 간단하게 정리해 보려고 한다. 공부 방법 독학(강의, 책, 자격증 등) + 몇 가지 프로젝트를 통해 공부했다. 또한 비전공 특성 상 CS 공부(이론)를 위해 모집한 스터디에서 전공지식과 면접 준비를 병행하였다. 과정 2022년 1월 11일, 인생 첫 커밋 처음으로 깃허브에..

[Firebabse_ 인증] Firebase를 통해 서버리스 애플리케이션으로 쇼핑몰 프로젝트를 진행하고 있다. 사실 쇼핑몰은 예전부터 하고싶은 프로젝트였는데 잠시 미뤄두고 있었다. 그런데 친구가 쇼핑몰을 오픈하려고 한다는 소식을 듣고 괜히 만들어주고 싶어서(?) 드디어 시작하게 되었다. (ㅎㅎ firebase의 인증 시스템을 이용하여 자체 회원가입 및 로그인, 구글 소셜 로그인 기능을 구현하였는데 복습도 할 겸 정리해 보려고 한다. 1️⃣ 파이어베이스 연동하기 파이어베이스에 프로젝트를 생성하고 [프로젝트 설정 - Web App] 부분을 보면 아래 사진처럼 sdk 설정 및 구성 방법이 나온다. 저 부분을 복사해서 src/api/firebase.js 폴더에 붙여넣기 하면 된다. 참고로 firebaseConf..

[redux-toolkit] 리액트로 진행한 프로젝트에서 리덕스를 공부한 적이 있는데 리덕스의 보일러 플레이트 코드를 간소화하기 위해 리덕스 툴킷 (redux-toolkit, rtk)를 사용한 적이 있다. 공부하면서 노션에 정리해놓은 것을 다시 복기할 겸 정리하려고 한다. 상태 관리 라이브러리 (state management library) → redux, modox, recoil 등 state가 상위 component로 올라갈수록 관리하기 복잡해지는 현상 해결 Redux toolkit (RTK) Redux 로직을 작성하고 저장소를 설정하는 프로세스(redux 작업)를 단순화 redux 저장소 구성의 복잡성, 많은 패키지 추가, 상용구 코드 해결 위해 사용하는 도구 API configureStore() ..

[Vanilla Javascript_ 프로젝트 환경 설정] Webpack과 Babel을 이용한 프로젝트 초기 환경 세팅 💡 프로젝트 생성 프로젝트 폴더(빈 폴더)에 src 폴더를 생성하고 하위에 HTML파일과 JS 파일을 만든다. 이때, 파일 이름, 위치는 원하는 대로 설정 가능! ** 꼭 src 폴더에 넣지 않아도 된다 ** 💡 package.json 생성 npm init 프로젝트에서 사용할 패키지 매니저를 사용하여 init 명령어를 사용하면 몇 가지를 물어보는데 프로젝트에 맞게 설정하고 작성해 주면 된다. 완료되면 node_modules 폴더와 package.json, README.md 파일이 생성된다. 💡 패키지 설치 npm install -D //패키지 이름 위 //패키지 이름// 부분에 아래에 ..

[환경설정_ webpack] ❓ 문제 바닐라 자바스크립트 초기 환경 세팅을 하던 중 webpack.config.js 파일에서 require를 사용하지 못해 오류가 발생하는 상황이 생겼다. es6에서는 require가 아닌 import/export 를 사용하기 때문인데, 그대로 바꿔서 실행하면 build가 되지 않는 현상이 반복됐다. ❗ 해결방법 1. package.json 수정하기 webpack.config.js 파일은 그대로 두고 package.json 에서 type 부분을 삭제해 준다. ("type": "module" 은 ES6 버전을 지원) 2. 파일 이름 ( js → cjs ) 변경하기 webpack.config.js 파일을 webpack.config.cjs로 바꿔주면 CommonJS 방식을 사용..

[Vite_ env variables] 1. .env 파일 생성 ❔ 환경변수 파일은 반드시 root directory (최상위 폴더)에 위치해야한다. ❗ 그렇지 않으면 인식하지 못하므로 주의해야함! 2. 환경변수 설정 ❔ 환경변수는 [ VITE_ ]으로 시작해야 읽을 수 있다. 3. 환경변수 사용 ❔ Vite에서는 [ import.meta.env ] 를 사용해야한다. ❗자바스크립트에서 환경변수를 사용할 때 보통 [ process.env ] 를 사용하기 때문에 헷갈리기 쉬움 Vue로 프로젝트를 진행하면서 환경변수를 쓸 일이 생겼다. process.env로 불러오면 되는 줄 알았는데 Vite에서는 import.meta.env로 불러와야해서 잠시 헤맸다. 이번 일을 참고하여 다음부터는 헷갈리지말고 제대로 사용..