✅리액트 컴포넌트의 생명주기
클래스형 컴포넌트의 생명주기 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 : 이 속성은 글자가 지정한 너비를 넘어갈경우 어떤식으로 처리할 것인지를 선택하는 속성입니다. ...
[ubuntu] GUI, 원격 데스크톱(Xrdp) 설치하기
우분투 서버에 파일을 만들고 수정해야 해서 원격 접속이 필요했다. 원격 접속을 위해서는 우분투에 GUI와 원격 데스크톱을 설치해야 한다. SSH 접속 [AWS의 기본 04] EC2 인스턴스에 SSH로 접속하기 GUI 설치 우선 사용자 패스워드를 설정한다. sudo passwd ubuntu apt-get 도구 업데이트, 업그레...
[AWS] Route 53에 도메인 등록하여 사용하기
도메인 등록하기 freenom.com에서 무료 도메인을 만든다. .tk, .ml, .ga, .cf, .gq 다섯가지 최상위 도메인이 무료로 제공된다. 원하는 도메인이름 + 최상위 도메인 합쳐서 검색한 후 신청한다. 최대 12개월 무료이며 12개월이 되기 전에 renew를 해주면 계속...