[Day 33] 2022-0808

🐈오늘 공부한 것

✔️Postman 활용하여 OPEN API 테스트하기

https://friedegg556.tistory.com/189

포스트맨은 다양한 메서드로 API 호출을 테스트 해볼 수 있는 GUI 플랫폼이다. weather API 라는 OPEN API 에서 날씨 데이터를 가져오는 GET 요청 연습을 했다. API URL 을 입력하면 자동으로 파라미터를 전달할 수 있도록 셋팅되는데, 파라미터는 key 와 value로 구분되어 있고, 해당하는 value 값과 발급받은 API Key 를 함께 전달할 수 있다. Post 요청에서는 body에 raw 데이터로 JSON 데이터를 직접 입력하여 요청할 수 있다. 

✔️UseEffect로 fetch API 호출하기

https://friedegg556.tistory.com/190

리액트 앱에서 API 데이터를 활용할 수 있도록 fetch 로 호출하는 연습을 했다. 자주 사용할 것 같은 공공 포털 OPEN API 에서 GET 요청으로 데이터를 받아올 수 있었다. 먼저 fetch로 받아올 데이터 변수를 state 에 등록하고, useEffect 안에서 fetch를 실행해 state를 업데이트 시켰다. useEffect를 사용하는 이유가 컴포넌트가 렌더링 된 이후에 동적으로 데이터를 받아오게끔 하기 위해서인 것 같은데, useEffect에 대해서 잘 모르기 때문에 자세하게 설명하기가 좀 어렵다. 그리고 참고했던 예제 코드에서는 받아온 데이터가 존재하는지 확인하지 않고 바로 return 을 하는데, 계속 map을 사용할 수 없다는 리액트 오류가 발생했다. 페어분이 에러를 해결해주셨는데, if문으로 state안에 데이터가 존재하는지 확인한 이후에 리턴하도록 수정했더니 잘 작동했다. 렌더링이 2번 되면서, 데이터를 받아오기 이전에 렌더링 오류가 뜨고 그 다음 렌더링으로 넘어가지 못해서 오류가 생기는게 아닐까 싶다. 이 부분은 useEffect 에 대해서 더 자세히 공부한 뒤에 다시 시도해보고싶다. 

✔️Query Prameter와 Path Parameter 차이점

오늘 포스트맨을 학습하면서 , API 호출 URL을 입력했을 때 자동으로 Query Params 부분이 셋팅되는 것을 보고 궁금증이 생겨 찾아보게 되었다. URL은 리소스의 경로를 나타내고, URI는 URL을 포함하면서 쿼리Query 나 패스Path 파라미터로 리소스를 특정지을 수 있도록 한다. 패스 파라미터는 / 슬래시로 구분하고, 쿼리 파라미터는 ?로 구분하는데 패스 파라미터는 유일한 데이터 (예를들면 id)로 리소스를 특정할 때 사용하고, 쿼리 파라미터는 특정 조건으로 검색할 때 사용한다. 쿼리는 key와 value 형태로 이루어져 있는데, 만약 /users?id=123 이라는 쿼리 파라미터가 존재한다면, users 중에서 id가 123인 리소스를 특정한다는 의미이다. 또 여러개의 쿼리 파라미터가 존재한다면 이들을 & 기호로 연결할 수 있다. 

✔️리액트 -타입스크립트 스터디 과제

숫자 야구 게임을 만드는 과제를 하고있다. 숫자 야구 게임 로직을 짜는 부분이 조금 어려워서 강의를 참고했는데, 한 번 더 연습한 뒤에 타입스크립트로 변환할 예정이다. 타입스크립트 변환에서 헷갈리는 부분은 Event 에도 타입이 있다는 부분이다. 이벤트 핸들러에서 이벤트 객체에 해당 이벤트에 맞는 타입을 설정해주어야한다. useRef에도 제네릭으로 타입을 표시해주어야하는데, 타입 종류도 어렵지만 문법 자체가 생소하기 때문에 리액트 부분을 빨리 구현한 뒤에 타입스크립트를 조금 더 심도있게 공부해야겠다. 리액트에서 어려운 부분은 객체 데이터를 map 으로 뿌려줄 때 꼭 한 번 이상은 'Error: Objects are not valid as a React child' 에러를 만난다는 것이다.. 앞에서 fetch 로 받아온 json 데이터에 접근할 때도 같은 오류가 수십번 났었는데, 객체 데이터를 출력할 때는 꼭 정확한 값에 접근해서 하나씩 뿌려주어야 할 것 같다. 

🐈더 공부할 것

1. 다양한 리액트 훅, 특히 useEffect

2. fetch 혹은 axios 로 API 데이터 호출하기

3. 타입스크립트 문법 공부

4. 리액트 이론 공부

🐈오늘의 느낀 점

1. 나에게 맞는 공부법을 점점 찾아가고 있다. 내가 특히 재미를 느끼는 부분은 언어나 기술이 어떤 원리로 돌아가는지 이해한 뒤에 사용해보는 것이다. 부딪히고 깨지면서 공부하는 것도 많이 배울 수는 있는데, 원리에 대해서 조금이라도 알고 있다면 에러가 나는 원인이나 어떤 부분이 잘못되었는지 추론할 수 있기 때문에 훨씬 더 많이 지식을 습득할 수 있는 것 같다. 그래서 리액트도 실습과 함께 리액트를 다루는 기술 이라는 책을 가지고 공부할 계획이다. 리액트 책 독파 스터디를 개설할까 하다가 일단은 혼자 해보기로 결정했다. 

 

2. 앞으로 2주간 매일 6시에 일어나는 기상 인증 모임에 가입하게 되었다. 평소보다 1시간 정도 일찍 일어나야 하기 때문에, 오늘부터 12시 이전에 자야한다...! 생각중인 아침 루틴은 일단 명상과 스트레칭 그리고 공부이다. 아침보다는 밤에 하는 운동이 좋아서...