jpg의 끄적끄적

아래 사진과 같이 react-kakao-maps-dsk를 이용해 지도를 구현하고 주소에 해당하는 부분(충청북도 단양군 단양읍 고수동굴길 8)에 마커 표시를 구현할 것이다.1. 카카오 개발자 어플 등록https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com위 링크로 들어가 로그인을 한 후, 내 어플리케이션으로 이동해 어플리케이션을 추가해준다.등록 후, 아래과 같이 플랫폼으로 이동해 Web에 http://localhost:3000을 추가해준다.앱 키로 이동해 JavaScript 키를 복사해준다.2. react..

프로젝트를 하는 도중 웹캠을 적용해야 해서 getUserMedia API를 사용했다.하지만 브라우저의 보안 정책으로 인해 getUserMedia API는 HTTPS 환경에서만 작동한다고 한다.따라서 현재 로컬 환경인 HTTP환경을 HTTPS로 변경해주어야 한다.1. mkcert설치https://github.com/FiloSottile/mkcert/releases Releases · FiloSottile/mkcertA simple zero-config tool to make locally trusted development certificates with any names you'd like. - FiloSottile/mkcertgithub.com위 링크로 가서 아래 사진에 표시된 mkcert를 다운 받아..

아래 블로그를 참고하여 React Native-Expo를 이용해 개발 환경을 구축해볼 것이다.https://jae-study.tistory.com/145 [React Native] Expo로 리액트 네이티브 설치하기왕초보를 위한 React Native 101 https://nomadcoders.co/react-native-for-beginners 노마드코더 강의를 참고하고 있습니다. 리액트 네이티브란? 리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일jae-study.tistory.com1. expo-app 설치하기vs code에서 터미널을 열어 원하는 위치에 아래 명령어를 입력하여 프로젝트를 만들어준다.npx create-expo-app 프로젝트명2. expo-app 설치하..

https://studybook.tistory.com/124 [React Native] 리액트 네이티브 React-Native-Cli 개발환경 구축하기(1)아래 블로그를 참고하여 리액트 네이티브 안드로이드 개발환경을 구축하였다.리액트 네이티브 개발을 위해서는 Expo와 React-Native-Cli을 사용한다고 하는데 여기서는 React-Native-Cli 설치로 진행할studybook.tistory.com위 글에서 이어집니다!1. React Native 신규 프로젝트 생성npx react-native init 프로젝트명❗해결 오류* TypeError: cli.init is not a function 해당 오류는 버전이 맞지않아 발생한 오류로 react-native-cli가 최신 버전의 React Nat..

아래 블로그를 참고하여 리액트 네이티브 안드로이드 개발환경을 구축하였다.리액트 네이티브 개발을 위해서는 Expo와 React-Native-Cli을 사용한다고 하는데 여기서는 React-Native-Cli 설치로 진행할 예정이다.https://yun5o.tistory.com/entry/React-Native-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%951-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 [React Native] 리액트 네이티브 개발환경 설정(1/6) - 시작하기* 리액트 네이티브란? React Nativ..

🗓️ 일정4차 미니 프로젝트: 4/8 ~ 4/12❓ KT에이블스쿨 미니프로젝트란?미니 프로젝트는 이론, 실습 강의가 끝난 후 배운 강의를 토대로 실제 사례에 적용해보는 시간이다. 해결해야 할 미션, 데이터, 도메인 정보, 가이드가 제공되면 개별 실습을 통해 스스로 문제를 해결한 후, 조별 실습을 통해 공동과제를 수행한다. 그리고 전체 발표 시간을 가져 다양한 솔루션을 공유한다.📑 1일차❗주제 및 미션4차 미니프로젝트 1~2일차 주제 및 미션은 차량 공유업체의 차량파손분류를 위한 모델을 만드는 것이다.1일차에는 개별 과제로 도메인을 이해하고, 각자 모델을 설계해보는 시간을 가졌다. 💡도메인 이해차량 공유는 흔히 알고 있는 쏘카, 그린카 등의 카셰어링 서비스이다.이 서비스에서는 사용자에게 대여할 차량 ..

🗓️ 일정3차 미니 프로젝트 :3/27 ~ 3/29 ❓ KT에이블스쿨 미니프로젝트란?미니 프로젝트는 이론, 실습 강의가 끝난 후 배운 강의를 토대로 실제 사례에 적용해보는 시간이다. 해결해야 할 미션, 데이터, 도메인 정보, 가이드가 제공되면 개별 실습을 통해 스스로 문제를 해결한 후, 조별 실습을 통해 공동과제를 수행한다. 그리고 전체 발표 시간을 가져 다양한 솔루션을 공유한다.📑 1일차❗주제 및 미션3차 미니 프로젝트 주제는 스마트폰 기반의 센서 데이터를 활용해 동작을 분류 하는 모델을 완성하는 것이다.이번 프로젝트에서는 사용하는 데이터의 양이 많아 아래와 같이 미션을 진행하는 가이드가 주어졌고, 1일차에는 단계1까지 진행하였다.💡도메인 이해이번 주제는 인간 행동 인식 (HAR: Human Ac..

🗓️ 일정2차 미니프로젝트: 3/18 ~ 3/20❓KT에이블스쿨 미니프로젝트란? 미니 프로젝트는 이론, 실습 강의가 끝난 후 배운 강의를 토대로 실제 사례에 적용해보는 시간이다. 해결해야 할 미션, 데이터, 도메인 정보, 가이드가 제공되면 개별 실습을 통해 스스로 문제를 해결한 후, 조별 실습을 통해 공동과제를 수행한다. 그리고 전체 발표 시간을 가져 다양한 솔루션을 공유한다.📑 1일차❗주제 및 미션두 번째 2차 미니 프로젝트 주제는 서울 지역의 2022, 2023년도 미세먼지 데이터와 날씨 데이터를 활용하여 미세먼지 예측에 관련 있는 데이터 항목으로 데이터를 구성 및 전처리를 진행하여 1시간 후 미세먼지 농도를 예측하는 머신러닝 모델 구현하는 것이다. 💡도메인 이해도메인 이해를 위해서 현재 환경부..

실버 Ihttps://www.acmicpc.net/problem/1991 1991번: 트리 순회첫째 줄에는 이진 트리의 노드의 개수 N(1 ≤ N ≤ 26)이 주어진다. 둘째 줄부터 N개의 줄에 걸쳐 각 노드와 그의 왼쪽 자식 노드, 오른쪽 자식 노드가 주어진다. 노드의 이름은 A부터 차례대로 알파www.acmicpc.net📌 문제이진 트리를 입력받아 전위 순회(preorder traversal), 중위 순회(inorder traversal), 후위 순회(postorder traversal)한 결과를 출력하는 프로그램을 작성하시오.예를 들어 위와 같은 이진 트리가 입력되면,전위 순회한 결과 : ABDCEFG // (루트) (왼쪽 자식) (오른쪽 자식)중위 순회한 결과 : DBAECFG // (왼쪽 자식..

🗓️ 일정1차 미니 프로젝트: 3/4 ~ 3/6❓ KT에이블스쿨 미니프로젝트란?미니 프로젝트는 이론, 실습 강의가 끝난 후 배운 강의를 토대로 실제 사례에 적용해보는 시간이다. 해결해야 할 미션, 데이터, 도메인 정보, 가이드가 제공되면 개별 실습을 통해 스스로 문제를 해결한 후, 조별 실습을 통해 공동과제를 수행한다. 그리고 전체 발표 시간을 가져 다양한 솔루션을 공유한다. 📑 1일차 ❗주제 및 미션처음으로 시작하는 1일차 1차 미니 프로젝트 주제는 서울시 생활 정보 기반 대중교통 수요 분석이다. 수요 분석을 통해 버스 노선 추가가 필요한 서울 시 내 자치구를 선정하는 것이 최종 미션이다.1일차에는 개별 과제로 도메인을 이해하고, 데이터를 분석하였다. 💡도메인 이해2013년부터 현재까지 서울 생..

KT에이블스쿨 준비를 하면서 다른 사람들의 준비과정 블로그를 많이 참고하였고 이것이 많은 도움이 되었다. 나도 조금이나마 준비하는 사람들에게 도움이 되었으면 하는 마음에서 준비과정을 적어보려고 한다.트랙이 두 가지가 있는데 나는 AI트랙을 지원했고, AI트랙은 코딩테스트를 추가로 응시해야 한다.1. 서류 전형[지원동기/포부]나는 CHAT-GPT를 이용해서 웹서비스를 구현한 경험이 있다. 이 경험에서 인공지능이 결합된 서비스에 관심을 가지게 된 계기를 적었다. 그리고 KT에이블스쿨의 활동 후기, 수료생들의 수상 이력 등을 바탕으로 왜 KT에이블스쿨에서 배우고 싶은지를 적었다. 활동 후기 등은 KT 에이블스쿨 홈페이지의 About AIVLE-Meet AIVLER에 있다. 포부는 기존의 공부방법에서의 문제점을..

실버 IV https://www.acmicpc.net/problem/1026 1026번: 보물 첫째 줄에 N이 주어진다. 둘째 줄에는 A에 있는 N개의 수가 순서대로 주어지고, 셋째 줄에는 B에 있는 수가 순서대로 주어진다. N은 50보다 작거나 같은 자연수이고, A와 B의 각 원소는 100보다 작거 www.acmicpc.net 📌 문제 옛날 옛적에 수학이 항상 큰 골칫거리였던 나라가 있었다. 이 나라의 국왕 김지민은 다음과 같은 문제를 내고 큰 상금을 걸었다. 길이가 N인 정수 배열 A와 B가 있다. 다음과 같이 함수 S를 정의하자. S = A[0] × B[0] + ... + A[N-1] × B[N-1] S의 값을 가장 작게 만들기 위해 A의 수를 재배열하자. 단, B에 있는 수는 재배열하면 안 된다...

실버 II https://www.acmicpc.net/problem/1541 1541번: 잃어버린 괄호 첫째 줄에 식이 주어진다. 식은 ‘0’~‘9’, ‘+’, 그리고 ‘-’만으로 이루어져 있고, 가장 처음과 마지막 문자는 숫자이다. 그리고 연속해서 두 개 이상의 연산자가 나타나지 않고, 5자리보다 www.acmicpc.net 📌 문제 세준이는 양수와 +, -, 그리고 괄호를 가지고 식을 만들었다. 그리고 나서 세준이는 괄호를 모두 지웠다. 그리고 나서 세준이는 괄호를 적절히 쳐서 이 식의 값을 최소로 만들려고 한다. 괄호를 적절히 쳐서 이 식의 값을 최소로 만드는 프로그램을 작성하시오. 📤 입력 첫째 줄에 식이 주어진다. 식은 ‘0’~‘9’, ‘+’, 그리고 ‘-’만으로 이루어져 있고, 가장 처음과 마..

실버 I https://www.acmicpc.net/problem/1931 1931번: 회의실 배정 (1,4), (5,7), (8,11), (12,14) 를 이용할 수 있다. www.acmicpc.net 📌 문제 한 개의 회의실이 있는데 이를 사용하고자 하는 N개의 회의에 대하여 회의실 사용표를 만들려고 한다. 각 회의 I에 대해 시작시간과 끝나는 시간이 주어져 있고, 각 회의가 겹치지 않게 하면서 회의실을 사용할 수 있는 회의의 최대 개수를 찾아보자. 단, 회의는 한번 시작하면 중간에 중단될 수 없으며 한 회의가 끝나는 것과 동시에 다음 회의가 시작될 수 있다. 회의의 시작시간과 끝나는 시간이 같을 수도 있다. 이 경우에는 시작하자마자 끝나는 것으로 생각하면 된다. 📤 입력 첫째 줄에 회의의 수 N(1..

https://studybook.tistory.com/104 [React + TypeScript] select 직접 구현하기(1) select tag를 커스텀하여 디자인을 변경하는 방법도 있지만 디자인 요소가 많이 수정되어야 할 것 같아 직접 구현해볼 것이다. 처음에는 react-select라이브러리를 사용하려고 했으나 라이브러리를 studybook.tistory.com 위 글에서 이어서 select를 직접 구현할 것이다. UI를 좀 변경하여 위 글에서 코드가 조금 변경된 부분이 있을 수 있다..! 1. 선택한 option값 보이기(value값 전달하기) 각 선택한 옵션값이 label에 보이도록 구현할 것이다. GroupType.tsx 각 Option을 클릭하면 handleClickedGroupType(..

실버 IV https://www.acmicpc.net/problem/11047 11047번: 동전 0 첫째 줄에 N과 K가 주어진다. (1 ≤ N ≤ 10, 1 ≤ K ≤ 100,000,000) 둘째 줄부터 N개의 줄에 동전의 가치 Ai가 오름차순으로 주어진다. (1 ≤ Ai ≤ 1,000,000, A1 = 1, i ≥ 2인 경우에 Ai는 Ai-1의 배수) www.acmicpc.net 📌 문제 준규가 가지고 있는 동전은 총 N종류이고, 각각의 동전을 매우 많이 가지고 있다. 동전을 적절히 사용해서 그 가치의 합을 K로 만들려고 한다. 이때 필요한 동전 개수의 최솟값을 구하는 프로그램을 작성하시오. 📤 입력 첫째 줄에 N과 K가 주어진다. (1 ≤ N ≤ 10, 1 ≤ K ≤ 100,000,000) 둘째 ..

💬 select tag를 커스텀하여 디자인을 변경하는 방법도 있지만 디자인 요소가 많이 수정되어야 할 것 같아 직접 구현해볼 것이다. 처음에는 react-select라이브러리를 사용하려고 했으나 라이브러리를 커스텀하고 기능들을 변경하는데 시행착오가 있었다. 그래서 직접 구현을 해볼 것이다. 나는 typeScript와 styled-component를 이용하여 구현하였다. styled-component와 관련된 코드는 SignUpForm.styled.ts에 작성하였고, css를 제외한 나머지는 GroupType.tsx에 작성하였다. 전체 코드는 밑에 이어지는 글에 있다. https://studybook.tistory.com/106 [React + TypeScript] select 직접 구현하기(2) http..

실버 V https://www.acmicpc.net/problem/7568 7568번: 덩치 우리는 사람의 덩치를 키와 몸무게, 이 두 개의 값으로 표현하여 그 등수를 매겨보려고 한다. 어떤 사람의 몸무게가 x kg이고 키가 y cm라면 이 사람의 덩치는 (x, y)로 표시된다. 두 사람 A 와 B의 덩 www.acmicpc.net 📌 문제 우리는 사람의 덩치를 키와 몸무게, 이 두 개의 값으로 표현하여 그 등수를 매겨보려고 한다. 어떤 사람의 몸무게가 x kg이고 키가 y cm라면 이 사람의 덩치는 (x, y)로 표시된다. 두 사람 A 와 B의 덩치가 각각 (x, y), (p, q)라고 할 때 x > p 그리고 y > q 이라면 우리는 A의 덩치가 B의 덩치보다 "더 크다"고 말한다. 예를 들어 어떤 ..