jest, testing-library를 이용한 TDD 찍먹 해보기 저는 4~5년동안 개발하면서 단 한번도 테스트케이스를 작성한적이 없습니다. 실제로 TDD를 실무에 적용하기란 현실에선 벅찰 수도 있다는 말들이 꽤 많은것 같습니다. 실제로 저도 TDD가 되어있는 회사에 속해본적도 없었고, 상황도 많이 달랐습니다. SI는 정말 오로지 납품, 마감기한이 1순위니까 그 분위기에 테스트케이스를 한다고하면 현실을 살라고... 한 소리 들을수도 있었달까(?) 그럼에도 불구하고 시도할 수 있는 환경이었다면 한번쯤 해보는것도 나쁘지 않았을텐데 하는 아쉬움이 크더라고요물론 혼자서도 할 수 있지만, 대규모 프로젝트 또는 5인 이상 같은 프론트엔드 개발자가 있는 팀에서 시도해봤을때 더 크게 빛을 발하는 부분이지 않나라는 안일한 생각을 가지며... 단 한번도 시도해봐야지^^란 생각조차 안했습.. plop.js를 이용한 코드 생성 자동화 CLI 구축 백오피스 같은 프로젝트는 만들다보면 API 호출 주소만 다른 같은 레이아웃, 코드 구조가 반복됩니다. 사실상 폴더 자체 복붙해서 파일명, 컴포넌트명, API 주소만 바꾸면 되는 격이죠. 지금까지 폴더를 복붙했었지만 어느순간부터 짜친다라는 느낌이 들더라고요. 분명 자동화하는 방법이 있을텐데? 라는 생각이 들면서 "맞다, CLI 툴을 이용하면 되겠구나!" 싶어서 바로 실행해봤습니다.다양한 CLI 툴이 있는데, 우리는 정말 간단하게 일관성 있는 코드로 page, apis, consts만 생성하면 되는거라서 plop.js를 쓰게되었습니다. plop.jshttps://plopjs.com/ Plop: Consistency Made SimpleA little tool that saves you time and he.. 다국어 라이브러리 비교 | react-i18next, react-intl, Lingui, next-translate 새롭게 리뉴얼 하려는 프로젝트가 다국어로 되어있는 서비스이다. 사실 다국어래봤자 이젠 한국어와 영어만 남아있는데... 아무튼 글로벌 서비스다 이 말이다! (?)기존 서비스는 .NET으로 되어있기에 React 기반으로 옮기면서 SSR을 할지, 다국어 라이브러리는 어떤걸 쓸지 고민도 되고 다국어 서비스는 처음이라 그 내용들을 기록 해보려고 한다 서비스 스펙 (?)영어, 한국어 지원실시간성 필요 없음동적 콘텐츠 비율이 높으나 계정 자체에 언어가 기본 설정 되어있기에 동적 콘텐츠가 곧 정적인 콘텐츠라고 볼 수 있음여러 해외 사람들이 와서 보는 B2C 형태인 서비스가 아닌 B2B이기에 본인이 쓴 글을 본인이 보는거고 관리자같은 경우에는 상대방에 맞춰 영어 또는 한국어로 작성하기에 굳이 상대방에게 서로 작성한 내용.. CRA 지원 종료. Vite로 마이그레이션 하기 https://react.dev/blog/2025/02/14/sunsetting-create-react-app Sunsetting Create React App – ReactThe library for web and native user interfacesreact.devCRA는 이미 오래전부터 비공식적으로 지원 종료되었다는 소문이 나있었다. 그러다가 드디어 2025년 2월 공식적으로 지원 종료한다는 글이 올라왔다. CRA의 마지막 릴리즈는 무려 3년 전이다. 3년 동안 단 한 번도 릴리즈 업데이트를 하지 않았는데, 그럼에도 불구하고 우리 팀에서 2024년 여름에 CRA로 개발을 시작했더랬다... 열심히 검색해봤더니 다들 CRA로 시작하래서 시작한 거라는데... 그땐 이미 Next.js로 시작하는 게 거.. CRA 절대경로로 변경하는 법 입사 하고 프로젝트를 딱 받았을때 경악했던게 비공식적으로 지원 종료했다는 소문이 난 CRA로 만들었다는 점 (2025년 2월에 공식저으로 지원 종료를 알림). 그리고 상대경로인 점과 폴더명에 한글을 썼다는 점, 폴더가 분리되지 않고 모~든 파일이 features에 있는다는 것이다.오래된 플젝이면 당연히 CRA일수도 있는거 아니냐? 할 수도 있는데 전혀 오래되지 않은, 무려 작년 여름(2024년 8월)에 시작한 프로젝트라는 것이다. CRA가 비공식적으로 지원 종료한거 아니냐라는 말이 나온건 2024년때보다 더 전부터 들었던것 같다. 근데도 굳이 CRA로 시작 했다는게 너무 충격적이고, 기가막힌건 나름 열심히 검색해봤더니 CRA를 추천해줘서 했다고하더라... 대체 검색을 어떻게 한건지 매우 의문스럽다.아무튼.. [회고] 기획 및 디자인을 하면서 느낀점 현회사에 입사한 지 대략 5개월이 지났다. 의도치 않게 현재 기획, 디자인, 프론트엔드 개발까지 총 3개의 업무를 맡아서 일을 하고 있다. 진짜 의도한 게 아니었으며... 사람은 자기가 뱉은 말을 따라가는 건가? 싶은 생각도 들었다.왜냐면 내가 2024년 회고에 위와 같은 말을 했기에... 면접때는 분명 이사님이 기획 업무를 하고 계신다고 했으나 사실은 팀장님이 하고 계신 거였고, 심지어 팀장님은 전문적으로 PM, 기획 업무를 해오신 분이 아닌 전산 업무 및 인프라를 하고 계셨던 분이기에 정말 경악스러울 정도의 산출물을 넘겨줬었다. 진짜 경악 그 자체이다. 분명 한글로 써져 있는데 이해하지 못할 수준이다. 근데 또 바쁘다는 이유로 업무를 넘겨주지 않으니 내가 다음 기능 개발을 못하는 상태로 붕 떠버리는 .. onKeyDown, onChange를 사용할때 한글 조합 문제 input에 입력후 Enter를 눌렀을때 string 배열에 입력값을 push해서 보여지는 UI를 만들었다영어를 입력했을땐 문제가 없었으나, 한글을 입력하고 엔터를 누르면 끝 글자만 떨어져나와 2개씩 string이 생성되는 문제가 발생하게 되었다사실 늘 이런 컴포너는트는 mantine을 쓰든 뭘 쓰든 대부분 UI 라이브러리를 사용해서 가져다 쓰기만했었지 직접 만드는건 처음이게 이런 문제가 발생할 수 있다는걸 모르고 있었다그래서 keyUp으로 뭔갈 해야해야하나? 지연을 줘서 늦게 input을 리셋 시켜야하나? 고민하다가 chatGPT한테 물어보니 원인을 알 수 있었다 {values.map((v, idx) => ( {v} ))} ) => { .. [React] createPortal을 이용해서 Toast 컴포넌트 만들기 지금까지 Dialog, Toast, Snackbar 같은 걸 만들 때 아래와 같이 만들었다return ( /* HTML 내용 */ setModalOpen(false)} title={modalTitle} content={modalMessage} button={ } />)dialog를 띄우고 싶은 페이지 또는 UI 컴포넌트 내에서 일일히 import를 하는 형태였다그러다가 MUI의 snackbar를 걷어내고 내부적으로 컴포넌트를 만들어서 사용하려는데 Toast 컴포넌트를 일일이 위와 같이 import를 해서 써야 하나? 심지어 내부에 들어갈 text도 상황에 따라 매번 바꿔서 보여줄 건데 그거 하나 하자고 state를 또 일일이 만들어줘야 하나?라는 생각이 든 거다 .. Github actions OIDC로 배포 자동화하기 현재 회사의 프론트 배포 프로세스는 매우 고전스러운(?) 방식으로 진행되고 있었다. 바로! 로컬에서 build하고 build한 파일을 원격서버에 접속해서 복붙하고 재실행시키는 방식인데... 특이한건 윈도우 서버에다가 IIS란걸 쓰고 있었더랬다...이게 나 혼자 개발을 쭈우우욱 할거면 문제는 안되겠지, 조금 귀찮을뿐.. 그러나 회사 규모는 점점 커질것이고 같이 프론트 개발 할 사람이 들어올 것이다. 그럴땐 어떻게 해야할까? 만약 동시에 같은 build 폴더를 덮어씌우기 한다면? 코드가 통합되지 않은 상태라면? 여러모로 골치아픈 문제들이 생길 것 같아서 여유가 있을때, 서비스 규모가 작을때 배포 자동화 작업을 하려고 한다 나름 그래도 개발, 운영이 나누어져있는데 개발부터 배포 자동화를 셋팅해볼 것이다 조건g.. [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 시작하기에 대한 내용은 다루지 않고, 비즈니스 로직만 다루겠습니다) 구현 하면서 했던 고민카카오 측에서 액세스, 리프레시 토큰을 발급해 주는데 내가 따로 발급을 할 필요.. 이전 1 2 3 4 5 다음
