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

강의를 학습하며 새로 배운 점2주차 학습 범위 :따라하며 배우는 자바스크립트 A-Z 8~10섹션, 따라하며 배우는 React A-Z 2~6섹션이번주는 리액트가 진도에 포함됐다.완전히 처음하는 것은 아니지만 기존에 그냥 리액트가 뭔지 맛보기 수준으로 해보았기에많이 복잡하고 어려웠다. 강의 내용자체는 들으면서 이해는 되지만 막상 내가 프로젝트를 만드려고 하면 문제가 생겼다.특히 tailwindcss를 사용하려고 할 때는 설치하고 지우고 설치하고 지우고를 몇번 반복했는데도 동작하지 않았다...경로도 바꿔보고 혹시 터미널 문제인가 싶어서 ubuntu도 설치해보고 했는데 소용없었다 ㅠㅠ(이전엔 맥북으로 해서 zsh를 썼을때는 프레임워크나 등등을 설치할때 문제가 된 적이 거의 없었고, 윈도우에서 bash를 사용하니 npx 명령어 부터 작동하지 않아서 혹시 싶었다..)리액트를 배우면서 과제까지 해보려고 하니 너무 시간도 부족하고 어려워서 이번주는 배우는 것에만 집중하려고 했다그래서 다음주에 심기일전하고 다시 과제를 해보려고 한다.과제 진행 회고2주차 과제비밀번호 생성 앱 만들기타이핑 테스트 앱 만들기 디즈니 플러스 앱 만들기포켓몬 도감 앱 만들기이번주는 리액트 과제를 포기했다... 다음주에 열심히 해보려고 한다. 비밀번호 생성 앱 만들기가장 여유있을때 한 과제인 만큼 최대한 배운걸 활용해보려고 했다. 객체에 선택지들에 맞는 글자를 넣어두고 ex) 숫자 = "0123456789"랜덤으로 선택된 선택지를 선정 (filter 사용), 선택지 안에 있는 문자열을 인덱스로 접근해서 랜덤하게 하나를 가져왔다그리고 입력한 비밀번호 길이에 맞게 반복해서 비밀번호를 만들었다.filter를 깊게 공부하면서 동적 접근이라는 것도 배웠다 처음엔 이해가 안됐지만 (사실 지금도)사용해보니 훨씬 코드를 단축할 수 있었다. 타이핑 테스트 앱 만들기랜덤 영어 명언 api를 불러 와서 진행했다. (https://api.adviceslip.com/advice)어렸을때 한컴 타자연습을 많이, 그리고 재미있게 했어서 앱에 어떤 기능을 넣어야 하는지는 명확했는데타속이라는 걸 어떤 기준으로 해야하는지는 어려워서 다른 사람들이 한 것들을 많이 검색해보며 참고했다

인프런 워밍업 스터디 클럽 3기 (FE) _ 1주차 발자국

강의를 학습하며 새로 배운 점1주차 학습 범위 :따라하며 배우는 자바스크립트 A-Z 1~ 7섹션 그 동안 전시 프로젝트에 사용할 기능들 위주로 겉핥기식으로 독학해 배우다가기초부터 다시 배우니 그 동안 왜 이렇게 되는지 모른체 급한대로 사용했던 몇가지 지식들을 습득하게 되었다.기억에 남는 것들을 상기해보면this키워드는 정말 많이 이용했으면서 정확히 무엇을 가르키는지 모른체 되는대로 사용해왔는데이젠 정확하게 지칭해 사용할 수 있을 것 같고생성자 함수도 대강 사용해왔는데, 강의 외에도 직접 검색해보며 세세하게 정리한 것 같다또 궁금해서 버블링과 캡쳐링 강의를 들으면서 다양한 중첩 요소들의 eventListner함수 두번째 인자에 true, false를 여러 방식으로 넣어보며 실험도 해보았고변수 참조를 Closure를 배우면서는 let a = 'a'; function functionA() { function functionB() { let c = 'c'; console.log(a, b, c); } let b = 'b'; console.log(a, b); functionB(); }; functionA();여기서 변수 b가 엑세스 될 수 있는 이유를 functionB와 같은 A함수 안에서 같은 레벨 위치에 정의되어서 라고주먹구구식으로 이해하고 있었는데 정확한 이유를 알 수 있게 되었다.이처럼 잘못된 방식으로 이해하고 있던 개념들을 바로잡게 되었고,아예 처음 들어보았지만 중요한 개념들도 배울 수 있었다.앞으로 프로젝트를 진행할 때 내가 작성한 코드가 작동하는 원인과 결과에 대해 제대로 이해할 수 있을 것 같아 기대가 된다.과제 진행 회고1주차 과제음식 메뉴 앱 만들기가위 바위 보 앱 만들기퀴즈 앱 만들기책 리스트 나열 앱 만들기Gihub Finder 앱 만들기음식 메뉴 앱아르바이트를 했던 식당의 메뉴들로 과제를 진행했다. 정말 오랜만에 코드를 작성하니 js 보다도 html, css에서 시간이 더 걸렸던 것 같다. 나중에 보니 내용에 맞게 각 메뉴 박스의 높이값이 내용의 양 만큼만 되도록 하려고 의도했는데 어쩌다 양 쪽 메뉴 박스 중 더 높은 항목에 맞춰 조정되게 해버린 것 같다 여유가 될 때 수정해야겠다. 가위 바위 보 앱비교적 쉽게 구상할 수 있었는데, 결과값이 즉각적으로 나오는게 뭔가 어색해서 setTimeout 함수로 늦추다 의도치 않게 컴퓨터의 선택지가 즉각적으로 나오지 않게 되었는데 값을 할당해주는 코드의 위치만 바꾸면 해결될 문제를 졸려서 꽤 오랜 시간 할애해 해결했다. 퀴즈 앱 만들기예시에서는 수학 퀴즈였는데, 숫자가 아닌 다른 항목도 랜덤으로 가져오는 것을 해보고 싶어 수도 맞추기 퀴즈로 구상했다. 퀴즈는 5문제가 출제되고 매번 다른 문제와 선택지가 나오도록 했다. 배열로 많은 선택지 항목들과 문제 항목을 준비하고 랜덤으로 가져와 정답인 선택지를 랜덤으로 배치시키도록 했다. 한계점은 결국엔 문서상에 준비된 문제와 선택지 중에서 출제된다는 것인데. 나중에는 출제 자체를 그때 그때 ai가 하게 해서 매번 새로운 문제와 선택지를 제시하는 프로젝트를 해보고 싶다. 책 리스트 나열 앱책에서 영화로 주제를 바꾸고 별점주기 항목을 추가했다.별점주는 부분은 특수문자 별을 배열로 불러와 클릭시 하위 인덱스의 별들에 클래스를 추가해서 색이 바뀌도록 날 것(?)의 방식으로 구현했다 깃허브 유저 찾기시간이 부족해 주요 기능만 구현해보았다.hotsunny라는 유저를 찾는 과정에 거치는 h,ho,hot,,,hotsuny 8명의 가상의 유저 정보를 객체와 배열을 이용해 담고 강의에서 배운 생성자 함수를 처음으로 제대로 이용해서 innerHTML로 인풋값에 따라 렌더했다. 각 인풋값에 맞는 유저를 어떻게 할당해서 렌더할까에 대해 가장 고심했던 것 같다. 자주 사용되는 기능이라 참고할 곳은 많았는데 배우지 않은 기능을 이용한게 많아서 도움되지 않았다.