seopport.log

Next.js - 웹 개발을 위한 React 프레임워크 - 기존 SPA 라이브러리(React)에서 사용하던 CSR에서 벗어나 SSR, ISR, SSG등을 가능케 함 - 폴더 기반 라우팅 - route handler로 일부 백엔드 커버 가능 - 최적화 및 번들링이 우수하다. TTV와 TTI TTV(Time To View) - 페이지의 모든 콘텐츠가 화면에 표시될 때까지 걸리는 시간 TTI(Time To Interact) - 페이지가 로드된 후 사용자가 버튼 등 상호 작용할 수 있을 때까지 걸리는 시간 - 페이지가 실제로 사용 가능한 상태가 되는 데 걸리는 시간 Next.js 는 코드스플리팅을 지원하여 사용자가 필요로 하는 부분만 우선적으로 로딩하여 TTV를 향상한다. > UX 향상 TTI 동안 리액트 코드..

Vercel은 main에 push된 내역만 자동으로 반영해준다. 내가 수정한 내역을 배포한 사이트에 반영하고 싶다면 변경내역을 main에 push해야한다. push한 브랜치가 default 브랜치여도 자동 반영되지 않는다. main만 됨!

문제 상황 원했던 것 : task 컨테이너를 클릭했을 때 상세 페이지로 이동함. 버튼을 클릭했을 때는 navigate 되지 않음. 컨테이너 요소에 navigate를 걸어놓았을 때, 그 안의 버튼을 클릭하면 기능을 수행함과 동시에 페이지가 네비게이트 되어 원하는대로 실행되지 않는 문제. 이는 이벤트 버블링 때문에 발생하는 흔한 문제다. TaskBox 내 버튼(StProgressButton) 클릭이 상위 컴포넌트 이벤트(handleDetailNavigate)를 트리거해 원치 않는 페이지 네비게이션을 발생시키는 것이었다. 해결 방안 이 문제를 해결하기 위해 이벤트 버블링을 방지하는 로직을 구현해야 한다. 버튼의 클릭 이벤트 핸들러 내에서 event.stopPropagation() 메서드를 호출함으로써, 해당 ..

1. navigate로 페이지를 이동할 때 ?키이름={값} 쿼리스트링을 추가한다. navigate(`/detail?id=${item.id}`) 2. 이동한 페이지(컴포넌트)에서 searchParams Import const [searchParams, setSearchParams] = useSearchParams(); 3. get 메서드의 값으로 1번에서 지정했던 키이름을 넣는다. const targetId = searchParams.get('id'); 값을 읽어오는 메서드: searchParams.get(key): 지정된 key에 해당하는 값을 가져온다. 해당 key에 여러 개의 값이 있더라도 첫 번째 값을 반환한다. searchParams.getAll(key): 지정된 key에 해당하는 모든 값을 가져..

제네릭은 TypeScript에서 코드의 유연성을 높이고 코드 재사용성을 향상시키는 데 사용된다. 이해를 위해 제네릭을 "왜", "어디에", "어떻게" 사용하는지 알아보자. 왜 제네릭을 사용하는가? 유연성: 제네릭을 사용하면 함수, 클래스 또는 인터페이스를 특정 유형에 종속되지 않도록 만들 수 있다. 이는 여러 유형의 데이터를 처리할 수 있게 해준다. 코드의 재사용성 향상 : 동일한 코드를 다양한 유형의 데이터에 적용할 수 있다. => 코드의 재사용성 향상 재사용 가능한 컴포넌트 : 현재의 데이터와 미래의 데이터 모두를 다룰 수 있는 컴포넌트를 생성할 수 있다 => 시스템 구성에 있어 유연성 제공 => 즉, 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있다. + any가 아닌 제네릭을 ..

타입스크립트 컴파일러 타입 검사를 해주는 것이 컴파일러 타입스크립트 컴파일러는 TS -> JS 코드 변환함(C언어는 C => 기계어) 컴파일러를 이해하면 디버깅 과정에 도움이 된다. 컴파일러는 코드를 최적화하여 앱 실행 시간을 단축시킨다. 튜플 튜플은 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열 const person: [string, number, boolean[ = ['spartan', 25, true]​ push로 데이터를 추가할 수 있으나 권장되지 않음 enum 열거형 데이터 타입 다양한 상수를 더 이해하기 쉬운 문자열로 접근하고 사용할 수 있게하는 타입 명확하게 관련된 상수 값들을 그룹화할 때 사용하는게 좋다. readonly 클래스의 속성이나 인터페이스의 속성을 변경..

🔽 배포주소 너 납치된거야 kidnapped.vercel.app 이번 프로젝트는 외부 API를 사용한 사이트를 만드는 것이 목표였다. 우리 팀은 카카오맵 API를 사용해서 전국의 방탈출 카페 정보를 사용자 위치 기반으로 찾아주고 다른 지역의 방탈출 카페도 검색, 스크랩하여 볼 수 있는 사이트를 만들게되었다. 프로젝트 이름이 주제랑 잘어울려서 너무 맘에든다. ㅋㅋ 나는 프로젝트에서 리뷰 CRUD를 맡았는데, CRUD는 그래도 반복학습으로 많이 해봐서 큰 어려움 없이 구현한 것 같다. 내부분에서 어려웠던 것은 별점 기능, 댓글 개별 모달창이 어려웠던 것 같다. 별점 등록 기능은 컴포넌트의 반환 부분에서 새로운 컴포넌트를 작성하고, 그 안에서 DOM 요소를 반환하는 방식으로 코드를 작성했는데, 구조와 실행순서..

터미널에 다음과 같은 명령어를 입력해서 프로젝트를 main에 머지하기 전에 dev에서 배포를 테스트해볼 수 있다. 1. yarn build 여기서 뭔가 에러가 뜨면 배포했을 때 오류가 날 것이라는 뜻이다. yarn build 성공시 🔽 2. yarn global add serve 3. serve -s build (안되면 npx serve -s build ) 여기까지 에러 없이 완료되면 Serving! - Local: http://localhost:51396 - Network: http://xxx.xxx.xx.xx:51396 (xxx는 ip 주소) 이렇게 접속 가능한 주소를 주고 여기서 배포가 됐을 때의 사이트를 볼 수 있다. Local은 내 로컬에서 접속 가능한 사이트 network는 같은 와이파이를 쓰..