인프런 워밍업 클럽 스터디 0기 FE 후기

후기시작 동기대학교 졸업 후 오랜 고민 끝에 취업 직무를 FE개발로 정하고 독학을 하다가, 재미있는 것을 만드는 팀 프로젝트에 어서 참여하고 싶다는 생각을 했다. 팀 프로젝트에 참여하려면 어느정도의 실력이 있어야 하는지 알지 못해 무작정 공부만 하다 보니, 속도도 느리고 비효율적임을 느꼈다. 그리고 하고 있는게 맞는 것인지 감도 못잡고 있었다. 그렇기에 프로젝트에 참여하기 전, 제대로 커리큘럼을 갖춰 누군가 이끌어주며 사람들과 함께할 수 있는 스터디를 찾아야겠다고 생각해 여러 코딩 강의 사이트 커뮤니티를 보던 중 본 인프런 워밍업 클럽 스터디 0기 모집 공고를 보게 되었다. 3주라는 짧은 시간에 필요한 정보를 배우고 비슷한 분야의 목표를 가진 사람들과 함께 달릴 수 있다는 것은 마음이 급한 나에게는 더없이 매력적인 부분이었다. 따라서 망설임 없이 참여하게 되었다. 이것은 나의 프론트엔드 분야에서의 첫 활동이고 도전이었다. 그렇기에 최선을 다하고 싶었다.3주 돌아보기1주: OT를 하고, JavaScript의 전반적인 내용을 다루었다. 강의를 전투적으로 듣고 미션 과제를 해나갔다.2주: JavaScript를 마무리하고 중간점검 Q&A를 한 뒤 리액트의 내용으로 들어갔다. 아직 제대로 이해되지 않은 부분들이 있다는 것을 인지하고 그 부분들을 공부해나갔다.3주: 리액트를 마무리하였다. 앞의 JavaScript부분에 시간을 할당하느라 더 어려운 리액트부분을 비교적 쫓기듯이 공부한 것 같아 스스로 반성했다. 공부하며 느낀 것은 Next.js같은 프레임워크가 있어서 상당히 간편하다는 점이었다.스터디 완주조건은 행사참여(OT, 중간점검), 발자국 1주에 1개(총3개이상), 자바스크립트 과제 7개중 3개, 리액트 과제 7개중 4개였다. 나는 자바스크립트 과제는 첫 주에 대부분 하였지만 리액트 과제 조건 달성을 실패할 뻔 했다. 명확하게 이해가 되지 않은 부분들도 있었으며 노트북까지 잘 따라와주지 않는 등(굉장한 렉이 걸렸다.)의 고통을 맛보았다. 하지만 다행히 과제 제출 기한을 늘려주셔서 숨이 트였고, 비록 처음의 목표였던 '모든 과제를 다 하기'는 실패하였으나 적어도 완주만은 성공하자는 의지로 조건을 달성하였다. 아쉬움이 남지만, 이번 경험을 토대로 하나로 질질 끌지 말고 해야 할 일 먼저 하는 습관을 들이기로 했다.오프라인 수료식오프라인 수료식은 판교역 근처의 건물에서 진행되었다. 처음에 건물을 착각해 아예 반대쪽의 건물을 돌아다니다가 다시 뛰어오느라 조금 지각을 하였지만 다행히 크게 놓친 부분은 없었다. 생각보다 사람들이 정말 많이 있어서 놀랐고 대부분 백엔드 분들이었다. 프론트엔드 분들은 나를 포함해서 4명이었다. 코치님도 함께 계셨는데, 영상으로만 보던 분과 한 테이블에서 식사를 하며 대화를 하는 것이 신기하였고, 테이블의 모든 분들이 반갑게 느껴졌다. 모두 친절하셨고 열심히 하시는 것이 느껴졌다. 대화를 더 나누지 못한 것이 아쉽지만 동종업계이므로 언젠가 또 뵙게 될 수 있지 않을까 생각한다.수료식은 OT, 식사타임(피자를 먹으며 대화), 코치님들의 Q&A, 우수러너 시상, 네트워킹 타임으로 구성되었다. 나는 함께 식사를 한 프론트엔드 몇 분들과 함께 우수러너로 선택되어 상품을 받았다. (오프라인으로 받은 인프런 굿즈. 그밖의 혜택은 인프콘 초대권, 1:1멘토링권 등이 있다) 인프런 굿즈의 구성품은 에코백, 컵, 뱃지, 우산이다. 전부 좋지만 특히나 작고 하찮은 뱃지가 마음에 든다. 누가 봐도 개발을 잘 할 것 같은 외모의 네모 친구다. 우수러너가 되도록 열심히 한 것이 뿌듯했으며, 우수러너로 선정해주시고, 상품 및 혜택을 주신 분들에게 감사함을 느꼈다. 네트워킹 타임에는 프론트엔드 분들 및 백엔드 분들과 여러 이야기를 나누었다. 대부분 프론트엔드 인프런 현직자 분과의 Q&A형식 비슷하게 되었고, 이것저것 질문하여 유익한 시간이 되었다. 판교에 와보고싶었는데 이번 기회에 구경하게 되어 좋았고, 이번 스터디는 꽤나 만족스러운 경험이 되었다.지금까지 열심히 지도해주시고 유익한 시간 보낼 수 있게 해주셔서 감사합니다!

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

회고벌써 마지막 발자국이다.3주를 달려오면서 느낀 것은, 시간 분배를 제대로 해야 한다는 것이다.초반에 자바스크립트에 시간을 쓰느라 리액트 파트를 느긋하게 하지 못하고 빠르게 돌았다.우선은 앞에서 풀리지 않은 문제가 있더라도 제때 진행해야 하는 진도를 끝내놓고 일요일쯤에 다시 돌아오는 편이 나았을 것이라는 생각이 들었다. 스터디가 끝나도 이 점은 기억하여 그날 해야하는 일은 마치고 나서 모르는 점을 보충하는 시간을 주말이나 저녁에 따로 가지는 것이 좋겠다.사실 자바스크립트부터 모두 이해하고 미션도 다 하고 싶었지만, 아무래도 기간 안에 전부 끝내지는 못할 것 같다.특히나 적어도 수료를 하려면 리액트 과제를 4개는 해야 하는데, 아직 1개 완료, 1개 진행중이다.내일까지 과제를 3개 완료할 수 있을지 모르겠다. 그래도 최대한 해볼 생각이다.지금 디즈니 플러스 앱의 github 로그인 버튼 기능을 구현하는것에서 막혀 머리를 싸매고 있다. 깃허브 계정 로그인까지는 되는데 자꾸 페이지 이동이 안된다.기본 개념부터 하나하나 느긋하게 보고 이해하기에는 시간이 부족하다고 느껴 쉽게 설명한 문서가 있는지 찾아다니는데에 시간을 꽤나 쓴 것 같다. 공식 문서부터 다시 보고 내일까지 성공하길 바라고 있다.스터디가 끝나면 강의에서 어려웠던 부분 혹은 시간을 들여 보지 못했던 부분을 다시 해보면서 역량을 쌓아야겠다.강의 요약이번주 강의 범위: 섹션6~7(React TDD), 섹션8(Next.js, TypeScript), 섹션9~10(Redux)React TDDNext.jsTypeScriptRedux React TDD: 테스트 주도 개발(TDD, Test Driven Development): 테스트 코드를 작성한 후 그것을 Pass할 수 있는 실제 코드를 작성하는 개발 방식장점: 소스코드 안정감 부여, 디버깅 및 개발 시간 감소, 클린 코드 가능성 높음 React Testing LibraryReact 컴포넌트를 테스트하는 가벼운 솔루션. 행위 주도 테스트(태그보다는 이벤트 발생 시 화면 변화 등의 테스트)Jest React Testing Library와 함께 React 테스트에 쓰이는 테스팅 프레임워크.test Case를 만들어 확인.단위 테스트를 위함 Jest 파일 구조describe: 여러 관련 테스트를 그룹화하는 블록을 만듦.it: ==test. 개별 테스트를 수행하는 곳.expect: 값을 테스트할때마다 사용됨. matcher와 함께 사용.matcher: 다른 방법으로 값을 테스트하도록 함.쿼리함수get: 요소가 없으면 오류 발생find: 요소가 없으면 null 반환query: 요소가 없으면 거부. 요소가 있으면 Promise 반환.테스팅 검사 관련 모듈ESLint: 문법오류 잡기Prettier: 코드 형식 맞추기Next.js: React의 SSR(Server Side Rendering) 구현을 도와주는 프레임워크. (React는 라이브러리)(리액트에서도 SSR을 지원하지만 구현하기에 굉장히 복잡. 따라서 NextJS 사용.)React는 CSR(Client Side Rendering) 이용CSR: JS가 다운로드된 후에야 화면 표시 및 기능 활성화됨첫페이지에서 빈 html을 가져와 JS파일을 해석하여 화면을 구성하기에 포털 검색에 거의 노출될 일이 없음. => 검색엔진 최적화(SEO) 불리SSR: 서버에서 Pre-Rendering된 HTML 제공사용자와 검색엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 됨.Pre-Rendering: initial Load(html보임) -> JS로드 -> Hydration(컴포넌트 활성화)Data FetchingReact에서 데이터를 가져오는 방법useEffect 내부에서 가져옴Nextjs에서 데이터를 가져오는 방법getStaticPropsgetStaticPathsgetServerSideProps TypeScript: JavaScript에 타입을 부여한 언어. 오픈소스.사용하는 이유단순화. 쉽게 읽고 디버그 가능코드 유형 검사를 통해 JavaScript에서의 일반적인 버그 피하는데에 도움Compile브라우저에서 실행하기 위해 파일을 변환해주는 것TypeScript에서 하는것. JavaScript에서는 안함. TypeScript Typevalue가 가진 프로퍼티나 함수를 추론할 수 있는 방법TypeScript 유형Primitive types: string, number, boolean, null, undefined, symbolObject types: function, array, class, object추가 제공 타입: Tuple, Enum, Any, Void, Never, Uniontype annotation: 개발자가 타입스크립트에게 타입을 알려줌type inference: 타입스크립트가 타입을 추론하는 것type assertion: 타입스크립트의 추론을 막는다. 나의 주장에 대해 의심하지 마라.Redux: JavaScript Application을 위한 상태관리 라이브러리.Redux Data Flow Dispatch Action -> Call Reducer -> Update Store -> RenderAction: 자바스크립트 객체. 작업유형 지정하는 정보 들어있음.Reducer: 이전 state와 action을 받은 후 next state를 반환하여 store를 업데이트.Redux Store: 앱의 전체 상태 트리를 갖는 저장소. 몇 가지 Methods가 있는 객체.Provider컴포넌트들에서 Redux Store에 접근할 수 있도록 해줌.컴포넌트들을 둘러싸고 최상위 수준에서 렌더링.useSelector: useSelector Hooks를 사용해 스토어의 값을 가져옴.useDispatch: dispatch함수에 접근하는 Hooks. (Action을 보냄)미들웨어Action을 Dispatch하고 Reducer에 도달하는 순간 사전에 지정된 작업 실행 도와주는 중간자Reducer에 도달하기 전에 API와 통신을 하고 그것을 전달.Redux Thunk리덕스 미들웨어. 비동기 작업할 때 많이 쓰임.Thunk: 일부 지연된 작업을 수행하는 코드 조각Redux Toolkit로직을 작성하기 위한 공식 권장 접근 방식.모범 사례를 이용해 작업 단순화 및 실수 방지. 미션 해결 과정[1. 자바스크립트 미션 보강]미션4(Day5) 책 리스트 나열 앱의 보강이 필요했던 부분스타일 보강알림때문에 화면이 아래로 밀리는 문제 고치기 스타일 보강포인트 1. input의 넓이 키우기: 가로는 화면의 대부분을 가로지르도록, 세로는 h1정도로 크게포인트 2. 제출 버튼을 책 저자 input란 아래에 두어 보기 좋게 만들기(가로도 길게)포인트 3. hr로 입력Form과 책 리스트 Form 구분하기포인트 4. 책 리스트 Form 좀 더 보기 좋게 만들기(보강 전)(보강 후)input의 font size 조정을 이용해 포인트1 해결display: flex; flex-direction: column을 이용해 포인트2 해결을 삽입해 포인트3 해결위치 및 폰트 미세 조정하여 포인트4 해결알림때문에 화면이 아래로 밀리는 문제 고치기책이 추가되었습니다, 아이디가 입력되지 않았습니다 등의 알림을 뜨게 하면 아래 화면이 움직이는 것 때문에 불편함이 있었다. 예제 동영상을 다시 보니 이 부분은 나와 똑같이 구현되어있기는 했지만, 편의성을 위해 바꿔보았다.알림이 아래로 추가되도록 하지 않고, display: none을 지정했다 풀었다 하는 방식으로 겹쳐 표시setTimeout에 clearTimeout을 이용해 알림을 매번 새로 3초 지속시간 부여float: right 속성을 이용해 '책' title의 오른쪽에 배치 미션5(Day5) Github Finder 만들기의 보강이 필요했던 부분API 통신스타일API 통신github의 사용자들을 검색하려면 github에서 제공하는 api를 fetch하면 된다고 한다.기본적인 형태는 이런 식이다.async function logJSONData() { const response = await fetch("https://api.github.com/users"); const jsonData = await response.json(); console.log(jsonData); }https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch내가 이해한 부분은, fetch 안에 api url을 넣고, fetch가 반환하는 response에 .json()을 해주면 데이터를 가져올 수 있다는 것이다.github에서 사용자를 검색하는 데에는 특별한 인증 키가 필요 없다고 한다.https://www.daleseo.com/github-rest-api/진도가 밀리고 있기에 여기까지 이해하고 잠시 멈추고 리액트 공부를 시작했다. [2. React 미션 해결 과정]미션8(Day9) 예산 계산기 앱 만들기이 미션은 React 섹션 1~3을 차근차근 복습할 겸 따라하며 필요한 부분을 알맞게 바꿔 만들었다.첫 번째 커밋에서는 class component 방식으로, this.state와 this.setState를 사용해 App.js에 몽땅 코딩했다.총 지출을 출력하는 부분에서 계속 금액이 문자열로 지정되어 합쳐지는 것을 막기 위해 일일이 Number()처리를 했다.그리고 두 번째 커밋에서는 function component를 이용하는 React Hooks(class component 없이 state를 사용할 수 있도록 하는 기능)를 이용했다.즉 React Hooks에서는 component 분리(App.js, Input.js, Lists.js, List.js), useState 사용.항목에 마우스 올릴 시 크기가 커지는 효과: scale과 transition 조정(아래 블로그를 참고했다.)https://record-than-remember.tistory.com/entry/CSS-%EC%9D%B4%EB%AF%B8%EC%A7%80-hover-transformscale-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%98%A4%EB%B2%84%EC%8B%9C-%ED%99%95%EB%8C%80수정 버튼을 구현하는 것이 가장 어려웠다.Input component에서 수정 기능을 구현하고 싶었지만 자꾸 에러가 떠서 list component에서 그냥 state를 만들고 구현했다. 이 부분은 다음에 시간 여유가 있을 때 보강해야겠다. 미션9(Day10) 디즈니 플러스 앱 만들기미션을 하면서 떠올린 단어는 다음과 같다. '막막하다'...물론 거의 대부분이 강의에서 다루었던 넷플릭스 클론 코딩과 같은 형태였지만,제대로 체화하지 못했을 뿐더러 CSS를 적용하고 왔다갔다하면서 수정하는 것은 내 노트북에게는 상당히 힘든 일이었다.(저장할때마다 체감상 기본 10초는 멈췄던 것 같다. 노트북을 당장 바꿔야겠다.)기간안에 전부 이해하고 처음부터 만들기는 힘들 것 같으므로, 넷플릭스 클론을 할 때 사용했던 코드를 수정하는 쪽으로 미션을 수행했다.해야하는 일은 다음과 같다.넷플릭스 흔적 지우고 로고, bgcolor, nav color 디즈니 비슷하게 바꾸기 (완료)LoginPage 구현하기 (완료)깃허브 로그인 버튼 구현하기 (진행중)Category 컴포넌트 만들기 (완료) 현재 깃허브 OAuth 토큰을 이용해 로그인해서 code를 받는것까지는 진행된 것 같은데, 로그인 후에 페이지 전환하는 것에서 막혔다. useState를 사용해 로그인이 되었을 경우와 안되었을 경우를 나누어 다른 컴포넌트를 라우팅하도록은 해놓았는데, 깃허브 액세스 토큰을 어떻게 사용하고 데이터를 어떻게 가져오는지 등을 아직 이해하지 못했다. 그리고 그 기능끼리 연결을 어떻게 시키는지 아직 모르겠다. 그래도 내일까지는 완성하고싶다.

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

회고벌써 과정의 2/3가 끝났다는 것이 믿기지 않는다.일주일 간의 회고를 해보자면, 아쉬움이 크다. 이번주는 시간 투자를 많이 하지 못했기 때문이다.저번주에 의욕 넘치게 미션을 진행하느라 밀려났던 다른 일을 처리하는데에 또 시간을 썼다.앞으로 일이든 취준이든 제대로 하려면 시간 분배하는 법을 익혀야 한다는 생각이 들었다.직장 등의 일과 병행하는 다른 분들이 존경스러울 뿐이다.하지만 모두 끝냈기 때문에 이제는 공부에 전념할 일밖에 남지 않았다.모든 미션을 반드시 갈아치워버리겠다. 강의를 들으며 그동안 키워드만 알고 이해하지는 못하고 있었던 개념들을 접하면서 굉장히 반가웠다.특히 프로젝트를 구하는 글에서 종종 SPA 할 줄 아시는 분이라는 글을 봤었는데, 정확히 무슨 뜻인지이해를 하지는 못했었다. 하지만 이번에 공부하면서 정확히 알게 되어 상당한 쾌감을 느꼈다. 그밖에도 평소 무료 사이트의클론 코딩을 무작정 따라하면서 접했던 개념들을 짚고 넘어가게 되어 재미있었다.모닥불에 종종 들어오시는 강사님으로부터 유익한 정보를 얻으려면 질문할 거리가 있어야 한다. 질문할 거리가 있으려면 스스로의 힘으로는 알아내지 못하는 부분이 뭔지 구별할 수 있을 정도로 공부가 되어있어야 한다. 따라서 마지막 주 만큼은 진도를 잘 따라가 질문을 생성할 수 있게끔 되었으면 좋겠다. 리액트 및 프로젝트 부분은 특히나 한 번 보고는 잊어버릴 것 같으므로 여러번 공부를 해야할 것 같다. 시간은 한정되어있으므로 다음주는 선택과 집중이 필요해질지도 모르겠다. 이번주 반성공부 및 미션에 시간투자를 얼마 못함다음주 목표미션 모두 보강 및 완료하기(시간 부족하면 CSS 제외하고서라도)필수지식: API 통신, RESTful API, CRUD, CI/CD CSS flexbox, CSS Grid 공부하기Github README에 GIF(혹은 이미지)도 올리기 강의 요약이번주는 JS프로젝트로 자바스크립트를 마무리하고, 리액트를 시작했다.(자바스크립트 섹션 9 & 리액트 섹션 1 ~ 5)강의 요약은 기억에 남는 부분 위주로, 최대한 개념 부분만 진행했다.ReactReact에 관해리액트 컴포넌트가상 돔create react appSPAJSXReact StateReact HooksTailwindCSSStyled ComponentREACTReact에 관해React는 프레임워크가 아닌 라이브러리다.프레임워크: 어떠한 앱을 만들기 필요한 대부분의 것을 가지고있는것. 라이브러리를 포함.라이브러리: 특정 기능을 모듈화해놓은 것.보통 리액트와 잘 맞는 라이브러리와 함께 리액트를 사용한다.React Component리액트로 만들어진 앱을 이루는 최소한의 단위하나의 페이지를 구성하는 각각의 기능을 위한 컴포넌트가 있다.검색 컴포넌트, 프로필 컴포넌트, ...하나의 컴포넌트를 여러 곳에서 사용할 수 있다.리액트 컴포넌트의 두 가지클래스형 컴포넌트함수형 컴포넌트Virtual DOM(가상 돔)실제 DOM을 메모리에 복사해준 것.리액트의 큰 특징 중 하나는 가상 돔을 사용한다는 것.복습: 웹 페이지 빌드 과정(Critical Rendering Path CRP)DOM tree 생성(html문서를 읽고 렌더링할것 결정)Render tree 생성: DOM과 CSSOM 결합. 화면에 표시되는 모든 콘텐츠 및 스타일 정보를 포함Layout: 브라우저가 페이지에 표시되는 각 요소의 크기와 위치 계산Paint: 실제 화면에 그리기어떤 인터랙션에 의해 DOM에 변화가 발생하면 그 때마다 Render Tree가 재생성됨. 즉 모든 스타일을 다시 계산. Layout과 Repaint과정까지 계속 거치게 됨. 인터랙션이 많을 경우 불필요하게 DOM을 조작하는 비용이 너무 커짐.위의 문제로 나오게 된 것이 가상 돔.가상 돔의 작동방식 가상 돔 생성데이터 바뀌면 새로운 가상 돔 생성이전에 생긴 가상 돔과 새로운 가상 돔 비교(diffing: 바뀐 부분을 찾는 과정)바뀐 부분만 실제 돔에 적용(재조정. reconciliation)시킴가상 돔 장점: 요소가 많이 바뀌어도 한 번에 묶어서 실제 돔에 처리하여 돔을 조작하는 비용 줄임 Create React App리액트 설치를 위해 필요한 것들 Node.jsVisual Studio Code 리액트 앱 설치 방법npx create-react-app 폴더 안에 react app이 설치됨webpack과 babel을 모두 설정해줌.Webpack: 여러 파일을 하나로 모아주는 번들러. 로딩에대한 네트워크 비용 줄임.Babel: 최신 자바스크립트 문법을 구형 브라우저에서도 쓸수있게 변환시켜주는 라이브러리.SPA(Single Page Application)하나의 페이지에 담아 동적으로 화면 바꿔가며 표현.단일 html 내의 div id=root를 자바스크립트로 잡음.페이지 전환(브라우징)은 html5의 history API를 이용.전통적: Multi Page ApplicationReact는 SPA를 사용한다.JSX(Javascript syntax extension)자바스크립트의 확장 문법.UI를 나타낼 때 자바스크립트(logic)와 HTML(markup)구조를 같이 사용.JSX를 이용하면이벤트 처리 등을 더 편하게 구현할 수 있음.의무는 아니지만 훨씬 편리하여 거의 모든 사람이 리액트에서 UI를 위해 사용.JSX로 작성 -> babel이 createElement로 바꿔줌JSX는 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.JSX Key 속성리액트에서 요소의 리스트를 나열할 때 넣어주는 값.React가 변경, 추가, 제거된 항목을 식별하는 데 도움이 됨.요소의 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 함.key에는유니크한값을 넣어야한다. index는 비추천.key를 이용하면 새로 그리는게 아니라 기존의 리스트를 이용해준다.React State컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체.컴포넌트 안에서 관리한다.setState 이용React Hooksclass 없이 state를 사용할 수 있는 기능.함수형 컴포넌트를 사용한다.클래스형 컴포넌트: 많은 기능, 길고 복잡한 코드, 느림, *리액트의 생명주기 사용 가능함수형 컴포넌트: 적은 기능, 짧고 심플한 코드, 빠름, *리액트의 생명주기 사용 불가*리액트의 생명주기: 컴포넌트의 시작, 업뎃, 언마운트까지의 주기위처럼 함수형 컴포넌트에서는 리액트의 생명주기를 사용하지 못했었다.그러나 React Hooks로 인해 함수형 컴포넌트에서도 생명주기 사용 가능해짐.리액트 훅스에서는 리액트 생명주기를 useEffect 안에서 다 처리를 해줄 수 있다.클래스형 컴포넌트에서는 마운트, 업데이트, 언마운트 함수 따로 생성.리액트 훅스는 HOC 대신 Custom React Hooks를 사용해 Wrapper 과다를 방지.TailWindCSSHTML 안에서 CSS 스타일을 만들 수 있게 하는 CSS 프레임워크.부트스트랩처럼 미리 세팅된 Utility Class를 활용하는 방식으로, html에서 스타일링을 할 수 있다.클래스 이름 짓기 등으로 골머리를 썩지 않아도 됨.Styled ComponentJavascript 파일 안에서 CSS를 처리할 수 있게 해주는 라이브러리.``를 사용하여 그 안에 스타일 속성들을 넣고, 변수에 할당한다.미션미션7(Day7). 타이핑 테스트 앱자바스크립트 섹션 9에서 다루었던 stopwatch앱을 복습하면서 구현을 시작했다.아직 미완성이고, 구현한 부분은 아래 부분이다.시작 화면index.html Typing Test App! 타이핑 스피드 측정 ERRORS 0 TIME 20S % ACCURACY 100 아래를 클릭해서 게임을 시작하세요. 이 시작화면에서는 텍스트 입력 부분을 클릭하면 게임이 시작되도록 해야 하기에, event listener를 이용했다.// 1. 입력 부분에 클릭했을 때 게임 시작 input.addEventListener("click", startGame);게임 화면(이상하게도 글씨가 왼쪽으로 밀린다.)이 게임화면에서는, 기존에 저장되어있는 등의 문장을 표시해야 하며 카운트다운 타이머를 실행시켜야 한다.(input과 sentence는 코드 맨 위에 document querySelector로 가져와 지정했으나 여기선 생략함. let i, err...도.)const startGame = () => { i = 0; err = 0; sec = 20; acc = 0; interval; input.removeEventListener("click", startGame); // 1-1. 문장 보여주기 sentence.textContent = sentences[i]; // 1-2. 시간초 카운트다운 시작 interval = setInterval(timer, 1000); ...const timer = () => { sec -= 1; timeH2.innerText = `${sec}S`; if (sec === 0) { gameEnd(); } };여기서 stopwatch 프로젝트에서 배웠던 setInterval를 사용하였다.끝 화면(배치가 좀 그렇다)시간 초과가 나거나 주어진 문장을 모두 입력할 경우 이 화면으로 온다. 여기서 clearInterval를 사용하였다.const gameEnd = () => { clearInterval(interval); // 3. 타임 오버 혹은 문장 전부 클리어 // 다시 시작 버튼 활성화이 아주 사소한 부분 해결 과정에서 하고자 하는 것은 setInterval과 clearInterval의 복습이다.결론setInterval()은 주어진 함수를 주어진 간격마다 실행하는 함수이다.clearInterval()은 주어진 interval의 반복을 중단하는 함수이다.예시: hello를 1초마다 콘솔에 반복 출력하는 함수const sayHello = () => { console.log("hello"); } let interval; setInterval(sayHello, 1000); clearInterval(interval); // 반복 중단

인프런 워밍업 클럽 스터디 0기 FE 미션 과제

[미션1(Day2)-음식 메뉴 앱]깃허브: https://github.com/JiWoo-Yoo/study-missions/tree/main/food-menu과제 GIF:[미션2(Day3)-가위 바위 보 앱]깃허브: https://github.com/JiWoo-Yoo/study-missions/tree/main/food-menu과제 GIF:[미션3(Day4)-퀴즈 앱]깃허브: https://github.com/JiWoo-Yoo/study-missions/tree/main/quiz과제 GIF:[미션4(Day5)-책 리스트 나열 앱]깃허브: https://github.com/JiWoo-Yoo/study-missions/tree/main/book-list과제 GIF:[미션6(Day6)-비밀번호 생성 앱 만들기]깃허브: https://github.com/JiWoo-Yoo/study-missions/tree/main/create-password과제 GIF:[미션8(Day9)-예산 계산기 앱 만들기]깃허브: https://github.com/JiWoo-Yoo/study-missions/tree/main/budget-calc과제 GIF: [미션9(Day10)-디즈니 플러스 앱 만들기]깃허브: https://github.com/JiWoo-Yoo/study-missions/tree/main/disney-plus-clone[미션11(Day12)-퀴즈 앱 만들기] 깃허브: https://github.com/JiWoo-Yoo/study-missions/tree/main/quiz-nextjs과제 GIF:(렉이 걸려서 동영상 길이가 길어져 배속을 했다. 줄였는데도 gif로 만들면 흐리다...) [미션12(Day12)-채팅 앱 만들기] 깃허브: https://github.com/JiWoo-Yoo/study-missions/tree/main/chatting-app과제 GIF:

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

발자국이번주 강의 범위는 따라하며 배우는 자바스크립트 A-Z(섹션 1~8) 까지였다.워낙에 기록을 안하는 성격이라 어떤 식으로 해야 할지 감이 안잡히지만 이제부터라도 습관을 들이는 편이 좋겠다.강의 요약이번주 강의에는 정말 많은 내용이 담겨 있었지만,이전에 혼자 책으로 공부할 때 한 번 보고 이해가 되지 않았던 부분,중요하다고 생각하는 부분,혹은 아예 처음 듣는 내용을 위주로 요약해보았다.그 목록은 아래와 같다.호이스팅HTML DOM this자바스크립트 비동기 처리 과정IIFECurryingOOP비동기Iterator & Generator자바스크립트 디자인 패턴요약을 한다고 하긴 했는데 요약이 아니라 공부노트같긴 하다. 다음 회고때는 중요한 내용 두 개 정도로 줄일까 한다.호이스팅(hoisting)변수 선언이 스코프 내의 가장 위로 끌어올려지는 것.var, let, const 모두 호이스팅된다. 그런데 방식이 다르다.var의 호이스팅console.log(a) var a = 1출력 결과: undefinedwhy? var의 경우 선언(a = undefined) -> 할당(a = 1) 됨.let, const의 호이스팅console.log(a) let a = 1결과: 에러 뜸.why? let, const의 경우 선언 -> TDZ -> 할당(a = 1) 됨.따라서 변수 선언이 스코프의 맨 위로 올라간다 해도 출력 불가. TDZ에 걸림. HTML DOMDOM(Document Object Model): 웹 페이지를 이루는 요소들을 tree구조로 만든 객체 모델.웹 페이지 빌드 과정(CRP: Critical Rendering Path)html을 DOM으로, CSS를 CSSOM으로 만든다.DOM과 CSSOM을 결합(Render Tree 생성)Layout(페이지에 표시되는 각 요소의 크기 및 위치 계산)Paint(실제 화면에 그리기)Render Tree 생성, Layout, Paint단계는 비용이 많이 든다.이 비용을 줄이기 위해 React에서는 가상 DOM을 사용해 성능을 높임. DOM Event event의 3단계 흐름: Capturing -> Target -> Bubblingevent Capturing: 이벤트가 위에서 아래로 전달되는 것event Bubbling: 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는 것event.stopPropagation(): 중첩 중지.Event Delegation(이벤트 위임)하위 요소의 이벤트를 상위 요소에 위임하는 것.하위 요소의 이벤트를 상위에서 제어. this메소드에서 this는 해당 객체를 참조.함수에서 this는 window 객체를 참조.constructor에서 this는 빈 객체를 참조.여기서 함수와 메소드의 차이가 헷갈려 알아보니, 다음과 같았다.메소드는 함수의 일종이며, 객체의 속성이 함수인 것을 메소드라고 한다.참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functionslexical this: 화살표함수(ES6)에서 this는 항상 상위스코프의 this를 가리키게 된다.bins, call, apply함수에서 this를 쓸 때 window객체 말고 다른 객체를 참조하도록 하는 방법들call: function.call(객체, 인수1, 인수2, ...)apply: function.apply(객체, [인수1, 인수2, ...])bind: const bindFunc = function.bind(객체); bindFunc(인수) // 이 때 호출. 자바스크립트의 비동기 처리 과정event loop자바스크립트는 동기 언어. 따라서 비동기를 사용하려면 브라우저 등의 도움을 받아야 한다.브라우저 내부: 자바스크립트 엔진 + Web APIs + Callback Queue + Event Loop자바스크립트 엔진: 메모리 힙 + Call Stack메모리 힙: 변수 저장 창고Call Stack: 함수 호출 시 함수가 쌓이는 곳setTimeout과 같은 비동기 기능을 처리하는 과정 (브라우저가 처리해줌)Call Stack에 setTimeout 쌓임Web APIs에게로 setTimeout이 이동 후 setTimeout의 지정한 시간만큼 대기Callback Queue에 함수가 보내지고 대기Event Loop는 Call Stack이 비면 Callback Queue에서 먼저 온 순서대로 Call Stack에 넣어줌 IIFE(즉시 호출 함수 표현식)정의가 되자마자 즉시 실행되는 자바스크립트 함수. 주된 목적: 변수 전역 선언 회피, 다른 변수의 내부 접근 막기( // 소괄호 1: 전역선언 막고 변수접근 막기 function() {} )() // 소괄호 2: 즉시 실행 함수 생성함수 이름이 없으려면이 함수를 할당받을 변수를 지정해야 함이 함수를 즉시호출해야함(IIFE) Currying커링: f(a,b,c) => f(a)(b)(c)로 변환하는 기술. 다른 언어에도 존재함.// 매개변수가 몇개든 함수를 currying해주는 함수 function curry(func) { return function curried(...args) { if(args.length >= func.length) { return func.apply(this, args); } else { return function (...args2) { return curried.apply(this, args.concat(args2)); } } } } OOP(객체 지향 프로그래밍)특징자료 추상화(Abstraction): 필요한 정보만 표현 -> 간결상속(Inheritance): 새 클래스가 기존 클래스의 기능 가져와 사용 -> 효율다형성(Polymorphism): Overriding(재정의) 사용. 인스턴스에 따라 같은 동작에 다른 결과물.코드 재사용 가능한 이점캡슐화(Encapsulation): 클래스 안에 묶어 보호 및 쉬운 관리상속부모 클래스를 자식 클래스에서 확장.extends 키워드 사용.super(): 자식 클래스에서 부모 클래스의 생성자나 메소드 호출할 때 사용. 비동기병렬로 작업. 순서를 기다리지 않음.비동기 요청이 여러개이고 한 요청이 다른 요청의 결과에 의존할때callback함수(es5): 특정 함수에 매개변수로 전달된 함수.promise(es6): 비동기처리 결과 성공, 실패 각각 resolve, reject. .then()으로 체이닝Promise.then(resolve값).catch(reject값).finally(성공실패무관)async/await(es7): 비동기식 코드를 동기식처럼 보이게 작성.async로 함수를 감싸고 그 안에서 await를 이용해 각 요청을 대기시킴동기식 코드에서 쓰는 try catch구문을 사용 가능 Iterator & Generatoriteratornext()를 호출해서 value, done 두 개의 속성을 가지는 객체를 반환하는 객체.[Symbol.iterator]()를 이용하면 반복가능한값을 반복기로 생성 가능.generatorGenerator Function은 사용자의 요구에 따라 다른 시간 간격으로 여러 값을 반환 가능.yield: 제너레이터함수의 실행을 일시적으로 정지시킴.function* 함수이름()제너레이터: 제너레이터 함수의 반환.제너레이터.next()로 사용.generator도 value, done 속성이 담긴 객체를 반환.자바스크립트 디자인 패턴디자인 패턴: 공식화된 프로그램/시스템 디자인 문제해결 모범 사례.장점최고의 솔루션: 검증됨.재사용성: 여러문제에 적용가능.풍부한 표현력향상된 의사 소통필요없는 코드 리팩토링: 검증됨코드베이스 크기 감소: 공간 보존Singleton Pattern:인스턴스를 하나의 객체로 제한.Factory Pattern: 특수함수인 팩토리함수를 사용해 비슷한 객체 많이 만들수있음.=> 비슷한 객체를 반복적으로 생성하야 하는 경우 사용. Mediator Pattern(중재자 패턴): 객체 그룹에 대한 중앙 권한 제공.Observer Pattern: observer를 이용해 객체를 관찰.Module Pattern: 더 작은 것으로 분할.export를 이용. 미션 해결 과정(과제 총합본은 따로 작성하고 있다.) https://www.inflearn.com/blogs/6758미션1 음식 메뉴 앱포인트: 각 카테고리의 버튼을 누를 때마다 메뉴들을 보여주는 공간을 비우고 해당 카테고리의 메뉴를 채움스타일: 우선은 아는 것이 별로 없고 주어진 것부터 제대로 공부하고 싶어서 과제 예시와 최대한 비슷하게 만들었다. 추가: 미디어 쿼리를 이용해 개발자 도구가 켜진 상태의 화면크기부터는 화면에 메뉴를 1열로 표시시간 많이 든 부분: CSS, 이미지 처리(선정 및 다운로드, 크기조정) 아직 HTML/CSS 공부가 많이 필요하다는 것을 깨달았다. 사진은 pixabay의 무료 이미지를 이용했으나, 다른 분의 글을 보고 음식 메뉴에 API를 이용하는 좋은 방법이 있다는 것을 깨달았다. 그런 훌륭한 문물이 있다는 것을 이제야 상기하다니! 직접 음식 메뉴를 선정하고 설명을 지어내는 것에 신경을 쓰느라 음식 API를 이용한다는 생각을 하지 못했다. 앞으로 다루어야 할 이미지가 많아질 경우 API를 사용하자. 미션2-가위바위보 앱포인트: Math.random을 이용해 컴퓨터의 가위바위보를 구현. 판마다 게임보드에 스코어 표시스타일: background에 그라데이션 효과를 적용함. 승부 결과마다 다른 색의 글귀를 표시 시간 많이 든 부분:만들 때 헷갈렸던 부분은 재도전 버튼을 눌렀을 때 기존에 써있던 플레이어와 컴퓨터의 점수를 삭제하고 새로 표시하는 부분이었다. 결국 재도전 버튼에 붙인 retry함수에서, gameDisplay에서 생성한 class를 querySelector로 찾아가 내용물을 비우고 classList에서 class 이름을 삭제하고 각 점수를 scoreboard에서 removeChild로 지웠다. 이는 gameDisplay가 실행되면 다시 생성된다. 미션3-퀴즈 앱포인트: 버튼을 누를 때마다 next버튼 생성 및 옵션 버튼 비활성화스타일: CSS의 grid 이용해 옵션 버튼 배치. position시간 많이 든 부분: CSS. 미션4-책 리스트 나열 앱포인트: 입력 후 제출 버튼을 누르면 input value를 미리 생성해둔 ul 내부에 li형태로 추가. 경고문은 setTimeout을 이용해 3초 뒤 사라지게 함스타일: 책이 추가/삭제되거나, 입력란을 빈칸으로 두고 제출했을 때의 경고문에 따라 색 다르게 표시얘는 다음주에 CSS를 공부해서 정렬을 보기 좋게 만들어줄 것이다.(거의 기능만 구현된 못생긴 화면)조만간 수정할 부분CSS 추가알림때문에 화면이 아래로 밀리는 문제 고치기 미션5-GithubFinder 앱포인트: Github API를 사용해 데이터 가져오기스타일: 우선 단순하게(아직 미해결. API 사용법 공부 후에 완성 예정)이친구는 fetch와 RESTful API 사용하는 법을 공부해야 하기 때문에 아직 해결하지 못했다. 다음 회고 때 해결 과정이 들어갈 것이다.미션6-비밀번호 생성 앱포인트: 선택된 체크박스의 값을 넣어 length란에 입력한 숫자값을 길이로 하는 문자열을 랜덤생성해야 한다.5~70의 숫자 조건에 length가 해당하지 않으면 alert를 실행시켰다.아무런 체크박스를 선택하지 않았을 경우도 alert를 실행시켰다.생성한 비밀번호를 복사하는 copy 버튼을 눌렀을 때 클립보드에 복사하는 코드navigator.clipboard .writeText(password.value) .then(() => { alert("successfully copied"); }) .catch(() => { alert("something went wrong"); });원래는 execCommand를 썼는데 deprecated되었다고 한다.then부분은, alert를 넣을 경우 then을 쓰지 않으면 복사가 되지 않아서 stack overflow사이트에서 가져온 코드이다. https://stackoverflow.com/questions/69438702/why-does-navigator-clipboard-writetext-not-copy-text-to-clipboard-if-it-is-pro문자열, 숫자, 특수문자를 랜덤으로 섞어 조합하는 것은 까다로웠지만 Math.random과 배열을 이용해 구현했다.체크박스 중 체크된 것의 value를, 생성 버튼을 클릭할때마다 배열에 넣고, 체크가 안되어있으면 배열에서 삭제하는 코드는 거의 줄글처럼 조건이 많이 작성되었다. 굉장한 하드코딩이 되었다...회고작년 말에 진로를 FE개발쪽으로 정하고 독학을 시작하였다.FE부트캠프는 참여한 적이 없었고, 따라서 미션 하나하나가 도장깨기를 하는 느낌이었다.예상대로 매일 미션 한개씩 하는데에는 시간이 꽤 걸렸다. 그리고 부족한 점을 많이 깨달았다.CSS, API 이용, 클린코드 작성 등 여러 방면에서의 지식 및 구현 경험 부족 미션을 할 때 일단 돌아가게 만들고 머리로 정리는 하지 않는 느낌 뒤로 갈수록 시간 부족 다음주 목표CSS 공부하기REST API 공부하고 미션 마저 해결하기다음주 회고 강의 요약 부분 분량 줄이기