개발일지

기본 폰트 사이즈는 16px이고 이게 1rem이 된다매번 계산하는 번거로움을 줄이는 방법, html에 폰트사이즈를 지정하기아래와 같이 지정하면 1rem = 10px 이 된다html { /* 16px * 0.625 = 10px */ font-size: 62.5%;}

카카오 맵 마커에 마우스를 올리면 해당 마커만 정보를 표기하고 싶은데 내가 선택한 마커를 어떻게 구분해야 하나 고민하다 유틸타입인 Record 를 알게 됐다Record 는 TypeScript의 유틸리티 타입으로 객체의 키와 값 타입을 정의할 수 있다각 마커에 id값을 키로, 마커 활성화 여부를 확인하기 위해  boolean 값을 값으로 넣어 state를 만들어준다그리고 Object.fromEntries는 배열로 주어진 키-값을 받아 객체로 변환하는 내장메서드로 마커의 id를 키로 값은 false로 넣어 객체 생성 완료 1. 마커의 hover 상태를 추적하기 위해 키는 id(string) 값은 false( boolean)  객체 타입의 state 생성2. 마커배열을 Object.fromEntries 와 m..

좌표를 주소로 변환geolocation은 위도와 경도를 가져올 수 있지만 우리가 이해할 수 있는 주소로 표기할 수 없다그래서 좌표를 주소로 변환하는 함수를 만들었다 getCurrentAddress 함수에 geolocation으로 현재 위도와 경도를 가져오고 getAddressHandle(주소 변환 함수)에 인자로 넘겨주었다 좌표를 주소로 변환하기 위해 Kakao Maps API의 Geocoder 객체를 생성해 준다Geocoder의 coord2Address 메서드를 호출하고 인자로 위도, 경도, 콜백함수를 넘겨준다콜백함수를 통해 요청이 성공하면 데이터를 변수에 할당해 준다 (result를 꼭 콘솔로 찍어서 구조를 확인해 볼 것)그리고 지도에 저장해 준다 * 주소 변환 변수를 지도에만 저장하는 이유지도는 현..

kakao API 사용하기api 키 발급 및 초기 설정은 아래 블로그 참고https://rominlamp.tistory.com/20 [React] KaKao 지도 API / 카카오맵 사용하기KaKao 지도 API를 사용하여 내 웹 사이트에 카카오맵을 적용해보겠습니다.  Kakao 지도 Javascript API 키 발급 및 웹 플랫폼 추가하기  Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발rominlamp.tistory.com지도 생성지도 위치가 바뀔 때마다 상태를 변경해줘야 하니까 mapState를 만들어준다초기값 좌표는 카카오 api 링크에 나온 좌표를 참고해서 넣자function App() { const [mapState, setMapState] = useStat..

// 개별 선택export const onCheckedHandler = ( e: ChangeEvent, item: any, setCheckItems: React.Dispatch>) => { if (e.target.checked) { setCheckItems(prev => [...prev, item]); } else { setCheckItems(prev => prev.filter(check => check.id !== item.id)); }};// 전체 선택 export const allCheckedHandler = ( e: ChangeEvent, data: any[], setCheckItems: React.Dispatch>) => { if (e.target.checked) {..

const highlightKeyword = (title: string, keyword: string) => { const parts = title.split(new RegExp(`(${keyword})`, "gi")); return parts.map((part, index) => part.toLowerCase() === keyword.toLowerCase() ? ( {part} ) : ( part ) ); }; {highlightKeyword(item.title, debouncedKeyword)}  RegExp: 정규 표현식을 사용하기 위한 내장 객체new RegExp(($..

타이포 그래피 변수 설정자간은 reset 파일에 포함시켜도 되지만 한글폰트에만 적용해야 해서 타이포그래피에 포함시켰다굵기는 따로 객체로 만들어주고 각 폰트명에 맞춰 사이즈와 행간을 묶어줬다// 자간(한글 폰트만 적용할것)$letter-spacing: -0.025rem;$font-weights: ( font-bold: 700, font-medium: 500, font-regular: 400,);// pc 폰트$pc-font: ( title-1: ( font-size: 2rem, line-height: 2.625rem, ), body-1: ( font-size: 1rem, line-height: 1.5rem, ), button-1: ( font-size: 1rem, ..

SCSS 파일명과 컴파일 규칙 언더스코어(_)가 있는 SCSS 파일명은 빌드할 때 하나의 SCSS 파일로 묶인다.  _filename.scss (언더스코어가 있는 파일)부분 파일로 간주돼, 단독으로 css 파일로 컴파일되지 않는다다른 SCSS 파일에서 @use 또는 @import 로 불러와야 사용할 수 있다재사용 가능한 스타일(초기화, 공통 레이아웃, 변수 등) 에 사용된다

정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수nresult122856 function solution(n) { var answer = 0; for (i = 1; i

함수 solution은 정수 x와 자연수 n을 입력받아,x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다.  입출력 예시xnresult25[2, 4, 6, 8, 10]43[4, 8, 12]-42[-4 , 8] function solution(x, n) { var answer = []; //return값을 담을 그릇 var num = 0; // x의 값만큼 * 되어 담길 그릇 for (let i = 1; i  풀이 x와 n을 인자로 받아서 n만큼 반복하고 x의 값만큼 곱한 배열을 반환해야 한다 배열을 담을 빈 배열과 x의 값만큼 곱셈할 초기값이 0인 변수를 선언해 준다 반복문을 활용해서 n번만큼 반복을 해주고 변수에 +를 해주면 값이 곱해지게 된다 => num = x + xx..