카카오나 네이버 지도를 사용할 때 이런식으로 지도를 그려야 한다고 가이드에 작성이 되어있다. 하지만 React에서 지도를 작성할 때 위와 같은 가이드로 작성을 하게 되면 이렇게 밑줄이 쳐지게 된다. 에러메세지가 이렇게 뜨는 걸 확인할 수 있다. 해결방법 const { kakao } = window; 다음과 같이 window에서 kakao 객체를 불러와야지 사용할 수 있다. 이유는? JavaScript에서 전역 객체인 window를 통해 외부 라이브러리를 사용하기 때문이다. 일반적으로 React 애플리케이션에서 외부 라이브러리를 사용할 때는 npm을 통해 패키지를 설치하고 import 문을 사용하여 해당 라이브러리를 불러온다. window 객체는 전역 객체로써 브라우저 환경에서 사용되며, 외부 스크립트 파..
🫧 문제 Implement the Absolute type. A type that take string, number or bigint. The output should be a positive number string type Test = -100; type Result = Absolute; // expected to be "100"🛠️ 테스트 케이스 type cases = [ Expect, Expect, Expect, Expect, Expect, Expect, Expect, Expect, Expect, Expect, ]🎱 정답 type Absolute = `${T}` extends `-${infer U}` ? U : `${T}`💭 해설 타입 Absolute는 조건부 타입으로, 입력된 제네릭 타입 T가..
aria-describedby와 title은 둘 다 웹 요소에 대한 추가 정보를 제공하는 데 사용되지만, 몇 가지 차이점이 있습니다. 1. 사용목적 title: title 속성은 요소에 대한 간단한 툴팁을 제공하는 데 사용됩니다. 마우스를 해당 요소 위에 올리면 툴팁이 표시됩니다. title은 주로 비교적 간단한 정보를 제공하거나 요소에 대한 간단한 설명을 제공하는 데 사용됩니다. aria-describedby: aria-describedby 속성은 웹 요소에 대한 상세한 설명이나 오류 메시지, 추가 정보 등과 같은 복잡한 내용을 제공하는 데 사용됩니다. 주로 스크린리더를 사용하는 사용자에게 추가 정보를 전달하는 데 활용됩니다. 2. 접근성 title: title 속성의 툴팁은 일반적으로 마우스 호버에 ..
액티비티 다이어그램이란? 객체의 상태가 아닌 처리 로직이나 조건에 따른 처리흐름을 순서에 따라 정의한 다이어그램 로직, 절차, 흐름을 기술 (플로우 차트와 유사) 업무 프로세스, 코드 실행 로직을 표현할 때 주로 사용 분기 처리를 표현할 수 있는 다이어그램 예시 구성 요소 초기 노드 (검은색 원) : 활동의 시작을 나타낸다. 제어 흐름 (화살표) : 단계, 절차, 이동 순서를 연결한다. 액션(모서리가 둥근 사각형) : 어떤 일들의 처리와 실행을 의미한다. 끝 노드(이중 원) : 하나의 액티비티의 끝을 알린다. 결정 노드 : 분기 처리할 때 조건을 나타낸다. 조건 : 조건을 나타냄 병합 노드 : 분기처리로 흩어졌다가 다시 모일 때 사용한다 (생략하는 경우도 많음) 포크 노드 : 병렬로 실행되는 것을 표현...
JSX를 작성할 때 루트 JSX 요소가 1개만 있어야 하고 나란히 있으면 안된다. ... return ( Hi! This does not work! ); 해결 방법 1. div 로 감싸기 ... return ( Hi! This does not work! ); 전체를 div 로 감싸서 루트 JSX 요소가 1개만 있게 만든다. 2. 배열로 감싸기 아래 코드와 같이 배열 요소로 JSX를 묶어서 반환하는 방법이 있습니다. ... return [ Hi! , This does not work! ]; 이때 전체를 감싸고 있는 중괄호{} 가 있다면 제거 해야합니다. 예를 들어 이런 코드가 있다면 ... return ( {error && ( )} ) ... return [ error && ( ) ] 위 처럼 변경 해줘야..
타입스크립트로 에러 처리하기 } catch (err) { console.error(err.message); // Object is of type 'unknown' } 타입스크립트에서 error의 object가 unknown 타입으로 정의되어 에러가 발생하게 된다. Any 타입으로 강제 변경 catch (e: any) { return e.message; } as로 타입 단언 } catch (e) { return (e as Error).message; } instanceof로 타입 가드 type을 정하지 않고 any로도 캐스팅 하지 않는 가장 안전한 방법이다. } catch (e) { if (e instanceof Error) { return e.message; } }
코드로 종료 process.exit() process.exit(0 혹은 생략) // 성공 코드로 종료 process.exit(1) // 실패 코드로 종료 터미널로 종료 1. Ctrl + C 를 이용해 종료하는 방법 2. 터미널이 켜지지 않은 상태일 때 localhost 종료 방법 윈도우 netstat -a 명령어로 사용중인 포트를 확인합니다. taskkill /f /pid (종료할 pid) 를 입력해줍니다. 맥 lsof -i :포트번호\ 위의 명령어로 해당 로컬호스트 포트의 PID를 찾습니다. (ex> lsof -i :3000) kill -9 PID번호 PID 번호로 해당 포트 서버를 종료합니다. (ex> kill -9 35452)
기존 라우팅 방식 기존에는 페이지에서 페이지로 이동을 하기 위해서 a 태그를 사용해 이동을 했습니다. Home 구현 화면 실제 화면에서 클릭을 해 다른 페이지로 이동을 하면 상단 로고가 새로고침 되는 것을 확인할 수 있습니다. 그렇다면 Next.js에서는? 하지만 Next.js에서는 a 태그를 사용해 페이지 간 이동을 구현하게 되면 다음과 같이 eslint 오류가 납니다. Do not use an element to navigate to /. Use from next/link instead. 즉 태그 대신 태그를 사용하라는 것입니다. 사용법 안에 프로퍼티를 작성해주면 됩니다. 따라서 태그를 사용한 코드는 다음과 같습니다. export default function NavBar() { return ( Ho..
도입 이번에 우아한테크코스 프리코스를 진행하면서 과제를 총 4번 진행했습니다. 3주차 미션부터 공통적으로 있던 요구사항이 있습니다. 핵심 로직을 구현하는 코드와 UI를 담당하는 로직을 구분한다. 바로 이 요구사항입니다. 도메인과 뷰를 담당하는 로직을 분리하라는 요구사항이었습니다. 도메인과 뷰 로직을 분리하라는 요구사항은 즉 출력을 담당하는 뷰, 미션을 진행함에 있어 필요한 데이터를 관리하는 도메인으로 나누라고 이해를 했습니다. 이렇게 로직을 분리하는 것이 MVC패턴에 맞다고 생각이 들어 MVC패턴에 대해 학습을 진행했습니다. 하지만 다른 분들의 코드를 리뷰해보다 보니 제가 생각하나 MVC패턴과는 다른 흐름으로 진행이 되고 있는 것 같아 학습을 하고자 글을 작성하게 되었습니다. 왜 MVC 패턴을 사용할까?..
이번주 계획 이번주 목표 3주차에 학습했던 객체를 객체답게 사용하는 방법에 대해 학습을 진행하자! 구현을 함에 있어서 학습 목표는 다음과 같았다. 도메인과 UI로직을 분리해서 구조를 작성하기 단방향 흐름을 잘 지키기 의존성을 주입을 통해 테스트를 하기 쉬운 코드를 작성하기 이번주 내 활동 🔍 피어리뷰 스터디 디스커션을 보다가 정말 열심히 같이 성장하고 있는 스터디의 리뷰가 올라온 것을 포착했다. 공유해주신 스터디 요약을 보고 그 분들이 다른 동료들에게 남겨준 피어리뷰를 확인해보니 배울 것이 많은 스터디 같았다. 바로 해당 스터디원에게 슬랙으로 DM을 보냈다…! 스터디원분들이 전부 동의를 해주셨고 그렇게 스터디를 같이 진행하게 되었다.🤗 일주일동안 슬랙에서 같이 모각코를 진행하고 미션을 제출한 수요일 저녁..
