본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

전체 글

 (224)
[React] KAKAO(카카오) 지도 API 사용법, 웹에 카카오맵 불러오는 법 KAKAO 지도 API를 사용해서 카카오맵을 불러오는 법을 알아보자!     만들 예제의 완성본  - 마커(파란색 핀)로 해당 장소의 위치를 표시 - 마커 위에 인포윈도우를 표시 (상호명, 큰지도보기, 길찾기)- 지도 확대/축소를 설정할 수 있는 줌 컨트롤을 생성- 지도를 마우스 드래그로 이동 가능- 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도 타입 컨트롤을 생성 - 마우스 휠 확대/축소는 비활성화   구현된 카카오맵 사용 영상       1. 카카오 개발자(developers) 사이트에 방문한다.  https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공..
[TypeScript] 타입 호환 (Type Compatibility) 목차 1. "타입 호환"이란?2. 타입 호환의 기준 3. 명목적 타이핑 vs 구조적 타이핑4. 덕타이핑 vs 구조적 타이핑5. 타입추론과 타입호환6. Enum 타입 호환 주의 사항7. Class 타입 호환 주의 사항8. Generics 타입 호환   타입 호환에 대해서 알아보자!      1. "타입 호환"이란?  * 타입 호환: 타입스크립트 코드에서 특정 타입의 값을 다른 타입으로 사용할 수 있는지 여부를 결정하는 기준     2.  타입 호환의 기준  TypeScript에서 타입을 비교할 때, 객체의 구조나 모양이 일치하면 타입이 호환된다고 본다. 즉, TypeScript에서는 명목적 타이핑이 아니라 구조적 타이핑을 사용하기 때문에, 타입의 이름이 달라도 속성이 같으면 서로 호환된다.     3. 명..
[React] 리액트로 라디오 버튼(Radio button) 만들기 (신고 모달창 만들기) 리액트로 라디오 버튼을 만들어보자!       만들 예제의 완성본  - 버튼이나 텍스트를 클릭하면 버튼이 파란색으로 바뀐다.- 버튼을 hover 하면 버튼 테두리가 회색으로 바뀐다.      Radio 컴포넌트 만들기  Radio 컴포넌트는 개별 라디오 버튼을 나타낸다. 라디오 버튼은 HTML에서  요소의 type 속성을 radio로 설정해주면 얻을 수 있다.라디오 버튼은 여러 개의 선택 사항 중에 사용자로 부터 하나를 선택받기 위해서 사용된다. 텍스트를 클릭햇을 때도 라디오 버튼이 선택될 수 있도록 하려면,  요소로  요소와 children prop 모두 감싸주면 된다.  Radio.jsx import "./Radio.css";export const Radio = ({ children, value, n..
[TypeScript] TypeScript 컴파일러(tsc)의 컴파일 과정 목차 1. "tsc"란?2. tsc 컴파일 과정3. 컴파일러 옵션 tsc의 컴파일 과정에 대해서 알아보자!            1. "tsc란?"  tsc는 TypeScript Compiler의 약자로, TypeScript 코드를 JavaScript로 변환하는 명령줄 도구이다.tsc는 TypeScript 코드를 JavaScript로 변환하는 과정을 수행한다.이 과정에서 타입 검사를 통해 코드의 오류를 잡고, 다양한 옵션을 사용해 최종 JavaScript 코드가 어떻게 생성될지 제어할 수 있다.tsc는 필요 시 트랜스파일링을 통해 최신 JavaScript 기능을 구형 브라우저에서도 호환되게 변환하는 역할도 한다.    2. tsc의 컴파일 과정    1) 입력 파일 분석  컴파일러는 컴파일 대상 파일을 확..
[TypeScript] 타입 추론(Type Inference) 목차 1. "타입 추론"이란?2. 타입 추론의 기본3. 가장 적절한 타입 (The Best Common Type)4. 문맥 상의 타이핑(Contextual Typing)5. 타입을 명시적으로 선언해야하는 이유6. 타입 추론 오류와 해결 방법- 초기화가 없는 경우의 타입 추론 오류 (암묵적 any)- 유니온 타입에서의 잘못된 추론- 함수 반환 타입 추론 오류 - 객체 속성 타입 추론 오류   타입 추론에 대해서 알아보자!     1. "타입 추론"이란?  * 타입 추론:  타입스크립트가 코드에서 명시적으로 타입을 선언하지 않아도, 코드의 문맥과 값을 바탕으로 변수, 함수, 표현식 등의 타입을 자동으로 추론하는 것을 말한다. 타입스크립트는 이러한 추론을 통해 코드의 타입 안정성을 유지하면서도, 개발자가 모든..
[TypeScript] 타입 가드 (Type Guard) 목차 1. "타입 가드"란?2. 타입 가드의 필요성3. 타입 가드의 사용 예시- typeof를 활용한 타입 가드- instanceof를 활용한 타입 가드- in을 활용한 타입 가드   타입스크립트의 타입 가드에 대해서 알아보자!     1. "타입 가드"란?  타입 가드란 여러 개의 타입 중 원하는 타입으로 타입을 좁히는 역할을 하는 함수나 조건문으로, 특정 조건을 만족할 때 타입스크립트가 값의 타입을 명확하게 추론할 수 있도록 돕는다. 이를 통해 코드 내에서 안전하게 타입에 따른 처리를 할 수 있다.     2. 타입 가드의 필요성  TypeScript는 컴파일 시점에서 타입을 체크하지만, 런타임에는 값의 타입을 정확하게 알 수 없을 때가 있다. 특히 유니온 타입이나 any 타입을 사용할 때, 코드의 ..
[TypeScript] 타입 단언 (Type Assertion) 목차 1. "타입 단언"이란?2. 타입 단언의 기본 사용법3. 타입 단언은 언제 쓰는가?  타입 단언에 대해서 알아보자!     1. "타입 단언"이란?  TypeScript에서 개발자가 특정 값이 원하는 타입임을 컴파일러에게 명시적으로 알리는 방법개발자가 해당 타입에 대해 확신이 있을 때 사용하는 타입 지정 방식다른 언어의 타입 캐스팅과 비슷한 개념이며 타입스크립트를 컴파일 할 때 특별히 타입을 체크하지 않고, 데이터의 구조도 신경쓰지 않는다.     2.  타입 단언의 기본 사용법  타입 단언은 기본적으로 as 키워드를 이용해서 정의할 수 있다. // 타입 단언 적용 전 const name: string = 'Capt'; 위 코드는 타입 표기 방식을 이용해 name 이라는 변수의 타입은 string ..
[프로그래머스/JavaScript] 코딩 테스트 풀이 (문제 129 - flag에 따라 다른 값 반환하기) # 문제두 정수 a, b와 boolean 변수 flag가 매개변수로 주어질 때, flag가 true면 a + b를 false면 a - b를 return 하는 solution 함수를 작성해 주세요.# 답안// 1. 입력: 정수 a,b와 변수 flag// 2. 출력: flag ? a+b : a-bfunction solution(a, b, flag) { return flag ? a+b : a-b}

티스토리툴바