개발자 도담씨

✅ /product, /product/[id]/product와 /product/[id] 페이지를 개발하며갑자기 마주한 페이지 이동에 대한 고민을 메모해두려합니다.예를 들어 상품 페이지에는 여러 카테고리가 있고,선택된 카테고리에 해당하는 상품을 보여주는 구조라면/product/[id]의 [id]는 카테고리 ID라고 볼 수 있겠죠.그래서 저는 /product로 접근했을 때가장 첫 카테고리의 ID로 리다이렉트 시켜주는 구조를 만들고 싶었습니다.🔁 처음 시도한 방식: 내부에서 [id] 페이지를 호출처음에는 아래와 같이 /product/page.tsx에서 /product/[id]/page.tsx를 직접 호출하도록 했습니다.// product/page.tsximport ProductPage from '@/app/..

webstorm을 사용중이고 Next로 프로젝트를 설치하면서 자동으로 tailwindCSS를 설치 했었는데...외 않 되...?🥺물론 플러그인 당연히 설치 되어 있다....해당 케이스는 비교적 간단하게 해결 가능하다.tailwind.config.js 파일을 인식해서 자동완성을 제공하고 있다. 따라서 루트 경로에 tailwind.config.js 파일을 추가 해준다면! 끝이다 :)tailwind config 설정 참고 문서webstorm tailwind CSS Document(나는 tailwind 설정 커스텀할때만 config 읽는다는줄 알았는데..ㅎㅎ)자동완성 되는 것으로 확인!...tailwindCSS를 설치했는데 이 친구의 설정 파일은 없고 postcss.config.mjs는 자동으로 생기기길래 뭔..

최근 프리랜서로 웹 작업을 할 기회가 생겼는데 AWS 베포부터 CI/CD 그리고 인증서.. 도메인까지 전부 처음 하다보니 너무..너무 재밋다 🥰 역시 처음하는건 재밋어 :)...S3+CloudFront로 배포 중인 것을 이제 도메인 구매후 연결 하는 작업을 정리 해보려 한다. (* 도메인 구입부터 인증서까지 전부 AWS기능을 이용함)👀 Step도메인 구매SSL 요청CloudFront CNAME 설정Route 53 연결1️⃣  도메인 구매[AWS → 등록된 도메인 → 도메인 등록] 으로 이동원하는 도메인 검색후 검색 결과에서 선택 → 결제 진행 버튼 클릭연락처 등록 후 검토 및 제출제출 후 일정 시간이 소요 됩니다...2️⃣  SSL참고: https://jojoldu.tistory.com/434Clou..

최근 이직준비를 하며 코테를 풀어나가고 있는 도중, javascript에서 this의 개념에 대해 한번 더 생각하게 해준 문제를 하나 다뤄보려고 합니다. 해당 문제는 leetcode의 javscript - medium 레벨의 2693. Call Function with Custom Context 문제입니다. (아직 무료 버전을 사용중이라 디버깅을 node환경에서 돌려보고 있는점 참고부탁드립니다.).../** * @param {Object} context * @param {Array} args * @return {null|boolean|number|string|Array|Object} */Function.prototype.callPolyfill = function(context, ...args) { ..

주말에 홈페이지 접속이 안된다며 계속해서 울렸던 알람, 우선은 당장 운영이 되어야 했기에 노트북을 챙겨다녀야 했고 모니터링하며 주말을 보냈는데요😭 그리고 다음날 출근하여 원인을 분석하기 위해 확인중일때 또 같은 현상이 발생하기 시작했습니다....문제 발생 초기 당시...주말에 해당 문제가 발생했을 당시 AWS에 접속하여 인스턴스와 데이터베이스를 확인해보았는데 데이터베이스쪽 세션이 가득차있는 상태로 있는 것을 확인했습니다. 당시 지표를 잠깐 참고하자면 커넥션이 확 오른 상태였는데요.RDS의 성능 개선 도우미쪽을 확인해보았는데 이벤트 조회 쿼리의 호출이 많이 보였고 이벤트 오픈 기간이다 보니 접속이 몰리면서 문제가 되었으려나 추측을 했었습니다. 따라서 우선 일시적으로 DB성능을 올려둔 상태로 주말을 모니터..

여태 쉬는 시간없이 회사를 다닌지 5년 8개월만에 퇴사를 하고 쉬는 시간이 생겼습니다 :)바로 구직 활동을 할까 고민을 하다 한번 끝까지 쉬어보라는 회사분의 말씀을 듣고 쉼, 을 선택하기로 했어요.쉬는 것도 연습이 필요한지.. 일주일정도 집에 있는 중인데 잘(?) 쉬어보자는 다짐이 무색하게 쉬는것도 어려운 것 같습니다.(물론 중간중간 자꾸 찾는 연락이 계속 되고 있지만...😅)성격상 가만히 시간만 흘러가는게 너무 아까워서 결국 이력서 정리를 해두고 멘토링도 신청해보고  코딩 테스트 문제도 한번씩 푸는데 나름 재미있습니다! 소프트 스킬이라는 개발자 관련 책과 심심풀이용 62가지 심리실험이라는 책도 읽어보고 있는데 여태 책을 안읽은게 후회가 되기도 합니다.날씨가 조금 시원해지면 해외를 조금 돌아다니며 시야..

참고 React 문서: https://ko.legacy.reactjs.org/docs/lists-and-keys.html 리액트를 사용하다보면 반복문을 사용할때 자식 컴포넌트에 대해 key값을 지정해달라는 console log를 본적이 많습니다.리액트 문서에서 적혀있듯 순서가 바뀔 수 있는 경우 key값으로 index값을 사용하지 않는 것을 권장하고 있습니다. 리액트는 가상의 DOM을 두는데 실제 DOM과 가상의 DOM을 순회하다차이가 있다면 변화를 적용하고 있습니다.  first second first second third 위의 코드를 보면 하단에 자식 끝에 엘리먼트를 추가할 경우 first와 second는 변화하지 않고끝에 third만 추가해주면 됩니다.그런데 만약 가장 상단에 추가하게 될..

최근 새 프로젝트의 시작과 함께 디자이너와 협업을 시작했는데익숙하지 않다보니 아쉬운 부분이 생겨 정리해두려고한다. 디자인을 보고 퍼블리싱을 진행하는 과정에서 묘하게 정리되지 않은 부분들이 많았는데,내가 잘못하고 있는 부분인가 하면서 억지로 맞춰 넣었더니 조금씩 탈이 나기 시작했다. 초반에 공통적인 부분에서 디자이너와 개발자간의 대화가 필요해보이고,이번엔 특히 디자인에서 line-height가 뒤죽박죽인 부분때문에 문제가 많이 발생했다.추후엔 line-height도 확인하는게 좋을 것 같다. +) line-height문제가 아니라 디자이너분이 height를 직접 수정했던것...😭

나의 개발 환경은 Next.js, Typescript를 사용중이다. 데이터베이스를 이용하기 위해 Prisma를 사용하기로 했고 필자는 우선 sqlite를 이용할 예정이다. 1. 프로젝트에 Primsa 설치하기 yarn add prisma 또는 npm i prisma 2. prisma init npx prisma init 초기화시 /prisma/schema.prisma가 자동으로 생성 되고, 우리가 사용할 데이터 베이스에 접근하기 위해 .env 파일에 DATABASE_URL 값을 저장해주어야한다. ⭐️ 이때 .env파일은 꼭 gitignore에 추가해주기! 3. 사용할 데이터베이스 종류와 URL 설정 나는 sqlite를 이용하여 로컬파일로 관리하기를 원해 다음과 같이 수정해주었다. ## .env DATAB..

ES6의 reduce함수와 태그 함수 그리고 정규식을 이용해서 숫자 포맷을 깔끔하게 적용하는 멋진 코드를 하나 기록해두려 한다. function tag (str, ...arg) { return arg.reduce((p, c, i) => { return p + str[i] + String(c).replace(/\d{1,3}(?=(\d{3})+(?!\d))/g) }); } console.log(tag `사과는 ${3000}원 이고, 포도는 ${5000}원 입니다.`);