썸네일 Github actions OIDC로 배포 자동화하기 현재 회사의 프론트 배포 프로세스는 매우 고전스러운(?) 방식으로 진행되고 있었다. 바로! 로컬에서 build하고 build한 파일을 원격서버에 접속해서 복붙하고 재실행시키는 방식인데... 특이한건 윈도우 서버에다가 IIS란걸 쓰고 있었더랬다...이게 나 혼자 개발을 쭈우우욱 할거면 문제는 안되겠지, 조금 귀찮을뿐.. 그러나 회사 규모는 점점 커질것이고 같이 프론트 개발 할 사람이 들어올 것이다. 그럴땐 어떻게 해야할까? 만약 동시에 같은 build 폴더를 덮어씌우기 한다면? 코드가 통합되지 않은 상태라면? 여러모로 골치아픈 문제들이 생길 것 같아서 여유가 있을때, 서비스 규모가 작을때 배포 자동화 작업을 하려고 한다 나름 그래도 개발, 운영이 나누어져있는데 개발부터 배포 자동화를 셋팅해볼 것이다 조건 ..
[React] 우린 왜 state, function, effect 순으로 작성했는가 비개발자가 급하게 react를 배워서 만든 프로젝트를 보면, 부트캠프, 국비, 전공자가 배운 보편적인 방식에 벗어난 경우가 생각보다 꽤 많습니다. 하나의 페이지 컴포넌트 안에 2천줄이 넘어가기도 하고, 하드 코딩된 로직도 많으며, 급하게 기능을 추가한 경우도 꽤 있기에 로직 순서가 꼬여있기도 합니다.제가 마주한 상황은 CRA 환경이었으며 eslint가 설정되어있지 않은 상태였습니다. 그렇다보니 state문, 글로벌 변수 선언, 함수 선언, effect문이 일정하게 모여서 작성되지 않고 여기저기 파편화가 되어있는 상태였습니다. 기능구현 입장에서 봤을 땐 크게 문제가 안될 수도 있습니다. 어쨌든 선언문이 호출보다 앞에 작성되었으니까요.const PageComponent = () => { const [a..
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할 경우 브라우저에서..
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, ..
이벤트 리스너(event listener)를 제거 해야하는 이유 React 개발을 하다 보면 useEffect문 안에 작성한 이벤트 리스너를 제거해줘야 하는 경우가 있습니다 useEffect(() => { const handleBeforeUnload = () => { console.log("액션") }; // 이벤트 리스너 등록 window.addEventListener("beforeunload", handleBeforeUnload); // 컴포넌트 언마운트 시 이벤트 리스너 제거 return () => { window.removeEventListener("beforeunload", handleBeforeUnload); }; }, []);이런 걸 클린업이라고 하고, 메모리 누수 방지라는 개념은 알고 있었습니다..
React Query와 Redux의 차이, 장단점 요근래 몇 없는 면접이지만, 두 라이브러리를 써왔어서 그런지 늘 받던 질문입니다. 정확히는 Redux를 써보다가 React Query를 쓰게된 이유가 무엇인가요? 였는데, 다시한번 두 라이브러리의 차이점을 고찰해보려고 합니다이전에 제가 처음으로 React Query를 사용했을때 블로그 글이 있어서 링크 남깁니다https://kyung-a.tistory.com/40  React Query란?서버 상태를 패칭, 캐싱, 동기화, 업데이트 하는 작업을 쉽게 해주는 라이브러리저는 React Query가 Tanstack (오픈 소스 소프트웨어) Query로 되기 전에 사용했습니다둘 차이점은 무엇이지? 했더니 원래부터 같은 회사의 라이브러리였던 것 같고 단지 v4 버전이 나오면서 이름을 바꾼 것 같습니다제가 Reac..
썸네일 React Query 사용기 안녕하세요! 오늘은 제가 실무에서 쓰고 있는 react-query에 대해 글을 써볼까 합니다 지금 실무에서 쓰고는 있지만 늘 같은 형태로만 쓰고 있고, 아무것도 모른 상태에서 다른 동료가 작성한 코드를 토대로만 공부(?) 했기 때문에 모자른 부분이 굉장히 많아서... 공부 겸 내용 정리를 해보려고 합니다 블로그 글 중에 react-query에 대해 잘 정리해주신 분이 계셔서 링크 남깁니다 https://maxkim-j.github.io/posts/react-query-preview React-Query 살펴보기 React의 Server State 관리 라이브러리 React Query를 살펴봅니다. maxkim-j.github.io 1. react-query와 redux 차이점 사실 저는 redux만 알고..
썸네일 React Hook Form | 내가 실무에서 쓰는 법 안녕하세요. 오늘은 정말! 유용한 라이브러리 React Hook Form에 관해 기본적인 내용들을 정리해보려고 합니다 이젠.. 이거 없으면 개발하기 정말 귀찮을 정도로... 너무 유용한 라이브러리입니다 거의 리액트 개발에선 필수가 아닐까 싶을정도! 공홈 자체에서도 한국어를 지원해주고 있지만 필드가 많아지거나 하면 복잡해지는게 꽤나 있더라고요 그래서 제가 실무에서 써먹던 방법도 담아볼까합니다 공홈의 있는 모든 내용들을 다루진 않고 제가 실무에서 썼던 API 위주로 설명하겠습니다 1. React Hook Form 이란? 폼, 양식을 만들때 사용하는 라이브러리 해당 라이브러를 사용하지 않더라면? import React, { useState } from 'react'; const InputSample = () ..
썸네일 React | Hook 정리 + 18 버전 새로운 Hook 안녕하세요. 오랜만에 블로그에 글을 써보네요! 제가 개인 노션에서 계속 써왔던 내용들을 차근차근 블로그로 옮겨볼까 합니다. 그 중 예~전에 열심히 정리했던 react hook에 관한 내용부터 쓰려고해요 근데 저도 글을 정리하면서 검색해보니.. 새로운 hook들이 나왔더라고요! 저도 맨날 쓰던것만 쓰다보니 새로운 hook을 알아본다거나 쓸 일은 없었는데, 이 참에 저도 새로운 hook을 알아보고 기회가 될때마다 써보려고 합니다 혹시 내용이 틀리다면 댓글 부탁드립니다 (전에 써둔 내용이라 틀린 부분도 있을 듯 해요🙄) 1. 앞서 알고있어야 할 것들 1-1. 리액트가 마운트 시에 하는 작업들 props로 받은 값을 컴포넌트의 로컬 상태로 설정 외부 API 요청(REST API 등) 라이브러리 사용 (D3, V..
썸네일 react-router-dom v6 업데이트 후 달라진 점 (ft. Prompt 창 띄우는 법) 불과 몇 달전만 해도 문제없이 잘 쓰고 있었던 react-router-dom 리액트 공부를 다시 시작하면서 router 파트를 복습삼아 진행했는데 분명 그대로! 평소에 썼던거처럼 작성했는데 에러가 뜨는거다! 보니까 그 사이에 v6으로 업데이트 되었던 것... 생각보다 너무나도 많은게 달라져서 기록해보려고 합니다 1. Switch -> Routes 네이밍 변경 여러개를 감싸는 부모 컴포넌트 네이밍이 변경됨 Switch란? 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜줌 (아무것도 일치하지 않으면 Not Found 페이지를 구현할 수 있었다) // v5 // v6 2. exact 옵션 삭제 기존에 루트 ('/') 페이지 같은 경우 모든 페이지들이 다 불러오는 현상이 있었는데..
썸네일 React 아키텍쳐, 디자인 시스템, 파일 구조에 대한 고찰 반년일기 사이드 프로젝트를 진행하면서 리액트에 대한 한계점에 매일 매일 도달했다. 무엇보다 퍼블리싱과 기능 구현을 동시에 진행하려는 욕심에, 대충 짜놓았던 디렉토리 구조가 무너지는 느낌, 가뜩이나 어수선한 프로젝트가 더 어수선해지는 기분이었다. 그때 현 회사 사수가 디자인 시스템에 대해 꼭 공부 할 필요가 있다고해서 무작정 코드부터 작성하려는 급한 마음을 잠시 내려놓고, 아키텍쳐, 디자인 시스템을 기반으로 리액트 디렉토리 구조를 어떻게 하면 좋을지에 대해 공부를 해보려고한다 1. 현재 상태 아래 이미지는 현재 플젝 리액트 디렉토리 구조다 가장 크게 client, db, doc, server로 나눈 상태고 나는 client를 담당하고 있다 client의 핵심 상위 폴더는 assets, components,..
라이브러리 브랜드 그룹 | Hi, Kyung-a log

티스토리툴바