개발일지

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(($..

정수 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..

코테연습 중 map을 이용한 숫자변환을 적용해 보고 다양하게 활용할 수 있는 방법을 더 찾아보게 되었다아래 활용 예시뿐만 아니라 더 많은 활용사례가 있으니 한 번씩 찾아보는 것도 좋을 거 같다 https://kahee430.tistory.com/155 [코딩테스트] 자연수 뒤집어 배열만들기function solution(n) { var answer = String(n).split('').reverse() return answer.map(Number)} 풀이 매개변수를 문자로 변환한 뒤 split() 메서드를 활용해서 하나씩 쪼개 배열로 변환해 준다 (괄호 안에 따옴표만 넣으kahee430.tistory.com1. 배열의 문자열 요소를 모두 대문자로 변환하기toUpperCase() or toLowerCas..

자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를 들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다.function solution(n) { var answer = String(n).split('').reverse() return answer.map(Number)} 풀이 매개변수를 문자로 변환한 뒤 split() 메서드를 활용해서 하나씩 쪼개 배열로 변환해 준다 (괄호 안에 따옴표만 넣으면 문자를 하나씩 ' ' 으로 감싸 새 배열로 반환된다) 배열을 뒤집기 위해 reverse() 메서드를 활용했다 마지막으로 return 값을 숫자로 변환하면 끝인데return Number(answer)으로 변환을 시도했으나 배열이라 변환이 안 되는 게 문제였다 찾아보니 ..

SCSS를 사용하려는 경우, SASS를 설치해야 한다 SCSS 파일은 브라우저에서 직접 사용할 수 없기 때문에, SCSS를 CSS로 컴파일하는 도구가 필요하다 SASS는 SCSS 파일을 CSS로 변환하는 컴파일러 역할을 하고 아래 기능들을 제공해 준다중첩 규칙: CSS에서는 지원하지 않는 규칙의 중첩 허용변수 사용: CSS 코드에서 변수 사용믹스인(Mixin): 재사용 가능한 스타일 조각 생성.확장 및 상속: 기존 클래스의 스타일을 다른 클래스에 상속 1. 프로젝트에 sass 설치하기npmyarnnpm install sass --save-devyarn add sass --dev2. SCSS 파일 생성, 작성하기컴파일할 내용이 있어야 하기 때문에 필수 파일이 생성만 되어 있는 상태에서는 컴파일을 수행할 S..

시간 복잡도와 공간 복잡도복잡도란?알고리즘의 성능과 효율성을 나타내는 척도로 시간 복잡도와 공간 복잡도로 나뉜다알고리즘이 주어진 크기의 입력을 기준으로 수행시간과 사용공간이 얼마나 되는지 객관적으로 비교할 수 있는 기준을 제시한다복잡도를 나타내는 방법은 점근 표기법으로 O(빅오), Ω(오메가), Θ(세타) 등이 있고, 주로 빅오와 세타 표기법이 많이 사용된다.정리하면 복잡도란 알고리즘의 효율성을 판단하는 척도이다 시간 복잡도연산에 걸리는 시간이 아닌 연산의 횟수를 나타낸다왜 시간이 아닌 횟수를 측정하는가? 환경에 따라 결과가 다르게 나오기 때문단순히 특정 입력에 대해 실행되는 연산의 횟수만 보는 게 아닌, 입력의 크기가 증가함에 따라 실행되는 연산의 횟수가 얼마나 증가하는지를 나타낸 것.시간복잡도를 표기..

var , let , constthis클로저Rest APIRest  Ful APIAxios, Fetch, Promise, TanStack Query(React Query)Axios,  React Query 차이브라우저 렌더링 과정주소창에 naver.com입력 시 어떤 일이 일어나는가쿠키랑 세션 차이토큰이란쓰로틀링 디바운싱var , let , constvarvar는 es6 이전 버전에서 변수 선언 시 사용되었다전역 또는 함수 스코프를 가지며 TDZ(Temporal Dead Zone)의 영향을 받지 않는다함수 내부에 선언된 var는 함수 스코프(지역변수)를 가지기 때문에 함수 내부에서만 사용 가능하지만 if, for 내부에 선언된 변수는 블록을 무시하고 함수 또는 전역 스코프를 가지게 된다외부에 선언된 변수..