원티드 기프티콘 거래 웹앱 with Cypress 구현해야 할 부분은 Api 함수 구현, 결과 타입 정의, 공통 리스트 카드 컴포넌트 그리고 카테고리 상세 페이지, 브랜드 상세페이지이다. 구현해야할 기능은 드래그 가능한 nav bar와 카테고리 데이터 받아와서 뿌려주는 그리드 카드 두 가지이다. 드래그 기능은 다음 4가지 마우스 이벤트로 구현할 수 있다. 페이지에서 대분류 리스트 데이터와 카테고리 상세 데이터를 SSR로 받아와 Navigat... 원티드cypress프리온보딩next.jsSSRWeCodeSSR [Retrospective]2차 프로젝트를 마치며(feat.wanted) 로지텍 웹사이트 클론을 했던 1차 프로젝트를 하고 나서 '한번 해봤으니, 2차 프로젝트는 조금 더 수월하게 할 수 있겠지?'생각했다. 조금은 자신감이 찬 상태로 시작해서인지, 모델링을 할 때 1차 프로젝트 때 보다는 수월하게 진행이 되었다. 1차 때보다 시간을 더 투자하기는 했지만 생각하지 못한 점이 있었다. 1차 프로젝트에서 product 애플리케이션을 하여 account(user) 애플리... 2차프로젝트원티드회고록2차프로젝트 [Pre Onboarding-TIL]공간 데이터베이스 공간 데이터베이스의 필요성 이것이 잘 작동하기 위해서는 먼저 점, 선, 공간(면)과 같은 지도에서 쓰일 수 있는 정보들이 데이터베이스에 잘 담겨 있어야 한다. 또한 이렇게 잘 저장되어 있는 정보를 상황에 맞게 활용할 수 있어야 한다. 그래서 일반적인 데이터를 저장하는 것과 달리 공간에 대한 정보를 저장하기 위해 공간 데이터베이스가 필요하다. 공간 데이터 타입 일반적으로 사용되는 공간 데이터 ... 원티드위코드원티드 TIL53 - Docker(2) Docker 이론에 대해 배웠으니, 이번엔 실습을 해볼 예정입니다. 저는 맥북 M1을써서, 제 기준으로 작성했습니다. 로 가서 설치합니다. root directory로 이동하여, DockerFile을 생성합니다. 확장자명은 없이, 이름만 작성해주면 됩니다. 아래 사진에 저는 대문자로 썼는데, Dockerfile 이라고 입력해줘야 합니다. 대소문자까지 보네요;; 만든 파일에 아래와 같이 입력해... 원티드휴먼스케이프위코드웹WeCodeWeCode [프리온보딩] 두번째 과제 회고 두 번째 과제는 건강한 식사 문화를 만들고자 하는 기업 '프레시코드'의 과제를 택했다. 지난번 과제와 큰 차이가 없었고, 이번엔 팀 전원이 뭉쳤기 때문에 조금 여유로울 것이라고 생각했었다. 하지만 큰 오산이었다... 첫 번째 과제와 큰 차이가 없는 과제였던 만큼, 팀원들과 좀 더 디테일에 신경쓰자고 의견을 모았다. 그리고 그 디테일을 잡는다는 것이 얼마나 힘든 일인지를 뼈저리게 느끼게 되었다... 원티드프레시코드위코드원티드 원티드 프리온보딩 3주차 (휴먼스케이프) 회고록 시나리오 및 시퀀스 정의하기 먼저 어떻게 프로그램을 제작할지 같이 시퀀스를 작성했다. 과제의 핵심포인트는 우리가 제작한 서버를 통해 공공 api에서 일정한 시간내에 변경된 데이터들을 조회하는 기능이였다. 그래서 주기적으로 우리서버에서 공공api서버로 데이터를 요청해야했다. Task Scheduling 리눅스에서 cron을 사용해봤기에 Node.js node-cron 패키지와 통합되는 @nes... 휴먼스케이프원티드위코드회고록원티드 TIL52 - 협업을 위해 사용할 수 있는 enum 를 참고하여 작성했습니다. 열거형(enumeration)은 고유한 상수값에 연결된 기호 이름의 집합입니다. enum이라는 단어는 for문을 쓸 때 와 같은 형태를 사용해보며 봤었습니다. 단순히 정의만 보면 어떤 건지 감이 안올 수도 있어서, 실제로 적용한 코드를 첨부했습니다. 이번 원티드 프리온보딩 의 기업 과제 중 작성한 코드입니다. DealPosition이란 입/출금 구분을 위해 만든 모... 위코드장고WeCodedjango원티드8퍼센트8퍼센트 2주차(목) - 프리 온보딩 코스 프론트엔드 - Redux ⇒ 리드미 참고 👀 ⇒ 대부분 면접관이 이렇게 생각함 뷰(화면)과 모델(데이터)을 연결하는 것을 의미. setState 할 필요가 없음 ⇒ 쓰면 그 순간에 모델을 바꾼다 이벤트 핸들러와 이벤트를 처리하는 로직이 있는 곳이라고 생각하면 쉽다. 단방향 데이터 흐름(unidirectional data flow)이 핵심. 사용자에 의해 Action이 발행되면, 해당 Action에 영향이 있는 모든 ... 위코드프론트엔드프리온보딩리덕스원티드리덕스 [TIL] Week#2-HW#2 (2022-02-13) TypeScript로 redux를 사용했다. SCSS를 처음 사용했다. 구조 명세서를 가지고 UI부터 고민하여 프로젝트를 완성시켰다. 아직 TypeScript가 익숙하지 않아 쉬운 기능을 구현하는데에도 시간이 오래걸렸다. SCSS를 처음 사용해 봤는데 기존에 알고 있었던 CSS와 유사해 재미있었다. 공통 속성을 import 하는 과정에서 조금 어려움을 겪었지만 팀원들의 도움으로 해결하였다. ... TIL위코드프리온보딩원티드TIL TIL50 - select_related & prefetch_related select_related와 prefetch_related의 정의와 사용했을 때 어떻게 돌아가는 지 설명 후, 해당 내용을 예시로 한 코드를 작성했습니다. 이번 원티드 프리온보딩 과정을 하며 처음으로 사용해보게 되어서 아직 문법에 서툴지만, 점차 익숙해져서 능숙하게 사용할 수 있을거라 생각합니다. OneToOneField나 ForeignKey 관계에서 사용할 수 있으며, OneToOneFie... 위코드장고WeCode프레시코드django원티드WeCode 원티드 프리온보딩 2주차 (원티드) 회고록 1. 왜 자바스크립트팀이 원티드 과제를 했나요? 자바스크립트 팀이지만 레드브릭 대신 원티드 과제를 시작했다. 원티드 과제중 자동완성 기능에 대해 흥미가 생겼기 때문이다. 42서울을 통해 새로운 지식을 배울 때 두려움을 가지지 않도록 단련했기 때문이다. 팀원들도 모두 레드브릭 과제보다 원티드 과제를 선호했고, 동의해주었다. 2. 사전학습은 어떻게 했나요? 하지만 전 과제 (마피아 컴퍼니) 같은... 원티드위코드회고록원티드 [프리온보딩 백엔드] 8퍼센트 기업 과제 회고👏 Functional Test는 E2E(End-to-End) 혹은 브라우저 테스트로 소프트웨어 내부 구조나 구현 방법을 고려하기보다 테스트 시나리오를 바탕으로 실제 사용자가 접하는 브라우저 테스트를 하는 것임 하지만 현재 프로젝트는 프론트 부분을 구현하지 않았으므로 해당 방향으로 테스트를 진행하기는 어렵다고 판단하였음 입금 시나리오 : 사용자 로그인 → 계좌 생성 → 입금 → 입금 거래 내역 ... 8퍼센트원티드위코드8퍼센트
기프티콘 거래 웹앱 with Cypress 구현해야 할 부분은 Api 함수 구현, 결과 타입 정의, 공통 리스트 카드 컴포넌트 그리고 카테고리 상세 페이지, 브랜드 상세페이지이다. 구현해야할 기능은 드래그 가능한 nav bar와 카테고리 데이터 받아와서 뿌려주는 그리드 카드 두 가지이다. 드래그 기능은 다음 4가지 마우스 이벤트로 구현할 수 있다. 페이지에서 대분류 리스트 데이터와 카테고리 상세 데이터를 SSR로 받아와 Navigat... 원티드cypress프리온보딩next.jsSSRWeCodeSSR [Retrospective]2차 프로젝트를 마치며(feat.wanted) 로지텍 웹사이트 클론을 했던 1차 프로젝트를 하고 나서 '한번 해봤으니, 2차 프로젝트는 조금 더 수월하게 할 수 있겠지?'생각했다. 조금은 자신감이 찬 상태로 시작해서인지, 모델링을 할 때 1차 프로젝트 때 보다는 수월하게 진행이 되었다. 1차 때보다 시간을 더 투자하기는 했지만 생각하지 못한 점이 있었다. 1차 프로젝트에서 product 애플리케이션을 하여 account(user) 애플리... 2차프로젝트원티드회고록2차프로젝트 [Pre Onboarding-TIL]공간 데이터베이스 공간 데이터베이스의 필요성 이것이 잘 작동하기 위해서는 먼저 점, 선, 공간(면)과 같은 지도에서 쓰일 수 있는 정보들이 데이터베이스에 잘 담겨 있어야 한다. 또한 이렇게 잘 저장되어 있는 정보를 상황에 맞게 활용할 수 있어야 한다. 그래서 일반적인 데이터를 저장하는 것과 달리 공간에 대한 정보를 저장하기 위해 공간 데이터베이스가 필요하다. 공간 데이터 타입 일반적으로 사용되는 공간 데이터 ... 원티드위코드원티드 TIL53 - Docker(2) Docker 이론에 대해 배웠으니, 이번엔 실습을 해볼 예정입니다. 저는 맥북 M1을써서, 제 기준으로 작성했습니다. 로 가서 설치합니다. root directory로 이동하여, DockerFile을 생성합니다. 확장자명은 없이, 이름만 작성해주면 됩니다. 아래 사진에 저는 대문자로 썼는데, Dockerfile 이라고 입력해줘야 합니다. 대소문자까지 보네요;; 만든 파일에 아래와 같이 입력해... 원티드휴먼스케이프위코드웹WeCodeWeCode [프리온보딩] 두번째 과제 회고 두 번째 과제는 건강한 식사 문화를 만들고자 하는 기업 '프레시코드'의 과제를 택했다. 지난번 과제와 큰 차이가 없었고, 이번엔 팀 전원이 뭉쳤기 때문에 조금 여유로울 것이라고 생각했었다. 하지만 큰 오산이었다... 첫 번째 과제와 큰 차이가 없는 과제였던 만큼, 팀원들과 좀 더 디테일에 신경쓰자고 의견을 모았다. 그리고 그 디테일을 잡는다는 것이 얼마나 힘든 일인지를 뼈저리게 느끼게 되었다... 원티드프레시코드위코드원티드 원티드 프리온보딩 3주차 (휴먼스케이프) 회고록 시나리오 및 시퀀스 정의하기 먼저 어떻게 프로그램을 제작할지 같이 시퀀스를 작성했다. 과제의 핵심포인트는 우리가 제작한 서버를 통해 공공 api에서 일정한 시간내에 변경된 데이터들을 조회하는 기능이였다. 그래서 주기적으로 우리서버에서 공공api서버로 데이터를 요청해야했다. Task Scheduling 리눅스에서 cron을 사용해봤기에 Node.js node-cron 패키지와 통합되는 @nes... 휴먼스케이프원티드위코드회고록원티드 TIL52 - 협업을 위해 사용할 수 있는 enum 를 참고하여 작성했습니다. 열거형(enumeration)은 고유한 상수값에 연결된 기호 이름의 집합입니다. enum이라는 단어는 for문을 쓸 때 와 같은 형태를 사용해보며 봤었습니다. 단순히 정의만 보면 어떤 건지 감이 안올 수도 있어서, 실제로 적용한 코드를 첨부했습니다. 이번 원티드 프리온보딩 의 기업 과제 중 작성한 코드입니다. DealPosition이란 입/출금 구분을 위해 만든 모... 위코드장고WeCodedjango원티드8퍼센트8퍼센트 2주차(목) - 프리 온보딩 코스 프론트엔드 - Redux ⇒ 리드미 참고 👀 ⇒ 대부분 면접관이 이렇게 생각함 뷰(화면)과 모델(데이터)을 연결하는 것을 의미. setState 할 필요가 없음 ⇒ 쓰면 그 순간에 모델을 바꾼다 이벤트 핸들러와 이벤트를 처리하는 로직이 있는 곳이라고 생각하면 쉽다. 단방향 데이터 흐름(unidirectional data flow)이 핵심. 사용자에 의해 Action이 발행되면, 해당 Action에 영향이 있는 모든 ... 위코드프론트엔드프리온보딩리덕스원티드리덕스 [TIL] Week#2-HW#2 (2022-02-13) TypeScript로 redux를 사용했다. SCSS를 처음 사용했다. 구조 명세서를 가지고 UI부터 고민하여 프로젝트를 완성시켰다. 아직 TypeScript가 익숙하지 않아 쉬운 기능을 구현하는데에도 시간이 오래걸렸다. SCSS를 처음 사용해 봤는데 기존에 알고 있었던 CSS와 유사해 재미있었다. 공통 속성을 import 하는 과정에서 조금 어려움을 겪었지만 팀원들의 도움으로 해결하였다. ... TIL위코드프리온보딩원티드TIL TIL50 - select_related & prefetch_related select_related와 prefetch_related의 정의와 사용했을 때 어떻게 돌아가는 지 설명 후, 해당 내용을 예시로 한 코드를 작성했습니다. 이번 원티드 프리온보딩 과정을 하며 처음으로 사용해보게 되어서 아직 문법에 서툴지만, 점차 익숙해져서 능숙하게 사용할 수 있을거라 생각합니다. OneToOneField나 ForeignKey 관계에서 사용할 수 있으며, OneToOneFie... 위코드장고WeCode프레시코드django원티드WeCode 원티드 프리온보딩 2주차 (원티드) 회고록 1. 왜 자바스크립트팀이 원티드 과제를 했나요? 자바스크립트 팀이지만 레드브릭 대신 원티드 과제를 시작했다. 원티드 과제중 자동완성 기능에 대해 흥미가 생겼기 때문이다. 42서울을 통해 새로운 지식을 배울 때 두려움을 가지지 않도록 단련했기 때문이다. 팀원들도 모두 레드브릭 과제보다 원티드 과제를 선호했고, 동의해주었다. 2. 사전학습은 어떻게 했나요? 하지만 전 과제 (마피아 컴퍼니) 같은... 원티드위코드회고록원티드 [프리온보딩 백엔드] 8퍼센트 기업 과제 회고👏 Functional Test는 E2E(End-to-End) 혹은 브라우저 테스트로 소프트웨어 내부 구조나 구현 방법을 고려하기보다 테스트 시나리오를 바탕으로 실제 사용자가 접하는 브라우저 테스트를 하는 것임 하지만 현재 프로젝트는 프론트 부분을 구현하지 않았으므로 해당 방향으로 테스트를 진행하기는 어렵다고 판단하였음 입금 시나리오 : 사용자 로그인 → 계좌 생성 → 입금 → 입금 거래 내역 ... 8퍼센트원티드위코드8퍼센트