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

인프런 워밍업 클럽 2기 오프라인 수료식 후기 처음으로 같이 스터디를 한 분들을 만나는 자리라 떨리는 마음으로 출발했다.판교역에 도착해서 버스를 기다리는데 정류장에 이런 문구가 붙어있었다.정류장에서도 코딩에 관련한 글을 읽을 수 있다니 '이 곳은 정말 코딩에 진심인 사람들이 있는 동네구나' 라는 생각이 들어서 신기하기도 하고 재밌는 마음으로 버스를 기다렸다. 시간에 딱 맞게 도착해서 거의 바로 프론트엔드 팀과 같이 앉는 시간이 되었는데 처음부터 다들 편하게 대해주셔서 많이 긴장했던 것이 풀려갔다. 자기 소개 시간에 들어보니 다른 분들은 거의 취직을 한 상태에서 이 스터디에 참여하셨다. 아직 취직을 하지 못해서 상대적으로 시간이 많던 나도 따라가기가 벅찰 분량의 스터디였는데 본업을 하면서 스터디까지 하신 모습에 감탄하면서 더 열심히 해야겠다고 마음을 다짐했다. 코치님과 피자를 먹으며 대화를 나누고, Q&A시간을 가지면서 개발자 인생에 도움이 되는 이야기를 정말 많이 들을 수 있었다. 한창 힘들 때였는데 응원을 많이 해주셔서 정말 감사하고 힘이 됐다. 질문에 대한 대답도 하나하나 적어오셔서 알려주신 것이 감동이었다. 이 시간이 더 길었으면 좋았을텐데 아쉽게 느껴졌다. 피자는 아주 맛있었다! 가장 걱정했던 시간이었던 것이 무색하게도 순식간에 끝난 네트워킹 시간이 끝나고 드디어 우수러너 발표 시간이 왔다. 우수러너가 되지 못하더라도 할 수 있는 최선을 다했으니 그것에 만족하자고 생각하면서 왔는데 막상 시상식이 시작되니 기대감이 커지기 시작했다. 그렇게 두근두근 하고 있는데 거짓말처럼 내 이름이 불렸다. 오랜만에 정말 큰 기쁨과 성취감을 느껴본 것 같다. 정말 갖고 싶었던 인프런 굿즈도 받고 코치님과 사진도 찍었다. 나와 같이 우수러너가 되신 분의 블로그를 보며 감탄할 때가 많았는데 그 분과 함께 받을 수 있어서 더 기분이 좋았다. 인프런 스터디를 통해서 실력도 멘탈도 많이 성장했다. 이번 스터디에 참가하기를 정말 잘한 것 같다ㅎㅎ 오프라인 수료식은 현장 분위기가 정말 좋았고, 코치님, 다른 개발자 분들과 함께 얘기를 나눠볼 수 있는 점도 정말 좋았다. 만약 3기에 오프라인 수료식을 고민하고 있는 사람이 있다면 무조건 가는 것을 추천한다. 수료식이 끝나고 저녁에 먹고 남은 피자를 들고 가고 있는데 피자가 많이 남았다면서 한판씩 더 주셔서 감사했다ㅎㅎ 앞으로 인프런에서의 좋은 기억을 가지고 더 열심히 살아야겠다.

[인프런 워밍업 스터디 클럽 2기 FE] 강지원 과제 제출

Day 2 Mission (음식 메뉴 앱)github : https://github.com/noaprost/inflearn_study_js_mission/tree/main/mission1개발 시간 : 3시간개발 순서메뉴 정보를 담을 menu.json 파일을 만들었습니다.fetch를 사용하여 json 데이터를 불러오고 main 부분에 동적으로 child를 추가해주었습니다.각 카테고리 button에 onClick eventListener를 달아주고 curCategory 변수를 선언하여 현재 클릭 된 카테고리가 무엇 인지에 따라 다른 child가 main에 보여지도록 했습니다.아쉬웠던 점useEffect나 useState를 대체할 코드를 js로 짜는 것이 미숙해서 코드가 깔끔하게 짜이지 않은 것 같아 아쉽습니다.카테고리 버튼을 누를 때마다 main에 이미 있는 child를 모두 제거 후 다시 필터링해서 append 해주었는데, 코드가 비효율적인 것 같아서 아쉽습니다.느낀 점첫 과제를 무사히 끝내서 다행이다. 이번 과제는 바닐라 js로만 앱을 만든 것이 3년전 이후로 처음이라 많이 해맸지만 앞으로의 과제를 만들면서 js 실력이 많이 길러질 것 같아서 기대가 됐다. main 화면Breakfast를 클릭한 화면 Day 3 Mission (가위 바위 보 앱)github : https://github.com/noaprost/inflearn_study_js_mission/tree/main/mission2개발 시간 : 2시간구현 사항가위, 바위, 보 버튼을 누르면컴퓨터에서 랜덤 변수를 생성하고 플레이어와 승패를 비교합니다.승패에 따라 승리 횟수를 업데이트 해주고, 남은 횟수를 1 감소 시킵니다.남은 횟수가 모두 소진됐을 경우최종 승리 횟수를 비교해서 알맞는 문구를 띄워주고 replay 버튼을 보여줍니다.replay 버튼을 누를 경우모든 횟수가 초기화됩니다. 느낀 점한번 만들어봤던 앱이라서 바로 만들기부터 시작했는데, 중간에 막혀서 고생했다ㅠ 구현할 기능과 순서를 다시 쭉 적어 놓고 구현하니까 순조롭게 만들어져서 요구 사항 작성의 중요성을 다시 한번 깨달았다. main 화면 (게임 중)게임이 끝난 화면 Day 4 Mission (퀴즈 앱)github : https://github.com/noaprost/inflearn_study_js_mission/tree/main/misson3개발 시간 : 2시간구현 사항랜덤으로 1~50사이의 수를 골라서 문제를 생성합니다.랜덤으로 정답+랜덤 수 / 랜덤 수1+랜덤 수2+정답이 없습니다. 둘 중 하나를 보여줍니다.정답을 누를 경우 Next 버튼이 보여지고 버튼을 클릭하면 다음 문제로 이동합니다.문제를 틀렸을 경우 Restart 버튼이 보여지고 버튼을 클릭하면 새로운 문제를 보여줍니다. 아쉬웠던 점정답/틀린 답을 클릭했을 경우 ui를 보여줄 때 class 이름을 추가하고 삭제하는 방식으로 구현했는데, if문도 많이 중첩되어있고 긴 코드를 작성한 것 같아서 아쉽습니다. 추후에 더 나은 코드로 리팩토링을 하고 싶습니다. 만족한 점답 버튼을 최대한 랜덤으로 보이게 하고 싶어서 수를 먼저 만들고 이후에 동적으로 생성한 점이 만족스럽습니다. 느낀 점생각보다 구현할 때 신경 쓸 부분이 많았고, ui 처리가 어려웠지만 재밌게 만들었다. 영상에 요구 사항이 잘 안보여서 규칙 등을 직접 정하면서 만들었는데 그 점도 재밌었다. 문제를 띄운 화면정답을 클릭했을 경우오답을 클릭했을 경우 Day 5 Mission (책 리스트 나열 앱, Github Finder 앱) 책 리스트 나열 앱github 주소 : https://github.com/noaprost/inflearn_study_js_mission/tree/main/mission4개발 시간 : 1시간구현 순서form을 만들어서 input 값 2개를 받는다.submit 버튼을 누르면 input에 있던 값을 다른 변수에 저장해둔다.데이터를 가공해서 리스트에 책 제목과 저자, 삭제 버튼을 담은 목록을 보여준다.삭제 버튼을 누르면 해당 리스트가 삭제된다.느낀 점이번 과제는 개인적으로 정말 쉬웠다. todo 앱 강의를 먼저 듣고 나서 만들어서 그런지 가장 명확하게 구현 순서가 그려져서 재미있었다. 책 생성 화면책 삭제 화면Github Finder 앱github 주소 : https://github.com/noaprost/inflearn_study_js_mission/tree/main/mission5개발 시간 : 7시간구현 순서Github api로 user정보와 repo정보를 가져온 후, repo 정보는 최근에 작성된 것이 먼저 보여지도록 정렬한다.displayUserInfo와 displayLatestRepo 함수를 이용해서 각각의 정보를 화면에 보여준다.필요한 정보 정리// user data에서 가져올 목록 // 맨위 4개 태그 public_repos public_gists followers following // 리스트 info company blog location created_at // View Profile 버튼 html_url // 최근 리포 baseUrl repos_url // repo data에서 가져올 목록 // Latest Repos name -> html_url 이용해서 이동할 수 있도록 stargazers_count watchers_count forks_count 어려웠던 점새로운 user를 검색할 때 마다 userInfo와 latestRepo 컨테이너에 담긴 정보들을 지워주고 새로 담아야 하는데, 아래의 간단한 코드를 떠올리지 못해서 3시간이나 해맸다.document.getElementById("user-info").innerHTML = ""; document.getElementById("latest-repo").innerHTML = ""; 느낀 점처음 user의 정보를 가져오는 BaseUrl을 찾는 것이 어려웠지만 url을 찾고 나니 나머지는 데이터 가공 뿐이라서 만드는 과정은 재밌었다. main 화면검색 결과 화면 (user info)검색 결과 화면 (latest repo) Day 9 Mission (예산 계산기)github 주소 : https://github.com/noaprost/inflearn_react_mission_budget_calculator개발 시간 : 4시간구현 사항예산 목록을 생성, 수정, 삭제할 수 있어야 한다.목록 지우기 버튼을 누르면 목록 전체가 삭제되어야 한다.생성, 삭제, 수정 시 맨 위에 status를 알려주는 상태 메세지를 띄워준다.총 예산을 계산해서 가장 아래쪽에 표시해준다. 느낀 점그동안 Next.js, Three.js 공부를 하느라 React 프로젝트를 오랫만에 만들었더니 간단한 CRUD 앱인데도 꽤나 어렵게 구현하였다. 역시 꾸준한 것 보다 좋은 것은 없는 것 같다ㅠㅠ 과제를 진행하면서 잠시 잊었던 감을 다시 찾아야겠다는 생각이 들었다. main 화면예산 입력 후 화면예산 수정 화면 Day 10 Mission(디즈니 플러스 앱)github 주소 : https://github.com/noaprost/disneyplus_clone개발 기간 : 약 2일페이지 별 구현 사항로그인 페이지firebase를 이용해서 구글로 로그인을 한다.로그인 버튼을 누르면 popup창이 뜨고 로그인이 되면 홈으로 이동한다.Navbaruser가 있으면 프로필 사진이 원형으로 보여지고, 없으면 LOGIN 버튼이 보여진다.disney 로고를 누르면 user가 있을 경우 "/home"으로 이동, 없을 경우 "/"로 이동한다.user 프로필 사진을 hover하면 LOGOUT 버튼이 1.5초간 보여지고 클릭 시 user 정보가 사라진다.메인 페이지axios를 이용해서 영화 목록을 받아온 뒤 영화 하나의 정보를 보여준다. (이미지, 제목, 설명)영화사 버튼을 만들고, hover 시 영상이 재생되도록 한다.인기 영화, 평점 높은 영화, 판타지 영화, 액션 영화 각 카테고리에 맞는 영화들의 이미지를 보여준다.카테고리에 보여지는 영화들은 swiper를 이용해서 감싸준다.카테고리에 보여지는 영화를 클릭할 경우 상세 정보를 담은 모달이 나오고, 화면 밖을 클릭할 경우 모달이 닫히게 해준다.Modal이미지, 개봉일, 제목, 평점, 설명을 보여준다.메인 페이지에 오면 검색 창이 나타나고, 검색어 입력 시 검색 페이지로 이동한다.검색 페이지에서 메인 페이지로 돌아오게 되면 useLocation을 이용해서 검색어를 초기화해준다.검색 페이지로 이동할 때 검색어 정보를 query에 담아 url에 파라미터로 보내준다.검색 페이지useLocation으로 받은 데이터를 가공해서 검색어를 저장한다.검색어가 변경될 때마다 검색어를 query로 받는 검색 결과를 업데이트 해준다.결과의 이미지를 목록의 형태로 보여준다.이미지를 클릭할 경우 화면에 꽉 찬 이미지가 보여진다. 느낀 점이번 프로젝트를 하면서 React, CSS, Html, JS에 대해 새로운 것을 많이 알게 되었다. 과제를 하는 동안에는 에러도 많이 나고, 데이터가 안받아지거나, 페이지가 예상한대로 동작하지 않아서 스트레스도 많이 받아가며 만들었지만, 그 과정에서 실력은 확실히 성장할 수 있었다. 끝나고 나니까 뿌듯하고 계속 보게 됐다. 아쉬운 점카테고리 별로 영화 정보를 받아올 때, 인기 영화와 평점 높은 영화를 받아오는 api 주소와 장르별 영화를 받아오는 api 주소가 달라서 서로 다른 컴포넌트에서 로직을 짰다. 이것 때문에 swiper 코드와 Modal 코드, 목록을 보여주는 코드들이 중복이 된 것 같아서 아쉽다. 로그인 페이지메인 페이지메인 페이지 (영화사 버튼 hover 시)메인 페이지 (카테고리 별 목록)메인 페이지 (영화 상세 정보 모달)검색 페이지검색 페이지 (이미지 클릭 시) Day 12 Mission (퀴즈 앱)github 주소 : https://github.com/noaprost/quiz_app개발 시간 : 3시간라우터 구조 및 구현 사항"/"Welcome to Quiz App을 보여준다."/question"수학 문제 2개를 보여준다.라디오 버튼을 클릭하면 답변 확인 버튼이 뜬다.답변 확인 버튼을 클릭하면 정답을 클릭했을 경우와 오답을 클릭했을 경우를 나눠서 보여준다.정답을 클릭했을 경우 border color를 green으로, 오답을 클릭했을 경우 red로 보여준다.정답인 label에 v표시를 붙여주고, 오답인 label에는 x를 붙여준다."/state"math와 alphabet 중에 하나를 선택할 수 있는 select box를 보여준다.선택하면 카테고리에 맞는 문제를 보여준다.채점 방식은 question과 동일하다."/quiz"퀴즈를 보기 전math와 alphabet 중에 하나를 선택할 수 있는 select box를 보여준다.연습 테스트 시작 버튼을 보여준다. 클릭하면 퀴즈 화면으로 변경된다.퀴즈를 보는 중문제와 남은 문제 수가 보여진다.답을 선택하면 다음 버튼이 보여지고, 마지막 문제였을 경우 제출 버튼이 보여진다.다음 버튼을 선택하면 다음 문제가 보여지고, 제출 버튼을 누르면 결과 화면으로 변경된다.퀴즈를 본 후총 문제 수 중 몇 문제를 맞췄는지 보여준다. (합격했을 경우 초록색, 아닌 경우 빨간색)시험 합격/불합격 여부가 보여진다. (4개 전부 맞을 경우 합격, 아닌 경우 불합격)새로운 연습 테스트 시작 버튼이 보여진다.버튼 클릭 시, 퀴즈를 보기 전 화면으로 돌아간다. 아쉬운 점문제를 랜덤으로 동적 생성하고 퀴즈의 문제 수도 설정할 수 있도록 구현해보고 싶었는데 시간이 부족해서 구현하지 못했다. 스터디가 끝난 후에라도 혼자서 개발해보고 싶다. 느낀 점그래도 가장 최근에 개발할 때 사용했던 Next.js와 Typescript여서 비교적 편하게 개발했던 것 같다. 구조들이나 변수가 반복되는 부분이 많다 보니 코드를 가독성 있게 짜기가 쉽지 않았다. 리팩토링에 대한 공부의 필요성이 느껴졌다. home 화면question 화면 (문제를 풀기 전)state 화면 (문제를 푼 후)quiz 화면quiz 화면 (연습 테스트 시작)quiz 화면 (테스트 결과)

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

따라하며 배우는 리액트 A-Z (7~13강) Day 11 (리액트 테스트 경험하기) TDD (Test Driven Development)개발 전 테스트 코드를 먼저 작성하는 방법론 순서테스트 코드를 작성 → 실행 (당연히 실패) → 딱 이 테스트 코드를 통과할 만큼의 코드만 작성 → 성공 → 다른 테스트 코드 작성으로 이동전부를 다 한 다음에 리팩토링 작업을 실행여기서 문제가 된다면 다시 테스트 코드를 확인하고 수정함 TDD의 장점소스 코드에 안정감을 줌디버깅 시간과 개발 시간이 줄어듦시스템 전반적인 설계 향상 (클린 코드가 나올 확률이 높아짐)개발 집중력 향상 (테스트를 하나씩 깨나가면서 개발할 수 있기 때문) Day 12 (NextJS, 타입스크립트)내용을 복습하면서 원래 알고 있던 것 + 새로 알게 된 내용을 공부하는 방식으로 공부했다.특히 TS의 타입 들을 코드로 정리하면서 어떤 타입이 있었는지 다시 새길 수 있었다. Next.jsReact의 SSR을 쉽게 구현할 수 있게 도와주는 간단한 프레임 워크 특징 Full-StackFile-based RoutingSEO, Image, Font OptimizationServer Side RenderingHybrid Rendering CSR (Client Side Rendering)리액트만으로 프로젝트를 만들면 발생 → 렌더링 하는 주체가 클라이언트 (브라우저) 장점한번 로딩 되면, 빠른 UX 제공서버의 부하가 작음 단점페이지 로딩 시간(TTV)이 김 (FCP가 오래 걸린다고도 함)자바스크립트 활성화가 필수임SEO가 힘듦보안에 취약 (모든 react 라이브러리, js 소스 코드를 다 다운 받아야 하기 때문에)CDN(Content Delivery Network)에 캐시가 안됨 → 이러한 많은 단점들을 해결하기 위해서 나온 것이 SSR SSR (Server Side Rendering렌더링 하는 주체가 서버렌더링 되는 순간 : 요청 시 렌더링 (미리 해두지 않음) 장점페이지 로딩 시간(TTV)이 빠름자바스크립트 활성화 여부가 필요 없음SEO 최적화가 좋음보안이 뛰어남CDN에 캐시가 됨실시간 데이터를 사용!사용자 별 필요한 데이터를 사용함 (요청 시 렌더링 하기 때문에 요청하는 사람에 맞게 데이터 제공이 가능) 단점비교적 느릴 수 있음서버에 과부하가 걸릴 수 있음 (몇 천명의 페이지를 요청 시 마다 계속 만들어야 하기 때문에)CDN에 캐시가 안됨 (요청마다 새로운 페이지를 만들기 때문에) Typescript 타입 : value가 가지고 있는 프로퍼티나 함수를 추론할 수 있는 방법JS의 dynamically type이 야기할 수 있는 runtime error를 해결하기 위해 statically type을 적용 시킨 언어 사용하는 이유Typescript는 JS코드를 단순화하여 더 쉽게 읽고 디버그할 수 있도록 함Typescript는 코드 유형 검사를 통해 JS를 작성할 때 고통스러운 버그를 피할 수 있도록 도와줌 Day 13 (리덕스 학습하기 및 리액트 19) ReduxJS 어플리케이션을 위한 상태 관리 라이브러리 data flowAction간단한 JavaScript 객체수행하는 작업의 유형을 지정하는 'type' 속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 'payload' 속성을 가질 수도 있음 Reducer어플리케이션 상태의 변경 사항을 결정하고 업데이트 된 상태를 반환하는 함수store 내부의 상태를 업데이트함 Redux Store어플리케이션의 전체 상태 가지고 있는 객체내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것 Redux 미들웨어action을 dispatch하고 reducer에 도달하는 순간 사이에서 사전에 지정된 작업을 실행할 수 있게 해주는 중간자 Redux Thunk비동기 작업을 할 때 많이 사용하는 방법Redux Thunk도 리덕스 미들웨어액션 내부에서 다양한 작업을 할 수 있게 해줌 Redux ToolkitRedux 로직을 작성하기 위한 공식 권장 접근 방식Redux 코어를 둘러싸고 있고, Redux 앱을 빌드하는 데 필수적인 패키지와 기능이 포함되어 있음Redux 작업을 단순화하고 일반적인 실수를 방지하며, Redux 앱을 더 쉽게 작성할 수 있도록 도와줌 느낀 점 redux의 기본 사용 법을 처음으로 배우는 것이라 신기하고 어렵게 느껴졌다. 강의를 따라가면서 기초에 집중하려고 노력했는데, 처음 배운 개념을 이용해서 앱을 만드려니 꽤나 막막해서 시간이 많이 걸렸다. 앞으로 더 능숙해지고 싶다. 일주일 회고스터디 중간에 몸이 3일 동안 아팠어서 시간이 많이 없었지만 열심히 달려서 겨우 완주 조건까지 달성했다.매일 새벽까지 과제를 개발한 덕에 JS 과제 5개와 React 과제 3개를 해냈다. 모든 과제를 해내면 신입 역량 이상이라고 하셨었는데 나는 아직 신입 역량 정도였나 보다. 아쉽다.그동안 머릿속에 스터디만 가득한 채로 3주를 보냈는데 막상 끝나려고 하니까 아쉽지만 3주전의 나와 지금의 나를 비교했을 때 많은 성장을 이뤄낸 것 같아서 뿌듯하다.이번에 알게 된 부족한 점들을 바탕으로 앞으로의 공부 계획을 세워나갈 예정이다.정말 의미 있는 시간이었고, 꼭 필요했던 시간이라고 생각한다. 강의 출처강의 주소(React) : https://www.inflearn.com/course/따라하는-리액트/코치님 성함 : John Ahn

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

따라하며 배우는 자바스크립트 A~Z (8~10강)따라하며 배우는 리액트 A-Z (1~6강) Day 6 (Iterator, Generator, Design Pattern)디자인 패턴* 프로그래머가 응용 프로그램이나 시스템을 디자인할 때 일반적인 문제를 해결하는데 사용할 수 있는 공식화된 모범 사례 * 최고의 솔루션 * 재사용성 * 풍부한 표현력 * 향상된 의사소통 * 코드 리팩토링 필요x * 코드 베이스 크기 감소Singleton* 클래스의 인스턴스화를 하나의 객체로 제한하는 디자인 패턴 * 시스템 전체에서 작업을 조정할 때 정확히 하나의 객체만 필요한 경우 유용Factory* 특수 함수인 팩토리 함수를 사용하여 비슷한 객체를 많이 만들 수 있는 패턴 * 비슷한 객체를 반복적으로 생성해야 하는 경우 사용 * 동일한 코드를 반복할 필요 없게 해줌Mediator* 객체 그룹에 대한 중앙 권한을 제공하는 패턴 * 대표 예시 : 채팅방 * 중재자한테 먼저 채팅을 보내고 원래 보내려던 사람에게 중재자가 전달 * 정크 메세지 등을 거를 수 있음 Observer* event-driven 시스템을 이용하는 패턴 * 특정 subject를 관찰하는 많은 observer가 있고, 해당 subject에 변경 사항이 있을 떄, 알림 받기를 원하기 때문에 스스로를 등록(Register)함 * 관심을 잃게 되면 등록을 취소 * 예시 : 유명 연예인을 팔로워한 대중들 Module* 코드를 더 작고 재사용 가능한 조각으로 분할하는 패턴 * 로 표현 가능 * 특징 * 1. 항상 strict 모드로 실행됨 * 2. 지연 실행됨 (defer) * 3. 인라인 모듈 스크립트도 비동기 처리할 수 있음 * 4. 외부 origin에서 스크립트를 불러오려면 Cors 헤더가 있어야 함 * 5. 증복된 스크립트는 무시됨 * 모듈 레벨의 스코프 * 모듈 안에 자신만의 스코프가 만들어져서 모듈 내부에 정의된 변수나 함수는 * 다른 스크립트에서 접근할 수 없게 됨 * 모듈은 최초 호출시 한번만 실행됨 * 스크립트 안에서 정보를 가져오기 위해서는 * import.meta를 사용해야 함 * async * 일반 스크립트에서 async -> 외부 스크립트에만 해당 * 모듈 스크립트에서 async -> 외부, 인라인 스크립트 둘 다 해당 Day 7 (프로젝트 만들기)StopWatch App// 지정된 timeout ms가 지날 때마다 handler를 실행해주는 함수 setInterval(handler, timeout) // setInterval에서 실행한 내용을 reset시키는 함수 clearInterval()Todo App// child 요소를 맨 앞으로 넣어주는 함수 prepend() Spreadsheet App // csv 파일을 다운로드할 수 있는 버튼을 만드는 방법 const csvObj = new Blob([csv]); const csvUrl = URL.createObjectURL(csvObj); const a = document.createElement("a"); a.href = csvUrl; a.download = "Spreadsheet File Name.csv"; a.click();백한테 파일 형태로 요청을 보낼 때만 써봤던 Blob을 이용해서 파일 다운로드 버튼을 만들어보다니 신기했다. Day 8 (중간 점검)라이브러리를 잘 활용하는 것도 실력이라고 하신 점이 기억에 남았습니다.너무 어려운 기능이 있으면 막막해서 라이브러리를 써볼까 하다가도 과연 개발자로써 직접 만들지 않고 이미 있는 것을 가져다 사용하는 것이 옳은 걸까라는 생각을 많이 했었는데, 이 부분을 확실하게 꼬집어주시면서 해결책을 주셔서 좋았습니다.코치 님의 말씀을 들으면서 라이브러리 사용을 두려워하지 말고 적극적으로 활용하는 개발자가 되어야겠다고 생각했습니다.그리고 third party api라는 단어를 잘 모르겠어서 찾아봤는데, 기업들이 이윤 창출을 목적으로 개발한 API라는 것을 알게 되었습니다. 예를 들어 구글을 통해 로그인, 구글맵 등이 third party api에 해당합니다. 예시로 든 두 기능은 프로젝트를 개발할 때 사용해봤던 api였는데도 불구하고 정확한 용어를 몰랐다는 점이 부끄러웠습니다. 앞으로 잘 기억해둬야겠습니다. Day 9 (리액트 기본 및 Todo 앱 만들기)React는 UI를 만들기 위한 JS 라이브러리 즉, Renders UI and responds/reacts to eventsSPASPA : Single Page Application 사용자가 버튼을 클릭했을 때 다른 페이지를 보여주는 것이 아니라 한 페이지 내에서 어떤 건 숨기고 어떤 건 보여주면서 동작하는 방식 성능 개선 부분이 너무 어려워서 코드를 따라치는 수준으로 겨우 들었다.. 추가로 공부를 더 하면서 완전히 내 것으로 만들어야겠다. Day 10 (리액트로 Netflix 만들기)강의를 보면서 더 공부하고 싶었던 내용들* Styled Component * Modal * ReactRouter * useLocation * useDebounce * useParamsTMDB api는 처음 사용해봤는데 넷플릭스, 디즈니 플러스 등 영화 정보가 필요한 앱을 만들때 굉장히 유용할 것 같다.여러 훅을 사용해 볼 수 있어서 좋았지만 한번에 이해하기는 힘든 부분이라 더 공부가 필요할 것 같다. Styled Component 내용 정리 및 개인적인 장단점 정리* CSS-in-JS JS 코드 내에서 잘 스타일링 된 컴포넌트를 직접 만들어서 가져다가 쓰는 방식 * 장점 - css 파일을 왔다 갔다 하지 않고 사용할 수 있다. * 단점 - JS파일 내에서 동작하기 때문에 수정하고 빌드할 때마다 재 컴파일 되어서 성능이 안좋음 - 스타일링과 컴포넌트를 오가며 작성해야 하는 불편함이 있음 - 컴포넌트만 봤을 때 이게 stlyed된 컴포넌트 인지 그냥 컴포넌트인지 구분할 방법이 없음 일주일 회고저번 주는 약과다 싶을 정도로 많이 바쁜 일주일이었다. 그래도 이렇게 무엇인가에 열중하는 경험은 몸이 피곤하더라도 기분은 좋다. 다음 주가 벌써 마지막 주라니.. 시간이 정말 빠르다. 마지막 주까지 힘내서 강의도 완주하고 과제도 잘 만들어야겠다.저번 주 회고 때 너무 많은 내용을 담은 것 같아서 아쉽다고 했었는데 확실히 저번 주 보다는 꼭 기억하고 싶은 내용들만 적어서 그런지 간략하고 가독성 있게 쓴 것 같아서 만족한다. 강의 출처강의 주소(JS) : https://www.inflearn.com/course/따라하며-배우는-자바스크립트/강의 주소(React) : https://www.inflearn.com/course/따라하는-리액트/코치님 성함 : John Ahn

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

따라하며 배우는 자바스크립트 A~Z (1~7강) Day 1 (OT)프론트엔드가 꼭 알아야 하는 기술들과 포트폴리오를 만들 때는 어떤 프로젝트 위주로 넣는 것이 좋은지 알 수 있었다. 도움이 되는 정보를 많이 주셔서 좋았고 스터디도 기대가 됐다.오티 때 가졌던 마음 가짐 그대로 완주까지 열심히 할 수 있으면 좋겠다. Day 2 (자바스크립트 기초)변수의 참조 범위 * var : 함수 레벨 스코프 * 함수 내에서 선언된 변수는 함수 내에서만 유효 * 함수 외부에서 참조할 수 없음 * let, const : 블록 레벨 스코프호이스팅 * var * 호이스팅이 됨 (선언 당시에 undefined을 할당) * 이후 할당 되었을 때 hello라는 값이 들어감 * 초기화 되기 전에 값을 사용할 수 있음 * let, const * 호이스팅은 되지만 초기화 되기 전에 어떤 값도 할당해주지 않음 * TDZ : Temporal Dead Zone (변수를 사용할 수 없는 일시적인 비활성 상태) * TDZ가 존재하기 때문에 초기화 되기 전에 값을 사용할 수 없음 DOM * 웹 페이지 빌드 과정 (Critical Rendering Path - CRP) * html 분석 -> dom tree 생성 -> css dom tree 생성 -> 합쳐서 렌더링 트리 생성 * -> 레이아웃 단계 : 배치할 요소의 위치와 크기를 계산 -> Paint : 실제로 그려짐 * 렌더링 트리 생성, 위치 계산과 그리는 단계의 비용이 큼 * 리액트는 이러한 부분의 성능을 개선하기 위해 virtual DOM을 이용함이벤트 * 비동기 작업인 setTimeout은 WebAPI에서 처리해줌 * setTimeout이 일정 초를 기다리면 콜백 큐로 함수가 이동함 * 비동기 작업이 Callback Queue에 쌓이고 * 이벤트 loop는 콜스택과 콜백큐를 모두 주시하고 있다가 * 콜스택이 비게 되면 콜백큐에서 하나씩 꺼내서 콜스택에 넣어줌 이벤트 버블링, 이벤트 캡쳐링 * 이벤트의 흐름은 3단계를 거치게 됨 * 1. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계 * 2. 타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계 * 3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계 * 이벤트 버블링 * 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는 것 * 위로 전달되면서 상위 요소의 event handler가 차례로 실행됨 * 이벤트 캡쳐링 * 이벤트가 위에서 아래로 내려가는 것 Day 3 (자바스크립트 중급 1)this * this * 메소드(객체안에 있는 함수)에서 this 사용 => 해당 객체를 가리킴(참조) * 함수에서 this 사용 => window 객체를 가리킴 * strict 모드에서는 함수에서 this 사용 => undefined을 가리킴 * constructor 함수에서 this 사용 => 빈 객체를 가리킴 // 화살표 함수 this => 항상 상위 scope의 this // Lexical this const my_audio = { title: "audio", categories: ["rock", "pop", "hiphop"], displayCategories() { // 여기서 this는 이 객체를 가리킴 this.categories.forEach((category) => { // 여기서 this는 상위 scope에 있는 this를 가리킴. 즉, 이 객체 console.log(`title: ${this.title} category: ${category}`); }); }, }; * forEach의 두번째 매개변수 => thisArg * 콜백 함수에서 this로 참조할 수 있게 됨 const my_audio2 = { title: "audio", categories: ["rock", "pop", "hiphop"], displayCategories() { this.categories.forEach( function (category) { // 이 this는 함수안에 있기 때문에 window를 가리킴 console.log(`title: ${this.title} category: ${category}`); }, { title: "audio" } // 두번째 매개 변수를 작성하게 되면 this가 이 object를 가리킴 // this // 여기에 this를 작성하게 되면 이 this는 메소드 안에 있는 것이 됨. 따라서 이 객체를 참조함 ); }, };closure // 예시 함수 function outerFunction(outerVariable) { return function innerFunction(innerVariable) { console.log("Outer Variable: " + outerVariable); console.log("Inner Variable: " + innerVariable); }; } const newFunction = outerFunction("outside"); newFunction("inside"); * 순서 * 1. outerFunction("outside")는 newFunction에 할당되는 즉시 호출됨 * 2. 호출되면 newFunction에는 innerFunction(innerVariable)이 할당됨 * 3. newFunction("inside")을 호출하면 innerFunction("inside")이 호출되고 이때 클로저는 innerFunction이 outerVariable이 "outside"였다는 것을 기억하고 엑세스 할 수 있다는 것을 말함 * Closure 정리 * 다른 함수 내부에 정의된 함수가 있는 경우 외부 함수가 실행을 완료하고 * 해당 변수가 해당 함수 외부에서 더 이상 엑세스할 수 없는 경우에도 * 해당 내부 함수는 외부 함수의 변수 및 범위에 엑세스할 수 있다.this와 closure는 어렴풋이 이해만 하고 막상 설명을 하려고 하면 말이 잘 안나오던 개념이었다. 강의를 2, 3번 반복해서 듣고 다른 자료도 같이 찾아보면서 공부했더니 이번 기회에 확실히 설명할 수 있을 정도로 이해할 수 있었다. 뿌듯하다. Day 4 (자바스크립트 중급 2)undefined vs null* 공통점 * 둘 다 원시 자료형, 각 타입(undefined, null)에서 각 값이 유일함 * undefined * 아무 값도 할당받지 않은 상태 * js 엔진이 변수를 초기화하기 위한 용도 * 개발자가 의도적으로 값이 없음을 표현하고 싶다면 null이 적절함 * null * 비어있는, 존재하지 않는 값을 의미 * null이 할당 되면 가비지 콜렉션이 수행됨얕은 비교 vs 깊은 비교* 얕은 비교 * 원시 자료형 -> 값을 비교 * 참조 자료형 -> 참조되는 위치 비교 * 깊은 비교 * 원시, 참조 자료형 -> 값을 비교얕은 복사, 얕은 동결 vs 깊은 복사, 깊은 동결* 얕은 복사 * Object.assign(target, source), spread operator * 첫번째 depth 즉, 얕은 부분만 복사가 되기 때문에 얕은 복사 * 얕은 동결 * Object.freeze(object) * 역시 얕은 동결이기 때문에 깊은 곳은 동결이 일어나지 않음 * 깊은 복사 * JSON.parse(JSON.stringify()) * spread operator : 얕은 복사를 여러번 반복하는 것과 동일한 효과 * structuredClone() * deep copy는 주로 lodash, Ramda등 라이브러리를 이용함함수 선언문 vs 함수 표현식* 함수 선언문은 호이스팅 영향 o * 함수 표현식은 호이스팅 영향 xIIFE (Immediately Invoked Function Expression)* 정의되자마자 즉시 실행되는 함수 * 형태 ( // 첫 번째 소괄호 -> 전역 선언을 막고, 함수 내부로 다른 변수 접근을 막음 function () { // Do Something... } )() // 두 번째 소괄호 -> IIFE를 생성하는 괄호 * 목적 * 전역 선언을 막고, 함수 내부로 다른 변수 접근을 막기 위함 * 이름 없는 함수를 만들기 위해 사용 * 연산자를 붙여서도 사용 가능하지만 화살표 함수는 (를 꼭 붙여야함Pure Function* 함수형 프로그래밍 패러다임의 한 부분 * 규칙 * 1. 같은 입력 값이 주어졌을 때, 언제나 같은 결과 값을 리턴함 * 2. 사이드 이펙트를 만들지 않음 (외부 상태에 영향을 받으면 안됨) * 사용하는 이유 * 1. 클린 코드를 위해서 * 2. 테스트를 쉽게 하기 위해서 * 3. 디버그를 쉽게 하기 위해서 * 4. 독립적인 코드를 위해서 (decoupled / independent) * 장점 * 1. 특정 함수가 다른 함수에 미치는 예기치 못한 영향을 최소화 * 2. 함수가 어떤 결과 값을 리턴할지 예측할 수 있음currying// curring function // static (매개 변수를 동적으로 늘리지 못함) function curry(f) { return function (a) { return function (b) { return function (c) { return f(a)(b)(c); }; }; }; } // dynamic // 매개 변수가 몇개든 curry로 바꿔줄 수 있음 function curry2(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)); }; } }; } Day 5 (OOP, 비동기)prototype* prototype * 자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속 받는 메커니즘 * prototype chain이라고도 함 * 더 적은 메모리, 코드 재사용성 증가 * 반복해서 사용되는 메소드가 있다면 prototype에 넣어주는 것이 좋음 * ObjectName.prototype.mathodName = ~~ * Object.create(함수 이름) // 사용 예시 function Person(name, email, birthday) { const person = Object.create(personPrototype); person.name = name; person.email = email; person.birthday = birthday; return person; } const personPrototype = { calculateAge() { const diff = Date.new() - this.birthday.getTime(); const ageDate = new Date(diff); return Math.abs(ageDate.getUTCFullYear() - 1970); }, }; ES6 class* 문법은 OOP방식을 이용하지만 내부에서는 prototype을 사용하여 작동 * 메소드가 자동으로 prototype에 들어감 * static을 사용하면 prototype에 들어가지 않고 constructor에 들어감 * 사용할 때는 인스턴스가 아닌 class 이름을 이용해서 사용해야 함 * static을 사용하는 경우 * 클래스의 필드를 사용하지 않는 독립적인 것을 생성할 때 사용 super* super * 부모 클래스의 생성자를 호출할 때 사용 * 부모 클래스의 메소드를 호출할 때 사용 CallBack, Promise, Async Await* JS는 싱글스레드 : 한번에 하나의 일 밖에 못함 * 비동기를 사용하면 병렬적으로 작업을 수행할 수 있음 * 비동기 작업이 어떠한 비동기 작업을 의존하고 있을 경우 * -> CallBack, Promise, Async Await을 사용해서 처리할 수 있음 * Callback * 단점 * 1. 가독성이 떨어짐 * 2. 모든 콜백에서 각각 에러 핸들링을 해줘야 함 * Promise (ES6) * 3가지의 상태로 나뉨 * pending(대기) : 비동기 로직을 처리 중인 상태 * fulfilled : 처리가 완료되어 결과값을 반환한 상태 * rejected : 비동기 처리가 실패하거나 오류가 발생한 상태 * Promise.all([]) : 배열 안에 있는 모든 작업이 fulfilled 상태가 되어야 성공으로 침 * 하나라도 rejected될 경우 첫 번째로 실패한 작업의 이유가 반환됨 * Promise.race([]) : Promise * 배열 안에 있는 작업 중 가장 먼저 완료된 것의 결과 값을 그대로 이행하거나 거부 * Async Await (ES7) * 비동기 요청을 동기식으로 작성 가능하게 해줌 * 가독성이 좋음 일주일 회고단순한 JS 문법이 아닌 내부에서 JS가 어떻게 동작하는지, 개념의 정확한 설명이 무엇인지 등을 깊게 공부할 수 있던 시간이었습니다.제가 JS의 어떤 부분이 부족한지 뼈저리게 느낄 수 있었고, 앞으로 더 성장할 수 있다는 생각으로 열심히 공부해보려고 합니다.강의를 수동적으로 듣지 않고 코드도 작성해보고 추가적으로 궁금한 부분을 찾아보면서 능동적으로 공부했더니 더 머리에 잘 남은 것 같습니다.앞으로의 스터디도 능동적으로 참여해서 강의 내용을 제 것으로 만드는 것이 목표입니다.과제를 만들면서 js에 대한 이해도가 정말 많이 높아진 것이 스스로 느껴집니다. 아쉬운 점스터디 첫 주이다 보니 정말 기억하고 싶은 부분만 작성을 해두었는데도 내용이 너무 길어진 것 같아 아쉽습니다.2주차부터는 조금 더 가독성 있는 회고를 작성하고 싶습니다. 강의 출처강의 주소 : https://www.inflearn.com/course/따라하며-배우는-자바스크립트/코치님 성함 : John Ahn