전체 글
-
항해99 60일차 TIL : 지도 API 검색에서 나타나는 400에러 문제 해결법 (feat. query)항해99_WIL 이따금씩 TIL 2021. 5. 9. 15:56
카카오 지도 API를 이용해서 검색 기능을 넣을 때, 다음과 같은 문제가 개발자도구의 콘솔창에 찍혔다. 검색에는 문제는 없지만, 그래도 찜찜해서 이 문제를 해결하고 싶어졌다. 백엔드 분들에게 물어봐도 모르고, 나도 구글링을 해봐도 알 수 없었다. 콘솔창에 나온 저 URL을 검색창에 입력하면 아래와 같이 나왔다. 이걸로도 검색을 해봤는데, query 문제라고 하고 해결하는 코드도 있었다. 하지만 내가 작성한 검색 코드에 그 해결하는 코드를 입력할 수는 없어보였다. 그래서 튜터님에게 물어봤더니, 저 콘솔창에 나오는 URL에 query에 아무것도 입력이 안 된 것이 문제로 보인다고 하셨다. 이 말씀에 나도 나름 추측을 해봤는데, query는 검색해보니 '데이터베이스에 질문을 해서 정보를 요청함'이라고 나왔다...
-
항해99 10주차(2021.5.3-5.9) WIL : 5주 과정 실전프로젝트 2주차, 지도API를 점점 더 잘 다루게 되기, 리액트 사용법 더 잘 익히기항해99_WIL 이따금씩 TIL 2021. 5. 9. 14:58
이번 실전프로젝트 2주차에는 크게 '지도 위의 커스텀오버레이 띄우기'와 '카테고리 종류별로 마커 띄우기'를 구현했다. 1. 지도위에 커스텀오버레이 올리기 커스텀오버레이는 다음과 같은 것이다. apis.map.kakao.com/web/sample/customOverlay2/ 이렇게 지도상의 원하는 위치에 게시물을 올리는 것을 커스텀오버레이라고 한다. 나도 이렇게 구현을 했는데, 우리 경우에는 사진과 장소 이름을 같이 나오게 하는 커스텀오버레이를 만드는 것이다. 결과물을 보자. 굿!!!!!!!! 하지만 문제가 있다. 이 코드는 커스텀오버레이를 만든 코드다. 그런데 여기서는 커스텀오버레이를 순수 HTML로 만들고, 그것을 string으로 만들어서 content 변수에 할당하고 있다. 다시말해 리액트 환경이라 ..
-
항해99 9주차(2021.4.26-5.2) WIL : 5주 과정 실전프로젝트 1주차, 지도API와의 싸움항해99_WIL 이따금씩 TIL 2021. 5. 2. 20:09
1. 실전프로젝트에서 프론트엔드로서 내가 맡은 부분 : 카카오 지도 API를 이용해 목표 기능 구현하기. 이번 실전 프로젝트의 목표이자 가장 중요한 본질은, 지도상의 원하는 위치를 지정하고 그 위치에서 찍었던 자신의 사진을 게시물로써 올릴 수 있게 하는 것이다. 그 부분을 내가 맡아서 구현하게 되었다. 지도 API는 처음이고 공개된 소스코드를 이용하는 것도 처음이어서 어떻게 할지 감이 잡히지 않았다. 그렇지만 지난 미니프로젝트에서 다른 조 사람이지만 나와 같은 조를 두번이나 했던 리액트 능력자님이 지도 API를 이용한 기능을 구현한 코드가 있기 때문에 그걸 분석해서 시작점으로 삼고(시작점이라 쓰고 코드 약탈이라고 읽는다ㅋㅋㅋ 나는야 프로 코드 약탈자.) 시작하면 될거라는 생각으로 두려움을 통제하려고 했다..
-
항해99 8주차(2021.4.19-4.25) WIL : 미니프로젝트 2주차, 마지막 과정인 실전프로젝트 시작항해99_WIL 이따금씩 TIL 2021. 4. 25. 22:08
이번주는 22일 목요일 자정까지 미니프로젝트 과제를 수행하고, 금요일-토요일에는 새로 만난 실전프로젝트의 조원들과 프로젝트 계획을 세웠다. 1. 미니프로젝트 이번주에는 많은 걸 하고 싶었지만 여건상 그럴 수 없었다. 지난주에 로그인/회원가입에서 시간을 너무 많이 썼고 프론트엔드 동료가 많이 어려워해서 많이 도와주다보니 더 많은 걸 할 시간이 나지 않았기 때문이다. 그래서 필수 페이지를 만들고 CRUD 기능을 구현하는데 집중했다. 나도 내 실력을 보니 많은것에 손을 대기 보다 CRUD 하나라도 확실하게 연습해서 익혀두는 것이 필요했다. CRUD : 제품게시글 작성/가져오기/수정/삭제, 상세페이지 얼추 제품게시글 정보를 가져오는 리덕스 모듈 파일(post.js)을 작성하고, 그것을 페이지 컴포넌트 안에서 쓸..
-
항해99 53일차 TIL : useEffect는 사실 비동기처리였다니!항해99_WIL 이따금씩 TIL 2021. 4. 25. 17:37
미니프로젝트 마지막날, 문제가 생겼다. 몇시간이고 풀리지도 않고, 리액트 고수들을 2명이나 초빙해도 풀리지 않았다. 문제는 useEffect라는 아이. 문제의 코드 const detail_id = props.match.params.ids; React.useEffect(() => { dispatch(postActions.getPostAPI(detail_id)); }, []); const post_list = useSelector((state) => state.post.detail_list); console.log(post_list); const target_idx = post_list.findIndex((p) => p.id == detail_id); console.log(target_idx); const ..
-
항해99 52일차 TIL : websocket으로 실시간 양방향 통신 테스트 하기.항해99_WIL 이따금씩 TIL 2021. 4. 25. 16:42
이번 미니프로젝트는 중고품 직거래가 컨셉이었다. 그래서 구매희망자와 판매자가 직접 소통하게 하기 위해서 채팅 기능을 넣기로 했다. 처음에는 지난 클론코딩에서 했던 댓글 달기 식으로 하면 되겠거니라고 생각했다. 하지만 아니었다. 왜냐하면 채팅은 양방향 실시간 소통이기 때문에 댓글식의 클라이언트-서버 간의 요청-응답식으로 데이터를 주고 받는 방식이 아니기 때문이다. 그래서 클라이언트-서버 통신에 쓰이는 axios와는 달리 websocket이라는 방식의 실시간 통신 프로토콜을 이용해야 한다. 코드 구현 방식이 막막하기도 했지만, 채팅을 맡은 백엔드분의 도움과 설명으로 일부 해냈는데, 통신이 되었다고 개발자 도구에서 결과가 나올 때는 정말 경이로웠다. 이게 되다니!!! 그것이 되게 한 코드를 보면서 설명하겠다...
-
항해99 50일차 TIL : API URL은 따로 파일로 관리하기의 필요성!항해99_WIL 이따금씩 TIL 2021. 4. 25. 16:41
미니프로젝트를 진행하면서 프론트엔드에서 클라이언트-서버 통신을 하면서 axios를 이용하면서 API는 아래 이미지에 나오는 코드를 작성해 이용했다. 하지만 이렇게 하면 대단히 불편하다. 주석처리한데서 알 수 있듯이 백엔드와 통신 점검할 때 담당하는 백엔드분이 다르면 그때마다 API를 주석처리했다가 풀었다가 하면서 나랑 일하는 분의 API로 바꿔야 하기 때문이다. 그래도 저런게 하나면 귀찮은 일 한번으로 끝나지만, 리덕스 모듈 파일을 작성하며 미들웨어 함수 코드를 짜본 사람이면 누구나 알듯이 저런 API가 한 둘이 아니다. 그래서 API를 매번 저렇게 입력하는 수고를 덜고 편하게 하기 위해서는 API만 관리하는 파일을 만드는게 좋다. 예를들면 아래 이미지처럼 해야 한다. 출처 : 이대호님 git, gith..
-
항해99 7주차(2021.4.12-4.18) WIL : 미니프로젝트에서 성장하기.항해99_WIL 이따금씩 TIL 2021. 4. 18. 17:57
이번 미니프로젝트(주제 : 중고제품 거래사이트. 사이트 이름은 항해마켓) 첫주에는 페이지에 공통으로 들어가는 헤더를 만들고, 회원가입/로그인을 구현했다. 1. 헤더 조장님이 예쁘게 그려준 와이어프레임에 나온대로 뷰를 작성했다. 와이어프레임대로 구현한 헤더는 아래와 같다. 좀 투박한게 흠이지만 이건 짬이 모자라서 그런듯. 그러니 css는 계속 배우도록 하자. 2. 로그인/회원가입 구현 뷰를 만드는 것은 당연히 해야 하는 일이지만, 더 중요한건 클론코딩에서 이해한 것을 더 발전시켜서 리덕스 모듈 코드를 작성하고 이것을 이용해서 백엔드와 통신(요청-응답)하는것이다. 이것을 해야 서버에 데이터를 저장하고 가져올 수 있고 로그인/회원가입도 할 수 있다. 이번주에는 클론코딩때 어깨너머로 배운 axios 사용법과 리..