dev-hpk 님의 블로그

[JS] finally 이해하기

자바스크립트에서 try - catch - finally 구문은 예외 처리를 위한 강력한 도구입니다. 이 구문에서 finally 블록은 예외 발생 여부와 관계없이 항상 실행되는 코드 블록으로, 주로 리소스 정리나 마무리 작업에 사용됩니다. finally? finally는 일반적으로 try나 catch 뒤에 붙으면서, try나 catch 문의 동작이 모두 완료되었을 때 무조건 실행되는 코드를 작성하기 위해 사용합니다. finally 블록은 선택 사항이기 때문에 생략하는 경우가 많습니다. finally가 어떻게 동작하는지 간단하게 짚고 넘어가겠습니다.지금부터 주목해야할 점은 무조건 실행되는 코드입니다. 예시로 확인해보겠습니다.예시 (1)try { console.log('Try');} catch(error) ..

🚫 문제 상황 : 동적 라우팅 ([id].tsx) 페이지에서 새로고침 하면 404 page로 이동한다.문제 원인을 찾지 못해서 vercel 배포 환경 설정이 잘 못 되었는지 확인하기 위해 로컬에서도 빌드를 진행했습니다.빌드 후 next/static 폴더의 리소스를 비교했지만 로컬과 vercel 모두 [id]로 동적 파일을 생성했습니다.어디서부터 잘못된 걸까요...💡 해결 방법팀 회의와 검색을 통해 문제 원인과 해결 방법 여러개 찾아보았는데, 프로젝트에 바로 적용하기에는 어려운 부분들도 있어서 멘토님께 해당 이슈를 공유했습니다. 멘토님의 조언을 통해 해결 방법을 간추려 봤습니다.getServerSideProps 선언해 SSR(Server Side Rendering)로 동작하도록 수정실제로 SSR로 수정..

React는 컴포넌트 기반의 라이브러리로, 모든 컴포넌트는 생명주기(Lifecycle)를 가집니다. 생명주기는 컴포넌트가 생성, 업데이트, 제거되는 과정을 의미하며 이를 활용해 컴포넌트의 특정 시점에 원하는 동작을 정의할 수 있습니다. 목차 1. 리액트의 라이프사이클 단계 2. 함수형 컴포넌트와 useEffect 3. useEffect 사용 시 주의할 점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 리액트의 라이프사이클 단계위 사진은 Class 방식의 라이프 사이클입니다.함수형 방식에서는 컴포넌트의 라이프사이클은 크게 세 가지로 나눌 수 있습니다.1. 마운트 (Mount)정의: 컴포넌트가 생성되고 DOM에 추가되는 단계주요 메서드: componentDidMount (클래스 컴포넌트 기준)..

오늘은 저번 이슈 해결에 이어서 사용자 편의성 개선 작업을 해보려고 합니다.🌈 개선 사항 : select 메뉴 버튼이나 옵션 바깥 부분을 클릭했을 때 select 메뉴가 닫히면 좋을 것 같다.멘토님께 피드백을 받고 구글, 네이버 같은 사이트들을 확인해 봤는데 모두 select 메뉴 바깥 부분을 클릭하면 닫히도록 동작하네요👀💡 수정 코드 및 결과/* import, type 등 생략... */function Dropdown({ children, menus, onMenuClick,}: PropsWithChildren) { const { isOpen, toggleDropdown, closeDropdown } = useDropdown(); const ref = useRef(); const hand..

멘토님과 1차 배포 테스트를 진행했습니다.버그를 하나씩 찾아내시는데 제가 작업한 페이지도 버그가 많네요😭테스트하면서 나온 이슈들을 정리해 보면 아래와 같습니다.버그를 하나씩 살펴보면서 수정해 보겠습니다!🚫 문제 상황 : Todo 상세 모달의 타이틀이 길어지면 메뉴를 버튼 영역을 침범하고 UI가 깨짐 타이틀이 길어지는 경우 버튼 영역을 침범할 뿐 아니라, UI 적으로도 모달 헤더가 너무 길어 보여서 어색해 보입니다.모달 타이틀이 저렇게 긴 경우가 있을까 싶지만... 모든 상황을 고려해야겠죠🤔Figma, 기획서에 타이틀이 길어지는 경우에 관련된 정의가 없어 고민해 본 결과 타이틀을 1줄만 노출하고 길어지면 말 줄임(...) 처리하는 게 가장 자연스러운 것 같습니다.팀원분들도 모두 말 줄임 처리가 좋다고..

1. 입력한 URL 주소 중, 도메인 이름에 해당하는 google.com을 DNS 서버에서 검색합니다.웹 브라우저는 DNS 서버에 검색하기 전에 캐싱된 DNS 기록을 통해 해당 도메인 주소와 대응하는 IP 주소를 확인합니다.해당 도메인 이름에 맞는 IP 주소가 존재하면, DNS 서버에 도메인 이름에 해당하는 IP 주소를 요청하지 않고 캐싱된 IP 주소를 바로 반환합니다.일치하는 주소가 없다면 DNS 서버에 도메인 이름에 해당하는 IP 주소를 요청합니다.2. DNS가 웹브라우저에게 찾는 사이트의 IP주소와 사용자가 입력한 URL 정보를 함께 전달합니다. DNS query는 현재 DNS서버에 원하는 IP주소가 존재하지 않으면 다른 DNS 서버를 방문하는 과정을 반복해 IP주소를 찾습니다. 해당 도메인 이름에..

카드의 태그 관련 이슈가 발생했습니다.카드 생성 POST API에 태그 색상과 관련된 속성이 없어서 생긴 문제인데 확인해 보겠습니다. 🚫 문제 상황화면이 리렌더링 될 때마다 태그의 색상이 랜덤 하게 변경됩니다.카드를 생성하는 POST API에 태그 색상에 대한 옵션이 없어서 발생한 문제입니다.처음 작업할 때 태그 컴포넌트가 렌더링 될 때 정해진 5개 색상 중 랜덤하게 설정되도록 만들었거든요...😅const getTagColor = (styles: Record): string => { if (!bgTag || bgTag.length === 0) return ''; const idx = Math.floor(Math.random() * bgTag.length); return styles[bgTag[i..

오전 스크럼 회의 때 카드 이미지에 대한 이슈가 있었습니다. 담당 팀원분이 바쁜 관계로 제가 수정하기로 했습니다.  제가 작성한 로직은 아니지만, 서로서로 돕는 게 팀이죠😊   🚫 문제 상황 이미지를 등록한 상태로 카드를 생성했지만, 화면에 보여지는 카드는 이미지가 없이 렌더링 됩니다. 💡 해결 방법 에 accept 속성을 사용해 이미지 확장자를 제한해 보겠습니다❗테스트해보니 svg 형식을 업로드하면 이미지가 안 보이는 것 같습니다.gif, jpg, png 확장자의 경우 잘 렌더링 되는 것을 확인했습니다. 결과를 확인해 보겠습니다.깔끔하게 해결! ... 이면 좋겠지만, 파일 선택창 하단에 사용자 지정 파일을 선택할 수 있게 되어있네요..🤔한 번 눌러봐야겠죠? 슬픈 예감은 항상 틀린 적이 없네요....

웹 성능 최적화에서 중요한 개념 중 하나가 바로 Reflow(리플로우)와 Repaint(리페인트)입니다. 이 두 가지는 브라우저가 화면에 콘텐츠를 렌더링 하는 과정에서 발생하며, 잘못된 코딩 습관은 Reflow와 Repaint를 빈번하게 발생시켜 성능 저하로 이어질 수 있습니다.  목차 1. 브라우저 렌더링 과정 2. Reflow란? 3. Repaint란? 4. Reflow와 Repaint의 상호작용 5. Reflow와 Repaint 최소화 - 성능 최적화추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 브라우저 렌더링 과정Reflow와 Repaint를 알기 위해서는 우선 브라우저 렌더링 과정을 알아야 합니다.HTML 파일을 파싱해 DOM 트리를 생성합니다.CSS 파일을 파싱해 CSSOM 트..

오늘은 대시보드 상세에서 카드의 상세 모달을 작업해 봤습니다! 우선 전반적인 코드를 먼저 보여드리고 작업하면서 있었던 문제들과 해결한 방법에 대해서 설명해 볼게요!(컴포넌트 구조보다 기능적인 부분을 보고 싶으시다면 아래 링크를 눌러주세요↓)기능 코드 DetailCardModal.tsx (할 일 카드 모달)기능이 많아 컴포넌트는 아직 분리하지 못했습니다... import 부분은 생략했으니 이해해 주세요😭빠른 시일 내로 리팩토링 할 예정이니 코드 블록이 불편하시다면 아래 Github PR을 확인해주세요!! #92 모달 할 일 카드 by hpk5802 · Pull Request #98 · codeit-sprint-part3-6team/project이슈 번호 close #92 변경 사항 요약 공통 dropdo..