김예지님의 블로그

[인프런 워밍업 스터디 클럽 2기 FE] 오프라인 수료식 후기

오프라인 수료식 후기 퇴근하고 판교까지 늦지 않게 갈 수 있을까 걱정했는데 다행히 여유 있게 도착해서 이름표를 받았다. 안으로 들어가니 이미 많은 분들이 일찍 도착해 계셨다. 코치님이랑 다른 러너분들이랑 자기소개도 하고 피자 먹으면서 자유 네트워킹 시간을 가졌다. 발자국을 남길 때 봤던 분들을 직접 만나게 되어서 좋았다. 다들 좋으신 분들이라 오프라인 수료...

• 워밍업클럽

[인프런 워밍업 스터디 클럽 2기 FE] 3주차 과제 - 쇼핑몰 앱 만들기

리덕스를 이용한 쇼핑몰 앱 만들기 github : 12-shopping-mall 기능목록 json 데이터로 상품 리스트 출력 카테고리 별 상품 출력하기 상품 디테일 페이지 장바구니 기능 구현하기 📁public ├── products.json 📁src ├── App.tsx ├── index.tsx ├── 📁app │ └── store.ts ├── 📁c...

• 워밍업클럽

[인프런 워밍업 스터디 클럽 2기 FE] 3주차 과제 - 퀴즈 앱 만들기

퀴즈앱 만들기 github : 11-quiz 기능목록 퀴즈 풀었을 때 → 정답버튼 띄우기 → 답 확인 기능 플로우 /question 에서 문제 2개 랜덤 출력 /state 에서 선택된 카테고리의 문제 랜덤 출력 /quiz 에서 선택 카테고리 문제 출력 & 진행률 & 결과 보여주기 구현하기 폴더구조 📁public ├── 📁data │ └── questio...

• 워밍업클럽

[인프런 워밍업 스터디 클럽 2기 FE] 3주차 과제 - 포켓몬 도감 앱 만들기

포켓몬 도감 앱 github : 10-pokeapi 기능목록 PokéAPI를 사용하여 포켓몬 목록과 세부 정보를 요청하고 화면에 표시 더보기 버튼 눌렀을 때 추가 데이터 요청 포켓몬 고유 ID(숫자)를 사용하여 이전/다음 페이지 구현 포켓몬의 타입에 따른 데미지 상성 관계를 모달 창으로 제공 구현하기 띠부띠부씰 느낌으로 css를 넣어봤다. 폴더구조 📁sr...

• 워밍업클럽

[인프런 워밍업 스터디 클럽 2기 FE] 3주차 발자국

따라하며 배우는 리액트 A-Z 마무리 섹션 7~8 TDD 리액트 테스트 경험하기 테스트 코드를 작성하면 좋은 점 : 많은 기능을 테스트 하기에 소스 코드에 안정감이 부여된다. 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이라 TDD를 사용하면 디버깅 시간이 줄어든다. 코드를 더욱 신중하게 짤 수 있다. React Testing Library : ...

• 워밍업클럽

[인프런 워밍업 스터디 클럽 2기 FE] 2주차 과제 - 디즈니 플러스 앱

로그인 전 화면 디즈니 플러스 앱 GitHub : 09-disneyplu GIF 파일 목록이 너무 커서 글에 올라가지 않아 md 파일에 동작하는 GIF를 추가해 두었다. 기능 목록 TMDb API 데이터 받아오기 검색 후 해당 아이템 클릭 시 영화 포스터 보여주기 영화 클릭 시 모달 오픈 슬라이드 구글 로그인 구현하기 TMDb API 데이터 api로 데이터...

[인프런 워밍업 스터디 클럽 2기 FE] 2주차 과제 - 예산 계산기

예산 계산기 만들기 GitHub : 08-budget-calculato 기능 목록 분류 / 지출 내역 / 비용 데이터를 받아 리스트 생성하기 추가 / 수정 / 삭제 이벤트 → toasts 메세지 1초 띄우기 총 비용 계산하기 전체 삭제 기능 구현하기 폴더구조 📁src ├── App.js ├── App.css ├── 📁components │ ├── Exp...

• 워밍업클럽

[인프런 워밍업 스터디 클럽 2기 FE] 2주차 과제 - 타이핑 테스트

타이핑 테스트 앱 만들기 GitHub : 07-typing-test 개요 타이핑 테스트 기능 구현 주어진 시간 내에 문장을 타이핑하고 입력 속도(WPM, CPM)와 정확도를 측정 필요한 기능 타이핑된 값 결과 팝업 보여주기 구현하기 초반에 필요하다고 생각되는 부분들을 셋팅한다. typingInput.addEventListener('input', () => ...

• 워밍업클럽

[인프런 워밍업 스터디 클럽 2기 FE] 2주차 발자국

2주차 회고 2주차에 들은 강의들을 짧게 정리해본다. 섹션 8- 10 까지 자바스크립트 강의가 끝났다. 섹션 10이 제일 재밌었던 것 같다. 이론 강의도 좋지만 배운 이론을 이용해서 눈에 보이는 결과물이 생기는 게 제일 재밌는 것 같다. 따라하며 배우는 자바스크립트 A-Z 마무리 Generator 함수 : 비동기 프로그래밍, 메모리의 효율성, 무한 시퀀스 ...

• 워밍업클럽

[인프런 워밍업 스터디 클럽 2기 FE] 2주차 과제 - 비밀번호 생성 앱

비밀번호 생성 앱 만들기 GitHub : 06-password-generation 개요 조건에 따른 비밀번호 생성 기능 구현 Generator, Design Pattern 을 사용해보기 필요한 기능 조건에 따른 비밀번호 생성 생성된 비밀번호 복사 기능 구현하기 //문자 범위 const charSets = { numbers: '0123456789', smal...

• 워밍업클럽