# render
Django 배우기(4)
📎 생성기능 구현 👉 목표 이번에는 글을 작성하는 부분을 만들어본다. title을 작성하는 부분과 글의 body를 작정하고 제출 버튼을 누르면 topics에 추가가 된다. 그리고 새로 생성된 topic을 클릭하면 그 페이지의 상세보기 페이지로
Express.js(4.x API)의 res.redirect, res.render 그리고 보안
Express.js의 `res.render`는 서버에서 HTML 생성 및 전송에 사용되며, `res.redirect`는 클라이언트를 다른 URL로 리다이렉트합니다. 보안을 위해 사용자 입력 처리와 경로 보안에 주의해야 합니다.
리액트 렌더링 (trigger, render, commit)
Triggering a render (주문을 주방에 배달)Rendering the component (주방에서 주문대로 요리)Committing to the DOM (손님에게 서빙)render가 일어나는 두 가지 원인(trigger)1) initial render (컴
React가 VirtualDOM을 활용하는 방법
원티드 프리온보딩 프론트엔드 챌린지 4월 - 리액트 해부학VirtualDOM, Reconciliation, FibercreateRoot()과 render()의 역할React가 Reconciliation을 통해 화면을 그리는 방법Fiber Reconciler의 rende
JavaScript 공부하기_Process(프로세스) & Thread(쓰레드), Event Loop, Task Queue & Micro Task Queue & Render
Process, Thread, eventLoop, Render, Micro Task Queue, Task Queue
Jest + Testing Labrary 기본 문법
CRA로 앱 설치했을 때 기본 제공되는 테스트 코드인자로 주어진 컴포넌트의 JSX에 대한 가상 DOM을 만든다.screen global을 통해서 가상 DOM에 접근한다. render 메서드와 screen global 객체 둘 다 RTL를 import해서 가져온다. (
리랜더링시 애니메이션 재생
컴포넌트 최초 랜더링시에 애니메이션은 재생된다.하지만 리랜더링시에는 애니메이션이 다시 재생되지 않는 상황이 발생된다.문제상황라우터를 통해서 같은 포멧의 페이지 전환을 하려고 한다.같은 주소에서 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 함수-뷰(혹은 호출 가능한 객체)에서 이를 처리할 것이다. ...
