전체 글61 Kakao Map API에서 마우스 이벤트 핸들링 Kakao Map 지도 상에서 마우스 오른쪽 버튼을 클릭하면 내 위치를 설정할 건지 묻는 오버레이를 띄우는 것이 목적이었다. 그래서 이벤트 핸들러를 등록하고 콜백 함수 등을 만들고 있었다. 다음은 원하는 기능을 구현하기까지의 삽질 과정. #1 두번째 클릭부터 이벤트 핸들러가 작동하지 않음(...) 첫 오른쪽 클릭 때는 아무 문제없이 오버레이를 띄우고 새로운 좌표로 내 위치를 설정할 수 있었다. 그런데 두번째 클릭부터는 아무런 반응이 없다. 로그를 찍어보니 선택한 엘리먼트가 하나가 아니라 4개인 배열이었다. 그리고 그 이후에는 8개, 12개씩 제멋대로 늘어났다. (어이없음) 아마 엘리먼트가 지정되지 않아서 오버레이가 보이지 않았던 것 같다. 처음에는 오버레이를 띄울 때 추가된 새로운 엘리먼트가 미처 다 안.. 2021. 4. 7. HTML5:: 마크업 문서 구조나 콘텐츠의 의미를 나타내는 새로운 요소가 다수 추가 섹션 관련 새 요소 Section 요소 표제와 그에 따른 콘텐츠를 그룹화. 문서의 아웃라인을 생성하고 정보의 계층 구조를 명시. section : 장이나 절 같은 표제와 개요를 동반하는 일반적인 섹션 article : 독립적인 콘텐츠 aside : 메인 콘텐츠와 연관성 떨어지고 없어도 문제가 없는 섹션 nav : 내비게이션 문서 아웃라인 정보의 계층 구조를 가리킨다. 책의 차례와 같은 것. 제목, 장, 항, 절 등의 트리(계층 구조) 구조 = 아웃라인 작성 방법 표제 요소(h1 ~ h6)의 레벨 - 정보의 계층 구조에 맞추어 표제 레벨을 바꾸기 섹션 요소의 그릇 상태 - 섹션 요소로 그릇 구조 만들기. 종료 태그로 섹션의 끝을 명시. '명시적.. 2021. 3. 31. Rendered more hooks than during the previous render // 컴포넌트 내부 const { loading: loadingAll, data: dataAll, error: errorAll } = useQuery( GET_KINDERGARTENS ); const [type, setType] = useState(""); if (loadingAll) return Loading; if (errorAll) return ERROR; if (!dataAll) return Not found; useEffect(() => { if (!type.length) return; const filteredArray = filterByType(dataAll.kindergartens, type).map( (item: any) => { return { name: item.name, locati.. 2021. 3. 28. Apollo Client:: 캐시된 데이터 다루기 프로젝트 하다가 이미 캐시된 데이터를 가공해야할 필요가 있어서 자료 찾다가 공식 Doc을 읽게 되었다. (www.apollographql.com/docs/react/caching/cache-interaction/) 서버와 통신하지 않고 Apollo Client cache를 직접 읽고 쓸 수 있는 방법. 이전에 서버에서 불러온 데이터 및 로컬에서만 쓸 수 있는 데이터와 상호작용 한다. readQuery 캐시에서 바로 GraphQL 쿼리를 실행할 수 있는 메소드. const READ_TODO = gql` query ReadTodo($id: ID!) { todo(id: $id) { id text completed } } `; // Fetch the cached to-do item with ID 5 const .. 2021. 3. 26. Apollo :: 아폴로 클라이언트, 클라이언트 사이드 아키텍쳐 Khalil Stemmler, Apollo Client & Client-side Architecture Basics을 읽고 정리한 글 2월 한 달, 아주 잠시 실무를 경험한 이후에 단순히 코드가 작동하는 것 말고 더 견고하고 유연한 구조를 가진, 좋은 코드를 작성하는 것에 관심이 생겼다. 관련된 자료를 계속 찾아 읽으려고 노력 중이다. 이번에 GraphQL과 Apollo를 공부하고 쓰면서도 염두에 두었던 부분이고, Apollo Blog에 좋은 자료들이 많아 조금씩 보고 있다. 그 중 클라이언트 사이드 아키텍처 베이직이라는, 비단 아폴로 뿐만 아니라 전반적인 클라이언트 단 코드 구성에 대해 설명된 글이 있어서 읽게 되었다. 소프트웨어 디자인이란 구조와 개발자 경험의 결합이라는 테제로 글을 시작한다. 우리가.. 2021. 3. 23. Apollo GraphQL Error: "Cannot read property 'startsWith' of undefined" 기존 프로젝트의 서버를 Apollo graphQL로 재구축하는 작업을 하고 있는데 schema 작성하고, dataSource로 Open API에서 데이터 가져온 다음, 해당 쿼리에 대한 resolver 까지 작성해서 테스트를 하다가 에러가 발생했다. "Cannot read property 'startsWith' of undefined" 에러 메세지는 위와 같았다. 우선, 대부분의 경우에 undefined는 비동기 요청을 했는데 데이터가 미처 들어오지 못하는 경우에 자주 봤던 것 같아서 RESTDataSource를 확장하여 인스턴스를 만들어준 클래스의 API URL을 확인했다. 결론부터 말하자면 다음과 같이 바꾸어 주었다. 전: const AGE_ZERO_KINDERGARTEN_URL = `https://.. 2021. 3. 17. Fullstack Part 8 #5 Fragments and subscriptions fullstackopen.com/en/part8/fragments_and_subscriptions를 읽고 정리한 글. Fullstack part8 | Open online course on Javascript based modern web development by University of Helsinki and Houston Inc.. fullstackopen.com 목차 🔸 fragments - 반복되는 쿼리 결과를 변수에 선언하여 재사용 하는 방법 🔸 subscriptions - 브라우저에서 서버로 요청하는 방식이 아니라 반대로 서버에서 브라우저로 알림을 받는 것 🔸 n + 1 문제 - 불필요한 쿼리 발생을 join 쿼리 혹은 populate로 최적화 fragments 여러 쿼리가 비슷한 결과를 리.. 2021. 3. 12. Fullstack Part 8 #4 Login & Cache update fullstackopen.com/en/part8/login_and_updating_the_cache 읽고 정리한 글. Fullstack part8 | Open online course on Javascript based modern web development by University of Helsinki and Houston Inc.. fullstackopen.com 목차 🔸 유저 로그인 - 로그아웃 시, apollo client의 캐시를 지우는 resetStore 🔸 헤더에 토큰 추가 - httpLink, apollo-link-context로 아폴로가 서버와 연결되는 방식에 접근하여 헤더를 수정 🔸 캐시 업데이트, revisited - useMutation의 update 옵션을 통해 최적화. read.. 2021. 3. 11. Fullstack Part 8 #3 DB fullstackopen.com/en/part8/database_and_user_administration 를 읽고 정리한 글. 🔸 MongoDB와 GraphQL 백엔드를 연결 🔸 유저 등록 및 유효성 검사 🔸 server 객체의 context로 유저 로그인 여부 확인 🔸 auth가 필요한 작업을 하는 방법 ( 친구 리스트에 새로운 값 추가 등 ) MongoDB npm install mongoose mongoose-unique-validator - 몽구스로 Schema 생성 const mongoose = require('mongoose') const schema = new mongoose.Schema({ name: { type: String, required: true, unique: true, minl.. 2021. 3. 10. Fullstack part 8 #2 React and GraphQL - GraphQL은 기본적으로 HTTP POST 요청으로 값을 얻는다. - 따라서 Postman을 활용할 수 있다. http://localhost:4000/graphql로 query 키 값을 보내면 된다. - 혹은 axios를 통해 리액트와 GraphQL 사이에서 데이터를 교환하는 것도 가능한다. 그렇지만 ☞ 번거로우니 불필요한 디테일을 알아서 처리해주는 higher order library를 씁시다. ☞ 두 가지 옵션: Apollo Client와 페이스북의 Relay Apollo client npm install @apollo/client graphql import React from 'react' import ReactDOM from 'react-dom' import App from './App' i.. 2021. 3. 9. 인턴 후기 :: 2021년 2월의 문제들 한 달 가량 일을 했고, 많이 배우고 느꼈다. 잊으면 안 될 것 같아서 기록해놓는다. 기술적인 면 #1 '틀린' 코드. 어떤 문제가 있었고 생각해낸 해결 방식 중 하나는 a 라우트의 A 컴포넌트에서 state와 props를 location.state에 담아 b 라우트의 B 컴포넌트로 이동했다가 다시 a 라우트의 A 컴포넌트로 돌아오는 것이였다. 로컬 개발 환경에서는 이렇게 해서 문제가 해결되었는데 배포를 하니 다시 동일한 문제가 발생하여 이 방법은 폐기시켰다. 이 방법은 사실 로컬에서 작동한다한들 그리 좋은 해결책은 아니였던 것 같다. 우선 다시 처음의 url로 돌아왔을 때 state를 통째로 다시 업데이트 해야했고, 부모 컴포넌트로부터 받는 props의 경우에는 자식 컴포넌트에서 업데이트를 해야했기 때.. 2021. 3. 8. Fullstack Part 8 #1 GraphQL-server 공부하려고 fullstackopen.com/en/part8/graph_ql_server 번역 및 정리한 글 Schema & Query type Person { name: String! phone: String street: String! city: String! id: ID! } type Query { personCount: Int! allPersons: [Person!]! findPerson(name: String!): Person } - schema에 타입들을 지정 Person: - 문자열은 GraphQL의 스칼라 타입 중 하나 - !: 필수. Non-Null. - ID: 문자열, unique Query 모든 GraphQL schema는 어떤 쿼리가 API에 만들어져야 하는지 알려주는 Query를 기.. 2021. 3. 8. 이전 1 2 3 4 5 6 다음
