JEEWONSCRIPT

[Next.js] 시작부터 원치않는 회귀(redirect)를 해버림(feat. 캐싱)오랜만에 글을 씁니다~ 한동안 새로 알게된 내용이나, 트러블 슈팅 내용을 블로그에 기록하지 못했었는데요. 현재 개발하고 있는 내용들과 발생한 이슈들이 대부분 도메인과 밀접한 문제들이라 개인적인 기록을 하지 못했었네요 ㅎㅎ 하지만 이번 내용은 최근 새로 시작하게된 프로젝트의 환경세팅을 하다가 생긴 아주 따끈따끈한 일이랍니다! 새로운 프로젝트 (발단)한동안(거의 10개월..) Vue 로 작성된 프로젝트를 개발(유지보수)하다보니 많이 어지러워진 저에게 오아시스 같은 새로운 프로젝트가 찾아왔습니다..! 설계는 커녕 기획도 아직 나오지 않은 제로부터 시작하는 프로젝트였고, 심지어 입사 후 3년만에 찾아온 첫 B2C 프로젝트라 기쁨..

[Next.js/JWT] Next.js 13 환경에서 권한/인증로직 구현하기 얼마전에 시작한 사이드 프로젝트의 환경을 Next.js 13 버전으로 적용하기로 했습니다. 프로젝트의 가장 기초는 로그인/회원가입 그리고 인증처리인데요. 제가 어떤 방법으로 Next.js 13 버전에서 인증로직을 작성했는지 여러분들께 공유하고자 합니다. cookies-next JWT를 사용할때, 쿠키에서 관리를 하는경우가 많은데요. 이를 위해 서버사이드 랜더링이 되는 next.js 에서는 cookies-next 라이브러리를 사용합니다. 처음 프로젝트를 세팅할 때 생각없이 react-cookie 라이브러리를 사용했었는데, 로그인 후 토큰을 쿠키에 저장하고 메인 페이지로 리다이렉트 하니 제대로 로직이 동작하지 않았습니다 ㅠㅠ 메인 ..

[Turborepo/Vite] React & Vue 컴포넌트 라이브러리화를 위한 모노레포 구축 새로운 프로젝트에서 코어와 공통모듈을 별도의 패키지로 분리하려는 시도를 하고 있는데요. Turborepo 와 Vite 를 이용하여 React 와 Vue 컴포넌트 라이브러리를 위한 모노레포 구축 과정을 기록하고자 합니다. History 기존의 서비스는 당분간 Vue 로 유지보수하며 React 로 점진적 마이그레이션을 진행하고, 새로운 서비스는 React/Next 로 제공하기 위한 효율적인 방법을 찾고 있었습니다. 그 대안 중 하나가 "공통 레포지토리를 두어 중복된 코드들과 UI 를 한 곳에서 관리하자" 입니다! 사실 저는 SDK 나 코어 개발을 해본적이 없어 기대가 되더라구요. 또 Webpack 과 Lerna 와..

[Vue.js/Core web vitals] 웹 성능과 유저 경험 개선하기 이번에는 Vue를 사용하는 새로운 프로젝트에서 레거시 코드로 이루어진 서비스의 웹 성능과 유저 경험(UX)을 개선한 내용을 기재해보려합니다~ History 협력업체로부터 새로운 프로젝트를 인수인계 받으며 코드분석을 진행하는데 아무리 보아도 적응되지 않는 이슈가 있었습니다. 메뉴를 이동할 때마다 화면의 모든 컴포넌트가 사라지고, 로딩 시간 동안 화면에서 아무것도 볼 수 없는 현상이었는데요. 화면이 깜빡인다 이말입니다! 이 문제는 프로젝트를 인수하는 저희 팀원들 뿐만 아니라, 서비스를 직접적으로 사용하는 회사 내부 사용자들에게서도 적지 않은 개선 요청을 받은 것으로 보입니다. 해당 프로젝트는 서비스의 규모가 큰 편이고, 도메인도 메뉴..

[Javascript/Algorithm/Slack] 중복없는 랜덤 커피챗 봇 만들기 지금(2023년 8월 기준) 회사를 다니면서 좋다고 생각한 문화 중 하나는 바로 구성원들이 직접 회사의 문화를 만들어갈 수 있다는 점인데요. 매번 새로운 팀원이 입사를 하면 서로서로 친해지는 계기나 과정이 필요하여, 팀원 중 누군가가 제안했던 것이 바로 랜덤 커피챗입니다. 랜덤 커피챗은 팀 구성원들과 랜덤으로 그룹을 만들어 커피타임을 가지면서 친해지고, 업무 도중 휴식도 가질 수 있는 이벤트랍니당 아무튼 이번에는 바로 그 랜덤 커피챗을 위한 슬랙 봇을 만들어보았습니다..! History 기존 앱들을 잘 사용하면 되는데 저는 왜 직접 슬랙 봇을 개발했을까요? 처음 커피챗을 위한 슬랙 앱 M(편의상 M 이라고 칭하겠습니다)을..

프로그래머스 : 불량 사용자 https://school.programmers.co.kr/learn/courses/30/lessons/64064 프로그래머스 3단계, 2019 카카오 개발자 겨울 인턴십 문제입니다. 코드 function solution(user_id, banned_id) { let answer = 0; const bannedList = banned_id.map((_) => 0); const set = new Set(); const dfs = (index, count, text) => { if(count === banned_id.length){ set.add(text.split(' ').sort().join('')); } if(index >= banned_id.length){ return; ..

[Typescript/React-Query] 이미지 api 호출 트러블슈팅 프로젝트를 함께 개발하는 팀원이 api response 로 이미지가 내려오는데 에러가 난다고 하더랍니다. 제가 담당하고 있는 도메인에도 추후 동일한 환경의 api 가 제공될 예정이기에, 페어코딩으로 해결했던 내용을 재구성하였습니다. 이전까지 한번도 이미지 자체를 response 데이터로 받아본적이 없었다능... ...핑계다.. 나레기... hooks / api / ... / foo.ts 처음 코드를 작성할 때는 api 로 부터 이미지 자체를 받는 것이 아닌, 이미지 url을 받을 것이라고 생각했습니다. 그래서 다른 일반적인 api 요청 hooks 와 동일한 컨벤션으로 코드를 작성했지요. const FooApi = { getImag..

[React/디자인 시스템] 알잘딱깔센 표 UI 인터페이스 구현하기 알잘딱깔센 표 UI 인터페이스라니, 이건 또 무슨 말일까요? 알잘딱깔센은 "알아서 잘 딱 깔끔하고 센스있게" 라는 신세대 용어랍니다 ㅎㅎ 표 컴포넌트를 구성하는 방식 일반적으로 위와 같은 표를 구현할때는 아래와 같이 테이블 형태나 리스트 형태로 구현합니다. // 테이블 타이틀 1 {data.value1} 타이틀 2 {data.value2} 타이틀 3 {data.value3} // 리스트 {data.map((item) => ( {item.title} {item.value} ))} 데이터가 배열이라면 리스트의 형태로 반복문을 사용하면 될 것 같습니다. 하지만 위와 같은 표를 만드는데 서버에서 각각의 한글 타이틀을 저장하는 것은 비효율적이며,..

[React/Next.js] 특수한 조건의 라우팅 컴포넌트 제작(삽질)기 라우팅 컴포넌트 정도로 삽질을 한다고? 현업 개발자 맞나요? 사용자 입력값을 라우팅하는 컴포넌트를 개발하는 것은 사실 어렵지 않습니다. 하지만 다 이유가 있다구욧..! 어디 한번 들어나 봅시다ㅋ 프로젝트의 기획을 담당하신 분께서 뒤로가기를 위한 공통컴포넌트가 필요해요라는 요건을 주셨습니다. 그런데 이 컴포넌트는 항상 사용자가 설정한 이전 페이지로 돌아가야한다는 제약 사항이 있었습니다. 그냥 버튼에 history.back() 을 넣으면 되는거 아닌가? 라고 생각했지만, 이전 페이지라는 단어에서 고민해볼 점이 생기게 됩니다. 그래서 고민해봐야 할 점은 뭔가요? 문제를 하나씩 짚어가며 이야기 해보면 좋을 것 같군요. 첫번째 문제 : wi..

[React/Typescript/Styled-components] 모달 창 만들기 이번 포스팅에서는 React 라이브러리와 Typescript, 그리고 Styled-components로 우리가 흔히 모달이라 부르는 Dialog window를 만들어보겠습니다. 뭔가 만들기 어려울 것 같지만, 생각보다 너무 간단해서 놀라 자빠지실지도 모릅니다! Overview 우선 최종 결과가 어떤 식으로 나오는지 보시면 좋을 것 같습니다! 최종적으로 코드를 적용하고 실행한 웹 페이지의 모습입니다. "Open Modal" 버튼을 클릭하면 모달 창이 열리고, 반투명한 회색 배경(Backdrop)을 클릭하면 모달 창이 닫힙니다. 그럼 이제 구현 코드들을 살펴보겠습니다~ 폴더구조 src 폴더의 구조는 아래와 같습니다. 엥 이게 ..