k777agent 님의 블로그

Q. 본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요.CSS-in-JSCSS-in-JS란 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 스타일링 하는 방법을 말합니다.👍장점▪️ 지역 스코프 스타일 : CSS로 스타일링 할 경우 전역 스코프 스타일에 영향을 미치기 때문에 클래스 이름이 중복되는 일이 없도록 신경써야하고, 어떤 CSS파일에서 스타일링 적용된 것인지 찾는 것도 어려울 수 있습니다. CSS-in-JS는 기본적으로 스타일을 지역 스코프로 지정하여 이 문제를 완전히 해결합니다.▪️ 자바스크립트 변수를 style에 사용 : 스타일 규칙을 작성할 때 스크립트 변수를 참조할 수 있습니다. 동일한 상수를 CSS 변수와 자바스크립트 상수로 나눠 정의할 필요가 없기 때문에, ..

Presentational & Container 디자인 패턴소개리액트에서는 눈에 보이게 UI를 표현(present)하기 위한 코드와 해당 UI가 가지는 기능을 하나의 컴포넌트 안에서 선언할 수 있습니다. 이것은 분명 리액트가 가지는 특징이자 장점이죠.Presentational & Container 디자인 패턴은 리액트 컴포넌트 중 UI를 표현하는 코드와 기능을 동작하게하는 코드를 분리하기 위한 고민으로 부터 ****만들어진 패턴입니다. 이 패턴은 이 고민을 해결하는 다양한 제안 중 하나입니다.이번 레슨에서는 Presentational & Container 디자인 패턴이 등장한 이유를 이해하고 사례를 통해 Presentational 컴포넌트의 역할과 Container 컴포넌트의 역할분리에 대한 교훈을 얻을..

클래스형 컴포넌트 생명주기생성할 때constructor : 컴포넌트의 생성자 메소드로, 가장 먼저 실행하는 메소드입니다.getDerivedStateFromProps : props 로 받아온 것을 state 에 설정하고 싶을 때 사용합니다.render : 컴포넌트를 렌더링하는 메소드입니다.componentDidMount : 컴포넌트의 첫번째 렌더링이 마치고 나면 호출하는 메소드입니다.업데이트getDerivedStateFromProps : 컴포넌트의 props 나 state 가 바뀌었을 때도 해당 메소드를 호출합니다.shouldComponentUpdate : 컴포넌트의 리렌더링 여부를 결정하는 메소드입니다.render : 업데이트한 내용을 렌더링합니다.getSnapshotBeforeUpdate : 컴포넌트에..

Boiler Plate 이란?Create React App(CRA)은 Facebook 에서 만든 리액트의 보일러 플레이트(Boiler Plate)입니다.컴퓨터 프로그래밍에서 보일러 플레이트 코드 또는 보일러 플레이트란 변형이 거의 또는 전혀 없이 여러 위치에서 반복되는 코드 섹션입니다.출처 : 위키백과 매번 반복되는 절차를 미리 구현해 놓아 재사용 가능하게 만들어놓은 프로그램같은 의미라고 볼 수 있습니다. 그래서 웹개발 쪽에선 개발을 시작할 초석이 되는 template 같은 의미로 보일러 플레이트라는 말을 쓰는듯합니다.그리고 CRA가 바로 리액트의 보일러 플레이트중 하나입니다.Create React App (CRA) 이란?손쉽게 최신의 리액트 앱을 설정할 수 있도록 하는 명령어아무런 초기 설정 없이도 C..

1. 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.DOM이란 Document Object Model의 약자로, 한국어로는 문서 객체 모델입니다. 간단하게 표현하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것으로 생각하면 됩니다. 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분됩니다.리액트 이전기존 웹페이지에서 서버와 통신하며 요청을 주고 받으면, 받은 데이터를 DOM 객체에 속성값들을 변화시키거나 DOM을 추가 또는 제거하도록 만들었습니다. 그리고 이러한 변경이 있을 때마다 DOM 객체의 변경에 대한 코드를 만들어줘야 했습니다. 뿐만 아니라 DOM 객체에 대한 연산이 많아질수록 reflow, ..

서론React란 무엇이고 정의와 특징에 대해 설명하려 합니다. 또한 React에서 나오는 기술면접 질문에 답을 해보려고 합니다.React란?리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.출처: 위키백과React는 facebook에서 제공하는 프런트엔드 라이브러리입니다.싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있습니다.React를 사용하는 이유?React를 사용하지 않더라도 html, css, javascript를 활횽하여서 웹페이지를 제작할 수 있지만 React를 활용하면 JSX를 JavaScript에 넣음으로써 간결하고 가독성이 ..