뚝딱뚝딱 코딩 기록_

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

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

[React_ useLayoutEffect] useEffect와 useLayoutEffect의 차이를 알아보자. 이전 회사에 재직하면서 useLayoutEffect라는 React Hook을 처음 접하게 되었다. 사실 잊고 살다가 얼마 전 면접에서 useEffect와 useLayoutEffect의 차이와 useLayoutEffect를 사용해 본 적 있냐는 질문에 다시 떠올랐다. 사용해 본 적도 없고 개념도 잘 몰라서 솔직하게 모른다고 대답하긴 했지만, 이번 기회에 공부해보는 것도 좋을 것 같아서 정리해 보려고 한다. ❓ useEffect, useLayoutEffect React Component의 Side Effect를 관리하는데 사용되는 Hooks 1️⃣ useEffect(setup, dependenci..

[Flutter_ FutureBuilder] StatefulWidget을 사용하지 않고 api를 호출하여 데이터 패칭하는 방법을 알아보자. 플러터로 앱개발을 시작한 후 StatefulWidget으로 state를 정의하고 initState에서 데이터를 불러왔다.. (리액트의 useEffect와 유사하게 사용하고 있었다.) 그런데 플러터에서는 state를 잘 사용하지 않는다고 한다. 확실히 initState를 이용하는 경우 해당 데이터의 state를 모두 생성해 주어야하고, 데이터 패칭 함수를 호출한 뒤 state를 변경해야하기 때문에 상당히 번거롭다는 생각이 들긴했다. ((추가로 함수만 다르고 동일한 패턴의 코드가 screen마다 계속 발생하는 부분이 마음에 안들기도 했다(?)ㅋㅋ)) 그런데 FutureB..

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

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

[Next13_middleware] 인증 여부에 따른 페이지 리다이렉트를 구현하고싶다@! 로그인이 되어있지 않은 유저가 접속할 때 로그인 페이지로 이동하는 과정에서 새로고침을 하는 경우에 메인 페이지가 보였다가 로그인 페이지로 이동하는 깜빡임 현상이 발생했다. 이 문제를 해결하기 위해 많은 고민을 했는데, 결론부터 이야기 하자면 cookie + Next.js의 middleware를 사용하여 해결하였다. 그래서 그동안 시도했던 방법들을 소개하려고 한다. 👉 cookie + middleware 바로 보기👈 1️⃣ localStorage 로그인 했을 때 localStorage에 로그인 정보를 저장하여 로그인 여부를 판별하는 방법이다. import {useRoute} from 'next/navigation'; ..

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

[Next.js_pre-rendering] Next.js의 서버 사이드 렌더링(사전 렌더링)을 통해 client로 데이터를 전달하는 과정에서 Serializing Error가 발생했다. 무슨 오류인지 찾아보니 데이터를 JSON으로 변환하는 과정에서 발생하는 오류라고 한다. 1️⃣ 원인 Next.js의 사전 렌더링 함수를 이용하여 데이터를 props로 보내는 경우 JSON 형태로 전달된다. Json은 데이터 교한을 목적으로 만들어져 특정 언어에 종속되지 않는다는 특징이 있는데, 때문에 특정 언어에 종속되는 객체는 JSON으로 변환(Serializing, 직렬화)할 수 없다고 한다. 전달하는 데이터 중 Timestamp 데이터가 존재했는데 Timestamp는 Javascript에서 Date 객체로 취급된다...

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