JavaScript module export & import
JavaScript module IE를 제외한 최신 브라우저에서 기본적으로 모듈 기능을 지원 구조 module.js에서 변수나 함수를 export main.js에서 module을 import index.html에서 main.js를 module 타입으로 참조 예시 module.js...
고양이발
useEffect 동작 원리, 사용하기
useEffect() useEffect()를 사용하여 side effect를 수행할 수 있습니다. useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다. useEffect가 하는 일은 무엇일까요? useEffect ...
✅리액트 컴포넌트의 생명주기
클래스형 컴포넌트의 생명주기 constructor() React 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 호출됩니다. React에서 생성자는 보통 아래의 두 가지 목적을 위하여 사용됩니다: this.state에 객체를 할당하여 지역 state를 초기화 인스턴스에 이벤트 처리 메서드를 바인딩 ...
리액트 이벤트 핸들러 네이밍 (on / handle)
Props의 경우 컴포넌트에 전달하는 prop의 이름을 정의할 때는 보통 onClick과 같이 on* 접두사를 지정한다. 이를 통해 컴포넌트에게 이 prop은 이런 이벤트 핸들러 기능을 수행하겠구나.. 라는 것을 암시할 수 있다. Function Names의 경우 실제로 호출되는 함수의 이름을 정해야 하는 경우 handle을 붙여...
반응형 작업을 위한 폰트 단위 rem / em
rem / em px(픽셀)은 정해진 값을 가지고 있는 반면 rem과 em은 길이가 유연한 기준 요소에 따라 가변하는 css 상대 단위이다. rem : 가장 상위인 html 태그의 폰트 사이즈를 기준으로 한다. (r은 root의 약자) em : 부모 태그의 폰트 사이즈를 기준으로 한다. 응용 html에 폰트 사이즈를 지정하지 않으면 ...
자바스크립트 동작 원리, 메모리 구조, 이벤트 루프
자바스크립트 엔진 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터 각각의 엔진이 서로 다른 웹 브라우저, Node.js와 같은 런타임 등에서 동작할 수 있다. javascript 대표 엔진으로는 Google V8 엔진이 있다. 메모리 구조 Memory Heap ...
Media Query 변수화해서 Styled-Components에서 사용하기
변수 선언 export const MEDIA = { MOBILE: (css: string) => { return `@media screen and (max-width: 600px) { ${css} }`; }, TABLET: (css: string) => { retu...
Next.js 사용하기 - 그런데 이제 CRA를 곁들인
성공할 수 있을까 Next.js란? 서버사이드 렌더링을 지원하는 React 기반 프레임워크 왜 사용하는가? 초기 로딩 성능 개선 SEO(검색엔진) 최적화 더욱 빠른 페이지 로드를 위한 코드 스플리팅 자동화 Universal Rendering Server-side rendering과 Client-side rendering을 혼합...
Portal을 사용하여 Modal 띄우기
ReactDOM에서 제공하는 createPortal을 사용하여 #root 외부에서 모달을 띄울 수 있다. DOM에 modal 요소 생성 #root 형제 요소로 #modal을 추가한다. <body> <div id="root"></div> <div id="modal"></div> </...
텍스트 길어지면 말줄임표 처리하기✍️
1줄 말줄임 처리하기 .ellipsis { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } text-overflow : 이 속성은 글자가 지정한 너비를 넘어갈경우 어떤식으로 처리할 것인지를 선택하는 속성입니다. ...