내가 보려고 만든 개발 공부 일지

모듈 방식이 아닌 일반적인 레거시 코드들을 보면 html 시작페이지 에서 페이지가 로드되고 처음 시작하는 함수를 지정할때 이런식으로 onload 이벤트를 걸어서쓰고 선언된 script 태그 순서에맞게(링크되있는 스크립트들은 차례대로 로딩된다) 로직을 작성한다. 그런데 ES6 에서 import / export 를 사용할 수 있게 되면서 스크립트를 모듈로써 불러와 변수에 담아서 쓸수 있게되었다. 모듈방식 script는 type="module" 속성으로 불러와서 사용할 수 있다. 그럼 이제 onload 에서 시작하는방식 말고 위의 모듈 방식으로 시작을 하려면 먼저 시작 js 를 만들자 --> index.js 그리고 index.js 안에서 사용할 모듈들을 import 하고 가장 처음 시작할 함수를 호출한다. E..

:root { --myColor : #ffffff; --myLength : 100px; } 만약 위처럼 css 속성값을 전역으로 선언해놨을 때 javascript 에서 저 값에 접근하려면 아래처럼 var cs = window.getComputedStyle(엘리먼트); cs.getPropertyValue('--myColor'); document.documentElement.style.setProperty('--myColor', '#afafaf'); (document.documentElement == ) 이런 식으로 값을 가져오거나 수정해줄 수 있다.

Interface, Type 둘다 타입을 커스텀하게 정의할 필요가 있을때 사용된다. 서로 비슷하지만 각각 소소한 차이점이 있는데 그건 구글링을 하면 상세히 나오니 참고하고, 이것만 기억하자. --> 가급적 객체 타입 정의는 interface를, 리터럴 타입정의는 type을 사용하라 type myType = "Basic" | "Premium" | "Admin" | null; interface userInfoProps { name: string; age: number; addr: string; onEdit: ()=>void; } (참고로 type 은 = 으로 타입정의, interface 는 = 없이 바로 정의)

Class 형 컴포넌트에는 life cycle API, state 같은 기능들이 들어있고 함수형은 없다. 그래서 보통 데이터 조작 없이, 단순히 부모로부터 props 를 받아 보여주기만하는 컴포넌트는 함수형으로 작성하는데 이게 코드도 깔끔하고 성능도 미세하게 더 빠르다고 한다. 그러나, Hook 이 나온 이후로 이 둘은 차이가 없다고 봐도 무방하다. 다만, 두 방식은 서로 작동하는 매커니즘의 차이로 class형 컴포넌트는 특정 상황에서 버그를 만들 수 있는데.. ( 아래 링크 참조 ) --> https://overreacted.io/ko/how-are-function-components-different-from-classes/ 함수형 컴포넌트와 클래스, 어떤 차이가 존재할까? 전혀 다른 '포켓몬'이라고..