니엘의 개발일지

인증 이벤트 페이지의 백엔드를 장고로 구현하였다.(관리자 기능의 편리성때문에) 아래와 같이 썸네일을 클릭하면 크게 볼수 있고 다시 누르면 작아지게 해 달라는 요청이었다. settings.py에 가서 아래와 같이 템플릿을 사용할 경로를 지정해 주고 template/admin/base_site.html에 아래와 같이 작성하면 기본 admin html파일에 추가된 태그를 오버라이딩 해 준다. {% extends "admin/base.html" %} {% load static %} {% block extrahead %} {{ block.super }} // header에 들어갈 메타데이터를 삽입하면 됨 {% endblock %} 1. 장고어드민의 데이터는 SSR이 아니라, 템플릿을 불러온후 프론트에서 ajax콜..

Hydration 리액트는 DOM에 React 컴포넌트를 렌더링 해주는 render 메소드를 제공, render 함수는 컨테이너의 자식으로 리액트 컴포넌트를 넣어 주는데, 기존에 이미 렌더링 된 리액트 컴포넌트가 있으면 새로 렌더링 해주는것이 아니라 가상돔을 통하여 업데이트 작업만 해 준다. 그리고 렌더링이 완료되면 callback 함수가 실행되게 할 수 있다. ReactDOM.render(element, container[,callback]) 또한 hydrate 메소드도 아래와 같이 제공한다. ReactDOM.hydrate(element, container[, callback]) 서버사이드 렌더링을 진행해서 Static한 HTML을 서버로부터 받아 왔을때에는 굳이 ReactDom의 render 과정이 ..

최근 새로운 프로젝트를 맡게 되면서 클래스형 컴포넌트와 styled componet를 사용하게 되었다. 기존의 리액트 컴퍼넌트와 동일하게 props를 내려 받아 CSS 스타일링이 가능하다. & 문자를 사용하여 Sass처럼 자기 자신 선택이 가능하다. render() { const {content, someState} = this.state ... {content} } const Font16 = styled(Content.FontSize16)` font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.88; letter-spacing: -0.16px; text-align: left; color: ${(props) => (props..

네비게이션 바가 특정 위치만큼 내려왔을 때 CSS를 변경해야 하는 순간이 있다. window.addEventListener('scroll', () => console.log(window.scrollY)); 이러면 스크롤이 되는 매 순간마다 함수가 호출되기 때문에 이를 최적화 해줄 필요가 있다. 보통은 throttle 함수를 사용하여 최적화를 했으나 이번엔 새로운 방식으로 최적화를 하려고 한다. 쓰로틀 함수 export default function throttle(fn, threshhold, scope) { threshhold || (threshhold = 250); let last, deferTimer; return function () { let context = scope || this; let n..