전체 글 85

8월 2주차 회고

잘한 것은 무엇인가? 팀 토이 프로젝트에서 지도 api를 사용해 경로를 그려주는 역할을 맡았고, 시간을 많이 걸렸지만 결국 해냈다는 점 gpt도 원래는 날먹 느낌이라 사용을 아예 안했지만 활용을 잘하면 더 좋은 결과가 나올 수 있다는 점을 알게 되었다. 잘못한 것은 무엇인가? 지도 관련 기능이 계속 지체되었는데 팀원분들에게 문제상황에 대해 공유를 잘 하지 않았다. 계속 해결 될듯 말듯 한 상태였어서 더 그랬던것 같은데 .. 진작 팀원들이랑 상황을 공유했었으면 막판에 포기했었던 지도에 산책로 코스 마커 찍는 기능까지 구현했을수도 .. 많이 아쉽다 무엇을 배웠는가? gpx파일을 파싱하기 위해서 gpxparser, gpx-parser, @kazukinagata/react-xml-parser, gpx-parse..

WIL 2023.08.17

8월 11일 TIL - api get 받을 때 한 실수

api get 받을 때 한 실수 const fetchAllInfo = async (): Promise => { const { data } = await axios.get(api); const dataItem = data.response.body.items.item; return dataItem; }; 위와 같이 받아오는 data를 구조분해 할당으로 data를 뽑아오고 dataItem 변수에 data의 속성들에 접근했었다. 근데 dataItem이 콘솔에 찍히지 않음.. const fetchAllInfo = async (): Promise => { const response = await axios.get(api); const dataItem = response.data.response.body.items...

TIL 2023.08.17

8월 10일 TIL - 노드 사용기 ,,

글 날라가서.. 아 다시적음 위와 같은 gpx 파일을 xml로 변환해서 lat과 lon 값을 받아와 지도에 뿌려주는 기능 구현 중 맞닥뜨린 난관 .. , gpx 파서 관련 라이브러리를 여러개 사용했지만 오래된 라이브러리라 타입스크립트를 지원안해주는 것도 있었고 타입스크립트를 지원해주는 라이브러리를 사용해도 해당 api가 서버 헤더 요청을 막아서..? 였나 접근 자체가 안되고 cors 에러가 계속 났다. 결국 서버에서 서버로 요청을 보내야 하는 방향으로 결론이 나서 결국 노드 서버를 사용하기로! 1. 노드 서버를 만들고 아래 명령어 터미널에 입력 npm init -y 2. detailMap.tsx에서 위 노드 서버에게 gpx 파일을 axios.get으로 날린다 const DetailMap = () => {..

TIL 2023.08.10

8월 10일 TIL - [typescript] yarn 모듈 import시 오류 해결하는 방법(d.ts 파일 생성법)

지도에 산책로의 시작점과 끝점을 연결해 주는 기능을 구현하기 위해 gpx-parse 패키지를 다운받았다. 해당 모듈을 설치하고 import해서 사용하려고 할때 모듈 'module name'에 대한 선언 파일을 찾을 수 없다는 메시지와 함께 모듈을 import 할 수가 없었다 찾아보니 yarn add 시에 @types 버전이 없기 때문인 것 같았다 해결법: 글로벌로 강제 타입을 지정 1. d.ts 파일을 생성해준다 app /src /node_modules /assets /@types

TIL 2023.08.09

8월 9일 화요일 TIL - firebase 이용해서 로그인하기

Authentication: Firebase Authentication은 개발자가 웹 사이트에 로그인, 회원가입, 유저 관리, 소셜 로그인 등의 사용자 인증을 쉽게 구축할 수 있도록 도와주는 서비스 1. Authentication SDK 추가 //firebase.js import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { // SDK키 넣기 }; const app = initializeApp(firebaseConfig); export const auth = getAuth(app); 2. signInWithEmailAndPassword 함수를 이용해서 이메일과 패..

TIL 2023.08.08

8월 8일 TIL - api 선택 시 api 테이블 확인 잘 하기

또다시 시작된 팀 프로젝트에서 내가 선택한 주제와 api로 진행하기로 했다 외국인들에게 불친절한 한국 음식점 번역 메뉴판에서 아이디어를 얻어 식당 메뉴를 제대로 번역하고 들어간 재료까지 데이터로 보여주는 .. 뭐 그런 주제. api도 공공 사이트에서 찾은 거라 제공되는 데이터들이 많고 세분화되어 있어 큰 확인 없이 팀원들한테 api를 넘겼었다. 나중에 팀원들끼리 API 테이블을 하나하나 뜯어보니 데이터를 받아올 때 쿼리 스트링으로 필터링하여 데이터를 가져올 수 없었다. 통째로 들고 오기에는 총 데이터가 45만 개였나 .. ? 엄청 많아서.. 결국 주제를 바꿔버림 나중에 튜터님에게 얘기를 들어보니 제대로 만들어지지 않은 api들이 엄청 많다고 했다. 예전에 사용한 tmdb api가 엄청 잘 되어있던 편이라..

TIL 2023.08.08

8월 4일 TIL - 타입스크립트 유니온 타입과 인터섹션 타입의 차이점

1. 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입 interface Developer { name: string; skill: string; } interface Person { name: string; age: number; } 위와 같이 두 개의 인터페이스로 타입을 정의했을 때 const askSomeone1 = (someone: Developer | Person) => { someone.name; someone.skill; //에러 someone.age; //에러 }; 에러 나는 이유 : Developer와 Person의 속성 모두를 제공해 주지 않고, 두 타입의 보장된 공통 속성인 name만 제공해 줌. 만약 skill과 age를..

TIL 2023.08.07

8월 2일 TIL

https://school.programmers.co.kr/learn/courses/30/lessons/12926 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 이름부터 맘에 안듦 여튼 입력받은 문자열을 두번째 매개변수만틈 뒤로 밀어서 암호문 만드는 것 1. 입력받은 문자열을 아스키값으로 변경한 후 2. 입력받은 매개변수만큼 더하고 3. 다시 문자로 변환하여 리턴하면 되겠다고 생각함 특정 문자를 아스키값으로 변경하는 방법은 charCodeAt(0) 라고 하네여 아래 블로그 참고함 https://cocobi.tistory.com/149 [JS] 자바스..

TIL 2023.08.03