코드스테이츠 immersive (7) 썸네일형 리스트형 4주차 프로젝트 중 데이터 정보 수집을 위한 코드 해당 코드는 프로젝트 초반에 naver 검색 지역 api를 이용해서 수집했던 내용이다. 처음에는 서울쪽 지방데이터를 가지고 그걸 파일 형식으로 지역별로 검색하도록 하였다. 00구 00동 맛집 이렇게 파일엔 00구 00동 , xx구 xx동이런식으로 들어가 있었다. 1. 그것을 한줄 기준으로 나눠서 검색한다. 2. 최대 total기준에 맞춰서 api를 보낸 url를 배열형식으로 작성한다. 3. 작성한 url를 axios로 보내서 받아온 데이터를 db에 insert 한다. 네이버 api는 여기를 참고!!... https://developers.naver.com/docs/search/local/ 검색 API 지역 검색 개발가이드 NAVER Developers - 검색 API 지역 검색 개발가이드 develope.. 4주차 프로젝트 1주차 내용 4주차 프로젝트 1주차가 마무리 되었다. 1. 구현 내용 naver 오픈 검색 api를 이용한 식당데이터 수집(본인) , 29만건 수집 db schema 설계(전체적인 설계)(본인) ->팀원에게 피드백을 받으면서 하나하나 수정(회의하면서 진행함) , 주요 중요 테이블 (식당 설계, 음식 카테고리 테이블 설계) , 기존 카테고리 데이터를 가지고 새롭게 카테고리 테이블을 수정하는 작업 필요(팀원에게 맡김) 카테고리 테이블 값 수정 작업 (본인), naver api를 이용해 가져온 식당 값 정보 중 중복데이터 값 제거 (중복제거시 29만건 ->12만건으로 감소) 식당 제목 정보 잘못된 내용 업데이트(& -> & 으로 변경 태그 제거) 카텍좌표 -> 위도 경도 바꾸기 완료 하지만 오차가 500m이상 났음 다음 .. 2주차 프로젝트 정리. 1. 사용한 스택 React , nodejs, mysql, express, sequelize ,prettier 2. 내가 사용한 스택과 코드에서 중요한 것 사용한 스택 express, mysql, prettier. nodejs, React 코드에서 중요한 것은 잘 나눠서 구분해서 router 영역과 controller 영역 model 영역을 잘 나누는 것이 중요하다. 그렇게해서 최대한 꼬이지 않게 api를 잘 정리해서 쓰는 것이 중요하고, db 스키마를 잘 짜는 것이 무엇보다 매우 중요하다고 생각한다. 3. 프로젝트 진행으로 얻게 된것과 개인적 피드백 이번 프로젝트 진행으로 가장 많이 얻는 것은 sequelize 사용방법이다. 에러가 많이 나왔엇는데 잘 해결이 되지 않아서 머리아프게 골썩힌 일이 참으로 .. 2. 2주차 프로젝트 2일차. 1. 오늘 프로젝트 진행상황 어제 각자가 해온 api를 직접 만들기 위한 각 질문지 작성 발표 발표 내용을 토대로 데이터 스키마 작성. UI 설계 카드 수정 및 분배 각 유형별 특징 및 질문 조사 및 데이터 수집. 2. 내일 해야할 사항 git work flow 재 실습 필요. aws 에서 s3 , rds, ec2 환경 설정 필요. 기본 리액트 버전 배포 연습 1. 2주차 프로젝트 1일차.. 팀명 dreammaker 프로젝트명 dreammaker 프로젝트 시작시에 처음으로 만나서 이야기를 나누는 stand up meeting 오전 10시 30분 새롭게 알게 된것 프로젝트용 git flow에 대해서 팀원들끼리 학습을 했다. 변화된점 기존에 사용할려고 했던 api에서 데이터 핸들링을 할려고 했으나 너무나도 많은 데이터와 복잡한 데이터들이 있었다. 그리고 너무 많은 질문을 고객들에게 했을 경우 지루하고 짜증을 요청할 가능성이 있으므로 좀 더 간단하게 해결하기 위해서 새롭게 api를 만들어서 구현하도록 방향을 바꾸었다. 팀룰 - 모각코 형식으로 행아웃에서 또는 줌 에서 카메라를 켜놓고 각자 코딩 진행 한다. - 성용 - 코드 작성시 주석에 신경 쓸 것 (상대방이 이해할 수 있도록, 상대방의 생각과 .. Server Side Techniques 에 대해서 여러번의 비동기 함수로 인한 충돌을 방지하기 위해서 만들어진것이 바로 promise 라는 것입니다. Promise는 여러 번의 asynchronous call로 인해 callback이 중첩되는 상황에서 여러분의 수고를 덜어줄 수 있는 유용한 도구입니다. Promise는 Asynchronous libraries에서 기본적으로 사용하기 시작했고 ES6에서는 language standard로 포함되어 있습니다. Promise를 사용하기에 앞서서 연결되는 개념들을 여러가지 알아보도록 하겠습니다. 첫번째로 콜백 함수를 이용한 파일 시스템 사용과 request 사용을 적어보겠습니다. 파일시스템 1 2 3 4 5 6 7 8 9 10 11 const getDataFromFile = function(filePath, c.. youtube api를 이용한 유튜브 비슷한 화면 만들기. 대략적으로 그림을 그려봤다 ... 마우스로 그려서 그런지 좀 잘 못그린거같다. 완성된 프로젝트는 이렇게 나와있다. VideoListEntry 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import React from 'react'; const VideoListEntry = (props) => ( {props.data.snippet.title} {props.data.snippet.description} watch later ); export default VideoListEntry; Colored by Color Scripter cs src는 이미지를 가져온 것을 넣는것이고 onclick을 이용해 bind로 묶어줌으로서 데이터를 가져와서 함수로 메서드를 만들었다. 1 2 3.. 이전 1 다음
