얼음저장소

3주차 다섯번째 과제는 Redux에 대한 짧은 강의와 함께 Redux 를 이용하여 간단한 메신저 페이지를 만드는 과제가 나왔다. 처음 Redux 를 써야했어서 간단하게 강의를 듣고 오긴 했지만 아직 모르는게 많은 느낌이라 프로젝트에 잘 적용시킬 수 있을지 조금 걱정이였다. 구현해야하는 기능 🖼 레이아웃 대화목록은 상단에, 입력창은 하단에 위치 대화목록 스크롤 기능 입력창 왼쪽에는 입력란, 오른쪽에는 보내기 버튼 메세지 프로필 이미지는 원형으로 왼쪽에 위치 오른쪽 컨텐츠 영역 상단에는 이름, 보낸 날짜, 하단에는 메세지 출력 메세지 오른쪽 하단에 삭제, 답장 버튼 🔥 기능 입력창 엔터키로 전송 가능 / 입력시 전송버튼 활성화 컨텐츠를 입력하지 않으면 전송할 수 없는 기능 입력란은 멀티라인 / 출력도 그대로..

이번 수업에는 Core JavaScript 강의를 간단하게 듣게 되었다. 동기,비동기와 콜백함수 그리고 Promise 와 이벤트 루프 등 개념적으로는 이해해도 머리속에서 정리가 아직 안된것들이였는데 이번 기회에 정리를 할 수 있어서 아주 좋은 도움이 되었다 (멘토님 짱!!) 🥳 과제 시작! 이번과제는 평소의 과제와는 느낌이 사뭇 다른 과제였다. 두개 중에 선택을 할 수 있었는데, 우리팀이 선택한 과제는 물류처리를 위한 많은 데이터를 어떻게 효과적으로 화면에 보여줄 수 있는가 였다. 기존의 과제들은 이미 어떻게 보여질지가 다 정해져서 나왔더라면 이번 과제는 그 이전의 어떻게 화면에 뿌려줘야 하는가에 대한 고민이 많이 필요해보였다. 테이블의 칼럼은 30개가 넘었고 로우 역시도 길게 나온다면 몇십개가 될 수 ..

다섯번째 수업을 진행하였다. 이번 수업은 과제에 적용해야하는 Next.js 를 비롯하여 SPA, SSR/CSR 그리고 SEO 에 대한 수업을 듣게 되었다. Next.js 는 듣기만 들어보고 실제로는 써본적이 없었기 때문에 단순히 라이브러리처럼 설치하여 사용하면 되는건가? 라는 생각을 했었는데, 실제로 사용해보니 그냥 CRA 를 사용하는 것과 많은 부분이 달랐다. 이번 과제는 두개의 기업 과제 중에 선택해야 했는데 우리 팀은 그 중에 많이 적용해보지 못했던 스크롤 애니메이션이 많이 들어간 과제를 선택하게 되었다. 게다가 이번 과제에서는 E2E Test 를 구현해야한다는 조건이 있었다. 써보지 못한 프레임워크(Next.js)에다가 써보지 못한 E2E 테스트 툴(Cypress)을 3일 안에 적용해야했기에 현실..

🥺 프로젝트 시작! 네 번째 프로젝트를 진행하였습니다. 이번 프로젝트는 처음으로 TypeScript 를 사용하고 또한 figma 에 작성된 디자인과 가이드에 따라 구현해야 하는 과제였습니다. 또한 json-server 를 이용하여 mock 데이터로 화면에 보이도록 설정해주는 부분도 필요했습니다. 내 거친 TS 지식과 불안한 눈빛과 함께 첫 타입스크립트 기반 프로젝트를 시작하였습니다. 필터나 토글을 선택하여 조건에 맞는 견적 요청 카드를 보여주는 페이지를 구현하는 것이 목적인 과제입니다. 크게 파트를 나누자면 필터 섹션, 카드 섹션, 네비게이션 섹션 (그 외 배포 설정 등..)으로 나눌 수 있었습니다. 이번 과제부터 팀원분의 사정으로인해 저희 팀이 3명(ㅠㅠ)이 되어버렸는데 다행히도 파트가 크게 세 개로 ..

설 주가 지나고 세번째 주가 되었습니다. 이번 주에 TypeScript 로 프로젝트를 진행해야 했기 때문에 지난주에 TypeScript 를 이용하여 간단한 todolist 를 만들어보았습니다. 하지만 완전히 적응 하기에는 아직 멀은것 같아 TypeScript 로 바로 프로젝트를 진행하기 어렵지 않을까 했습니다. 하지만 이번 수업에서 TypeScript의 도움이 될만한 부분을 잘 설명해주셔서 도움이 많이 되었던 것 같습니다. 이번 글에서는 TypeScript 의 기본 개념과 특징에 대해 작성하고, 프로젝트 후기는 2편에 작성하도록 하겠습니다. 👉 TypeScript 를 시작하기 전에 관련 면접 질문 생각해보기 - TypeScript 특징은? - TypeScript 도입의 장점/단점은? - 스크립트 언어와 ..

첫째주가 순식간에 지나갔습니다. 비교적 간단했던 첫번째 과제에 비해 두번째 과제가 공개되고 저는 너무 많은 양과 난이도에 크게 당황했었습니다. 목요일에 나오는 과제가 제출 기한이 왜 토요일 오후 5시까지인지 깨닫게 되는 과제 였습니다. 과제는 admin 페이지에서 상품을 등록하는 페이지를 구현하는 것이였습니다. 구현해야하는 기능 - 캘린더를 이용한 기간설정 - 체크박스를 이용한 카테고리 설정 - 태그 검색 기능 - 이미지 첨부 기능 - 상품 옵션 추가 ( + 기본옵션 추가 + 추가옵션 추가 ... ) - 상태 전역 관리 - 유효성 검사 아주 간단하게만 정리했을 때 이러한 기능들을 구현해야 했습니다. (자세히 적으면 너무 많은 구현목록들...) 이 중에서 제가 맡은 파트는 카테고리, 태그 검색, 유효성 검..

👉 원티드 프리온보딩 프론트엔드 코스 과정 시작! 원티드 프리온보딩 프론트엔드 코스 과정 중 첫 과제가 진행되었습니다. 4명의 인원으로 구성된 팀에서 2명씩 짝을 이뤄 스타일과 기능이 조금씩 다른 환율 계산기 1, 2를 구현하는 것입니다. 제가 맡았던 계산기는 베이스가 되는 통화는 select 로 고르고 바꿀 통화는 tab을 만들어 클릭하면 해당 통화로 환율이 계산되어 나오는 계산기였습니다. 👉 구현해야 하는 부분 - 숫자가 1000 이상 입력되었을 때에는 "1,000"으로 입력값을 바꿉니다. - 결과값은 세 자리마다 콤마(,)가 찍혀야 하고 소수점은 2자리까지 보여줍니다. (1,000 이라도 1,000.00 으로 표기) - select 에서 통화를 선택하면 해당 통화는 아래 탭 목록에서 사라지고 탭 목..