썸네일 Github actions OIDC로 배포 자동화하기 현재 회사의 프론트 배포 프로세스는 매우 고전스러운(?) 방식으로 진행되고 있었다. 바로! 로컬에서 build하고 build한 파일을 원격서버에 접속해서 복붙하고 재실행시키는 방식인데... 특이한건 윈도우 서버에다가 IIS란걸 쓰고 있었더랬다...이게 나 혼자 개발을 쭈우우욱 할거면 문제는 안되겠지, 조금 귀찮을뿐.. 그러나 회사 규모는 점점 커질것이고 같이 프론트 개발 할 사람이 들어올 것이다. 그럴땐 어떻게 해야할까? 만약 동시에 같은 build 폴더를 덮어씌우기 한다면? 코드가 통합되지 않은 상태라면? 여러모로 골치아픈 문제들이 생길 것 같아서 여유가 있을때, 서비스 규모가 작을때 배포 자동화 작업을 하려고 한다 나름 그래도 개발, 운영이 나누어져있는데 개발부터 배포 자동화를 셋팅해볼 것이다 조건 ..
[React] 우린 왜 state, function, effect 순으로 작성했는가 비개발자가 급하게 react를 배워서 만든 프로젝트를 보면, 부트캠프, 국비, 전공자가 배운 보편적인 방식에 벗어난 경우가 생각보다 꽤 많습니다. 하나의 페이지 컴포넌트 안에 2천줄이 넘어가기도 하고, 하드 코딩된 로직도 많으며, 급하게 기능을 추가한 경우도 꽤 있기에 로직 순서가 꼬여있기도 합니다.제가 마주한 상황은 CRA 환경이었으며 eslint가 설정되어있지 않은 상태였습니다. 그렇다보니 state문, 글로벌 변수 선언, 함수 선언, effect문이 일정하게 모여서 작성되지 않고 여기저기 파편화가 되어있는 상태였습니다. 기능구현 입장에서 봤을 땐 크게 문제가 안될 수도 있습니다. 어쨌든 선언문이 호출보다 앞에 작성되었으니까요.const PageComponent = () => { const [a..
2024년 프론트엔드 개발자 회고 인트로(유교나이 기준) 나의 20대 마지막 2024년은 정말 많은 걸 깨달은 시기이다. 나는 하나의 생각에 꽂히면 그것밖에 없다고 생각할 때가 꽤 있는 타입인데, 그렇게 생각했던 것들이 많이 무너진 한 해라고 생각한다. 늘 시야가 좁다고는 생각했지만 진짜 좁다는 걸 다시 한번 느꼈고. 개발자로서, 사회인으로서 좀 더 다양하게 생각해 보는 계기를 많이 경험했다. 상반기까지는 일상 자체는 무난했다. 어디가서 요즘 뭐 하고 지내?라는 질문을 듣는다면 백수이다 보니 일상이 너무 단조로워할 말이 없을 정도였다. 이게 가장 좋은 거다. 너무 지루해서 사건사고 없이 무난한 일상. 그러나 하반기부터 점점 길어지는 취준 기간. 과도하게 받은 주변 훈수질 악플에 내 안에 생각들은 그다지 지루하지 않았다. 살면서 역대급으로..
Nest.js 카카오 REST API 로그인 구현하기 | access token, refresh token 이전 게시물 access token, refresh token 토큰 기반 인증 방식 | JWT, HTTP header카카오 로그인을 구현하면서 토큰 기반으로 로그인 상태를 유지시키는 기능을 구현해보려고 합니다. 이전에는 계속 세션 기반으로만 직접 구현해 봤고, 토큰 기반으로는 이미 구현된 로직을 활kyung-a.tistory.com 이제 토큰 개념을 알았으니 카카오 로그인 API를 활용해서 로그인을 진행하고 자체 토큰을 발급해서 로그인 상태를 유지하는 로직을 짜보려고 합니다. 이 전에 제 고민들을 먼저 나열해 볼까 합니다(카카오 API 시작하기에 대한 내용은 다루지 않고, 비즈니스 로직만 다루겠습니다)  구현 하면서 했던 고민카카오 측에서 액세스, 리프레시 토큰을 발급해 주는데 내가 따로 발급을 할 필요..
썸네일 access token, refresh token 토큰 기반 인증 방식 | JWT, HTTP header 카카오 로그인을 구현하면서 토큰 기반으로 로그인 상태를 유지시키는 기능을 구현해보려고 합니다. 이전에는 계속 세션 기반으로만 직접 구현해 봤고, 토큰 기반으로는 이미 구현된 로직을 활용했던 경험밖에 없었습니다. 그래서 토큰 기반으로 구현을 하다 보니 왜 액세스 토큰을 저장 안 해도 되는 거지?라는 의문이 들더라고요. 지금은 로직을 다 구현한 상태인데, 다 구현하고 생각해 보니 그냥 내가 비즈니스 로직만 알았고, 인증 방식의 개념 정의를 몰라서 생긴 의문이었던 것 같더라고요... 3년 전에 한번 공부했던 적이 있었는데.. 또또또 다 잊고 말았지 뭐야뭐야... 그래서 다시 한번 상기 겸! 블로그에 정리합니다.  세션 기반 vs 토큰 기반세션 기반사용자가 로그인할 때 서버에서 고유한 세션 ID를 생성해서 이를..
Nest.js 시작하기 Nest.js란?Node.js 기반의 TypeScript용 백엔드 웹 프레임워크. 제어 역전성을 가지는 프레임워크적 성향이 강하다제어 역전성이란?객체의 생명 주기, 메서드의 제어를 모두 외부에 위임하는 설계 원칙애플리케이션의 제어 책임이 프로그래머에서 프레임워크로 위임되므로, 개발자는 핵심 비즈니스 로직에 더 집중할 수 있다. Nest.js는 java spring, angular의 영감을 받았다 (어쩐지 겁나 비슷하드라) 장단점[장점]일관된 API구조화된 아키텍처 (Provider, Controller, Module)CRUD 컨트롤러, 서비스, 유닛 테스트, DTO, 엔티티 정의까지 한방에 만들어주는 CLI완벽한 타입스크립트 지원[단점]러닝 커브가 있음. 앵귤러 같다고 생각하면 된다 (앵귤러는 생각보다 ..
Jenkins와 Docker를 이용한 Next.js 프로젝트 배포 어느 정도 개발 짬바가 쌓이면(그래봤자 3년인데 ㅎㅋ) 처음부터 내가 만들고 배포를 하는 과정은 생각보다 쉽습니다. 가장 어려운 건 이미 모든 게 구축된 상황에서 내가 중간에 투입돼서 추가 개발할 때, 레거시 코드를 개선해야 할 때, 기존 프로세스를 그대로 유지하고 무언가를 해야 할 때 등등.... 내가 중간에 하게 되었을 때가 가장 힘들고 어렵습니다.특히나 아직 주니어이기 때문에 제가 잘 모르는 분야인데, 심지어 내가 알고 있는 3~4가지 방법이 안된다면 정말 멘붕입니다. 바로 이번 배포 과정이 그랬습니다. 저는 지금까지 제 개인 프로젝트를 배포한 경험만 있었고, 늘 해당 원격 서버에 프로젝트를 clone해서 pm2로 프로젝트를 무중단 상태로 만들었습니다. 거기에 최근은 github actions를 이..
앵귤러 angular 핫 리로드, 빌드 시간 개선 (HMR) 프로젝트 스펙angular : v9.1node : v16.17프로젝트 번들 크기 : 335GB 예상 앵귤러가 느린 이유?양방향 데이터 바인딩과 변경 감지 매커니즘을 사용하는데 이는 특히 대규모 애플리케이션에서는 성능 오버헤드가 될 가능성이 매우 큼변경이 감지되면 모든 구성 요소를 확인하기 때문에 비효율적꼭 앵귤러 탓만이 아니라 프로젝트 규모가 너무 큰게 1순위일수도 있음오래된 버전 9라는 부분도 무시 못함 시도해본 것들angular.json에 "aot" true로 변경효과 없었음package.json 시작 명령어에 --source-map=false 추가해당 명령어는 브라우저가 번들된 자바스크립트 코드를 원래의 소스 코드(TypeScript)와 연결해 디버깅을 쉽게 해준다이걸 false할 경우 브라우저에서..
디자인 시스템 세팅하기 | 디자인 시스템 구축하기 - 1 디자인 시스템은 왜 필요할까?구글에 디자인 시스템이 필요한 이유를 검색하면 매우 많은 내용들이 검색됩니다. 제가 생각하는 디자인 시스템이 필요한 이유는 6가지입니다편리한 컴포넌트 재사용서비스의 브랜드성 확보일관된 디자인독립적인 관리명확한 UI 로직, 컴포넌트 분리개발자와 디자이너의 효율적인 커뮤니케이션 상승물론 그 외에 다양한 이유가 더 있습니다. 근데 저는 이 6가지가 디자인 시스템을 구축해야 하는 이유에 엄청난 근거가 된다고 생각합니다. 물론 이제 막 시작한 스타트업에서 디자인 시스템을 갖추기란 시기상조일 수 있다고 생각합니다. 그래서 많은 스타트업 개발팀은 UI 컴포넌트를 한땀한땀 만들기보다는 유명한 UI 라이브러리를 사용하고 이걸 조금씩 커스텀해가며 씁니다. 하지만, 좀 더 우리 서비스의 브랜드를..
useCallback의 오남용 그동안 React 내에서 함수, 또는 값을 의미하는 로직을 쓴다고 하면 useMemo, useCallback hook을 쓰는게 습관처럼 되었습니다그러나 이번에 FSD 아키텍처로 리팩토링 해보면서 props로 넘겨야하는 값들이 많아졌습니다export async function fetchData( menuType: string | undefined, reviews: IReview[] | null, mapData: IMapData | undefined, cafeDataRef: { current: ISearchData[]; }, setMarkers: React.Dispatch>, clusterer: IClusterer | undefined, navigate: NavigateFunction, ..
썸네일 프론트엔드 FSD 아키텍처 적용하기 | Map Service 구축하기 - 3 사이드 프로젝트인 myCafe에서 현재 모바일용 라우트도 파서 작업하고 있고, 기능이 하나둘씩 늘어가고 있는 중입니다프론트엔드에게 좋은 로직이란 무엇일까?라는 고민을 늘 하는데요. 사실 정말 정답이 없는 분야이고, UI와 엮여있다 보니, 마냥 이상향을 쫓기란 쉽지 않은 영역이라고 생각합니다. 그렇다 보니 점점... 관심사 분리도 모호해지고, 기능 분리도 모호해지고, 상태 분리도 모호해지고... 모호함의 연속을 모호하니까~라며 내버려두다가는 진짜 똥 될 수 있는데요(?) 아무튼 정말 어려운 게 프론트엔드의 클린 코드라고 생각합니다이전에도 FSD 아키텍처를 적용해볼까 하다가 개념이 굉장히 크길래(?) 아직은 적용할때가 아니라고 생각해서 일단 기본틀만 잡아놓고 기능구현부터 했습니다. 이젠 공통된 부분이 점점 ..
이벤트 리스너(event listener)를 제거 해야하는 이유 React 개발을 하다 보면 useEffect문 안에 작성한 이벤트 리스너를 제거해줘야 하는 경우가 있습니다 useEffect(() => { const handleBeforeUnload = () => { console.log("액션") }; // 이벤트 리스너 등록 window.addEventListener("beforeunload", handleBeforeUnload); // 컴포넌트 언마운트 시 이벤트 리스너 제거 return () => { window.removeEventListener("beforeunload", handleBeforeUnload); }; }, []);이런 걸 클린업이라고 하고, 메모리 누수 방지라는 개념은 알고 있었습니다..
라이브러리 브랜드 그룹 | Hi, Kyung-a log

티스토리툴바