프리온보딩 기프티콘 거래 웹앱 with Cypress 구현해야 할 부분은 Api 함수 구현, 결과 타입 정의, 공통 리스트 카드 컴포넌트 그리고 카테고리 상세 페이지, 브랜드 상세페이지이다. 구현해야할 기능은 드래그 가능한 nav bar와 카테고리 데이터 받아와서 뿌려주는 그리드 카드 두 가지이다. 드래그 기능은 다음 4가지 마우스 이벤트로 구현할 수 있다. 페이지에서 대분류 리스트 데이터와 카테고리 상세 데이터를 SSR로 받아와 Navigat... 원티드cypress프리온보딩next.jsSSRWeCodeSSR 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 게시글 조회수 중복을 방지하는 방법들 중복을 방지하는 방법 쿠키와 세션 IP 매치 저는 1번 방법으로 조회수 중복을 방지하였습니다. Code... 프리온보딩백엔드TILTIL 1주차(월) - 프리 온보딩 코스 프론트엔드 - 기업 과제 회고 1번 과제는 간단 설명 후 넘어가고, 2번 과제는 좀 더 디테일하게 설명할 예정이다. 수취국가(한국, 일본, 필리핀)을 선택하고, 송금액을 넣는다 수취 국가를 선택하면 환율 정보 API를 통해서 실시간으로 환율 데이터와서 '환율'에 반영한다. input에는 사용자가 숫자만 입력할 수 있어야 한다. 1.1 숫자 외 아무것도 입력할 수 없다 (특수문자, 영어, 공백, ..) 드롭 다운 메뉴를 선... 프론트엔드프리온보딩짝코딩페어코딩원티드짝프로그래밍환율원티드 [TIL] Week#1-HW#1 (2022-01-26) 프리온보딩 1번째 과제(환율 계산기) 회고 axios를 활용한 api 통신 방법 Project 구조 (craco, Path alias를 이용한 절대경로) 생각보다 경쟁률이 높아 놀랐으며, 팀원들의 실력이 뛰어나 두 번 놀랐다. 공부가 필요한 부분들을 많이 찾을 수 있었으며 강한 동기부여가 됐다. 첫 번째 과제를 끝냈지만 팀원을 정말 잘 만났다고 느낄 수 있었다. 자바스크립트의 유연한 특성 때... 원티드프리온보딩위코드원티드 [01.27~ 01.29] Admin 페이지 만들기 추가해야할 항목이 있을 경우 "항목 추가" 버튼을 통해 카테고리를 추가할 수 있고, "삭제" 버튼을 누르면 생성한 카테고리를 삭제할 수 있어야 했다. Input을 사용할 일이 워낙 많은 만큼 공용 컴포넌트로 먼저 만들었는데, 다른 팀원들도 손쉽게 가져다 쓸 수 있으려면 width나 height 같은 값을 원하는 대로 줄 수 있도록 해야 했다. 이번 과재의 경우 Input은 height과 bo... 프리온보딩Reacthook원티드React
기프티콘 거래 웹앱 with Cypress 구현해야 할 부분은 Api 함수 구현, 결과 타입 정의, 공통 리스트 카드 컴포넌트 그리고 카테고리 상세 페이지, 브랜드 상세페이지이다. 구현해야할 기능은 드래그 가능한 nav bar와 카테고리 데이터 받아와서 뿌려주는 그리드 카드 두 가지이다. 드래그 기능은 다음 4가지 마우스 이벤트로 구현할 수 있다. 페이지에서 대분류 리스트 데이터와 카테고리 상세 데이터를 SSR로 받아와 Navigat... 원티드cypress프리온보딩next.jsSSRWeCodeSSR 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 게시글 조회수 중복을 방지하는 방법들 중복을 방지하는 방법 쿠키와 세션 IP 매치 저는 1번 방법으로 조회수 중복을 방지하였습니다. Code... 프리온보딩백엔드TILTIL 1주차(월) - 프리 온보딩 코스 프론트엔드 - 기업 과제 회고 1번 과제는 간단 설명 후 넘어가고, 2번 과제는 좀 더 디테일하게 설명할 예정이다. 수취국가(한국, 일본, 필리핀)을 선택하고, 송금액을 넣는다 수취 국가를 선택하면 환율 정보 API를 통해서 실시간으로 환율 데이터와서 '환율'에 반영한다. input에는 사용자가 숫자만 입력할 수 있어야 한다. 1.1 숫자 외 아무것도 입력할 수 없다 (특수문자, 영어, 공백, ..) 드롭 다운 메뉴를 선... 프론트엔드프리온보딩짝코딩페어코딩원티드짝프로그래밍환율원티드 [TIL] Week#1-HW#1 (2022-01-26) 프리온보딩 1번째 과제(환율 계산기) 회고 axios를 활용한 api 통신 방법 Project 구조 (craco, Path alias를 이용한 절대경로) 생각보다 경쟁률이 높아 놀랐으며, 팀원들의 실력이 뛰어나 두 번 놀랐다. 공부가 필요한 부분들을 많이 찾을 수 있었으며 강한 동기부여가 됐다. 첫 번째 과제를 끝냈지만 팀원을 정말 잘 만났다고 느낄 수 있었다. 자바스크립트의 유연한 특성 때... 원티드프리온보딩위코드원티드 [01.27~ 01.29] Admin 페이지 만들기 추가해야할 항목이 있을 경우 "항목 추가" 버튼을 통해 카테고리를 추가할 수 있고, "삭제" 버튼을 누르면 생성한 카테고리를 삭제할 수 있어야 했다. Input을 사용할 일이 워낙 많은 만큼 공용 컴포넌트로 먼저 만들었는데, 다른 팀원들도 손쉽게 가져다 쓸 수 있으려면 width나 height 같은 값을 원하는 대로 줄 수 있도록 해야 했다. 이번 과재의 경우 Input은 height과 bo... 프리온보딩Reacthook원티드React