🚝 1층 스타벅스에 들러서 간단하게 아침과 커피를 먹고 난 뒤에 에스컬레이터를 타고 교육장으로 올라왔다!!

오늘 AWS 본사를 방문한 이유는

바로바로

AWS JAM !!

AWS JAM에서는 여러가지 종류의 비즈니스 상황을 제시해준다.

여러가지 비즈니스 시나리오에서 문제 상황에 맞닥뜨렸을 때 다양한 AWS 서비스를 사용하여 해당 문제를 해결하는 방식으로, 해커톤처럼 과제를 진행하는 방식이다!!😃

참가 계기

요즘은 프론트엔드 개발자여도 AWS에 대한 지식이 거의 필수라고 들었다. 무엇보다 세계적으로 인지도 있고 수준 높은 AWS의 한국 본사를 방문해서 AWS가 제공하는 교육을 들을 수 있다는 점이 매력적으로 다가와서 교육을 받기로 결정했다!

JAM 진행 방식에 대해서!

초격차 캠프 4기 프론트엔드 인원이 팀을 나누어서 4시간 30분 동안 여러가지 시나리오들을 가지고 문제를 풀게 되었다.

그런데, 단순히 문제를 풀기만 하면 같은 점수를 받는 것이 아니라는 점!

• 힌트를 얼마나 사용했는지
• 어떤 난이도의 문제를 풀었는지
• 총 몇개의 문제를 풀었는지

이와 같은 조건에 따라서 점수에 차등이 생기기 때문에 순위가 나뉘는 시스템...~

실시간으로 변하는 순위를 보면서 자극도 받고 열심히 할 수 있다.

우리 팀을 소개합니다🤍

우리팀은 킹왕짱 똑똑이 기선님과 저, 총 2명으로 이루어져 있습니다
^>^

AWS 해커톤 문제에 대해서

(저작권 걸릴까봐 시나리오 부분은 자르고, 어떤 AWS 서비스를 사용해서 어떤 난이도의 문제를 푸는지 직관적으로 보여주고 싶어서 캡쳐본 첨부함!)

Lambda와 EC2, CodeWhisperer 등을 활용하는 문제에 대해서도 접하게 되었는데 솔직히 하나도 모르겠더라...!!!! (충격고백) 😭

한편으로는 이번 기회가 아니었으면 이런 저런 이유로, JS나 React 공부가 더 급하다고 생각하면서 우선순위에서 밀렸을 것 같아서 순위는 낮았지만 오히려 럭키비키일지도...?

그래서 작성해보는 AWS Lambda와 CodeWhisperer, EC2 알아보기!

1. AWS Lambda

AWS Lambda는 서버리스 컴퓨팅 서비스! 즉, 서버를 직접 관리하지 않고도 코드를 실행할 수 있는 서비스를 말한다. 특정 이벤트가 발생할 때 자동으로 트리거되어 동작하며, 비용은 사용한 만큼만 지불하게 된다.

*특징: *

이벤트 기반 - Lambda 함수는 AWS 서비스(예: S3, DynamoDB, API Gateway)에서 이벤트를 수신할 때마다 자동으로 실행된다.

자동 확장 - 트래픽이 증가하면 Lambda가 자동으로 확장하여 병렬로 여러 요청을 처리한다.

다양한 언어 지원 - Node.js, Python, Java, Go, Ruby 등 다양한 언어를 지원한다.

사용 사례 - 이미지 처리, 로그 분석, API 백엔드 처리, IoT 데이터 처리 등 다양한 서버리스 워크로드에 활용된다.

2. AWS CodeWhisperer

AWS CodeWhisperer는 AI 기반 코드 생성 도구이다!!

특징 :

자동 코드 제안 - 작성 중인 코드에 따라 코드 블록을 자동으로 제안해준다. 변수 이름, 함수 이름, 주석 등을 분석해서 코드를 추천한다. ** 다양한 프로그래밍 언어 지원 -** Python, JavaScript, Java, TypeScript 등을 포함한 여러 프로그래밍 언어에서 사용가능하다.

코드 보안 및 컴플라이언스 검사 - 제안된 코드가 보안이나 법적 문제를 일으킬 수 있는지 검사해준다.

IDE 통합 - Visual Studio Code와 AWS Cloud9 등의 IDE에서 바로 사용 가능하다.

3. EC2(Amazon Elastic Compute Cloud)

AWS의 가상 서버 서비스. 클라우드에서 컴퓨팅 파워를 쉽게 사용할 수 있게 해준다.

특징:

가상 서버 - 원하는 운영체제를 선택해 가상 서버를 만드는 서비스.

다양한 인스턴스 타입 - 필요에 따라 CPU, 메모리, 스토리지 성능을 선택할 수 있는 여러 종류의 인스턴스 제공한다.

자동 스케일링 - 사용량에 맞춰 서버 수를 자동으로 늘리거나 줄여준다.

보안 - 네트워크와 접근을 관리할 수 있는 보안 기능이 있다.

유연한 가격 - 사용한 만큼 지불하는 온디맨드, 장기 예약 시 할인받는 리저브드, 경매 방식의 스팟 인스턴스 등 다양한 가격 옵션이 존재한다.

경험을 통해 느낀 점...🤔

이번 AWS JAM (해커톤)을 통해서 다양한 AWS의 서비스를 경험할 수 있었고, 나의 부족한 점에 대해서도 많이 느꼈다...!

서울 한복판에서 이런 세계적인 대기업이 제공하는 교육을 받는다는 것도 나에게 동기부여가 많이 되었구,

최근들어 마음이 예전같지 않아서 많이 심란했는데 결과를 떠나서 문제를 열심히 풀어보고 고민을 해보는 시간 그 자체로 리프레쉬가 되었기 때문에....

오늘을 계기로 다시 열심히 해보자고 생각이 들었음!!

물론 프론트엔드의 기본인 JS도, 협업 프로젝트에서 필수라고 할 수 있는 React도 중요하겠지만 AWS도 손에서 놓지 말고 계속 가져가야겠다...

🌟👍💪

: 여러개의 파일을 하나의 파일로 합치는 것.

번들링의 효과

1. 파일의 수를 줄여 HTTP 요청의 수를 줄임 ➡️ 속도 향상
2. 코드의 압축 ➡️ 불필요한 공백, 주석의 삭제 ➡️파일 크기 축소
3. 사용되지 않는 코드 제거 ➡️ 최적화

번들링 도구의 종류

vite의 경우, Rollup을, CRA는 Webpack을 사용해서 번들링을 할 수 있다.

나는 주로 vite를 사용하기 때문에 vite에서 번들링해주는 코드를 알아보았다.

npm run build

터미널에 이렇게 명령어를 적고 실행시켜주면 번들링된 파일이 담긴 폴더가 생성된다.

코드 스플리팅 Code Splitting

번들링의 반대 개념. 기본적으로는 번들링을 진행하고 필요한 부분만 추가적으로 작게 나누어서 스플릿 해주는 것을 말함.

코드 스플리팅의 효과

1. 초기 로딩 속도의 개선 ➡️  코드 번들링을 통해 하나의 파일로 묶이면 HTTP 요청의 수는 줄지만, 파일의 크기가 커질수록 초기 로딩 속도가 저하됨. 따라서 빠른 초기 로딩이 필요한 파일에 한해 코드 스플리팅 진행

2. 불필요한 코드 로드의 방지 ➡️  코드를 쪼개두었기 때문에, 필요한 부분에 한해서 그때 끄때 보내줄 수가 있게 됨.

3. 데이터 비용 절감 ➡️  무조건 전체를 다보내는 것이 아니라 쪼개서 필요한 부분만 보내니까 데이터가 적게 사용됨.

React의 lazy나 Suspense도 대표적인 코드 스플리팅 방법!

➡️ BUT! lazy나 Suspense는 리액트 내의 컴포넌트 코드만 스플리팅 가능

리액트 내부의 컴포넌트 코드 이외에 다른 코드를 스플리팅 하고 싶다면?

vite.config.js 로 들어가서

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  //build 부분 부터 복사 붙여넣기
  build: {
    outDir: "docs",
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.indexOf("node_modules") !== -1) {
            const module = id.split("node_modules/").pop().split("/")[0];
            return `vendor-${module}`;
          }
        },
      },
    },
  },
});

해당 코드를 사용해주면 된다.

rollupOptions에서 수동으로 코드 덩어리manualChunks에 대한 설정을 지정해주는 것이다.

1. state와 props

리액트에서 상태 관리를 위한 기본적인 방법은 컴포넌트의 state와 props를 사용하는 것이다.

state는 컴포넌트 내부에서 관리되는 데이터를 저장하며, props는 부모 컴포넌트로부터 전달되는 데이터를 의미한다.

setState 함수를 통해 state를 업데이트하면 화면이 리렌더링된다.

2. Context API

Context API는 React version 16부터 사용 가능한 리액트의 내장 API이다.

앱의 모든 컴포넌트에서 사용할 데이터를 전달해야할 때 유용하다.

2-1. Context API 사용법

React.createContext (컨텍스트의 생성)

const MyContext = React.createContext();

상위 레벨에 매칭되는 provider가 없는 경우에 기본값이 사용된다.

*Context.Provider *

하위 컴포넌트들이 컨택스트의 데이터를 받을 수 있도록 하기 위해 provider를 사용한다.

<MyContext.Provider value={특정 값}>

특정한 컨텍스트의 데이터에 대한 접근 권한을 주기 위해서는 Context.Provider로 하위 컴포넌트들을 감싸주면 된다.

Provider에는 value라는 prop이 있고, 이 prop은 Provider 컴포넌트 하위에 있는 컴포넌트들에 전달된다.

Context.Consumer

<MyContext.Consumer>
  {value => /*컨택스트 값에 따른 컴포넌트의 렌더링 발생*/}

컨택스트를 구독하여 myContext의 데이터에 접근 가능하게 해준다.

국내에서는 Tailwind CSS보다 Styled components를 더 많이 쓰는 것 같긴 한데, 일단 npm trend에서는 Tailwind CSS는 상향세인 반면 Styled components는 최근의 추이가 하향세로 보인다.

내가 궁금해서 알아본 트렌드는 여기까지 하고, 이제 Tailwind CSS에 대해 알아보자.

Tailwind CSS의 정의 Tailwind CSS 는 오픈소스 CSS 프레임워크이다. 이 라이브러리의 주요 특징은 Bootstrap 과 같은 다른 CSS 프레임워크와 달리 버튼이나 테이블과 같은 요소에 대한 일련의 미리 정의된 클래스를 제공하지 않는다는 점이다. 대신, 혼합 및 일치를 통해 각 요소에 스타일을 지정하는 데 사용할 수 있는 "Utility" CSS 클래스 목록을 만든다.

출처: https://en.wikipedia.org/wiki/Tailwind_CSS

그렇다면 Utility-First는 무엇일까?

Utility-First 개념은 Tailwind의 주요 차별화 기능이다. 제한된 세트의 원시적인 유틸리티들로부터 복잡한 컴포넌트들을 구축하는 것이다. (나는 미리 정해진 유틸리티 클래스로 html 안에서 CSS를 작성하는 것이라는 의미로 받아들임.)

Tailwind CSS 설치과정

https://tailwindcss.com/docs/installation

여기로 들어가면 상황과 경우에 따라 어떤 코드로 어떻게 설치해야 하는지 아주 상세히 보여주고 있으니 내가 구구절절 설명하는 것보다 여기 들어가서 본인이 사용하는 세팅에 따라 설치하는 게 더 편할 것 같다.

Tailwind CSS의 장점

• CSS를 내가 직접 작성하지 않아도 된다.(편의성) ➡️ 개발 속도의 향상
• 체계적이고 일관적인 디자인의 사용 가능

Tailwind CSS의 단점

• tailwind CSS를 능숙하게 사용하기까지 적응기간 필요
• 코드가 길어지고 보기에 깔끔하지 않음
• CSS의 파일 크기가 커질 수 있음.

VSCode 추천 익스텐션

Tailwind CSS IntelliSense 까시면 자동완성이 됩니다. 깔았는데도 뭔가 잘 안된다?

VS Code Settings

"files.associations": {
  "*.css": "tailwindcss"
},

"editor.quickSuggestions": {
  "strings": "on"
}

setting.json 들어가셔서 이거 복붙해보세요 👍

여기까지 제가 알아본 tailwind CSS에 대한 내용입니다.

혹시 잘못된 부분이 있다면 언제든 저에게 알려주세요. 감사합니다~!

Styled-Components는 React에서 사용되는 대표적인 CSS-in-JS 라이브러리이다.

Styled-Components를 사용하면 CDD(Component Driven Development)를 할 수 있다.

CDD (Component Driven Development) 란?

컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI) 구축에 도달하는 개발 및 설계 방법론. 기본적인 컴포넌트 단위부터 시작하여 UI 뷰(view)를 구성하기 위해 점진적으로 결합(조립)해가는 상향적(bottom-up) 성향을 띈다.

출처: https://yamoo9.github.io/react-master/lecture/sb-cdd.html

CSS-in-JS란 무엇일까?

이름에서 추측할 수 있듯이, JS 안에서 CSS를 작성할 수 있게 해주는 방식.

따라서 Styled-Components를 사용한다면,

1. CSS를 컴포넌트화 할 수 있음.
   2. CSS와 JS 간의 상호작용이 쉬워짐. (props의 사용)
   3. class 작명을 자동으로 해주기 때문에 귀찮음을 덜어줌.

이런 장점을 가져갈 수 있다.

반면에 다음과 같은 단점도 존재한다.

1. JS의 크기가 커지고 파일이 복잡해진다.
   2. class 작명이 무작위로 이루어지기 때문에 보기에 좋지 않고 class 이름을 통한 역추적이 어렵다.
   3. 같은 디자인의 재사용이 많이 필요할 경우, CSS파일을 쓰는 것과 큰 차이가 없어진다.

Styled-Components 기본 사용법

npm i styled-components

import styled from 'styled-components';

//변수명을 지어주고, styled.css 적용할 요소명 `css 내용`

const BlueButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

function App() {
  return (
    <>
      <div>hello</div>
    //변수명 가져와서 써주면 된다.
      <BlueButton>파란색 버튼</BlueButton>
    </>
  );
}

export default App;

SCSS를 설치하면 변수를 사용할 수 있다. 사용법은 직관적이고 간단하다.

$ 기호를 앞에 적어주고 변수명을 적고, 내가 원하는 값을 적어주면 된다.

/*변수를 작성하는 방법*/

$변수명: 값;

/*실사용 예시*/
$fontcolor: #fff;

body{
color:$fontcolor;
}

같은 값이 여러번 반복될 때 일일이 그 값을 다 적어주는 것이 아니라

변수로 지정하여 변수명을 적어줌으로써 같은 값이 사용되었다는 것을 직관적으로 알 수가 있다는 장점이 있다.

2. SCSS의 중첩규칙 이해

CSS 사용 시에,

어떤 요소 안에 들어있는 자식요소에 접근 할때나 가상 요소 선택자를 사용할 때

일일히 부모 요소 안의 자식 요소를 하나하나 선택해주고, 가상 선택자만 빼서 따로 한번 더 적어주어야 하는 것이 비효율적이라거나 귀찮다고 느껴보신 분들도 있을 것 같다.

코드가 지저분해진다는 느낌이 들기도 하고....?

SCSS는 중첩 규칙을 사용하여 이러한 CSS의 단점을 보완하였다.

ul {
   background-color: #33eede;
   li {
      color: #fff;
      &:hover {
         color: gray;
      }
   }
}

이런 식으로 중첩을 통해서 부모요소 안의 자식요소를 선택해줄 수가 있어서 한눈에 알아보기가 편하고

가상 요소 선택자도 & 기호를 사용하여 참조할 요소 안에 중첩 시켜주면 사용 가능하다.

다만! 너무 중첩을 많이 해주면 오히려 가독성이 떨어지고 문제가 생길 수도 있다고 하니 주의할 것

https://wavez.github.io/react-hooks-lifecycle/

생명주기란?

React에서 컴포넌트는 생명주기를 가질 수 있다.

생명주기란, 컴포넌트의 생성 ➡️ 렌더링 ➡️ 소멸까지의 과정을 말한다. 함수형 컴포넌트에서 생명주기는 useEffect를 통해 구현된다.

함수형 컴포넌트에서는 리 렌더링이 일어날 때마다 기존의 컴포넌트는 사라지고 완전히 새로운 컴포넌트를 생성해서 반환한다.

용어정리

Mounting(생성 후 최초 렌더링) ⬇️ Updating(업데이트에 의한 재 렌더링) ⬇️ Unmountiong(컴포넌트가 화면에서 사라짐.)

class 컴포넌트에서 생명주기 구현에서는 이 생명주기 과정에 따라 사용되는 함수가 모두 다르다. class 컴포넌트에서는 아래 3가지의 각각 다른 기능을 하는 함수가 있다.

• componentDidMount (최초 마운트)

• componentDidUpdate (화면 재 렌더링)

• componentWillUnmount (컴포넌트의 소멸)

이 세가지를 하나에 합쳐둔 것이 함수형 컴포넌트의 useEffect 라고 생각하면 이해하기 쉽다.

useEffect 사용법

useEffect(setup, dependencies?)

일단 마운트 시에 useEffect가 한번은 실행된다.

1. 최초 렌더링(Mounting) 시에만 사용하고 싶을 때

useEffect(() => {
  //최초 렌더링 시에만 실행할 함수가 들어가는 자리
},[]);

두번째 인자로 받는 배열은 배열 안에 명시된 값이 변할 때 함수가 실행되도록 하는 일종의 조건문같은 역할.

지금 배열은 존재하지만, 빈 배열이기 때문에 처음 한번 마운트 될때만 실행되고 그 이후에는 렌더링이 일어나도 함수는 실행되지 않는다.

2. 렌더링 될 때마다 함수를 실행시키고 싶을 때

useEffect(() => {
    // 렌더링될 때마다 함수가 실행된다.
});

배열 자체가 존재하지 않기 때문에, 렌더링이 일어날 때마다 함수가 계속 실행된다.

3. 특정 값이 변할 때만 함수를 실행시키고 싶을 때

useEffect(() => {
    //  마운트 시 + 배열 안의 어떠한 값이 변경될 때마다 함수 실행
},[어떠한 값]);

배열에 지정해준 값에 변화가 일어날 때마다 재렌더링이 발생한다. 최초 마운트 + 그 이후 배열 안의 값이 변할 때마다 재랜더링됨.

+++ useEffect에서 return

useEffect(() => {
    //  마운트 시 + 배열 안의 어떠한 값이 변경될 때마다 함수 실행
  return() => {/*화면에서 사라질 때 실행되는 함수(Unmount 시 실행)*/}
});

생명주기 함수의 필요성

React 생명주기 함수는 컴포넌트의 생성과 업데이트, 삭제 과정에 효율적으로 접근할 수 있게 해준다는 점에서 의의가 있다.

원래는 클래스 컴포넌트에서만 쉽게 가능했던 것이 hook이 등장하면서, 함수형 컴포넌트에서도 이와 같은 작업이 가능해졌다.

repository 새로 만들고 push 할 때마다 정말이지 너무 헷갈려서 아예 내 블로그에다가 명령어 붙여놓고 필요할 때마다 볼려고 올ㅇ림....

echo "# OOO" >> README.md
git init
git add README.md
git commit -m "내가 원하는 커밋메시지"
git branch -M main
git remote add origin https://github.com/@@@@@@/OOO.git
git push -u origin main

처음 추가할 때는 대충 이 명령어들 가지고 한번에 붙여넣기 해주면 잘되더라구.

뭔가 안된다?

git add 한번 해보고 그 다음에

git status, git log --oneline 등등

이렇게만 중간중간 확인 잘 해주면 어찌저찌 되는 것 같다.

사실 그냥 깃허브에서 레파지토리 만들고 거기서 알려주는 거 복붙하면 됨.

근데 자꾸 봐야 눈에 익을 것 같아서 블로그에 써놓으면 한번씩이라도 보겠지 싶어서 써보았다 ㅎ,ㅎ

repository 이름 바꿨을 때 origin 주소 변경하는 법은 여기 ⬇️

git remote set-url origin 

변경된 url 복사해서 이 명령어 뒤에 붙여서 실행.

git remote -v

그다음 이 명령어 사용해서 제대로 변경되었는지 현재 origin 주소를 확인해준다.

끗~

평화롭게 todolist를 만들던 오늘 오후... js 켜놓고 getElementsByClassName으로 class를 불러왔는데 자동완성이 안붙지 뭐야 그래서 왜 안되는지 알아봄 ✅각종 오역과 의역 주의 !!!

https://stackoverflow.com/questions/56763768/is-there-any-way-to-add-an-event-listener-to-a-class

스택오버플로우의 해당 링크를 타고 들어가서 질문과 답변을 살펴보자.

대충 getElementsByClassName에 addEventListener를 쓰고 싶은데 뭔가 안된다! 는 내용의 질문이 올라와있고

그에 대한 답변을 내 맘대로 요약하면

getElementsByClassName()는 복수형 요소이면서, 배열이 아닌 node list를 return하기 때문에 배열 메소드에는 사용할 수 없다.

그렇다면 addEventListener는 배열매소드인가? 그건 아닌 것 같다. 그러면 대체 왜 안되는걸까?

이에 대한 답변은 또 구글링하다가 찾았다~!

addEventListener() adds a Listener to one element.

https://forum.freecodecamp.org/t/neede-help-with-document-getelementsbyclassname-addeventlistener/219116

The main difference between Element and Node is that Element is a specific type of Node that represents an HTML or XML element. While all Elements are Nodes, not all Nodes are Elements. Another key difference is that Elements have additional properties and methods that are specific to elements.

JavaScript HTML DOM Node Lists - W3Schools https://www.w3schools.com › js_htmldom_nodelist

An HTMLCollection is a collection of document elements. A NodeList is a collection of document nodes (element nodes, attribute nodes, and text nodes). HTMLCollection items can be accessed by their name, id, or index number. NodeList items can only be accessed by their index number.

What Is the Difference Between Element and Node in DOM - Medium https://medium.com › front-end-weekly

element는 node이지만 모든 node가 element인 것은 아니고, element는 해당 element에 특정한 추가적인 속성과 메서드를 갖는다.

또한, NodeList는 document nodes의 모음집이니까 마찬가지로 element가 아니다!

즉, addEventListener()는 하나의 element에 listener를 추가하기 때문에 element가 아닌 NodeList에는 addEventListener가 올 수 없다~!

라는 게 제 구글링의 결과! 입니다!

사실 구글링은 어디까지나 구글링이고 제가 컴퓨터 관련 지식이 해박한 것도 아니고 그렇다고 영어에 능통한 것도 아니고 (...) 그래서 이게 정답이다! 라고는 절대절대로 말 못하고요. 그냥 저는 제가 납득이 안되면 이해가 어렵더라고요. 그래서 공부도 할 겸 찾아봤음.

틀릴 시 님 말이 다 맞음. 비꼬는 거 ❌ 진짜로 저는 아는 거 하나도 없어서 당신의 생각이 맞을겁니다

그러니까 뭔가 이상하다 싶으면 댓글로 알려주세요 제발요 🙏 🥺

이상입니다 그럼 안뇽...~

이번에는 사실 혼자 힘으로 todolist를 짜보려고 했는데 뭔가 영 안풀리는 거다. 참고용을 찾아본 코드에서 생각보다 배울 것들이 많아서 거기서 내가 궁금한 것들, 알고 싶은 것들을 모아서 이렇게 가져와보았다!

이렇게도 todolist를 만들 수 있구나 싶어서 새로웠던 코드.
https://hackr.io/blog/how-to-create-a-javascript-to-do-list

insertBefore

만약 a라는 노드의 위치를 바꾸어준다고 가정해보자.

insertBefore를 쓰면 기존에 a 노드가 위치하던 자리에서는 노드가 삭제되고, 정해준 자리에 a 노드가 새롭게 삽입된다.

insertBefore(newNode, referenceNode)

newNode: 새롭게 삽입될 노드를 의미함.

referenceNode: referenceNode를 일종의 기준점으로 삼고 그 이전에 newNode가 삽입된다. 만약 referenceNode가 null값이면, newNode는 삽입될 위치에서 가장 말단에 삽입된다.

removeChild

돔으로부터 자식 노드를 제거하고, 제거된 상태의 노드를 반환하는 메서드!

removeChild(child)

child: DOM으로부터 제거할 child node를 적어주자.

setAttribute

지정된 요소의 속성 값을 설정해주는 메서드.

속성이 이미 존재한다면 속성을 다시 입력했을 때 업데이트가 된다. 속성이 없다면 새로운 속성을 추가한다.

setAttribute(name, value)

name: 값을 설정해주어야 하는 먼저 속성을 적어준다.

value: 앞서 적은 속성에 어떠한 값을 줄 것인지 이 위치에 적어서 할당해준다. 기본적으로 문자열이고, 문자열이 아닌 것을 적으면 자동으로 문자열로 변환한다.

속성의 현재 값을 얻기 ➡️ getAttribute() 속성 제거 ➡️ removeAttribute()

WARNING! 이 계산기는 기능구현이 완전하지 않은 계산기입니다! 제 구실 해보게끔 고군분투한 흔적들이 담겨 있습니다 (....)

제가 현재까지 구현한 기능과 특징은 다음과 같습니다!

1. 기본적인 사칙연산 기능

2. 소수점은 한번만 찍히도록 함

3. 연산자는 화면에 찍히지 않도록 함

4. C를 누르면 화면이 clear 됨

5. 첫번째 피연산자와 두번째 피연산자가 존재하는 상태에서 연산자를 한번 더 누르면 연산자가 =과 같은 역할을 함

각각의 기능을 어떻게 구현했는지, 어떤 점이 개선해야 할 점인지 적으면서 돌아보는 시간을 가져볼게요

가보자구~!

1. 계산기의 핵심, 사칙연산 구현

HTML

<body>
    <div class="calculator-container">
        <div id="display">0</div>

        <div id="buttons">
            <button class="button function clear">C</button>
            <button class="button function">±</button>
            <button class="button function">%</button>
            <button class="button operator">/</button>

            <button class="button number">7</button>
            <button class="button number">8</button>
            <button class="button number">9</button>
            <button class="button operator">*</button>

            <button class="button number">4</button>
            <button class="button number">5</button>
            <button class="button number">6</button>
            <button class="button operator">-</button>

            <button class="button number">1</button>
            <button class="button number">2</button>
            <button class="button number">3</button>
            <button class="button operator">+</button>

            <button class="button number zero">0</button>
            <button class="button dot">.</button>
            <button class="button equal">=</button>
        </div>
    </div>
    <script src="calculator.js"></script>
</body>

</html>

• 처음에는 table을 사용해볼까도 생각했었는데, 아무래도 css로 디자인하기에는 애로사항이 많을 것 같아서 그냥 버튼 클래스를 쭉 나열하고 flex를 사용해서 계산기스럽게 배치해주었습니다.

• html class는 각 버튼의 기능에 맞게 배분해주었습니다. 사실 class 같은 경우는 과제에서 제시하는 요구사항을 기본적으로 따랐고, 그 다음에 dot, equal 같은 클래스 명은 제가 임의로 정해주었습니다.

근데 지금 시점에서 돌아보니, 만약 필수적인 요구사항 없이 처음부터 끝까지 제가 다 짠다면 저는 클래스 명 배정을 좀 다르게 했을 것 같아요.

예를 들자면 제가 코딩하기 편한 방식으로 % 은 버튼은 아예 고유의 id나 class를 줬을 것 같네요! 굳이 function 으로 묶기보단요. 그게 훨씬 편할 것 같아요!

Java Script

//forEach문 안에 addEventListener를 사용.

buttonsArr.forEach((btn) => {
    btn.addEventListener("click", function (e) {
        const clickedBtn = e.target.textContent;
        console.log(clickedBtn)

//display.textContent가 0이면서 e.target이 number라는 클래스명을 가지고 있을 때 
 //디스플레이 초기화와 클릭된 버튼이 화면에 보여지게 함..
        if (display.textContent === "0" && e.target.classList.contains("number")) {
            display.textContent = "";
            display.textContent = clickedBtn;
        } 

//직전 조건문의 조건을 제외하면서 number 클래스를 가진 요소가 이벤트 타겟일 때는 
//기존에 디스플레이에 있던 문자열에 클릭된 버튼의 문자열이 더해지도록 구현함.      
      else if (e.target.classList.contains("number")) {
            display.textContent += clickedBtn;
        }

        dot(clickedBtn) // 소수점

        clear(clickedBtn) // 클리어 버튼

        equalSign(clickedBtn) // 등호 버튼

    });

});

// 클릭한 연산자의 케이스에 맞춘 연산이 진행되도록 해주는 함수
function calculate(firstOperand, operator, secondOperand) {

//소수점 뒷자리까지 반환해주는 parseFloat을 사용해서 문자열을 숫자로 변환.
    firstOperand = parseFloat(firstOperand);
    secondOperand = parseFloat(secondOperand);

  // 스위치 문을 사용해서 각 케이스에 맞는 연산 진행되도록 함.
    switch (operator) {
        case "+":
            return firstOperand + secondOperand;

        case "-":
            return firstOperand - secondOperand;

        case "*":
            return firstOperand * secondOperand;

        case "/":
            return firstOperand / secondOperand;
    }
}

function equalSign(clickedBtn) {

  //// 클릭된 버튼이 = 이면서, 첫번째 피연산자와 연산자가 존재할 때 
    if (clickedBtn === "=" && operator !== null && firstOperand !== null) {

 //두번째 피연산자 변수가 디스플레이에 보여지는 텍스트가 되도록 해줌.
        secondOperand = display.textContent;
        const result = calculate(firstOperand, operator, secondOperand);

   // 디스플레이에 연산 결과를 표시
        display.textContent = result

      // 다음 연산 준비를 위해 
      //첫번째 피연산자 값은 현재의 연산결과가 되도록, 
      //두번째 피연산자와 연산자 값은 없애줌.
        firstOperand = result;
        secondOperand = null;
        operator = null;

    }
}

function dot(clickedBtn) {
  //디스플레이가 .을 포함하지 않으면서 클릭한 버튼이 .일때 
    if (!display.textContent.includes(".") && clickedBtn === ".") {
      // .을 디스플레이에 더해줌
        display.textContent += clickedBtn;
    }
}

function clear(clickedBtn) {
  //클릭한 버튼이 C일 때
    if (clickedBtn === "C") {
      //디스플레이에 표기되는 내용과 피연산자, 연산자 값을 초기화 함.
        display.textContent = "";
        operator = null;
        firstOperand = null;
        secondOperand = null;
    }
}



// 여기까지가 디스플레이에 숫자가 보여지는 부분의 구현 & 소수점과 =, 그리고 C 기능의 구현입니다.


// 연산자 버튼만 따로 빼서 이벤트 리스너를 만들어 줌.
operatorBtnArr.forEach((btn) => {
    btn.addEventListener("click", (e) => {
        const clickedBtn = e.target.textContent

        //연산자가 null이면서 클릭한 버튼이 operator 클래스를 가지고 있다면?
        if (operator === null && e.target.classList.contains("operator")) {

          //오퍼레이터 값에 클릭한 버튼 값을 주고
            operator = clickedBtn
          //첫번째 피연산자에는 디스플레이에 표기된 값을 할당.
            firstOperand = display.textContent
          //그리고 디스플레이 초기화
            display.textContent = ""
        }

      //앞의 조건문의 경우는 제외, 첫번째 피연산자는 있는데 두번째 피연산자는 값이 없는 경우
        else if (firstOperand !== null && secondOperand == null) {
          //두번째 피연산자에 디스플레이에 찍혀있는 값을 할당.
            secondOperand = display.textContent;
        }

      //또다른 별개의 조건문 등장. 
      // 클릭한 버튼이 operator이면서 첫번째와 두번째 피연산자가 모두 존재할 때
        if (e.target.classList.contains("operator") &&
            firstOperand !== null && secondOperand !== null) {
            const result = calculate(firstOperand, operator, secondOperand)
            // 디스플레이에는 연산함수가 내준 값을 할당.
            display.textContent = result

          //첫번째 피연산자에 계산된 결과를 값으로 할당.
          //두번째 피연산자와 연산자의 초기화
            firstOperand = result;
            secondOperand = null;
            operator = null;
        }

    });
}); // 여기까지가 연산자와 두번째 피연산자가 존재하는 상태에서 
//연산자를 한번 더 누르면 = 과 같은 역할을 하게끔 만들어 주기 위한 코드입니다. 

소수점, = , C, 계산 기능을 구현하기 위한 파트입니다. 주석을 같이 읽어주세요!

• 일단 getElementBy~ 로 가져온 class나 id같은 경우는 배열이 아니기 때문에 배열 메서드인 forEach문에서 사용이 안됩니다! 그래서 Array.from()을 사용해서 전부 배열로 바꾼 후 진행했다는 점 말씀드려요!

참고로 제가 알아본 바에 의하면 querySelector는 nodelist 형태로 가져와주기 때문에 (다른 배열 메서드는 모르겠지만) forEach문에서는 굳이 배열형태로 바꾸어주지 않아도 사용이 가능한 것 같았습니다. 실제로 같은 과제를 수행한 다른 분들 코드를 보면 querySelector를 사용한 경우에는 문제가 일어나지 않더라고요.

• forEach문은 배열의 각 요소를 모두 순회하면서 함수를 실행해주는 메서드라서 addEventListener와 함께 쓰면 계산기 기능 구현 시에 적합한 느낌이라 가이드라인에서 forEach문을 쓰라고 제시해준 것 같습니다.

  
  

• 연산이 실행되는 함수는 switch문을 사용해서 각 연산자 case에 알맞는 연산이 실행되도록 구현해주었습니다! if문 쓰는 것보단 계산기 기능 구현에는 switch가 더 편할 것 같아서요~!

• 근데 뒤늦게 알게 된 점 ...! 이 switch문은 Lookup table 로 바꾸어서 더 짧고 가독성 좋게 바꾸어 쓸 수도 있다고 합니다 (띠요옹)

  
  

멘토님께 이런 게 있다~ 하고 들어보기만 하고 아직 제대로 알아보질 못해서 다음 블로그 주제는 아마 switch문을 Lookup table로 바꾸어 쓰는 법이 되지 않을까 싶어요! (나중에 리팩토링 할 때 lookup Table 형식으로 써보고 싶어서 꼭! 한번 구글링해서 배워보려구요 ㅎㅎ)

• 그리고 블로그 쓰다가 발견한 결함인데, 2번째 연산자가 = 기능을 하게 만들어두었기 때문인지 9 x 9 x 9 를 치면 9 x 9까지는 제대로 연산이 되어서 81로 바뀌는데, x 9 부분에서 연산이 안되고 클릭한 숫자 버튼이 문자열인 채로 819가 되어버리는... 즉 +=가 되어버리네요 !!!! 고쳐야 할 오류 발견~!

정말 기본적인 기능만 구현했고, css는 보시다시피 기본적인 것만 만들었기 때문에 넣지는 않았어요!

이 계산기 만들기... 과제였기 때문에 가이드라인이 존재했음에도 이 기능들을 구현하기까지 너무 고된 시간이었습니다,,,

딴에는 좀 더 계산기다운 계산기를 만들고픈 마음에 % 기능도 구현해보려고 이런 코드, 저런 코드 다 넣어봤지만 어딘가 어설퍼서ㅋㅎㅋㅎㅋㅎ % 기능은 좀 더 연구를 해봐야할 것 같습니다 ...

이래저래 저의 부족함을 참 많이 느꼈었네요 ㅎ

그래도 확실히 처음 시작했을 때의 아무것도 모르던 저보단 정말 많은 것을 알게된거니까요!

앞으로는 더 많은 성취가 있을거라고 생각합니ㄷr...! 아자자! 파이팅!

오늘 하루 꽤 바빴는데 다행히 주말에 계산기 과제는 레이아웃을 미리 짜둬서 이 시간에라도 끝낸 것 같아요 ㅎ,ㅎ

이게 맞나 싶은데 일단 귀여워서 제 마음에 드는 먼작귀 테마의 todo list 한번 보겠습니다 '~'

1. html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList</title>
    <link rel="stylesheet" href="todolist.css">
</head>
<body>
    <div id="container">
        <div id="listContainer">
            <h1> To do List</h1>
            <ul id="todoList"></ul>
            <form id="form" action="#">
            <textarea name="text" id="inputText" cols="30" rows="5"></textarea>
            <button name="text" class="submit">등록</button></form>
        </div>
    </div>
    <script src="todolist.js"></script>
</body>
</html>

HTML 구조는 정말 단순해서 딱히 설명할 게 없어요.

보시는 그대로의 아주아주 단순한 구조!

JavaScript

const todoList = document.getElementById('todoList')
const form = document.getElementById('form')
const inputText = document.getElementById("inputText")

let todoArr = []

function saveTodo() {
    const todoString = JSON.stringify(todoArr)
    localStorage.setItem("todo", todoString)
}

function loadTodo() {
    const todo = localStorage.getItem("todo")
    if (todo !== null) {
        todoArr = JSON.parse(todo)
        todoArr.forEach(renderTodoItem)
    }
}

window.onload = loadTodo()


form.addEventListener("submit", function (event) {
    event.preventDefault()

    const listItemAdded = {
        todoText: form.inputText.value,
        todoId: new Date().getTime(),
        todoDone: false
    }

    todoArr.push(listItemAdded)

    renderTodoItem(listItemAdded)

    inputText.value = ""

    saveTodo()
})

function renderTodoItem(item) {
    const li = document.createElement('li')
    li.textContent = item.todoText

    const deleteButton = document.createElement('button')
    deleteButton.textContent = "X"
    deleteButton.classList.add("delbtn")

    deleteButton.addEventListener("click", function () {

        li.remove()
        todoArr = todoArr.filter(function (todo) {
            return todo.todoId === item.todoId
        })
    });

    li.addEventListener("click", function () {

        doneItem(item.todoId)
        li.classList.toggle('done')
    });

    li.appendChild(deleteButton)
    todoList.appendChild(li)

    saveTodo()

};

function doneItem(clickedId) {
    todoArr = todoArr.map(function (item) {
        if (item.todoId === clickedId) {
            return { ...item, todoDone: !item.todoDone }
        } else {
            return item
        }
    })
}

사실 js는 모범답안 보고 그대로 따라하고 싶지 않아서 혼자 머리굴리고 이렇게도 해보고 저렇게도 해보다가 결국 막판엔 계속 잘 안되서 지피티의 도움도 살짝씩 받은 결과물입니다 (자신없다는 말을 길게 하는 거 맞음) ...ㅎ

1. localStorage를 사용해서 새로고침해도 작성된 리스트가 그대로 유지가 되게끔 사용해봤습니다.

   
   

2. 함수 따로 빼서 li 추가와 함께 filter를 사용해서 각각의 todo 삭제 버튼과 기능 만들어봤습니다.

   
   

3. 완료한 todo에 대해 클릭을 하면 classList.toggle을 통해 클래스를 부여해서, 추후에 CSS 효과로 제가 원하는 클릭 시 줄이 그어지는 효과를 받을 수 있도록 해주었습니다.

   
   
   ### CSS ```css * { scrollbar-color: #9ed3ea;

   ::-webkit-scrollbar {

   width: 0px;

   }

   ::-webkit-scrollbar-thumb {

   background-color: #d4f1ff;

   }

   ::-webkit-scrollbar-track {

   background-color: #d4f1ff;

   }

   box-sizing: border-box; }

body { background-image: url("하치와레 우유 복사본.jpg"); background-position: 500px 590px; background-repeat: repeat no-repeat; background-size: 100px 100px; }

h1 { color: #acddf2; }

#container { display: flex; justify-content: center; align-items: center; border: 1px solid; border-radius: 5px; background-color: aliceblue; }

#todoList { width: 300px; height: 400px; overflow: scroll; margin: 5px; padding: 0; border-radius: 4px; background-color: #d4f1ff;

display: flex;
flex-direction: column;

}

li { list-style-type: none; width: 290px; background-color: #f0f8ff; border-radius: 4px; font-size: 17px; margin: 5px; padding: 5px; display: flex; align-items: center;

}

.done { color: rgb(105, 105, 105); text-decoration: line-through; }

.delbtn { border-style: none; border-radius: 60px; background-color: rgb(216, 214, 214); width: 5px; height: 13px; font-size: 9px; display: flex; align-items: flex-end; justify-content: center; }

.delbtn:hover { background-color: cornflowerblue; }

.submit { margin: 0; height: 83px; border-style: none; background-color: azure; border: 1px solid #d7eef8; border-radius: 5px; width: 40px; }

#form { display: flex; margin: 5px; }

#inputText { border: 0; resize: none; border: 1px solid #d7eef8; }

1. overflow를 scroll로 하면 항상 거슬렸던 게 급격하게 못생겨지는 스크롤바였는데 이번엔 스크롤바 색과 크기를 조절해서 디자인에 통일성을 줬습니다.
<br>
2. body에 background-image를 줘서 하치와레와 치이카와가 무언가를 마시는 귀여운 사진을 하단에 넣어주었습니다! position으로 위치를 하단에 고정해주었고 크기도 size로 조정해줌!
<br>
3. 사용자가 임의로 textarea 사이즈를 조정하는 것을 막고 싶어서 resize: none을 넣어주었어요. 


------
이런 류의 글은 처음 적어보는 거라 너무 어설프고요... 
어떻게 설명해야 할지도 모르겠고...ㅋㅋㅋㅋ 

무엇보다 제가 초보자라서 제가 적은 코드도 제 머리속에 완벽하게 존재하는 게 아니라 더 힘드네요 ㅎ
<br>
챗 지피티는 일단 최대한 제가 고민을 해보고 막혀서 진도가 안나갈 때만 도움을 받기로 스스로와 약속했는데 

아직까진 지켜지고 있는 것 같습니다. 
![](https://velog.velcdn.com/images/doremi_13/post/6def9057-cc7c-4859-98c3-49722e9c8a09/image.webp)

근데 제가 자바스크립트를 너무 못다뤄서 자꾸만 도움을 받게 된다는 게 함정.
<br>

내일은 더 알차게 적어보도록 하겠습니당... 그럼 이만

사칙연산에는 당연히 우선순위가 있지만 && 와 || 사이에도 먼저 실행되는 우선순위가 있다는 생각은 미쳐 못해봤었는데 오늘 공부하다가 알게 되었음...

세상은 넓고 배움은 끝이 없구나

const age = 120

if(age > 0 && age < 5 || age > 65 && age < 150){
console.log("Bus fare : free")
}
else{
console.log("Bus fare : 3$")
}

적절한 예시인지는 모르겠지만 연습 겸 한번 적어봤음. ㅎ,ㅎ

이런 식으로 &&과 ||가 모두 사용된 조건문이 있다고 가정했을 때, 사칙연산에서 *나 / 가 순서와 관계없이 +나 - 보다 먼저 계산되는 것처럼

&&과 ||가 함께 사용된 경우에는 &&이 먼저 실행된다!

switch 조건문

const month = 1

switch(month){
    case 1:
        console.log("새해의 시작")
        break
    case 2:
        console.log("설날이 있다.")
        break
    case 3:
        console.log("3월 좋아")
        break
    default:
        console.log("해당하는 달이 없습니다.")
}

이런 식으로 switch와 case, break를 사용해서

내가 설정해둔 값 중에 해당하는 값이 있을 때, 맞춤형으로 원하는 결과를 도출해내도록 할 수 있는 조건문.

지금은 변수의 값이 1 이니까 case 1의 "새해의 시작"이 콘솔로그에 출력될 것이다!
하지만 이 switch 조건문 ... 상당히 성가신 것 같다.
만약 각각의 case와 실행될 코드 아래에 break를 적어주지 않는다면?

분명 나는 변수 값으로 1을 입력했지만 해당하는 case 1만 실행하는 것이 아니라, 1부터 시작해서 끝까지(이 경우에는 default 까지) 폭주기관차마냥 실행할 것이다.

그 밖에도 해당하는 값이 없을 때 출력할 수 있는 값을 정해두는 default도 사용할 수 있다.

볼 일도 쓸 일도 많이 없는 녀석이라고 하니 그냥 개념 정도만 알아두고 정말 필요할 때 찾아보는 것도 괜찮을 것 같다.

map() 메서드는 배열 내 있는 모든 요소에 개별적으로 접근하여, 주어진 함수의 호출로 인한 결과만으로 모아 새로운 배열을 반환한다.

기존 배열을 복사해서 편집/재구성하는 느낌.

const arr = [1,2,3,4,5]

arr.map(function(x){
    return x + 1
});

혹은

arr.map((x) => x + 1);

2. filter()

filter() 메서드는 주어진 배열을 복사하여, 함수로 구현한 테스트의 조건에 부합하는 요소로만 필터링하여 배열을 만들어준다.

filter()에서 return은 조건문 반복문같은 느낌이 든다.

const users = [
  { name: 'John', age: 30, email: 'john@example.com' },
  { name: 'Alice', age: 25, email: 'alice@gmail.com' },
  { name: 'Bob', age: 35, email: 'bob@gmail.com' },
  { name: 'Emma', age: 28, email: 'emma@example.com' },
  { name: 'Steve', age: 32, email: 'steve@gmail.com' },
];

const filteredUserAge = users.filter(function(user){
  return user.age >= 25 && user.age <35
})

오늘의 회고

내가 오늘 느낀 것, 배운 것을 나의 언어로 정리하는 것이 중요하다고 느껴서 적은 양이라도 매일 채워나가는 것이 나의 목표! ( 일단 글로 적으면 확실히 안적는 것보다 기억이 또렷함 )

아참참 그리고 성장은 곡선이 아니라 계단식이라고 한다 모르겠으면? 물어보고 검색하고 다른 사람 것도 보고 그러면 됨 막막하고 힘든 게 당연한거니까 기죽지말고 힘내자 나야 ㅍ ㅏ이팅~😊

if문과 while문은 형태적으로는 다소 유사해보여서 은근 헷갈렸었는데 while문 같은 경우는 조건이 만족되는 동안에는 무한정 실행되는(도르마무?) 무한루프 반복문이고,

if문은 지정한 조건이 참이라고 판별되면, 명령문을 한번 실행하는 개념에 가까운 것 같다.

내가 제대로 인지를 못하고 있던 부분인 것 같아서 오늘 짚고 넘어가주기 '~'

2. include()

오늘 실시간 세션 때 배운 메서드인데 궁금해서 알아보았다.

includes(searchElement)
includes(searchElement, fromIndex)

내가 이해한 바에 따르면, 문자열이나 배열 항목에 특정 값이 포함되어 있는지를 판단하여 true 또는 false를 반환하는 것 같다.

• searchElement : 말 그대로 내가 찾고싶은 값을 넣으면 되는 것.
  - fromIndex : 몇번째 인덱스에서부터 searchElement를 찾으면 되는지를 정해준다. 음수 인덱스를 넣으면 배열의 끝부터 거꾸로 찾아준다.

classList는 DOM 요소의 클래스를 다루는 메서드들을 제공하는 속성으로, 이 속성은 DOM 요소의 클래스 목록을 나타내는 DOMTokenList 객체를 반환한다.

주로 클래스를 추가, 제거, 토글하거나 존재 여부를 확인하는데 사용된다.

주요 메서드

add( String )

지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

remove( String )

지정한 클래스 값을 제거한다.

item( Number )

콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.

toggle( String )

인수가 1개일 때 ➡️ 클래스가 이미 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.

2번째 인수가 있다면? ➡️ 두번째 인수(조건)이 true로 평가되면 지정한 클래스 값을 추가하고, false로 평가되면 제거한다.

contains( String )

지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 아닌지를 확인한다.

replace( oldClass, newClass )

존재하는 클래스를 새로운 클래스로 교체한다.

2. 과제하면서 막혔던 부분

(아래는 수정된 코드입니다.)

HTML

JavaScript

오답노트 ✨

처음에는 button class를 사용해서 하면 되겠지? 하고 document.getElementsByClassName('button').classList.toggle("show");로 자동완성도 안되는 걸 꾸역꾸역 적었는데 막상 적어놓고 보니 토글이 안됨.

➡️ 알고보니 토글할 대상을 1개로 특정해야 한다고 해서 각각의 본문의 캡처처럼 id부터 타고 들어가는 걸로 다시 수정함.

➡️ 결론: 일단 자동완성이 안뜬다면 의심을 해보자🥲 그리고 classList는 한번에 하나씩만 바꿀 수 있다는 것을 기억하자!

(+) 오늘의 새싹반 후기

1. 설계

   내가 코드 짜다가 몇시간씩 막히는 이유, 내가 배운 것을 실습에 적용하기 힘든 이유는 설계하는 능력이 부족하기 때문일 수 있다는 조언을 강사님께 들었다.

   정말이지 피가 되고 살이 되는 말씀 그 잡채... 원하는대로 구현하기 위해서 어떤 식으로 전개해나가야 하는가? 항상 이 점을 머릿속으로 먼저 생각해보고 코드를 짜자.

2. Chat GPT

   웬만하면 배우는 단계에서는 AI 쓰지말자. 스스로 생각하는 능력을 기르자.

   강사님 말씀을 내가 이해하기론, 직장 들어가서도 쓰지 말라는 이야기는 아니지만 초심자같은 경우에는 Chat GPT가 내준 답안을 자기 것으로 소화할 수 없는 단계이기 때문에 쓰지 않는 걸 권고하시는 것 같다.

   
   
   
   

   참고자료 https://developer.mozilla.org/ko/docs/Web/API/Element/classList