한것 PWA 정적 캐싱 manifest 작성 동적 패칭데이터 캐싱 GraphQL은 POST에다 EndPoint가 하나. Post는 WorkBox에서 값을 가져올 수 없음 WorkBox는 URL로 캐싱함 참고자료 이를 해결한 방법 GraphQL EndPoint 캐치 리퀘스트에서 쿼리 꺼냄 쿼리를 키로, 리스폰스의 값을 밸류로 idb에 넣음. 키는 hash키…
한 것 포스트 업로드 s3로 (graphql upload) 그냥 이미지 업로드 시킬 수 있게 navBar를 변경 업로드 모달에서 자잘한 애러 수정
한 것 AR text 위치에 대해서 추가 내 쪽 방향으로 보게하려고 하였으나 아직 못함… 포스트 업로딩 모달 회고 AR Text 추가를 성공하였으나, Text로 띄워주는 위치를 제대로 보여주기위해 계속 시도하고있다. 우선
오늘 오자마자 webView를 하기위해 react-native 학습과 환경구축을 하였다. 익숙하면서도 익숙하지 않은 환경이었고, 안드로이드 manifest와 같은 개발 환경을 또 따로 공부해야되었다. 일단 그렇게 안드로이드 스튜디오 jdk등과 같은 환경구축을 마치고 webView를 올릴려고 했는데, expo와 react-native-cli 중에서 고민을 …
한 것 season, year 선택시 재 패칭 main page 리팩토링 useInfiniteHook locationSeason Organisms useViewModeWithSider AR Confirm 버튼 AR 종료시 이벤트 핸들러 추가 AR 캡처기능 추가 중 문제 발생 WebXR AR 캡쳐 지원하지 않음 Three.js 캡처 해도 검은 화면만… na…
한 것 S3 스터디 S3 버킷 생성 post create mutation 생성 frontend infinity scroll 잘한것 s3 구축 인피니티 스크롤 아폴로 클라이언트 캐시에 대해 조금 알게됨…! fetchMore 못한것 year, season 골랐을 때 기존에 캐싱된 데이터 정리되어야 하는데 못함… Retrospect 오늘은 내일 할 일인 s3먼…
한 것 안드로이드 usb 디버깅 테스트 환경 구축 adb로 가능 프론트 - adb reverse tcp:3000 tcp:3000 서버 - adb reverse tcp:4000 tcp:4000 checkARAvaible AR 사용 가능 상태인지 체크 startAR closeBtn Painting Mode Model Mode 잘한것 모바일 디버깅 환경 구축 …
2021-05-11 회고는 몸상태가 좋지않아 많은 작업을 하지 못했고 이번 게시글 12일자에 포함해서 적도록 하겠음. 한 것 useViewMode 전역상태로 관리되는 viewMode를 사용할 수 있게하는 커스텀 훅 Apollo의 Reactive Variable 사용 ios Picker (seasonPicker) Component Atoms - Rotati…
한 것 GeoJsonPolygon 생성 페이지 (배포까지) 폴리곤 그리기 계속해서 추가시킬 수 있게 생성된 것 지도에 표시 mouserover, mouseleave 생성한 데이터가 아니라 기존 데이터 넣어도 반영될 수 있게 Area DataSource KakaoAPI DataSource Area 쿼리들 Areas 쿼리 myArea 쿼리 mongoDB의 G…
한 것 Login Mutation 구현 jwt 발급 user 체크 후 없으면 생성 Apollo Mongo DataSource 적용 graphql datasource module 생성 frontend login mutation 적용 및 로그인 redirect useToken customHook graphql authenticate 적용 graphql con…
한 것 StoryBook, ARc 사용 (+ generact) Atoms, Molecules, Templates, Page 생성 Atoms Button GoogleLoginButton Heading Img Input Label Molecules AddToHomeForm LoginForm Templates GenericTemplate Page LoginPa…
한 것 Apollo 강의 - odesay StoryBook, ARc 발견 (+ generact) 그에 따른 개발 프로세스 정립 이미 만들어진 create-react-app에 ARc에 있는 src-examples 복붙. generact로 생성시키기… 컴포넌트는 이렇게 생성하자! Backend Apollo Setting && FrontEnd Test Apol…
한 일 기획 끝 테스크 카드 수립 기한, 일정 수립 위치기반 서비스 공부 GeoJson MongoDB Location Query 스키마에 Area 추가 GraphQL Apollo Server 공부 Create-React-App template pwa 잘한점 위치기반 서비스의 틀을 잡았다. 테스크 카드 수립 완료했다 못한점 아직 Apollo, GraphQL…
바닐라코딩 Prep 9기가 끝난지 1주가 지났다. 2달여동안 바닐라 코딩 Prep을 수강하면서 너무나도 만족스러웠기 때문에 바닐라코딩 Prep에 대해 고민중이시거나 취업을 위해 한단계 더 발전하고싶으신 분들에게 추천하고자 이 글을 쓴다. 특히 나와같이 개발관련 전공자이신분들에게 필요할 것 같은 얘기들을 좀 적었다. 신청 이유 바닐라코딩 부트캠프 내가 바닐…
1주차 수요일 금요일 2주차 월요일 수요일 금요일 3주차 월요일 수요일 금요일 4주차 월요일 수요일 금요일 5주차 Break Week 🛁 6주차 월요일 수요일 금요일 7주차 월요일 수요일 금요일 8주차 월요일 수요일 금요일 9주차 월요일 수요일
Promise 사용하는건 그렇게 어렵지 않다. 인자로 함수를 받는 생성자 함수! 그리고 이 함수의 인자는 resolve, reject를 받아야 한다. resolve는 작업 완료시 호출 reject는 애러시 호출 순서 순서는 다들 Promise 생성자 함수가 비동기로 작동한다고 생각해서 으로 생각하기 쉬우나, 생성자 함수 자체는 비동기가 아님을 유의하자!…
과제 리뷰 코멘트 early return 다음과 같은 분기중에서 한쪽은 길고 한쪽은 짧을 때 혹은 if else문을 통한 예외처리를 처리하면 좋다. 이렇게 할 경우, 가독성이 좋아지고 효율이 좋아진다. 또 가독성이 좋아진다. indentation이 줄고, if else문을 다 안봐도 된다. if, else 문에 대해 다 보지 않기 때문에 효율성이 있…
비동기 어렵다. 반복적으로 비동기를 다루면서 적응하면 된다! Javascript를 쓰면 비동기에 대해 자주 접하게 될것이다. Javascript를 쓰려면 비동기에 대한 이해는 필수! 동기 Synchronous. 비동기가 아닌 것. 작업을 순서대로 실시 (완료하면 다음 작업) 이때까지 우리가 봐온 것들의 대부분의 코드가 동기적으로 작동하는 코드 비동기 As…
지난주 과제(Underdash) 코드리뷰 정리 hasOwnProperty() 설명은 지난시간에 했음. 3항 연산자 중첩 3항 연산자 중첩은 어디까지 허용? -> 주관적이다. 그래도 일반적으로 특별한 일이 아닌 이상은 중첩하지 않는다. 코드 리뷰 받은 코드에서는 3항 연산자에서 할당문이 들어가서 가독성을 헤침. 켄님의 의견 : 3항연산자를 특별한 일이 있지…
클로저 함수가 선언될 당시 주변환경과 함께 갇히는 것 실행되는 장소나 시점은 관계가 없다. Quiz1. 9 라인에서 함수(레퍼런스)가 리턴되고, 11라인에서 함수가 그냥 실행 될 것 같지만, 함수가 선언된 위치에서 접근 할 수 있는 변수들이 정해지는 것이므로 상위 scope인 변수 a와 b를 사용할 수 있다. (const 이므로 block scope) Q…
지난주 과제 리뷰 Q. Component.prototype.render() 에서 return this 하는 이유? render() 메서드에서 부분 주석해도 잘 돌아가는데? 왜 있는 것일까? 불필요한 부분이 아닌가? Array.prototype.push()는 변경된 배열의 길이를 리턴. 이 처럼 Array.prototype.push()에는 굳이 retur…
Q. this Quiz 함수의 실행시점을 잘 보자. 함수의 실행시점은 11라인 dot notation을 통해서 넘겨지더라도 실행시점에서 dot notation이 없으면 일반함수 실행과 같다. 또한 의 인자로 과 같이 dot notation을 통해서 넘기더라도 는 그냥 해당 key값의 value 인 함수의 레퍼런스 값만 가져오기 때문에 speak…
이번주 과제 Canola UI는 간단하게 만들어놓은 라이브러리라고 생각하면 된다. 소스코드가 많지않아서 소스 다 볼 수 있을것. Digital Clock을 구현하는 것도 중요하지만, Canola UI를 모두 이해해보려고 하는것이 중요 와 이 실제 코딩에서 어떻게 쓰일 수 있는지, 어떻게 응용되는지 이해하고 확인할 수 있다. Q. BAT(Bootcamp…
오늘 Prep 6주차 시작일자로 모든 Prep 과제를 완료하고 Vanilla Coding Bootcamp 9기 지원을 완료하였다. Bootcamp를 지원한 자세한 이유는 아래에 있지만 그동안 Prep 5주차까지 진행을 하면서, Bootcamp에 대한 확신이 들었고 지금 함께하고있는 Prep인원들 또한 열심히 하는 모습이 Bootcamp9기에서도 지속될 것…
Q. 콜백함수에서의 this는 일반함수로 실행되는거? 함수마다 다르다. setTimeout 혹은 addEventListener로 넘어가는 this는 작동이 다른데, setTimeout의 callbackFunction는 일반함수와 같이 실행 그래서 일반함수와 똑같이 this 적용 addEventListener는 currentTarget. addEventLi…
strict mode? 함수가 regular function call로 실행되었을 때 글로벌객체로 잡히는 this를 undefined로 처리. this사용 함수가 실행되었을 때 결정이 된다. 어떻게 실행되었느냐 regular function call 내부에서 this가 전역객체로 작용 strict mode 적용시 undefined! dot notation…
ToDo 리스트 활용 ToDo 리스트 (요구사항) 에 현혹되지 말자! ToDo 리스트에 있는 기능이나 요구사항보다 개발할 때에는 더 잘게 쪼개서 작업을 해야 된다. ex) 시작 버튼을 눌렀을 경우, quiz.json의 첫 문제부터 카드형식으로 보여주어야 한다. html, css 작업 시작버튼에 클릭 이벤트 추가 quiz.json 가져오기 quiz.json…
Q. 이번과제 수정사항 생기면 계속 재 풀이하는데? 이럴때는 개발을 위해서 네비게이터를 따로 만들어 둔다던지 등의 조작을 한다. 어떠한 기능이나 프로세스를 개발 하고자 할 때 개발자 자체적으로 테스트를 진행 한다면(단위 테스트) 개발, 테스트를 위해서 해당 기능이나 프로세스에 포함되지는 않더라도 개발, 테스트만을 위한 함수라던지 프로세스를 만들어서 기능 …
Primitive Vs Reference Primitive Object를 제외한 나머지 String Number Boolean Undefined Null Symbol Reference Object 타입 Object (객체) Array Function 퀴즈 풀어봅시당 문제1. 이 문제는 Reference를 이해해야됨! 문제2. 이 문제는 함수 매개변수에 대…
함수 Naming 함수 이름은 동사로 시작하는 것이 일반적. 국내에만 국한된 것이 아니라 세계적으로 쓰는 컨벤션. 영어로 이해할 수 있게 잘 네이밍 하는 것이 상당히 중요하다. 영어 문서! 구글 번역기를 돌리더라도 영어 문서 (공식문서)를 읽고 이해하는 습관을 들여야 된다. 습관이 들면 들수록 괜찮아 진다. 일부러 영어라고 한글문서를 찾는 습관은 기르지 …
Q. DOM 실습 좀더 하고싶을땐? Prep 과제로 충분하지만 더 하고싶다면, 인터넷에 javascript mini project 검색. 아니면, 스스로 아이디어를 내서 만들어보자. querySelector vs getElementById DOM에있는 요소를 선택하는 여러 방법들 중에서 (querySelector, getElementById, getEle…
과제 먼저 살펴 볼 함수는 calculatorWinner() -> 승자 판별하는 함수. 어떻게 승자판별하는지 잘 파악해보자. 배열 어떻게 넘겨주고 하는건 그 다음. 그리고 승자판별을 언제해야되느냐? 이 타이밍은 잘 생각해보자. Q. 과제에서 css :before, :after 선택자 어떤역할? css에는 box-sizing이라는 속성이 있는데, 블록 요소…
코드리뷰 요청시 과제 하고 난 후에 꼭 merge request 해주세요. (매주 금 저녁 7시까지) prep가이드 > 과제제출방법 참조. 금 저녁 7시이후에 merge request시에는 코드리뷰를 못 받을수도 있음. Merge request는 켄님이 알아서 닫음. 닫힌 것도 볼 수 있다. Closed 탭. 코드리뷰 질문 merge request시에 질…
PrevQ. {} || something 지난시간 {} || something, {} && something 이 안되었던 이유는 자바스크립트 엔진에서 {}를 구문블록 (block statement)로 해석 한 것! 우리가 if, for 문을 쓸 때 {}를 쓰듯이 {}는 block statement라고 하는데, {} 을 block statement로 해석…
오피스아워에서 하는 것 월요일 : 해당 주 과제, 배우는 것에 대하여 설명 수요일 : 해당 주 주제에 관해 주요한 부분 설명 금요일 : 해당 주차 과제에 대한 솔루션 JavaScript Type Boolean Null Undefined Number String Symbol Object NaN의 type은 number NaN은 주로 애러상황에서 만나게 됨 …
