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

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

강호연 13일 전

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 음식 메뉴앱

image

  • 로직 플로우

  1. 메뉴 항목들이 속한 ul에 click eventListener를 부착하여 개개의 li가 아닌 ul에서 이벤트를 처리한다.

  2. 클릭된 요소의 name 속성(카테고리 정보)와 data.js에서 갖고온 데이터를 renderMenu 함수에 전달한다.

  3. renderMenu함수는 data에서 선택된 메뉴에 해당하는 데이터를 선별 후 화면에 그린다.

     

     

  • 회고

하는 내내 리액트면 금방하는데 라는 생각을 했던 것 같다. 그래서 리액트 처럼 랜더로직과 데이터를 분리하여 만드는 것을 목표로 했다.

 

미션 2 가위바위보

image

  • 로직 플로우

 

  1. 시작하기를 누르면 게임화면으로 넘어간다.

     

  2. 컴퓨터는 가위 바위 보 중 랜덤으로 낸다.

     

  3. 가위 바위 보 중 뭐든 냈을 경우에 승패에 따라 스코어를 갱신하고 결과를 보여준다.

     

  4. 한 세트가 끝나면 종합 스코어를 표시하고, 다시하기 버튼으로 다시할 수 있도록 한다.

     

  • 회고

     

    만들면서 시행착오를 가장 많이 한 프로젝트이다. setTimeout과 setInterval을 원없이 써봤다. 기본 구현 사항이 너무 시시하고 디자인도 좀 아쉬워서, 두 부분을 좀 더 확장해봤다. 미션을 보고 짱꼔뽀가 생각나서 디자인은 거기서 레퍼런스를 얻어 만들었고, 로직은 '안내면 진거'를 추가 했다. 로직 자체는 간단한데 interval을 어디서 clear할지를 고민해야했다. 우측의 카운트 다운과 가운데 컴퓨터 픽이 바뀌는 두 부분이 서로 다른 interval로 돌아가기 떄문이다. 이 때문에 두 interval을 동시에 관리할 수 있는 패턴을 고안하여 설계했다.

image안 내면 진거 가위바위보

 

미션 3 퀴즈 앱

image

  • 로직 플로우

 

  1. 문제 데이터를 html에 바인딩

  2. 고룬 선택지에 따라 화면을 분기

    1. 정답인 경우

    2. 오답인 경우

       

  3. 다음 버튼을 눌러 다음 문제로 ( 갖고올 데이터 위치++)

  • 회고

     

    미션 영상을 여러번 돌려봤지만 도무지 뭘 만들어야하는 건지 알 수 없었다. 최소 구현 스펙을 서술해주면 좋겠다. 그래서 로직 자체보단 데이터처리나 디자인 처리에 주안점을 두고 미션을 수행했다. 퀴즈 데이터는 chatGPT에게 프론트엔드 퀴즈 10개를 내달라고 부탁해서 데이터를 갖고 왔다. 그러자 문제 데이터를 txt로 주길래 연습할 겸 fs로 데이터를 갖고와서 데이터를 파싱하는 함수를 작성했다(data.js),

    함수를 작성하던 중 문득 'json형식으로 퀴즈 데이터 만들어줘' 라고 질문하면 되지 않을까 싶어서 해보니 정말 됐다....그러나 연습이니 변수명만 참고하고 직접 해보았다. 또, 알기만 하고 써보진 않았던 ::after 선택자를 활용해서 정오답 처리(o, x)를 진행했다.

번외로 가장 디테일을 많이 챙긴 미션이다.

배경색은 안과의사가 추천하는 눈이 피로하지 않은 색이다. 퀴즈 푸는 데 머리만 아파야지 눈이 아프면 안 되지, 안 그런가?

문제 부분의 텍스트는 수능에서 쓰는 중명조체이고 css font-face를 통해 갖고 왔다.

정답 표시 파트에서 선택지에 hover시 노란색으로 변하는 css는 정오답 선택지에 대해서는 무시된다. (정오답 선택지에 !import 붙임)

 

미션 4 리스트 앱
imageimage

리액트 기본예제에서 지겹도록 해본 todo앱이다. MVC 패턴을 사용해보려 노력했다. 또 no-CSS 프로젝트로 html만을 이용해서 페이지를 구성했다.

 

  • 로직 플로우

 

  • 리스트 추가 및 삭제

    1. 데이터 수정 (MODEL)

      • 데이터 추가 : bookData 배열에 데이터를 추가한다.

      • 데이터 삭제 : bookData 배열에서 데이터를 삭제한다.

    2. 랜더링 (CONTROL) : 수정된 데이터를 받아와서 template(VIEW)에 데이터를 바인딩하여 랜더링

    3. 알림 : 데이터 수정 후 성공 알림을 띄움 (dialog //화면 중간에 팝업창 뜸)

  • 회고

     

    유저 플로우를 생각하여 입력 편의 개선에 신경을 썼다. 별 건 아니지만 꽤 편하다.

    1. 페이지 최초 진입시 제목 input에 autofocus되도록 속성을 추가함

    2. 책을 등록 후 제목 input을 비우고, 제목 input에 focus가 되도록 함

       

       

      생각보다 다양한 HTML 테그가 있다는 것을 알게된 프로젝트이다. dialog, fieldset, legend, table 등 평소 잘 안 써본 테그들을 적극 기용하여 마크업에 힘을 썼다. 특히 dialog 테그를 조작하는 과정에서 js로 html 속성을 다루는 방법을 심도 있게 학습할 수 있던 것 같다.

 

미션 5 GitHub Finder 앱

image

image

fetch를 통해 github api를 활용해보는 것이 목표인 프로젝트이다. Next.js에서 지겹게 해본 부분이라 쉽게 해결할 수 있었다.

 

  • 로직 플로우

     

     

    1. 검색창 input에 input 이벤트리스너를 부착하여 검색어를 받는다.

    2. input의 값이 바뀔 때마다 fetch 함수를 통해 데이터를 불러온다.

    3. 가져온 데이터를 바인딩한다.

       

      (단, 데이터가 없는 경우 (response.message == 'Not Found') 에는 유저 데이터를 표시하지 않는다.)

      .

     

  • 회고

     

    github OAuth 인증하고 토근을 같이 보내지 않으면 시간당 20건의 요청만 거부되지 않고 할 수 있다. 이 부분을 찾아보고 해결해도 잘 되지 않았다.. mock 데이터를 활용할까 했지만 데이터를 만드는 것이 더 시간이 걸릴 것 같아서 요청을 최소화하면서 날마다 조금씩 작업을 했다. 다행이 어렵진 않아서 금방 끝났지만 다음에는 캐싱을 하든 뭘 하든 해결책을 강구해야할 것 같다.

 

미션 6 비밀번호 생성 앱

image

  • 로직 플로우

     

     

    1. 선택된 옵션 항목에 따라 문자풀을 생성한다.

    2. 생성할 비밀번호 길이와 문자풀을 통해 랜덤 비밀번호를 생생한다.

    3. 생성된 비밀번호를 결과창에 표시한다.

       

     

  • 회고

     

    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. 타이핑 테스트는 가장 재밌는 미션인데 시간이 너무 부족해서 무사히 마무리할 수 있을지 모르겠다.

댓글을 작성해보세요.