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

1. 강의 관련지난주에 다 들음2. 미션 관련 각 프로젝트별 상세는 각 게시물에서 확인바람.미션 3 포켓몬 도감 앱Github :https://github.com/KimPra2989/inflearn-warming-up-missions/tree/main/React/%EB%AF%B8%EC%85%98%203%20%ED%8F%AC%EC%BC%93%EB%AA%AC%20%EB%8F%84%EA%B0%90%20%EC%95%B1 인게임 느낌의 포켓몬 도감으로 디자인수정함방향키로 위아래 가능밑에서 15마리 정도 될 때 추가 데이터 페칭 (무한 스크롤)차트로 스텟 상태 나타냄상세페이지의 반짝이 버튼 누르면 사진이 이로치로 바뀜 (영상 안 찍었네;;)데이터 한글화함미션 4 퀴즈 앱Githubhttps://github.com/KimPra2989/inflearn-warming-up-missions/tree/main/React/%EB%AF%B8%EC%85%98%204%20%ED%80%B4%EC%A6%88%20%EC%95%B1JS 3미션 퀴즈 앱을 리액트로 마이그래이션했다. 견본 영상의 제목이 'Next로 만드는 퀴즈앱'이어서 next로 만들어야하나 고민을 했지만 next의 이점인, ssr이나, SEO, 이미지최적화 등 여러요소들이 굳이 필요하지 않다고 생각해서 react로 진행했다. 대부분 이전에 만든 프로젝트에서 갖고온 공통 컴포넌트와 로직을 재활용한 파트여서 그다지 어려운 점은 없었다. 회고저번주에 강의도 다 들었겠다 프로젝트에 몰입할 수 있다는 생각과 함께 자신감 넘치는 막주가 시작되....ㄹ 줄 알았으나 금요일에 시작된 그룹 프로젝트에 압도적 주니어로 들어가게 되어 과제를 더 이상할 수가 없었다....과제 3개 채우기용으로 가장 쉬운 퀴즈앱을 고르고, 완성도를 높이려했던 포켓몬 도감도 흐지부지 끝나고야 말았다. 태초의 목표가 다양한 프로젝트에 도전하는 것이었는데 그 부분은 어느정도 해결이 된 것 같아서 성취감이 없지는 않다. 다만, 깊이 있게 뭘 만들어보질 못했던 것이 후회로 남는다. 아쉽지만 프로젝트 때문에 이 정도만 쓰고 간다.ps. 디스코드 보니 중간 부터 과제결과물이 안 올라오는 것 같던데 사실 다 탈주하고 몇명만 남아있는 개꿀잼 몰카인가?... 재미없으니 다들 돌아왔으면 좋겠다.

[인프런 워밍업 스터디 클럽 1기_FE] 리액트 4번 미션

과제 git Hub링크 readMe에 더 자세히 적어둠 스펙React, Vite, ts Emotion JS 3미션 퀴즈 앱을 리액트로 마이그래이션했다. 견본 영상의 제목이 'Next로 만드는 퀴즈앱'이어서 next로 만들어야하나 고민을 했지만 next의 이점인, ssr이나, SEO, 이미지최적화 등 여러요소들이 굳이 필요하지 않다고 생각해서 react로 진행했다. 대부분 이전에 만든 프로젝트에서 갖고온 공통 컴포넌트와 로직을 재활용한 파트여서 그다지 어려운 점은 없었다. 구현 내용 JS 미션에서 퀴즈 카테고리를 고룰 수 있는 Select Box를 우측 상단에 배치했다. 이 select요소에서 옵션을 받고 퀴즈를 고룰 수 있다. 퀴즈를 고룰 시 카테고리에 맞는 퀴즈가 1번부터 다시 차례로 진행된다.

[인프런 워밍업 스터디 클럽 1기_FE] 리액트 3번 미션

과제 git Hub링크 readMe에 더 자세히 적어둠 인게임 느낌의 포켓몬 도감으로 디자인 수정함방향키로 위아래 가능밑에서 15마리 정도 될 때 추가 데이터 페칭 (무한 스크롤)차트로 스텟 상태 나타냄상세페이지의 반짝이 버튼 누르면 사진이 이로치로 바뀜 (영상 안 찍었네;;)데이터 한글화함 스펙React, Vite, tsReact-queryEmotionRecharts 설명인게임 포켓몬 도감을 모티브로 구현을 해봤습니다. 프로젝트 주목표API를 분석하여 자원을 효율적으로 분배react-query의 useInfiniteQuery를 활용한 무한 스크롤 구현rechart 차트라이브러리를 활용한 데이터 시각화Emotion을 활용해 공통 컴포넌트를 스타일드 컴포넌트로 구현하여 활용성을 높임forwardRef를 활용해 부모요소에서 자식 요소의 스크롤 이벤트를 관리 프로젝트 목표 상세API를 분석하여 자원을 효율적으로 분배이번 미션에서 가장 오랜 시간 고민한 부분이 이 부분이다. 대부분 참가자는 무지성으로 pokeAPI에 /pokemon/id로 fetch를 보내서 이름을 받아오고, 반복문을 돌려 species에서 사진을 받아와서 메인페이지를 랜더링한 걸로 알고 있다. 결론부터 말해, 이 방식은 굉장히 비효율적이다. /pokemon/id는 건당 대략 13,000 줄의 응답이 오며, species 역시 1,300 줄 정도의 응답이 온다. 따라서, 이름이나 사진 하나 받기 위해 요청을 보내는 건 효율적이지 않다. api를 분석해본 결과 /pokemon 경로에 요청을 보내 이름만 받아오는 경우가 가장 효율적인 것을 알아냈다. 이는 20 마리의 포켓몬 이름에 대해 140 줄 정도의 간결한 응답이 오므로 위의 두 요청에 비해 굉장히 효율적이다. 또, 사진이나 포켓몬의 데이터를 찾아보면 꽤나 다양한 사이트들이 나오며, 데이터에 규칙성이 있어 외부 사이트에서 사진이나 데이터를 갖고 오는 것도 충분히 가능하다. react-query의 useInfiniteQuery를 활용한 무한 스크롤 구현useInfiniteQuery를 통해 구현했다. 페이지 당 포켓몬이 10마리 정도 등장하는 걸 감안하여 하단에서부터 15 마리 정도 위에서 추가 쿼리를 날리도록 제작했다. 쿼리의 트리거가 선택된 포켓몬이므로 스크롤을 직접 조작하는 경우에는 작동하지 않는다. (추후 수정)useEffect(() => { const handleFetchNextPage = () => { if (!pokemonList) return const idx = pokemonList.indexOf(selected) if (idx > pokemonList.length - 15) { fetchNextPage() } } //useInfiniteQuery handleFetchNextPage() }, [fetchNextPage, pokemonList, selected])rechart 차트라이브러리를 활용한 데이터 시각화 stat 데이터를 받아와서 가공한 뒤 rechart의 Radar를 활용하여 데이터를 시각화했다function StatChart({ stat, color }: StatChartProps) { const data = dataRefine(stat) return ( ) }Emotion을 활용해 공통 컴포넌트를 스타일드 컴포넌트로 구현하여 활용성을 높임이전 JS 파트와 react 미션 1에서 만든 기본 컴포넌트들을 emotion으르 수정했다. 5. forwardRef를 활용해 부모요소에서 자식 요소의 스크롤 이벤트를 관리 선택된 포켓몬을 상위 컴포넌트에서 관리하는 구조인데, 스크롤이 내려감과 동시에

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

1. 강의 관련Class Component태어날 때부터 스마트폰이 있던 알파세대처럼, 프론트 입문하던 시기부터 react 훅이 있던 나는 class 컴포넌트에 대해 배우지 않았었다. 실제로 쓸 일도 없어서 크게 불편함은 없었다. 다만, 기술의 변천사를 이해하는 것은 현직자로서 중요한 덕목 중 하나라고 생각하기에 이번 기회에 공부를 했다. 구조나 돌아가는 원리는 이해할 수 있었지만, HOC등 좀 복잡한 개념들은 아직 자세히 이해를 못했다. 다시 복습해봐야한다.Next 12다음주부터 일정이 바빠서 강의를 땅겨 들었다. next의 경우도 마찬가지로 나는 처음 배울 떄부터 next 13버전 app router로 학습을 했기에 getStaticProps 같은 예전 방식을 몰랐는데 이번 기회에 알 수 있게 됐다.TDD워밍업 클럽을 듣기 전에 Jest, Cypress, StoryBook 등을 다루는 테스트 관련 강의(링크)를 들어서 test 방법을 알고 있었다. 다만, TDD 방법론으로 개발을 진행해 나가는 방법은 강의를 통해 배웠다. 실제로 개발을 진행해보니 링크 강의에서 들은 것 처럼 프론트엔드는 단위 테스트보다 e2e 테스트가 더 적합한 것 같다고 느꼇고, 처음부터 TDD로 진행하기 보단 기능 완성후에 e2e테스트를 진행하는 것이 바람직하지 않을까 싶다.Docker여기저기서 들어서 대충 뭔지만 알고 있었고, 워밍업 클럽 시작 전 가장 궁금했던 파트라 TDD와 같이 들었던 파트였다. 강의에서 진행하는 방식을 따라가다보니 docker 앱에 튜토리얼 항목이 있어서 따라가다보니 개념을 더 자세히 알 수 있었다. 아직 docker file을 작성하고 그런 것까진 못하지만 개념은 이해할 수 있게 됐다. 회고상술한 내용들을 제하면 대부분 알고 있던 내용이니 만큼 강의를 빠르게 넘기면서 복습했다. 다음주는 미션에 전념하여 역량을 키워나갈 수 있으면 좋겠다. 2. 미션 관련지난주 발자국을 월요일에 제출하는 바람에 이번 주가 짧게 느껴진다. 리액트 미션은 JS 미션과는 달리 패키지 메니져를 통해 라이브러리도 갖다 쓰면서 프로젝트가 커졌다. vite 템플릿을 통해 개발을 시작해서 초기 개발환경 세팅은 비교적 수훨하지만, 디렉토리 구조도 생각해야하고 컴포넌트별 역할도 나눠야해서 프론트엔드 개발자로서의 사고를 많이 한 한 주였다. 리액트 미션은 미션들이 기능면에선 크게 차이가 나지 않아서 모두 기능만 빠르게 구현하는 것보단 하고 싶은 걸 골라서 디테일에 신경을 쓰는 편이 좋을 것 같다고 생각이 들었다. 이 때문에 성과는 별로 없어 보이는 게 단점이지만, 성장은 할 수 있었다고 믿는다. 각 프로젝트별 상세는 각 게시물에서 확인바람. 미션 1 예산 관리 앱Github :https://github.com/KimPra2989/inflearn-warming-up-missions/tree/main/React/%EB%AF%B8%EC%85%98%201%20%EC%98%88%EC%82%B0%20%EA%B3%84%EC%82%B0%EA%B8%B0%20%EC%95%B1예산 계산기 미션이지만 기능면에서 똑같은 지출 내역으로 각색CRUD, deleteAll 구현react-toastify로 Toast UI 추가Button, Input 등 공통 컴포넌트 개발결과를 지출 항목 별 subTotal을 구할 수 있는 기능 추가.미션 3 포켓몬 도감 앱 (진행중...)다른 사람들 결과물을 보면 그냥 주어진 대로 생각 없이 개발하는 사람들이 많은 것 같다. 특히 이 프로젝트가 그런 경향성이 짙다고 느낀다. 나는 공장형 개발자를 지양하기에 생각을 해보며 진행하려한다. 회고리액트는 남이 하는 걸 보면 참 쉬운데, 막상 직접하려면 어려운 것 같다. 개념을 하나하나 설명하라면 할 수 있지만 그것들을 조합해서 한 단위의 큰 프로젝트로 만드는 과정이 특히 어렵게 느껴진다. 아마 지식대비 경험이 많이 부족해서 그런 것 같다. 경험을 쌓을 때다.

[인프런 워밍업 스터디 클럽 1기_FE] 리액트 1번 미션

과제 git Hub링크 readMe에 더 자세히 적어둠 예산 계산기 미션이지만 기능면에서 똑같은 지출 내역으로 각색함. 기본 미션에 더해 결과를 지출 항목 별로 subTotal을 구할 수 있는 기능을 추가함. 메인 화면데이터 추가 후시연스펙React, Vite, yarn,lib) React-toastify프로젝트 목표styled-component나 emotion 같은 css-in-JS 기능을 라이브러리 없이 구현. Button, Input 등의 기본 컴포넌트들을 만들고 조합하여 확장 가능한 구조 설계.

[인프런 워밍업 스터디 클럽 1기_FE] 스터디 5조 Deboune and Throttle

Debouncing and Throttling들어가며웹 애플리케이션을 개발할 때, 이벤트을 처리하는 것은 중요한 과제 중 하나입니다. 특히, 사용자의 이벤트에 반응하여 적절한 작업을 수행하는 것은 좋은 사용자 경험을 제공하기 위해 필수적입니다. 이때 debounce와 throttle은 이벤트 효율적으로 핸들링하는 데에 큰 도움이 됩니다. 또한, 이벤트 횟수를 조절하는 것으로 서버 자원을 아낄 수도 있습니다. 이번 스터디에서는 debounce와 throttle의 개념과 활용 방법에 대해 알아보겠습니다.DebounceDebounce는 반복적으로 발생하는 이벤트를 일정 시간 동안 딜레이시켜 마지막 이벤트만을 처리하는 방식입니다. 자동문을 생각하면 이해하기 쉽습니다. 사람이 지나가면 일정 시간 동안 열려있다가, 일정 시간 동안 사람이 지나지 않으면 문이 닫히죠? 이러한 특징을 살려 주로 검색이나 자동완성 기능을 구현할 때 사용됩니다. 사용자가 타이핑하는 동안 실시간으로 검색을 실행하는 것이 아니라, 사용자가 일정 시간 동안 입력을 멈출 때에만 검색을 실행하여 서버 부하를 줄일 수 있습니다. 특히 한글은 조합언어의 특성이 있어 입력에 경우 input 이벤트가 영어에 비해 더 잦은 빈도로 발생하므로 이에 대한 처리를 해주는 것이 좋습니다.구현//debounce let timer; function debounce(fn, delay) { //timer가 있다면 제거 if (timer) { clearTimeout(timer); } //개로운 타이머 생성 timer = setTimeout(() => { fn(); }, delay); }구현은 간단합니다. 단순히 호출 될 때마다 setTimeout을 갱신해주면 됩니다. 참고로, _(lodash)에서는 painting 성능을 위해 requestAnimationFrame()을 이용해 구현하고 있습니다. ThrottleThrottle은 일정 시간 동안 한 번의 이벤트만 처리하는 방식입니다. scroll이나 resize 같은 빈번한 이벤트의 처리를 제한하여 성능을 향상시키는 데 사용됩니다. 스크롤 이벤트의 경우, 사용자가 스크롤할 때마다 이벤트가 발생하지만, throttle을 적용하면 일정 주기마다 한 번씩만 이벤트를 처리하여 부하를 줄일 수 있습니다.구현//throttle let throttled = true; function throttle(fn, delay) { if (throttled) { throttled = false; setTimeout(() => { fn(); throttled = true; }, delay); } }첫 함수만 통과후 throttled 값을 false로 만들고, delay 후에 다시 함수가 호출 될 수 있도록 설계했습니다. 결론debounce와 throttle은 이벤트를 효율적으로 핸들링 하는데 유용한 방법입니다. 이러한 기술을 활용하여 웹 애플리케이션의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다. 이번 스터디를 통해 debounce와 throttle의 개념과 활용 방법에 대해 잘 이해하고, 실제 프로젝트에 적용하여 보다 나은 웹 애플리케이션을 만들어 보시기를 바랍니다.이미지 출처 : https://medium.com/fantageek/throttle-vs-debounce-in-rxswift-86f8b303d5d4

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

1. 강의 관련새로 배운 내용console 객체 console.log 외에 .table, .error, .warn, .time, .clear 등 다양한 메소드가 있다. 변수 선언 let const는 호이스팅 되도 초기화가 일어나지 않아서 TDZ에서 호출시 undefined가 아닌 에러가 뜸객체 타입 콜 스텍에 값이 그대로 저장되는 원시타입과 달리, 객체 타입은 주소만 저장 실제 값은 메모리 힙에 저장이 된다 forEach for 문에서 루프제어를 위한 break, continue를 사용할 수가 없기에 return 등의 꼼수를 써야한다. 웬만하면 배열의 모든 요소를 순회해야할 때만 쓰는 게 좋은 듯 window 객체 원래 스크롤 관련 메소드들만 알고 있었는데, location, history, cliboard 등의 유용한 메소드들이 있다. innerHTML textContent, innerText html 내부 값을 바꿀 때 무지성으로 innerHTML만 써왔는데 비용이 높다고 한다. 내부 텍스트만 수정이 되는 경우에는 text 관련 메소드를 사용하는 것이 좋다.iterator와 generator다시 공부해야함. 뭔소린지 모르겠음회고다행이 미리 알고 있던 내용이 대부분이고, 강의도 미리 들어둬서 진도에는 맞출 수 있었지만 리액트 파트는 진도를 어떻게 따라가야할지 조금 막막하다 지식은 가장 자신만만할 때가 갓 기본을 뗐을 때인 것 같다. 기본 강의 완강하고 뭐든 만들 수 있을 것 같던 때에서 3배는 더 많은 지식을 습득했지만 여전히 JS는 자신이 없다. 리액트 파트 시작 전에 조금 더 심도있게 학습을 해야할 것 같다. 2. 미션 관련Click! 미션 GitHub 주소각 프로젝트별 상세는 각 프로젝트 readme 파일에 서술해 뒀으니 간단하게 언급하고 넘어가려한다. 미션 1 음식 메뉴앱로직 플로우메뉴 항목들이 속한 ul에 click eventListener를 부착하여 개개의 li가 아닌 ul에서 이벤트를 처리한다.클릭된 요소의 name 속성(카테고리 정보)와 data.js에서 갖고온 데이터를 renderMenu 함수에 전달한다.renderMenu함수는 data에서 선택된 메뉴에 해당하는 데이터를 선별 후 화면에 그린다. 회고하는 내내 리액트면 금방하는데 라는 생각을 했던 것 같다. 그래서 리액트 처럼 랜더로직과 데이터를 분리하여 만드는 것을 목표로 했다. 미션 2 가위바위보로직 플로우 시작하기를 누르면 게임화면으로 넘어간다. 컴퓨터는 가위 바위 보 중 랜덤으로 낸다. 가위 바위 보 중 뭐든 냈을 경우에 승패에 따라 스코어를 갱신하고 결과를 보여준다. 한 세트가 끝나면 종합 스코어를 표시하고, 다시하기 버튼으로 다시할 수 있도록 한다. 회고 만들면서 시행착오를 가장 많이 한 프로젝트이다. setTimeout과 setInterval을 원없이 써봤다. 기본 구현 사항이 너무 시시하고 디자인도 좀 아쉬워서, 두 부분을 좀 더 확장해봤다. 미션을 보고 짱꼔뽀가 생각나서 디자인은 거기서 레퍼런스를 얻어 만들었고, 로직은 '안내면 진거'를 추가 했다. 로직 자체는 간단한데 interval을 어디서 clear할지를 고민해야했다. 우측의 카운트 다운과 가운데 컴퓨터 픽이 바뀌는 두 부분이 서로 다른 interval로 돌아가기 떄문이다. 이 때문에 두 interval을 동시에 관리할 수 있는 패턴을 고안하여 설계했다.안 내면 진거 가위바위보 미션 3 퀴즈 앱로직 플로우 문제 데이터를 html에 바인딩고룬 선택지에 따라 화면을 분기정답인 경우오답인 경우 다음 버튼을 눌러 다음 문제로 ( 갖고올 데이터 위치++)회고 미션 영상을 여러번 돌려봤지만 도무지 뭘 만들어야하는 건지 알 수 없었다. 최소 구현 스펙을 서술해주면 좋겠다. 그래서 로직 자체보단 데이터처리나 디자인 처리에 주안점을 두고 미션을 수행했다. 퀴즈 데이터는 chatGPT에게 프론트엔드 퀴즈 10개를 내달라고 부탁해서 데이터를 갖고 왔다. 그러자 문제 데이터를 txt로 주길래 연습할 겸 fs로 데이터를 갖고와서 데이터를 파싱하는 함수를 작성했다(data.js),함수를 작성하던 중 문득 'json형식으로 퀴즈 데이터 만들어줘' 라고 질문하면 되지 않을까 싶어서 해보니 정말 됐다....그러나 연습이니 변수명만 참고하고 직접 해보았다. 또, 알기만 하고 써보진 않았던 ::after 선택자를 활용해서 정오답 처리(o, x)를 진행했다.번외로 가장 디테일을 많이 챙긴 미션이다.배경색은 안과의사가 추천하는 눈이 피로하지 않은 색이다. 퀴즈 푸는 데 머리만 아파야지 눈이 아프면 안 되지, 안 그런가?문제 부분의 텍스트는 수능에서 쓰는 중명조체이고 css font-face를 통해 갖고 왔다.정답 표시 파트에서 선택지에 hover시 노란색으로 변하는 css는 정오답 선택지에 대해서는 무시된다. (정오답 선택지에 !import 붙임) 미션 4 리스트 앱 리액트 기본예제에서 지겹도록 해본 todo앱이다. MVC 패턴을 사용해보려 노력했다. 또 no-CSS 프로젝트로 html만을 이용해서 페이지를 구성했다. 로직 플로우 리스트 추가 및 삭제데이터 수정 (MODEL)데이터 추가 : bookData 배열에 데이터를 추가한다.데이터 삭제 : bookData 배열에서 데이터를 삭제한다.랜더링 (CONTROL) : 수정된 데이터를 받아와서 template(VIEW)에 데이터를 바인딩하여 랜더링알림 : 데이터 수정 후 성공 알림을 띄움 (dialog //화면 중간에 팝업창 뜸)회고 유저 플로우를 생각하여 입력 편의 개선에 신경을 썼다. 별 건 아니지만 꽤 편하다.페이지 최초 진입시 제목 input에 autofocus되도록 속성을 추가함책을 등록 후 제목 input을 비우고, 제목 input에 focus가 되도록 함 생각보다 다양한 HTML 테그가 있다는 것을 알게된 프로젝트이다. dialog, fieldset, legend, table 등 평소 잘 안 써본 테그들을 적극 기용하여 마크업에 힘을 썼다. 특히 dialog 테그를 조작하는 과정에서 js로 html 속성을 다루는 방법을 심도 있게 학습할 수 있던 것 같다. 미션 5 GitHub Finder 앱fetch를 통해 github api를 활용해보는 것이 목표인 프로젝트이다. Next.js에서 지겹게 해본 부분이라 쉽게 해결할 수 있었다. 로직 플로우 검색창 input에 input 이벤트리스너를 부착하여 검색어를 받는다.input의 값이 바뀔 때마다 fetch 함수를 통해 데이터를 불러온다.가져온 데이터를 바인딩한다. (단, 데이터가 없는 경우 (response.message == 'Not Found') 에는 유저 데이터를 표시하지 않는다.). 회고 github OAuth 인증하고 토근을 같이 보내지 않으면 시간당 20건의 요청만 거부되지 않고 할 수 있다. 이 부분을 찾아보고 해결해도 잘 되지 않았다.. mock 데이터를 활용할까 했지만 데이터를 만드는 것이 더 시간이 걸릴 것 같아서 요청을 최소화하면서 날마다 조금씩 작업을 했다. 다행이 어렵진 않아서 금방 끝났지만 다음에는 캐싱을 하든 뭘 하든 해결책을 강구해야할 것 같다. 미션 6 비밀번호 생성 앱로직 플로우 선택된 옵션 항목에 따라 문자풀을 생성한다.생성할 비밀번호 길이와 문자풀을 통해 랜덤 비밀번호를 생생한다.생성된 비밀번호를 결과창에 표시한다. 회고 chatGPT에게 html, css를 맡겼는데 checkbox input과 label을 이용하여 꽤나 세련된 옵션창을 만들어줘서 놀랐다. 물론 fieldset과 legend는 직접 수정했다. 난이도가 제일 쉽고 코드도 가장 짧은 프로젝트였다. 영문 대소문자를 베이스로 하고, 특수문자는 홈페이지마다 비밀번호 양식이 다르니 유저에게 입력 받는 방식으로 만드는 게 더 좋지 않았을까 싶다. 문자풀을 생성하는 과정에서 fromCharCode라는 String의 메소드를 찾았는데 직접 [a,b,c...] 하지 않아도 되서 편했다.let pool = []; //영문 대문자를 풀에 추가 if (qs("#include-uppercase").checked) { const uppers = Array.from({ length: 26 }, (_, idx) => String.fromCharCode(idx + 65) ); pool = pool.concat(uppers); ... } 프로젝트 관련 회고기능 구현은 다 되지만 이게 잘 짜여진 코드인지 아닌지를 스스로 판단할 힘이 다소 부족한 것 같다. 다른 사람들 코드를 참고하면서 좋은 부분을 흡수할 수 있도록 해야겠다. 그리고 미션 7. 타이핑 테스트는 가장 재밌는 미션인데 시간이 너무 부족해서 무사히 마무리할 수 있을지 모르겠다.

발자국 작성 가이드 요약

필수 사항강의 수강 관련일주일 동안 학습했던 내용의요약간단한 회고ex) 스스로 칭찬하고 싶은 점, 아쉬웠던 점, 보완하고 싶은 점 미션 관련해결 과정 요약ex) 해결 방식, 해결 과정, 그 방식을 선택한 사유간단한 회고 형식과 분량 상관 없음 원문) https://doc.clickup.com/3686375/p/h/3gfz7-821496/a0e665c0c3d2cd2