Foresitory 🌳 Foresitory 🌳

분류 전체보기

• 원티드 프리온보딩 프론트엔드 코스 3주차 회고 (1) — Next.js

  ETC 2022. 3. 22. 02:29

  프리온보딩을 시작하고 나니 시간이 무지 빠르게 흐른다. 드디어 3주차! 이번에는 Next.js를 처음 써 보게 되었다. 이름만 들었을 때 어려울 것 같았던 Next.js는 막상 해 보니 생각보다 어렵지는 않았지만, 역시 처음이라 그런지 어렵긴 어려웠다. (모순덩어리) 사실 마감 기한까지도 완벽하게 이해하지 못했는데 프리온보딩 코스가 끝나고 복습하고 나서야 조금씩 이해하는 중이다.... 이번 과제에서 나는 상품 상세 페이지, 고객센터와 마이페이지, e2e 테스트를 맡았다. 아무튼 시작~ 1. 상품 상세 페이지 처음에는 리액트에서 components를 작성하는 것과 동일하게 components 폴더 내에 페이지마다 폴더를 나눠서 컴포넌트를 작성했다. 컴포넌트 분리 기준은 위 사진과 같이 분리했다. Optio..

  Read More
• [React] Redux 개념 정리

  TECH 2022. 3. 13. 02:04

  ✔️ Redux란? Redux는 자바스크립트 상태 관리 라이브러리이다. 상태(state)를 효율적으로 관리할 수 있도록 도와주는 도구 중 하나이다. ✔️ Redux 기본 개념 1. 액션(Action) 상태를 변경하기 위해서는 액션을 통해 변경해야 한다. 액션은 객체 형식으로 표현되고, type을 필수로 가지고 있어야 한다. 옵션으로 다른 프로퍼티를 가질 수 있고, 액션에 필요한 부가적인 데이터를 전달할 때 주로 사용한다. { type: 'ADD_MESSAGE', data: { id: 1 message: "리덕스 배우기" } } 메시지를 새로 추가하는 액션이고, 새로운 메시지에 대한 부가적인 data가 전달된다. 2. 액션 생성 함수(Action Creator) 액션은 객체 형식으로 바로 만드는 것이 아니..

  Read More
• 원티드 프리온보딩 프론트엔드 코스 2주차 회고 (2) — Redux

  ETC 2022. 3. 5. 21:39

  채용 과제를 하거나, 취업해서 회사가 생기고 나면 전역 상태 관리 툴을 사용하는 경우가 많을 거다. (어마어마한 props drilling으로 모든 걸 해결하지 않을 거라고 생각....) 그래서 리액트를 하면서 redux, recoil 같은 전역 상태 툴을 알고 있는 게 필수라고 생각했는데, 나는 왜 그동안 사용하지 않았는지? 아무튼 이번에는 리덕스를 필수로 사용하는 과제였고, 이전에도 Context API나 리덕스 튜토리얼 (정도지만)을 통해 사용해 봤기 때문에 그닥 걱정은 되지 않았다! 우선 이번에는 과제 변경 사항이 많았기 때문에 족금 정신이 없었고... swit 과제는 프로토타입이 없었기 때문에 디자인은 어떻게 하지 생각하다가 swit은 이미 잘 사용되고 있는 메신저이기 때문에~ 웹 버전 디자인을..

  Read More
• 원티드 프리온보딩 프론트엔드 코스 2주차 회고 (1) — TypeScript

  ETC 2022. 3. 2. 23:13

  설날 연휴에 푹~ 쉬는 척 이것저것 공부도 많이 하고 나서 다시 듣게 된 2주차 수업. TypeScript 수업이었는데 사실 바로 실전 프로젝트를 하게 될 줄은 몰랐다. 그나마 설 연휴에 React with TS로 TodoList 만드는 강의라도 보고 따라해서 망정이라고 생각했음. 그리고 직접 해 보니까 더 어려웠따...... TypeScript 사실 타입스크립트는 C언어, Java, Python 그리고 약간의 C++까지 배웠던 전공생으로써 익숙한 부분들이 많았다. 당연함. 그것이 OOP이니까. 어떻게 보면 자바스크립트가 되게 희한한 언어다. 변수의 타입도 지정해 주지 않아도 되고, 호이스팅으로 인해 변수 선언을 호출보다 밑에 해도 오류가 안 난다든지 그런 점을 보면 말이다. 그치만 React+TypeS..

  Read More
• 원티드 프리온보딩 프론트엔드 코스 개인 과제 회고

  ETC 2022. 2. 24. 19:15

  내가 참여한 원티드 프리온보딩 프론트엔드 코스는 2022/01/24부터 시작해 중간에 설날 연휴가 껴 있다. 해서 1주차 배우고 한 주를 쉴 수 있었는데, 필수가 아닌 개인 과제도 하나 있었다. 연휴에 놀지 말고 공부나 하자 해서 시도하게 되었다. 사실 타입스크립트, 리덕스 등 엄청 배울 게 많았던 일주일이었음 기능은 이 링크에 있는 화면을 구현하는 거였고, 처음 봤을 땐 좀 어렵겠는데? 싶었으나 은근 빨리 끝난 과제였다. 1. API 연동 사실 API 연동하는 데 시간이 많이 걸렸다. 벨로퍼트 리액트로 리덕스를 조금 공부하고 나서 과제에 돌입했었는데, 거기서 배운 커스텀 훅을 쓰려다 뭐가 잘 안 되더라.... 아무튼 API 호출은 이런 식으로 진행했다. export async function getHo..

  Read More
• [React] Checkbox (2) — 버튼으로 선택 해제하기

  TECH 2022. 2. 21. 01:59

  [React] Checkbox (1) — Context API로 상태 관리하기에 이어지는 포스팅입니다. 버튼으로 체크박스 해제하기 체크박스의 상태 관리를 할 수 있다면 버튼으로 체크박스 해제하는 방법쯤은 껌입니다. 우선 체크된 요소들을 버튼으로 출력해 보겠습니다. 버튼 요소 하나는 Selected.jsx로 만들고, 출력은 CheckboxList에서 같이 해 보겠습니다. 1. 체크된 요소 버튼으로 출력하기 {Object.keys(cateObject).map((key, index) => { return ( ); })} CheckboxList.jsx의 return 문에 이런 코드를 추가해 줍니다. value에는 텍스트를 전달해 주고, checked에는 true/false 속성을 전달해 줍니다. 그리고 모든 속..

  Read More
• 원티드 프리온보딩 프론트엔드 코스 1주차 회고 (3)

  ETC 2022. 2. 20. 19:40

  이따만큼 밀린 회고를 열심히 적어 보자! 라디오 버튼으로 기한 설정 활성화 카테고리 선택 필터 태그 이미지 첨부 옵션 세트 기능 상품 정보 고시 기능 딱 보기에도 구현해야 할 기능이 이~ 만큼 많이 있다. 여기서 내가 맡은 부분은 카테고리 선택, 필터 태그, 이미지 첨부 기능이다. 1. 카테고리 선택 카테고리 선택 부분은 블로그 포스팅으로도 올렸지만, 카테고리를 선택하고 버튼으로 카테고리를 해제하는 부분에서 어떻게 구현하면 좋을지 많이 고민했다. 지금 생각해 보니 관건은 체크 박스의 checked 속성이었는데, 이 과제에서는 체크 박스의 value와 checked 상태를 묶어 객체로 관리하는 방식을 선택했다. 이 과제에 앞서 팀원들끼리 Context API를 공부하고 과제에 돌입했는데, 상태 관리 툴을 ..

  Read More
• [React] Checkbox (1) — Context API로 Checkbox 상태 관리하기

  TECH 2022. 2. 19. 20:00

  프로젝트를 하면서 카테고리를 체크박스로 선택하고 버튼으로 해제하는 기능을 구현해야 했는데 버튼으로 체크박스를 해제하는 방식에서 고민을 많이 해, 포스팅으로 남겨 두려고 합니다. 임의의 배열 데이터로 체크박스를 만들고 Context API로 상태 관리하기 아래와 같은 데이터로 체크박스를 만들었습니다~ 더보기 // utils/sampleData.js export const data = [ "가을", "가람", "기쁨", "구름", "나리", "너울", "누리", "노을", "눈꽃", "다솜", "마음", "마루", "미르", "무늬", "맑음", "믿음", "뭇별", "바다", "방울", "보름", "봄꽃", "별빛", "별밤", "별숲", "사랑", "솔잎", "새벽", "새싹", "샛별", "아침", "..

  Read More