프론트엔드 데브코스 TIL #DAY11

23.10.03

📚 오늘 공부한 것

• 코딩 테스트 준비 방법
• HTML, CSS
• DOM

😲 새롭게 알게된 것

실습 - 간단한 에디터 만들기

실습코드 바로가기

<div contenteditable="true"></div>

contnenteditable 속성에 true값을 주면 해당 요소 영역에서 편집이 가능하다!!

input 태그와 비슷한데 input 태그 속성은 이용할수 없다! 하지만, 편집 영역 안에서 html 태그가 먹힌다!

사이즈나 테두리 정할 때 box-sizing 옵션을 세트처럼 쓰자

width: 600px;
height: 600px;
padding: 16px;
border: 1px solid black;
box-sizing: border-box;

구현한 것

index.html, index.css : 입력을 받을 영역과 입력 텍스트의 스타일을 변경할 툴바

index.js : 클릭된 툴바 버튼의 속성에 따라 execCommand()를 이용하여 스타일을 적용한다.

배운 것

<div contenteditable="true"></div>

contnenteditable 속성에 true값을 주면 해당 요소 영역에서 편집이 가능하다!!
input 태그와 비슷한데 input 태그 속성은 이용할수 없다! 하지만, 편집 영역 안의 텍스트에 html 태그가 먹힌다!

코드 전체를 즉시 실행함수로 감싸는 이유

변수나 함수들이 window 객체 내에 사용되어 전역으로 사용된다. 따라서 전역 컨텍스트를 오염시키지 않기 위해 즉시 실행 함수를 사용하는게 좋다!

MDN - Document.execCommand()

명령어를 통해 편집 가능한 영역을 변경시킬 수 있다.

(사용이 권장되지 않는 함수가 되었지만 일부 브라우저 제외 이용할 수는 있다.)

함수화

각각의 툴바 버튼마다 이를 찾는 querySelector를 추가하는 번거로움을 없애기 위해 태그에 data-command 속성을 추가하여 함수처럼 사용할 수 있다.

즉시 실행 함수

위 실습에서 즉시 실행함수로 js코드를 감싼 것에 대해 강사님께 여쭤봤는데, 주된 이유는 스코프였다. 이참에 즉시 실행함수를 더 알아보자

IIFE : Immediately Invoked Function Expression

사용방법

(function () {
    console.log("IIFE");
})();

// 화살표 함수로도 사용 가능하다
(() => {
    console.log("IIFE");
})();

사용하면 좋은 점

1. 전역 변수 사용을 막는다. 선언한 변수나 함수들이 window 객체 내에 사용되어 전역으로 사용됩니다. 따라서 전역 컨텍스트를 오염시키지 않기 위해 즉시 실행 함수를 사용한다고 보시면 됩니다.

언제 사용할까?

1. 단 한번만 사용할 때. 왜냐? 즉시실행함수는 실행 이후 없어진다!!!!

2. 비동기 async를 사용할 수 있다.

   const getFileStream = async (url) => {
     // 구현
   };
   
   (async () => {
     const stream = await getFileStream("https://domain.name/path/file.ext");
     for await (const chunk of stream) {
       console.log({ chunk });
     }
   })();

참고 : https://developer.mozilla.org/ko/docs/Glossary/IIFE

🫨 느낀 점

자료구조, 알고리즘, 문제풀이를 주로 하다가 화면 구현을 하니까 재밌었다 !! 리액트 없이 html,css,js를 이용해서 코딩하면 처음엔 뚝딱이가 되는데 적응하면 클래식(?)하게 재밌다.

🤔 오늘 회고

Keep

알고리즘 연습하는 것 처럼 개발도 지속적으로 연습해야겠다! 오늘 실습문제로 에디터 개발이랑 사이드 프로젝트 시작한 것 덕분에 js 개발 연습하니까 재밌었다.