[Inner Circle] FE과정 1주차 정리

Inner Circle 진행하면서 알게된 사실을 블로그에도 포스팅...

 

스택 : vite + TS + CSS

 

25/03/24

• forEach보단 for of문을 쓰자. (가독성+효율성 면에서 더 낫다)
• DOM 엘리먼트 변수에 붙이는 $ prefix는 최근 잘 안쓰인다. (jQuery 시절에나 쓰였다고...)
• import/export를 쓰려면 <script> 태그 안에 type="module"를 붙이면 된다. 안써도 되면 안붙여도 된다.

 

25/03/25

• 타입 단언 (as ...) 는 웬만해선 안 쓰는 게 좋다. (차라리 narrowing이 낫다고 한다.)
• document.querySelector()는 제네릭 타입을 지정할 수 있다.
• input[type=number] 엘리먼트는 valueAsNumber로 값을 가져올 수 있다.
• 비슷한 이벤트 핸들러를 여러 개 달아야 될 땐 부모 엘리먼트에 리스너를 단다. 이벤트 위임(Delegation)이라고 한다.
• export default 는 한 파일당 하나의 함수를 리턴할 수 있다. 보통 메인 역할을 하는 ts에서 import하여 사용한다.

 

25/03/29

• 유용한 AI : gemma3(폐쇄형 모델), cursor(코파일럿 대체품), coderabbit(코드요약?)
• 바닐라 JS에서 비슷한 UI 요소를 반복하려면 <template> 태그를 사용하면 깔끔하다. cloneNode로 복제해서 사용한다. template은 렌더링이 되지 않는다.

<template id="button-template">
    <button class="dynamic-btn">클릭하세요</button>
</template>

<div id="button-container"></div>

const template = document.getElementById('button-template');
const container = document.getElementById('button-container');

for (let i = 0; i < 5; i++) {  // 버튼 5개 생성
    const clone = template.content.cloneNode(true);
    const button = clone.querySelector("button");
    
    container.appendChild(clone);
}

// cloneNode 대신 importNode로 복제할 수도 있다. (둘다 DocumentFragment 타입)

const template = document.getElementById('button-template');
const container = document.getElementById('button-container');

for (let i = 0; i < 5; i++) {  // 버튼 5개 생성
    const clone = document.importNode(template.content, true);
    const button = clone.querySelector("button");
    
    container.appendChild(clone);
}

• (이건 백엔드내용임) 한 테이블이 어떤 테이블과 상속 관계일 경우 @Inheritance를 사용할 수 있다. 테이블 형태에 따라 Single(하나의 테이블에 그런 관계가 있을 경우), Joined(여러 개의 테이블에 있을 경우) 전략을 사용할 수 있다.
• <form> 태그의 속성.

<form action="" id="form1" method="get">
	<input type="text" name="name" id="name" required/>
</form>

<input type="submit" form="form1" value="subscribe!"/>

form 안이 아니라도 form의 내용을 어디서든 보낼수 있다.

 

• 여러가지 웹 API : https://developer.mozilla.org/ko/docs/Web/API
• Intersection Observer(뷰포트에 들어오는지), 노트북 배터리 브라우저에서 확인할수있는 API, 공유 API(https://mdn.github.io/dom-examples/web-share/) 등...
• 여러가지 태그 설명 : https://developer.mozilla.org/ko/docs/Web/HTML

HTML: Hypertext Markup Language | MDN

• addEventListener() 의 signal abort() 메소드(addEventListener 한번에 지워줌), css highlight API(키워드 강조), View Transition API (static html 페이지 전환 효과)도 유용하게 쓸 수 있다.
• https://product.kyobobook.co.kr/detail/S000214977649