여름 언덕에서 배운 것

state란?state는 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 리액트 내장 객체다.State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다.State의 값을 변경하기 위해서는 반드시 setState 함수를 이용한다,State는 변경되면 자동으로 재렌더링 된다.useState : 컴포넌트의 상태를 관리하는 함수로 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다.const [state, setState] = useState(초기값);value : 값을 저장하는 변수modifier : value 값 변경이 가능하며 자동으로 re-rendering 해준다. 예제)import React, { useState } from 'react'; functio..

React란? facebook에서 제공해주는 자바스크립트 UI 라이브러리로서 사용자 인터페이스를 만들기 위해 사용된다. 리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다보니 프레임워크 Angular와 달리 웹을 만드는데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않는다. 따라서 추가적인 라이브러리를 사용해줘야 함. 📌 프레임워크와 라이브러리의 차이는? 더보기 프레임워크 라이브러리 공동점 다른 사람이 만들어 둔 코드 차이점 다른 사람이 만든 틀(Frame)안으로 들어가서 작업하는 것 내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것 예) Spring, Angular, django jQuery, react 왜 React를 사용할까? React를 사용하면 개발자가 페..

브라우저의 동작 브라우저 렌더링 과정 1. DOM tree 생성 : 렌더 엔진이 HTML코드를 읽고 파싱하여 DOM 노드로 이루어진 트리 생성 DOM이란? Document Object Model의 약자로 DOM은 html, xml, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주하고 관리한다. 2. render tree 생성 : css 파일이나 html에 인라인으로 작성된 스타일 코드를 파싱하여 css DOM을 구성한다. DOM + CSSOM = 렌더 트리를 생성 (문서에 시각적인 구조를 나타냄) 3. Layout(reflow) : 뷰포트 내에서 생성된 render tree의 각 노드들의 스크린에서의 좌표에 따라 위치 결정 4. Paint(repaint) : 실제 화면에 그리기 렌더링이란? HTM..

Vue.js를 왜 쓰는지? 기존 MVC의 문제점인 서버와 통신해서 사이트 화면에 뭔가 변화를 주려면 페이지를 통째로 로드했어야함(페이지를 로드하기위해 서버가 데이터베이스를 다시 불러오고 이 데이터들을 HTML,CSS,Javascript로 작성해서 사용자의 브라우저로 보내주는 과정을 반복하여 비효율적이고 데이터 낭비도 커짐) ajax란 기술이 나온 이후로는 http 통신으로 데이터를 전송하고 결과를 받아와서 사이트의 일부만 변경하라고 자바스크립트로 명령을 줄 수 있게 됨. 대신 일일이 프로그래밍해야하는 불편이 있음. 예전에는 PC용 웹사이트 하나만 만들면 되었지만 현재는 모바일 사이트, 아이폰과 안드로이드용 앱과 서버까지 개발해야함. 먼저 pc용 사이트 접속이 들어오면 데이터베이스에서 정보를 찾아서 그걸로..