연습 프로젝트/공주찾기 (공휴일, 주소찾기) 검색 결과

해당 글 7건

[공주찾기] 공휴일 찾기, 주소 찾기 리팩토링 및 후기

[React] 공휴일 찾기, 주소 찾기 리팩토링 및 후기 전반적인 리팩토링을 진행해보았다. 크게 진행하지는 않았고 그냥 간단한 css, 환경변수 처리정도 하였다. 모든 페이지 공통 리팩토링 useCallback 함수를 사용하여서, 컴포넌트 내에서 사용되는 함수들을 최적화 시켜주었다. 그리고 API KEY들은 전부 환경변수로 빼서 사용하였다. App.js - 메인 페이지 App.js 파일은 딱히 수정한 것이 없다. 그냥 눈에 띄는 것은 63 ~ 68번 줄을 추가하여 tab css를 조금 변경한 정도가 있다. FindHoliday.js - 공휴일 찾기 페이지 공휴일 찾기의 경우 3월을 검색하고 싶으면 03으로 2자리 수를 채워주어야 했다. 따라서 49번째 줄에 1자리 문자열인 경우 2자리로 만들어 주는 함수..
연습 프로젝트/공주찾기 (공휴일, 주소찾기) 2021. 3. 22. 07:30

[공주찾기] 주소 찾기 구현하기

[공주찾기] 주소 찾기 구현하기 주소 찾기를 빠르게 구현해보도록 하자. 해당 프로젝트에서는 입력 값 예외처리는 하지 않았다. 무조건 정상적인 검색어만 넣고 검색한다는 가정하에 구현하였다. 참고하고 보면 좋을 것 같다. 그리고 설명의 편의성을 위하여 최종 코드를 먼저 공개하고 설명하는 것이 좋을 것 같아서 코드 먼저 최상단에 표시를 해두었다. 구현하기 솔직히 이번 코드는 너무 쉬워서 딱히 크게 할 말은 없다. 위 코드 16번 줄에 API 키를 적어주고 실행을 해야한다. Postman에서 코드를 복붙해서 사용하면 되는데, 복붙한 후 request를 요청하고 응답 받은 값을 console로 찍어보면 아래 이미지와 같다. 여기서 응답 구조를 빠르게 파악하고 내가 관심있는 key 값을 빠르게 찾아야 한다. 데이터..
연습 프로젝트/공주찾기 (공휴일, 주소찾기) 2021. 3. 4. 09:57

[공주찾기] 공휴일 찾기 구현하기

[공주찾기] 공휴일 찾기 구현하기 공휴일 찾기를 빠르게 구현해보도록 하자. 해당 프로젝트에서는 입력 값 예외처리는 하지 않았다. 무조건 정상적인 검색어만 넣고 검색한다는 가정하에 구현하였다. 참고하고 보면 좋을 것 같다. 그리고 설명의 편의성을 위하여 최종 코드를 먼저 공개하고 설명하는 것이 좋을 것 같아서 코드 먼저 최상단에 표시를 해두었다. 1. 공휴일 찾기 API 호출, 응답받기, Cors 에러 해결 Cors 에러 해결하기 위 코드 18번 줄에서 basic url인 "http://apis.data.go.kr"을 앞에 적어두고 한 경우 아래와 같은 에러가 콘솔에 보일 것이다. 에러 내용을 보면 웹 개발하면서 만나면 엄청 엄청 엄청 짜증나는 것 중 하나인 cors 에러가 나를 반기고 있다. 우선 이 c..
연습 프로젝트/공주찾기 (공휴일, 주소찾기) 2021. 2. 24. 22:54

[공주찾기] Material-ui 적용하여 간단한 레이아웃 작업

[공주찾기] Material-ui 적용하여 간단한 레이아웃 작업하기 해당 게시글에서는 react 프로젝트에 material-ui를 적용하는 방법을 알아볼 것이다. material-ui를 사용하면 간단한 컴포넌트 사용이나, css 추가를 손쉽게 할 수 있다는 장점이 있다. 사전 준비사항 CRA를 이용하여 react 프로젝트를 생성하고 아래와 같이 폴더구조를 만들어주어야 한다. CRA로 react 프로젝트를 만드는 방법을 모르면 검색을 통하여 따라하면 된다. (추후, CRA를 통한 react 프로젝트 생성하는 방법을 알아볼 것이다.) 잘 모르겠으면 github 링크에서 clone을 받아 사용하도록 하자. 바로가기 React 프로젝트에 material-ui 추가하기 React 프로젝트에 material-ui를..
연습 프로젝트/공주찾기 (공휴일, 주소찾기) 2021. 2. 22. 22:03

[공주찾기] Postman 사용해보기

[공주찾기] Postman 사용해보기 해당 게시글에서는 postman을 이용하여 간단하게 데이터 요청, 응답 데이터 확인을 해볼 것이다. 이번에도 저번 게시글과 같이 주소찾기 API 키만 테스트 해볼 것이고, 공휴일 찾기 API 키로는 스스로 해보도록 하자. Postman 사용방법 Postman 사용 방법은 간단하다. 우선 회원가입 후 로그인을 시도하면 아래와 같은 화면이 나온다. 여기서 Collections를 추가하고 그 안에 request를 추가하여 테스트를 진행해보면 된다. 우리도 한번 테스트를 진행해보도록 하자. Collection명은 FindAddress, request명은 Basic으로 하나 추가하였다. 우선 GET으로 맞춰주고 기본 url 먼저 작성해보자. GET은 ?로 이후 params를 ..
연습 프로젝트/공주찾기 (공휴일, 주소찾기) 2021. 2. 18. 21:38

[공주찾기] 공휴일, 주소 찾기 API 키 신청하기

[공주찾기] 공휴일, 주소 찾기 API 키 신청하기 해당 게시글에서는 내가 원하는 기능을 제공하는 API의 키를 신청하는 방법을 알아보려고 한다. 사실 구글에 "원하는 기능" OPEN API라고 검색하면 대부분 나온다. 물론 지금부터 키를 발급받을 공휴일, 주소찾기 또한 마찬가지이다. 키 발급은 반대로 주소찾기 먼저 알아보고, 공휴일 키 발급은 주소찾기의 경험을 바탕으로 스스로 해보도록 하자. 주소찾기 OPEN API 키 신청하기 1. OPEN API 신청하는 사이트 이동 해당 사이트로 이동 후 하단에 보이는 오픈 API를 클릭하자. 바로가기 2. OPEN API 체험해보기 우리가 사용할 OPEN API를 체험해볼 수 있다. 바로가기를 클릭하면 해당 url로 이동한다. 개인적으로 xml보다 json 데이..
연습 프로젝트/공주찾기 (공휴일, 주소찾기) 2021. 2. 17. 21:15

[공주찾기] 공휴일, 주소찾기 프로젝트 소개

[공주찾기] 공휴일, 주소찾기 프로젝트 공휴일, 주소찾기 프로젝트는 매번 해야지 해야지 생각만 하고 제대로 완성해본 기억이 없어서 이번 기회에 제대로 완성 시켜보려고 한다. 혹시 해당 프로젝트에 관심이 있어서 따라하고 싶으면 기초적인 JavaScript, React hooks에 대한 지식은 있어야지 따라할 수 있다. 프로젝트에서 다루는 내용 프로젝트에서는 아래와 같은 내용을 다루고 있다. 만약 본 게시글을 따라한다면 아래 지식 및 기술에 대한 기본적인 지식을 얻어갈 수 있다. 1. 나에게 필요한 Open API를 찾아 신청하고 사용할 수 있다. 2. Postman tool을 간단하게 사용할 수 있다. 3. React에 material-ui를 적용하여 꾸밀 수 있다. 4. React 환경변수를 사용할 수 ..
연습 프로젝트/공주찾기 (공휴일, 주소찾기) 2021. 2. 15. 20:37