# render
6. JavaScript 공부하기_Process(프로세스) & Thread(쓰레드), Event Loop, Task Queue & Micro Task Queue & Render
Process, Thread, eventLoop, Render, Micro Task Queue, Task Queue
리랜더링시 애니메이션 재생
컴포넌트 최초 랜더링시에 애니메이션은 재생된다.하지만 리랜더링시에는 애니메이션이 다시 재생되지 않는 상황이 발생된다.문제상황라우터를 통해서 같은 포멧의 페이지 전환을 하려고 한다.같은 주소에서 params만 변경되면 주소만 바뀌로 리랜더링이 일어나지 않는다.때문에 us
Render와 State 좀 더 알아보기
리액트는 많은 기능 중 우리가 만든 컴포넌트를 화면에 렌더링 하는 역할도 맡고 있다. 리액트가 컴포넌트를 렌더링하는 이유는 크게 두가지로 나눌 수 있는데, 컴포넌트의 초기 렌더링과 컴포넌트의 state 변화이다. 아래에서 좀 더 자세히 알아보자. 당연히 맨처음 컴포넌트
[Front-end] 수업 #069일 1-5
React POFO 클론코딩 -> React로 옮겨보기 실습 >지난번 POFO 클론코딩 페이지를 HTML , CSS , JavaScript로 만들었고 그것을 토대로 React에 Component화 시켜서 옮기는지 간단하게 알아보는 시간이다. 의 구성 >에 기본적으로 가 들어가고 안에 Component를 생성하여 넣어준다. WrapComponent 최상위...
[알게된 것] Ref? 왜써야할까?
Ref를 사용해야 하는 이유는 크게 두 가지로 나뉜다.1\. DOM에 접근하여 HTML Element를 핸들링 해야하는 경우2\. 상태 변화를 갖는 변수가 필요하지만, 화면이 리렌더링 되는 것을 원치않는 경우위 이미지는 Virtual DOM을 정확하게 표현하는 자료라고
[Front-End] Redux란?
What is Redux? 개발 공부를 하다보면 Redux에 대한 이야기는 자주 나온다. 이번에는 Redux가 정확히 무엇이며, 우리가 왜 이를 사용해야되는지 알아보려한다. 더 나아가 어떻게 이를 사용할 수 있을지 한번 알아보자.
[React] Life Cycle
앱 개발을 하면서 렌더링 되기 직전 이나 새로 변경된 후 특정 작업을 수행해야 한다면 life cycle 은 확실히 잡고 넘어가는 것이 좋을 것이다.React 의 component Life Cycle 은 크게 3단계로 분류가 가능하다.Mount → Update → un
[리액트] 3. 컴포넌트 (1)
3. 컴포넌트 3-1. 컴포넌트 애플리케이션의 사용자 인터페이스를 설계를 할 때 사용자가 볼 수 있는 요소들은 여러 컴포넌트로 구성되어 있다. 컴포넌트는 단순한 템플릿 이상의 기능을 갖추고 있다. 데이터가 주어지면 UI를 구성 라이프사이클 API 이용 컴포넌트가 화면
[리액트] 1. 리액트 시작
1. 리액트 시작 1-1. 왜 리액트인가 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했다. 하지만 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 더 나아가서 서버 사이드는 물론 모바일, 데스크톱
TIL#7
1) > 프로젝트 폴더의 urls.py에서 gallery/ url을 입력했을 경우 gallery 앱의 urls.py를 include 하도록 설정해줬다. >> gallery 다음 url이 int type으로 넘어올 경우 이를 pk란 이름으로 넘겨줄 것이고, views.py의 item_detail 함수-뷰(혹은 호출 가능한 객체)에서 이를 처리할 것이다. ...
TIL#4
1) > 어떤 페이지가 요청되면 django는 해당 요청의 metadata를 포함하는 httprequest를 생성하고 이를 적절한 view function에 첫번 째 인자로 넘겨준다. >> GET, POST,FILES 등의 함수는 django/http/request.py에서 확인할 수 있는 바, HttpRequest 클래스의 초기화 메소드 init 아래 정...
SPA 그리고 SSR, CSR ?
오늘은 SPA 그리고 SSR, CSR에 대해 알아보자.신입 개발자 면접에 나오는 단골 질문, 도대체 이게 뭐란 말인가?SPA = 해석 그대로 하나의 페이지 ( HTML )만 존재하는 것이다.🖐 질문SPA는 CSR ( Client Side Rendering ) 방식으로
res.json vs res.send vs res.render 의 차이점
1. res.json 2. res.send 3. res.render df
Props & State
Props 는 컴포넌트 외부에서 컴포넌트에게 주는 데이터입니다.State 는 컴포넌트 내부에서 변경할 수 있는 데이터입니다.둘 다 변경이 발생하면, Render 가 다 시 일어날 수 있습니다.Props 와 State 를 바탕으로 컴포넌트를 그립니다.그리고 Prop 와
[6/24 일반] React/ 실습 - 리액트 작동 원리와 기초(문법, 컴포넌트)
1) 필기내용리액트 : FrontEnd 프레임워크 중 하나(요즘 제일 많이 쓰는 웹서비스 개발의 프레임워크)페이스 북 게발에 사용한 기술, 공개 소프트웨어(오픈), 화면 출력에 특화됨, 컴포넌트를 조립하여 화면 구성, GetElementById 이런 것들을 덜 사용,
[React] DOM과 Virtual DOM
HTML , CSS , JavaScript 등 개발자가 작성한 문서를 브라우저에서 출력하는 과정을 말한다.첫 번째로 브라우저가 렌더링할 문서를 읽게 되는데 HTML과 CSS로 나눠서 읽게 된다. 이때 HTML과 CSS는 단순한 텍스트이므로 각각 연산과 관리가 가능하도록
React.createElement 와 ReactDOM.render
예시 코드를 보며 React.createElement 와 ReactDOM.render 에 대해 알아보려 한다.Javascriptdocument.createElement(tagName, options)=> 지정한 tagName의 HTML 요소를 만들어서 반환ReactRe