오늘은 URL 파라미터를 정리해보려고 합니다.URL 파라미터에 대해 간략한 설명과 JS에서 운영하는법, react에서 react-router의 hook들을 사용한 방법들을 소개해보려고합니다. 바쁘신 분들은 맨 밑으로 내려가셔서 5. 읏차차 최종정리 (요약) 섹션만 확인해주세요! 1. URL 파라미터의 종류URL에는 두 가지 파라미터가 있습니다.https://example.com/product/123?category=react&page=1 ↑ ↑ 경로 파라미터 쿼리 파라미터 경로 파라미터 (Path Parameter)URL 경로의 일부: /product/123, /user/kim필수 값, URL 구조의 핵심입니다.용도: ..

개발하다보면 주워듣는 말... 예시와 두가지 답변으로 한번 이해해보시죠. DRY - Don't Repeat Yourself코드를 반복하지 마라예시이 코드는 조금 DRY 할 필요가 있겠네요답변 1 - 건조..한건가..답변 2 - 넵, 반복 코드 함수로 만들어 두겠습니다. YAGNI - You Ain't Gonna Need It필요한 작업만 하라 (미리 만들어 두지 마라)예시이게 왜 필요합니까 그냥 YAGNI 하세요답변 1 - 야근이나 하라고요...답변 2 - 넵, 당장 필요한 것만 우선적으로 구현하겠습니다. KISS - Keep It Simple, Stupid / Keep It Short and Simple / Keep It Small and Simple단순하게 해라예시KISS 하시죠 답변 1 - 헉..

요새 작업을 하면서 다양한 개선을 시도하고, 새로운 기술을 적용시켜보고싶은 욕심이 생기고 있다.보여지는 그 자체에 매몰되지 않기 위해 가장 중요한 기록을 남겨보고자 한다. 1. 지금 풀어야 할 수많은 문제 중, 진짜 해결해야하는 문제는 뭘까?비즈니스에 직접적인 임팩트를 주거나, 사용자가 가장 불편해하는 문제를 먼저 해결하자.‘이 문제를 풀면 서비스가 정말 나아지는가?’를 스스로에게 묻자. 2. 그 문제를 가장 단순하게 해결할 방법 (최대한 값싸게 해결할 기술 포인트)최신 기술이 항상 답일까? 단순한 해결책이 효과적일때도 있다.가격 / 시간을 고려해보자.ex. 채팅 구현을 할 때 일반적으로 모두가 WebSocket을 생각하겠지만, 메시지가 유실되면 안되는 상황이 더 중요하다면? HTTP polling이..

1. 깃허브 배포 전략 및 문제를 파악하다. 사내에서 담당하게 된 프로젝트의 Git 브랜치 구조를 처음 봤을 때, 바로 개선이 필요하다고 생각했습니다. 처음 본 문제main (운영 서버) / develop (개발 서버) 브랜치만 존재했습니다.main과 develop이 동기화되지 않은 부분이 있었습니다.전달받은 main 배포 방식은.. develop 작업 파일 수동 복붙이었습니다. 왜 이런 상황이 됐을까? 더 파보니 이전 작업자분들도 나름의 이유가 있었습니다. 로컬에서 CRUD 테스트가 불가능 (보안 제약으로 조회만 가능) 즉, 기능 검증을 위해서는 무조건 develop에 올려야만 했습니다.feature 브랜치 없이 모두가 develop에 직접 push 했음.배포 제외 기능도 develop에 계속 쌓임..

문제github에서 삭제되었다고 전달받은 브랜치가 git fetch를 해도 남아있었습니다.아니 git fetch 하면 다 최신화 아니냐? 어이없네 하면서 0과 1밖에 모를놈 따위에게 예민하게 굴었는데요! 좀 알아보니까 이유를 발견했습니다. 원인이유는 origin에 올렸던 reference 값은 fetch를 하더라도 남아있어서였습니다.fetch는 원격의 새로운 변경사항은 가져오지만, 삭제된 브랜치의 로컬 참조는 자동으로 제거하지 않기 때문입니다. 해결prune 이라는 "가지치기" 뜻을 가진 명령어를 사용해주면 해결됩니다.# prune(가지치기 명령어)를 사용git fetch --prune origin# 짧게도 가능git fetch -p origin 자동으로 fetch 할 때 마다 같이 되게 하는법은 다음과..

지라에서 주워들은말 ... TB 일반적으로 Test Bed(테스트베드)란, 새로운 기능이나 서비스를 시험·검증하기 위한 테스트 환경을 말한다.우리 회사에선 주로 개발 서버를 TB라고 부르시곤 한다. TB에서 확인했다 === 운영 배포 전, 개발 서버에서 확했다는 의미!

옛날 리액트 코드를 볼일이 있어서 신나게 npm start 때렸더니 에러가 떴습니다.npm i 할때부터 deprecated!!! deprecated!! 하더니 역시나…Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:79:19) at Object.createHash (node:crypto:139:10) ... reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' 원인은?Node.js 17+ 버전에서 OpenSSL v3가 기본 적용되면서 Webpack(react-scripts 포함)과의 호환 문제로 발생하는 에러였..

원티드 커리어 웨비나(물경력 다시쓰기 - 개발자 편)가 열린다 그래서 얼레벌레 참석하고왔습니다.간략한 후기글을 써보려고합니다. 듣게된 계기?뻔하죠 ㅠㅠ 나 앞으로 물경력 안되려면 뭐하고 또 뭐하고 또 뭐해야할까? 라는 생각에 신청했습니다. 웨비나 신청페이지에서 연사님들의 세션 소개서를 먼저 확인했었는데요, 기술적인 부분보다는 현재 불안한 개발자들을 위한 위로 스타일의 세션일거라고 예상했습니다.(그리고 그게 맞았습니다) 세션 소개 등의 정보는 더보기 내 원티드 페이지를 참고해주십쇼.더보기https://www.wanted.co.kr/events/25webinar_career-dev?label=event 기억에 남는 포인트1 세션 - 어려운 취업과 이직, 다가오는 AI 가 두려운 개발자들에게물경력?남이랑 비..

기획 회의 중 주워들은 말 ... voc voc는 보통 Voice of Customer(고객의 소리)라고 한다.기업이나 서비스 조직에서 고객 불만, 문의, 건의사항 등을 수집하고 관리하는 활동이나 시스템을 통틀어 voc라고 부른다고 함.voc 대응 건 === 고객 불만·요청에 대응하기 위해 진행하는 건!

사내에서 깃헙 security 대응으로 next.js 버전을 업데이트 했어야 했습니다. 일단 내부 설정을 살펴보니 package-lock.json / package.json / pnpm-lock.yaml 이렇게 세개의 파일이 관리되고 있었습죠.이거 세개를 다 바꿔줘야했는데요. 일단 pnpm이 메인 패키지 매니저라 pnpm 으로 대응 하려던 중에, 헷갈리는 게 하나 있었습니다.바로 버전 업 명령어인 pnpm add / pnpm up 입니다. 두 개나 있는데 느낌대로 쓸 순 없겠죠? ㅋ 그래서 알아보고 한번 돌려봤습니다. pnpm uppnpm-lock.yaml 만 업데이트package.json은 유지pnpm up next@latest # 범위 무시하고 최신 버전으로pnpm up next ..