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

day6 - 6번 과제https://github.com/jjajan2/inflearn_study/tree/main/day6_password_generator처음에는 아스키코드 번호를 이용해서 만들려고했지만 특수문자의 경우 각각 적어줘야되기 때문에 한번에 문자열을 넣는 방식을 선택했다. range를 사용할 일이 많이 없어서 거의 처음으로 다뤄보았는데, 스타일의 경우 따로 div를 넣어서 변경해주는 방식으로 하는것같았다. 이 부분은 나중에 추가적으로 보고 적용해봐야겠다!day7 - 7번 과제https://github.com/jjajan2/inflearn_study/tree/main/day7_typing_speed7가지의 과제를 하면서 타이밍 스피트 테스트 과제가 생각보다 어렵게 느껴졌다. 한 문장을 완성하고 다음문장으로 넘어갈때 Error와 Accuracy가 누적되지않고 0으로 초기화되는 현상이 있었는데, totalErrors와 totalAccuracy를 추가해서 한 문장이 끝날때마다 누적하는 방식으로 해결했다! 생각해보면 별거 아니었던것같은데 바로 생각해내지 못해서 아쉽다.그리고 7번 타이핑 스피드 과제와 3번 퀴즈 과제에서 json파일로 데이터를 따로 빼서 사용했는데, 과제를 하던 도중 콘솔창에 에러가 생기는걸 발견했다.이 에러 메시지는 import 구문에서 assert 옵션을 사용하는 것이 더 이상 권장되지 않으며, 향후 V8 v12.6과 Chrome 126부터 지원이 중단될 것이라는 내용이고, 과거에 정적 분석을 위해 사용되었다고 한다. 이를 대신해 with을 사용하도록 권장되고있다. 라는것을 알게되었다. 하지만 fetch를 사용하는 방식으로 변경했다. 7번과제를 할때까지 몰랐던거 보면 3번과제를 할때 콘솔창을 제대로 확인하지 않았던것 같다ㅠㅠ 에러를 꼼꼼히 확인하는 습관을 기르자..!그리고 타이머를 체크하는 부분을 setTimeout과 반복문을 사용해서 만들었는데, 다 만들고나니까 코드가 허술하다는 생각이 들었다.. 그래서 setInterval을 사용하는 방식으로 변경했다!day9 - 8번 과제https://github.com/jjajan2/inflearn_study/tree/main/day9_budget_calculator예산 계산기 과제를 스터디 팀원분들과 함께 코드리뷰를 했다!총 합계를 계산하는 부분을 map을 사용해서 계산하는 코드를 작성했는데, 팀원분이 reduce를 사용하지 않은 이유를 물어보셨다..! 사실 reduce를 생각하지 못했어서 바로 reduce를 사용하는 방식으로 변경했다. (감사합니다! 😊)나도 팀원분들의 코드를 보면서 피드백을 해드리고 싶었는데, 아직 실력이 부족해서 딱히 해드릴수 있는게 없었다..확실한건 다른사람이 작성한 코드를 보는건 많은 도움이 되는것같다!인프런 스터디가 끝나도 다른 여러가지 스터디, 프로젝트를 해보면서 실력을 많이 키워야겠다

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

day2 - 1번 과제https://github.com/jjajan2/inflearn_study/tree/main/day2_food_menu따라하며 배우는 자바스크립트 A-Z 강의 섹션 1~3까지 듣고, 과제가 있었다!간단하게 메뉴탭을 제작하는 과제였다. 탭을 클릭했을때, 해당 카테고리에 맞는 메뉴를 보여주는 과제였다. 별다른 기능이 없기에 가독성이 좋은 코드를 만들고 싶어서 템플릿 리터럴을 사용해 코드를 작성했다. 과제를 완료하고나서, 다른분들은 어떻게 했을지 궁금해서 다른분의 코드를 확인해보니, createElement와 appendChild 를 사용해서 작성하시는 분들이 많았다.그래서 두가지 방식의 차이를 찾아보았다.createElement()생성된 요소에 이벤트 리스너를 추가하거나 스타일을 적용하기 쉽다.코드의 가독성과 유지보수성이 좋다.브라우저 지원 97.92%템플릿 리터럴코드가 간결하고 읽기 쉽다.생성된 HTML 요소에 이벤트 리스너를 추가하거나 스타일을 적용하려면 별도의 작업이 필요브라우저 지원97.11%Opera 및 blackberry에서 지원하지 않음💡 결론 : 두 방식 모두 큰 차이가 없기 때문에 프로젝트의 요구사항과 개발자의 선호도에 따라 선택할 수 있다.참고 링크 : https://levelup.gitconnected.com/javascript-createelement-vs-template-literals-baa50ec2e941 day3 - 2번 과제https://github.com/jjajan2/inflearn_study/tree/main/day3_rock_paper_scissors처음에는 이미지를 넣지않고 만들었지만, 사용자가 보기에 불편하다는 느낌이 있어서 이미지를 삽입했다! day4 - 3번 과제https://github.com/jjajan2/inflearn_study/tree/main/day4_quiz오늘은 퀴즈 앱을 만드는 과제가 있었다. 가위바위보 앱과 흐름은 어느정도 비슷해서 어렵지 않았지만, 정답이 정해져있어서 생기는 궁금증이 있었다. 내가 처음에 작성한 question.json 파일의 경우 { "question": "자바스크립트에서 변수 또는 상수를 선언하는 키워드가 아닌 것은?", "option": ["const", "let", "init", "var"], "correct": "init" }, 이런 형태의 구조였는데, 코드를 작성하다보니 correct 에 정답의 index를 적어두어도 되겠다는 생각을 했다. 하지만 option 배열의 구조가 변경될 경우 correct의 값도 변경해주어야하니 번거로움이 생길까 하는 우려가 생겼다.정답을 적어두는 방식은 가독성이 편리하고, 코드 작성, 관리 하기에는 index를 적어두는 것이 편하겠다는 생각이 들었다. 하지만 가장 처음에 작성해둔 가독성이 좋은 방식으로 진행하기로 했다!그리고 코드를 거의 다 작성하고나서, 문제를 풀고 다음버튼을 누르기 전에 문제 버튼을 다시 누르면 아이콘들이 계속해서 추가되는 문제를 발견했다.그래서 버튼을 클릭 하고 다음으로 넘어가기전 버튼을 disabled 하는 방식으로 해결했다! day5 - 4번 과제https://github.com/jjajan2/inflearn_study/tree/main/day5_book_list이번 과제를 하면서 로컬호스트에 공부할 수 있어서 좋았다! 처음에는 책 자체를 로컬호스트에 바로 저장하고,로컬호스트 값을 전부 가져오는 방식으로 만들었는데, 이럴경우 다른 웹페이지에서 저장된 로컬호스트 데이터까지 가져오게 되는 문제가 생겨서 book_list로 키를 지정하고, 배열에 저장하는 방식으로 변경했다!완료하고나니까 간단한 문제였는데 바로 생각하지 못했던게 아쉽다. day5 - 5번 과제https://github.com/jjajan2/inflearn_study/tree/main/day5_github_finder처음에 Octokit.js 를 사용하는 방식으로 만들었다가, 굳이 그럴필요없이 axios나 fetch를 사용하는 방식으로 변경했다!여태 axios만 사용해봤는데 fetch를 사용하는 방법도 axios와 크게 다르지 않아서 금방 적응할 수 있었다. 1주차 과제들은 Section 1 ~ 3 에서 배운 개념을 지루하지 않은 토이프로젝트로 직접 사용할 수 있어서 좋았다.그냥 강의를 다시 듣거나 기록만 하는것보다 더 복습이 잘 되는 느낌이었다. 확실히 강의만 듣는거랑 실제로 코드를 쳐보는것은 확실한 차이가 있었다. 처음에 큰 덩어리로 과제를 봤을때는 어디서 부터 시작해야될지 막막했는데, 큰 덩어리를 작게 나눠서 차근차근 작성하니까 생각보다는 금방 할 수 있었다!1주차는 강의 보다는 과제에 집중했던 느낌이라서 아쉽다. 2주차에는 강의도 성실하게 잘 들어야겠다는 생각이 든다.기초가 탄탄해야 사소한 실수를 하지 않는 것 같다. 2주차에는 1주차 강의도 틈틈이 복습해봐야겠다.