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

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

슬프구나 25일 전

인프런 워밍업 클럽이 스터디 1기 FE 를 시작한지 어느덧 1주차

현재 과제 1~7까지 완료를 해놓은 상태다.

  1. 음식 메뉴 앱

  2. 가위 바위 보

  3. 퀴즈

  4. 책 리스트 나열

  5. Github Finder

  6. 비밀번호 생성

  7. 타이핑 테스트

 

과제들을 진행하면서, DOM API 에 대한 복기를 할 수 있어서 좋았다. 그리고 퀴즈 및 타이핑은 이런저런 로직을 고민하게 해줘서 좋았다.

 

퀴즈는 처음에 뭔가 가상의 데이터를 통해서 처리를 해야하는줄 알았다.(실제 현업에서는 DB에 문제은행식으로 관리하는걸로 알고 있다.)

이걸 Math 객체를 생성하여 랜덤하게 문제와 정답을 생성하는 방식으로 처리하였다.

Math.random() 함수는 0~1 사이의 난수를 발생 시킨다.(1은 포함하지 않는다)

Math.random() * 10; 을 하게된다면 0~9까지의 난수를 얻을 수 있다. 이때 소수점 이하를 버려주면 정수값을 추출하는거다.

그러면, 1~10까지를 얻고싶다면 어떻게 해야할까? 간단하다.

min = 1;

max = 10;

(Math.random() * (max - min + 1) + min);

max - min + 1 = 10

0 ~ 9 까지 난수를 얻을 수 있다.
그럼 여기에, 소수점 버린 정수에 min 을 더해주면?
1~10 까지가 되는거다.

 

그리고 반복되는 UI 는 template 요소를 활용하여 처리 하였다.

<template id="myTemplate">
    <p>This is a template. It will not be rendered.</p>
</template>

template 요소는 렌더링 되지 않는다. 렌더링 하려면, JS로 무조건 조작을 해줘야 한다.
물론 DOM Node 를 조작할 때, 원본 Node 에 영향을 끼치지 않으려면 cloneNode 또는 importNode 등으로 조작을 해줘야 한다.

 

마무리하며

  • 변수와 데이터 타입: 자바스크립트의 기본적인 변수 선언부터 시작하여, 다양한 데이터 타입(문자열, 숫자, 객체 등)을 배웠습니다.

  • 함수: 함수의 기본적인 선언 방법과 화살표 함수 등 최신 문법에 대해서도 배웠습니다.

  • DOM 조작: HTML 요소를 자바스크립트를 통해 조작하는 방법을 배우고, 실제로 몇 가지 프로젝트를 통해 연습했습니다.

  • 비동기 처리: Promise, async/await를 통해 비동기 처리 방법을 배웠습니다. API 호출과 같은 작업을 처리하는 방법을 실습했습니다.

     

  • null 과 undefined: 둘다 원시타입이다. 하지만 typeof 로 null 을 출력해보면 object 를 출력한다. 이는 JS 초기 설계 오류가 지금까지 이어져온것이며 웹 호환성을 위해 수정을 하지 않았다. 그러니 null 은 체크할때 이 특성을 기억해야 한다.

자바스크립트 공부를 통해, 단순히 코드를 작성하는 것 이상의 귀중한 경험을 하였다. 문제 해결 능력, 창의적 사고, 그리고 끊임없는 학습의 중요성을 깨닫게 되었으며, 앞으로도 지속적으로 새로운 기술을 배우며 성장해 나갈 것이다.

댓글을 작성해보세요.