준준의 기록일지

CSS in JS란? 스타일 정의를 CSS파일이 아닌 Javascript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 기존 웹사이트를 개발할 때는 HTML, CSS, JavaScript를 각자 별도의 파일에 두는 것을 BEST로 여겼으나 React, Vue, Angular로 인해 개발 페더라임이 바뀌고 있다. 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 되고 있다. 따라서 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고 각 컴포넌트에 HTMl ,CSS, JavaScript을 몽땅 때려 박는 패턴이 많이 사용되고 있다. React는 JSX를 사용해서 이미 Java..

DOM과 가상 DOM에 대해 이해해보자. 리액트와 상태관리 툴(리덕스 등)을 사용할때 불변성을 항상 신경써야된다. DOM (Document Object Model) 단순히 다큐먼트(웹페이지)를 객체로 표현하는 모델을 의미한다. 브라우저가 DOM을 이용해 화면을 렌더링하는 방법. 브라우저는 html태그를 파싱하여 돔 트리를 구성한다. 브라우저는 스타일시트에서 css를 파싱하여 스타일 규칙들을 만들어낸다. 위에서 언급한 돔 트리와 스타일 규칙 두 가지를 합쳐서 렌더 트리를 만든다. - 주의할 점 : 렌더 트리는 화면에 반영되는 것만 가지고 있기에 HTML의 모든 정보를 표현하는 돔 트리와 일대인 관계는 성립되지 않는다. 즉, 렌더 트리에는 없어도 돔 트리에는 있을 수 있는 것이다. 가상 돔(Virtual D..

public 가상 DOM을 사용하는 리액트는 실제 DOM이 필요하다. 즉, 가상 DOM이 들어갈 빈 껍데기 html이 필요하다는 것인데, 바로 그 껍데기가 존재하는 폴더. src 리액트 개발이 이루어지는 메인 폴더. 앞으로 우니는 src폴더를 주로 수정하고 src폴더에 있는 파일들을 작성할 것이다. render() 메소드 리액트 컴포넌트로 화면에 html뷰를 생성해주는 역할을 한다. return으로 받은 값들은, 나중에 html 코드로 바뀌게 된다. 그렇게 생성된 App 클래스를 export문법을 이용해 내보낸다. 고찰 index.js에서 App을 불러와 사용할 때에 html코드를 사용하는걸 () 볼 수 있는데, 모든 리액트 파일들은 전부 html 코드처럼 사용할 수 있다. 즉, html코드를 여러 개의..

이후 공부하자. 지금은 바쁨. 펌만 출처 : dev-momo.tistory.com/entry/React-Fast-Refresh React Fast Refresh 최근에 React 프로젝트르 세팅하다가 React-Hot-Loader 문서를 보니, React Fast Refresh라는 새로운 도구가 나온 것을 발견했다. React-Hot-Loader를 만든 페이스북 개발자 Dan Abramov는, 기존 핫 로더에 한계가.. dev-momo.tistory.com