IT (197) 썸네일형 리스트형 [생활코딩/React] 13. React Developer Tools 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. React Developer Tools 👉🏻크롬 확장 프로그램을 깔아주자! 👉🏻리액트 개발자 도구를 사용하기 전까지 Element에서 HTML요소만 볼 수 있다. 👉🏻개발자 도구에서 리액트 component 탭에 들어가면 리액트에서 사용한 컴포넌트를 볼 수 있다. [010/API] Kakao Map API | 인포윈도우 커스텀하기 1. 문제상황 현재 현위치 인포윈도우(말풍선)는 위 사진과 같다. 딱 봐도 예쁘지 않다.ㅋㅋㅋㅋ 그래서 인포윈도우를 커스텀하려고 한다! 일단 현위치에 마커를 찍는 방법은 아래 포스팅을 참고하자! 2022.04.12 - [그 땐 IT활동했지/그 땐 영일영 근무했지] - [010/API] Kakao Map API | 현위치 표시하기 (공식문서도 참고!https://apis.map.kakao.com/web/sample/removableCustomOverlay/ ) 2. 현위치 인포윈도우 꾸미기! //map.html // 지도에 마커와 인포윈도우를 표시하는 함수입니다 function displayMarker(locPosition, message) { var imageSize = new kakao.maps.Si.. [생활코딩 / React] 12. props 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. props 현재 Subject라는 컴포넌트는 항상 같은 값을 출력한다. 용도에 따라 다른 내용을 출력할 수 있다면 얼마나 좋을까? 속성(props)을 활용해 이를 구현해보자! class App extends Component { render () { return ( ); } } 👉🏻다음과 같이 Subject 컴포넌트에 title과 sub라는 속성을 통해 값을 넘겨준다. class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); .. [생활코딩 / React] 11. 컴포넌트 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 이 강의는 예전에 듣고 한 번 더 듣는 거라 앞의 설치과정이나 기본 내용들은 뛰어넘었다! 1. 컴포넌트 만들기 1 class Subject extends Component { render() { return ( WEB world wide web! ); } } 👉🏻다음과 같이 Subject라는 class를 만들어준다. class에는 render 함수가 꼭 필요하다. 👉🏻JS 최신 문법은 function을 명시하지 않아도 return을 보고 함수임을 알 수 있다. return 안의 html 코드에서는 하나의 최상위 tag만 써야 한다. ✍🏻r.. [TAVE/파이썬 알고리즘 인터뷰] Ch13 | 최단 경로 문제 - 개념 정리 참고자료: 파이썬 알고리즘 인터뷰 최단 경로 문제 📌최단 경로 문제: 각 간선의 가중치 합이 최소가 되는 두 정점(또는 노드) 사이의 경로를 찾는 문제다. 정점: 교차로 간선: 길 가중치: 거리나 시간과 같은 이동 비용 👉🏻그래프의 종류와 특성에 따라 각각 최적화된 다양한 최단 경로 알고리즘이 존재한다. 다익스트라 알고리즘 📌최단 경로 알고리즘 중 가장 유명하다. 네덜란드의 유명한 컴퓨터과학자 에츠허르 다익스트라가 대학원생 여자친구와 카페에 가서 20분 만에 고안한 알고리즘이다. 단순한 알고리즘이 가장 훌륭한 알고리즘이라는 것을 증명하는 대표적인 알고리즘이다. 1️⃣그리디 알고리즘 👉🏻구현하기 쉽지만 느리게 동작한다. 👉🏻다익스트라의 최초 구현에서는 시간 복잡도가 O(V제곱)였다. 왜냐하면 방문하지 않은.. [TAVE/파이썬 알고리즘 인터뷰] Ch11 | 해시 테이블 - 개념 정리 참고 자료: 파이썬 알고리즘 인터뷰 📌해시 테이블 또는 해시 맵은 키를 값에 매핑할 수 있는 구조인, 연관 배열 추상 자료형을 구현하는 자료이다. 👉🏻대부분의 연산이 분할 상환 분석에 따른 시간 복잡도가 O(1)이다. 해시 📌해시 함수: 임의 크기 데이터를 고정 크기 값으로 매핑하는 데 사용할 수 있는 함수 📌해싱: 해시 테이블을 인덱싱하기 위해 해시 함수를 사용하는 것 ABC → A1 1234BC → CB AF32B → D5 👉🏻위의 각각 3글자, 6글자. 5글자인 문자열을 모두 2바이트의 고정 크기 값으로 매핑했다. 여기서 화살표 역할을 하는 함수가 해시 함수이다. 해싱은 정보를 가능한 한 빠르게 저장하고 검색하기 위해 사용한다. 생일 문제 더보기 💡 여러 사람이 모였을 때 생일이 같은 2명이 존재할.. [010/API] Kakao Map API | 통신사 카테고리 넣기 1. 문제상황 2022.04.13 - [그 땐 IT활동했지/그 땐 영일영 근무했지] - [010/API] Kakao Map API | 마커 커스텀하기 통신사별로 마커를 출력하기는 했는데(↑위 링크 참조!) 어떤 마커가 무슨 통신사를 의미하는지 파악하기 힘들다. 그래서 각 마커가 무엇을 지칭하는지 카테고리를 달기로 했다! (공식문서 참고하기! https://apis.map.kakao.com/web/sample/categoryMarker/) 2. 각 마커별로 범례를 달아보자 1단계 HTML&CSS SKT KT LGU+ 👉🏻먼저 HTML에는 카테고리를 표시하는 코드를 적어보자! ul과 li tag를 이용해서 만든다. .map_wrap { position: relative; width: 100%; height.. [010/API] Kakao Map API | 마커 커스텀하기 1. 문제상황 현재는 카카오에서 제공해주는 위의 기본마커를 사용하고 있다. 그런데 핸드폰 대리점들은 각 통신사별로 표시하고 싶다! LGU+, SKT, KT 이렇게 나뉘어져 있는데 대리점들을 이 통신사별로 나눠 다른 마커로 표시하려고 한다. 2. 지도에 통신사별로 다른 마커 찍기 1단계 이미지 준비 👉🏻일단 먼저 이미지를 준비하자! 나는 static에 mapmarker라는 디렉토리를 파서 마커 이미지들을 저장했다. (ALLmarker는 현위치에 사용할 마커이다.) 💡static이란? 정적 파일들로 개발자가 프로젝트를 진행할 때 사용하기 위해 미리 서버해 저장해둔 파일을 지칭한다. 이번 예시처럼 이미지를 저장하기도 하고 css, js 파일들을 저장하기도 한다. //map.html //마커 이미지의 이미지 주.. 이전 1 ··· 10 11 12 13 14 15 16 ··· 25 다음
