개발일기

https://velog.io/@godeeyeon/posts

1. 개념 scan.nextInt() : 사용자로부터 정수를 입력받으면, 정수를 읽고 개행 문자 앞에서 중지. 남은 문자(개행, \n 포함)를 버퍼에 남겨놓음. 엔터 키를 누르면, 입력받은 숫자를 정수로 변환하고, 다음 입력을 기다린다. 엔터 키 입력은 무시. scan.hasNextLine() : 입력 스트림에 다음 줄이 있는 지 확인하여 다음 입력이 있을 때만 특정 동작을 수행하도록 하기 위해 사용. 다음 줄이 있다면 true, 없으면 false. scan.nextLine() : 사용자가 엔터키를 누를 때까지 입력된 모든 문자열을 반환. nextInt()와 같은 메서드를 사용한 후 남아 있는 줄바꿈 문자(엔터, 개행, \n)를 처리하고 새로운 줄의 입력을 받기 위해 종종 사용 scan.next() : ..

1. PWA 적용 1) public 폴더 하위 manifest.json 파일 -> 프로젝트명 및 아이콘, 테마 컬러 설정 가능 // public 폴더 하위 manifest.json { "short_name": "Amigo Signal", "name": "Amigo Signal", "icons": [ { "src": "favicon.png", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "logo192.png", "type": "image/png", "sizes": "192x192" }, { "src": "logo512.png", "type": "image/png", "sizes": "512x512" } ], "start_u..

1. 글 수정: 구글 맵 컴포넌트(이전 지도 정보 유지, 국가 변경 시 해당 사항 반영) 1) 글 수정 페이지: SpotMapUpdate 컴포넌트 Import 및 props로 필요한 정보 내려주기 // components 폴더 하위 spotShare 폴더 하위 spotShareTemplate 폴더 하위 UpdateTemplate.tsx import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import React, { useEffect, useState } from 'react'; import { useNavigate } from 'react-router'; import { getSpotPost, updateSpotPo..

1. 태그와 태그를 활용한 이미지 최적화 * 이미지 로딩 이슈(Layout Shift) 해결방법 1. 디바이스별 별도 이미지 사이즈 제공 2. 와 태그 (webp 지원 여부) 3. 이미지 변환 도구 - squoosh -> 여기에서 사용해 볼 방법은 두 번째 방법 ! 브라우저는 태그 내에 선언된 태그 요소 중에서 srcset, media, type과 같이 선언된 속성(attibutes)들을 통해 기기에 적합한 이미지를 순차적으로 확인하고 노출하게 된다. 적합한 요소가 선언되어 있지 않거나, 브라우저가 picture를 지원하지 않을 때에는 태그에서 선언된 이미지가 노출된다. 정리하자면, 태그는 브라우저가 렌더링해야 하는 파일과 크기를 결정하는 데 도움이 되는 정보를 제공하며, 태그는 이미지의 크기와 대체 텍..

1. 선택적 헤더 알람 오류 수정 및 신청자 닉네임 추가 [1차 도전] 1) supabase DB에 alert 테이블 추가 2) supabase의 alert.ts 파일 새롭게 생성 (DB 통신 코드) 및 user 닉네임 가져오는 함수 추가 // api 폴더 하위 supabase 폴더 하위 alert.ts import { supabase } from './supabaseClient'; // alert 테이블의 field 속성들 type NewPostInfoProps = { id: string; applicantNickName: string; logInUserId: string; applyId: string; postId: string; title: string; date: string; genre: str..

1. 헤더: 동행찾기 참여 기능 알람 추가 1) supabase DB의 applicants 테이블에 writerId 추가 : 동행 신청한 글의 작성자 정보를 추가 -> 로그인한 유저 = 작성자인 경우, 해당 글에 동행 신청이 오면 catch 할 수 있도록 조치 // api 폴더 하위 supabase 폴더 하위 supabase.ts -> 모두 writerId를 추가해주었습니다. applicants: { Row: { writerId: string; }; Insert: { writerId: string; }; Update: { writerId?: string; }; } 2) 동행 참여 신청하는 자기소개 작성 시, writerId 데이터 추가 (1) 상위 컴포넌트인 Communication.tsx 에서 writ..

오늘의 기억할 거리 1. useRef와 useState의 특성을 고려한 사용 (선택한 국가 country 전달 과정에서) useRef는 컴포넌트의 리렌더링 없이 항상 최신 country 값을 참조하게 하기 위해, useState는 selectedCountry 값의 변경에 따라 컴포넌트를 재렌더링하기 위해 사용했습니다. WriteTemplate 컴포넌트에서 props로 받아온 country 값이 바뀔 때마다, useRef는 컴포넌트의 리렌더링 없이 해당 country 값의 최신 값을 지속해서 유지하고, useState는 업데이트된 selectedCountry 상태를 자식 컴포넌트인 AddressSearch 컴포넌트로 전달합니다. 1) 상황 스팟 공유 글 작성하는 WriteTemplate 컴포넌트에서 dro..