준준의 기록일지

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코드를 여러 개의..

SPA : Single Page Application, 하나의 웹 페이지로 구성된 애플리케이션 ex : 페이스북, 인스타그램, 핀터레스트 HTML/CSS/Javascript로 UI를 구현한다. 웹 페이지 하나로 대부분의 것들을 처리하지만 필요에 따라 웹 서버와 통신해서 처리한다. 기존 웹 기술과의 차이 기존 웹 기술 HTTP 요청과 응답의 반복으로 구성됐다. 따라서 다른 화면으로 변경하고자 한다면 반드시 웹 서버와 통신해야 했다. SPA HTML로 많은 부분을 처리할 수 있어 필요할 때만 웹 서버와 통신하면 된다. -> 더 편리, fast SPA 단점 여러 모듈을 읽어 들이므로 초기 실행에 시간이 오래 걸린다. 또한 화면을 구성하는 첫 렌더링 때도 시간이 오래 걸린다. 물론 한 번 읽어 들인 이후에는 쾌..