개발
-
브라우저가 그려지는 원리와 가상 돔개발/React (페이지 제작과정) 2023. 7. 31. 07:13
웹 페이지 빌드 과정 (Critical Rendering Path) CRP 서버 -> HTML 문서 -> 브라우저의 과정을 CRP라고 한다. DOM tree 생성 렌더 엔진이 문서를 읽어들여 그것들을 파싱하고 어떤 내용을 페이지에 렌더링 할지 결정 Render tree 생성 화면에 표시되는 모든 콘텐츠 및 스타일 정보를 포함 Layout(reflow) 브라우저 각 요소의 크기와 위치를 계산하는 단계 Paint 실제 화면에 그리기 위와 같은 과정을 거쳐서 실제 우리가 사용하는 웹사이트가 우리에게 보이게 된다. 솔직히 난 이런거 모르고 개발부터 때려 박았는데.. 뭔가 잘못된 것 같다.. 헤헤.. 이제부터 열심히 해보자.. 위에서 문제접은 어떤 환경에 의해 DOM이 조금이라도 변화되면 위 과정을 다시 반복해야..
-
React 컴포넌트란?개발/React (페이지 제작과정) 2023. 7. 27. 16:24
예시를 들자면 한 페이지에 여러개의 컴포넌트가 모여서 하나의 페이지를 이루어진다. 네이버가 그렇다는건 아니지만 이런식으로 구성할 수 있다는 것이다. 위 예시에서는 검색, 뉴스, 로그인, 광고 등 여러 컴포넌트를 동시에 개발 할 수 있다는 장점이 있다. 또한 재사용성또한 좋아지게 된다. 그리고 컴포넌트는 함수형과 클래스형이 존재한다. 아래는 함수형 컴포넌트 이다. 직관적이며 메모리 자원도 덜 사용하게 된다. 빌드 후 배포할때 컴포넌트의 파일크기도 작아진다. function hello() { return ( Hello React ) } export default hello; 아래는 클래스형 컴포넌트이다. 클래스형에서는 render을 이용해서 jsx를 반환해야 한다. 클래스형에서는 함수와 다르게 lifecyc..
-
-
Redux란 무엇인가?개발/두서없이 공부한 개발공부 2023. 5. 28. 21:05
React로 로그인과 회원가입을 구현하려고 하면 Component 간의 정보를 공유해야 하는데 내가 기본적으로 알고 있는 방법은 Props 방법이었다. 일단 모르는 사람을 위해 Props란 : 부모 Component에서 자식 Component로 Props를 통해 데이터를 전달할때 사용하는 속성이다. 상위 Component가 하위Component에 값을 전달해서 단방향 데이터 흐름을 갖고 부모 Componet는 수정이 가능하지만 자식 Component는 읽기만 가능하다. 위에서 아래로 내려주는 형태를 듸고 있는데 이걸로 만약 회원가입과 로그인을 만든다고 하면. 여러 문제가 생겼다.. 대표적으로 Prop Drilling 이라고 한다. Prop Drilling은 간단하게 말하자면 Prop를 추적하기 어렵다는것..
-
React를 공부해 보자 2. React 시작하기개발/React (페이지 제작과정) 2023. 5. 19. 13:26
저번까지 React를 공부하기 위한 환경을 만들었다면 이제는 React를 실제로 다뤄보자. 아무래도 처음 하다 보면 이해가 안 될 것이다. 블로그를 보고 클론코딩을 하는 사람들은 네이버와 구글에 해당 부분을 검색하면 자세히 풀어서 설명해 주는 내용들이 많을 것이다. 따라만 하지 말고 공부를 해보자 1. 먼저 터미널을 열어서 React_study 폴더에 들어가자 npx create-react-app client 한번만 설치할 때 쓸 거라서 npx를 사용한다 자 왼쪽을 보면 뭐가 많이 설치된 것을 알 수 있다. src 폴더는 우리가 많이 보게 될 폴더이다. 우리는 터미널에서 cd .\client에 먼저 들어가야 한다. client 폴더에 우리가 실행할 파일들이 있으니 적고 npm start를 적으면 이런 글..
-
React를 공부해 보자 1. React 간단 설명 개발 환경 구축개발/React (페이지 제작과정) 2023. 5. 17. 10:32
React 웹개발을 공부를 하려고 한다. 일단 선행적으로 먼저 해야 할 것이 있다. HTML javascript, css는 기본적으로 알고 하는 것이 좋을 것 같다. React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.legacy.reactjs.org React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 장점은 컴포넌트 기반이라 데이터를 쉽게 전달할 수 있으며 페이지가 넘어가더라도 페이지가 새로고침 되지 않는 장점이 있다. 메타(구 facebook)에서 밀어주고 있으며 현재 많이 쓰이는 언어라고 한다. 더 좋은 점들이 많다고 하는데 궁금할 경우 위의 링크에 들..