Self-Study 검색 결과
73 개의 검색 결과가 있습니다.
Self-Study/계란으로 바위치기

[Javascript] Base64 이미지 최적화

References https://ko.wikipedia.org/wiki/베이스64 https://blue-boy.tistory.com/227 https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f/38935990 서론 💡 핵심만 보고 싶으신 분은 하단의 “그래서 어떻게 최적화 할 것인가?” 파트만 보시면 됩니다. 글과 사진을 다채롭게 표현 하고자 할 때 위지윅(WYSIWYG, What You See Is What You Get) 기능이 담긴 텍스트 에디터가 필요한 순간이 있다. 그러나 어느 순간 이미지와 같은 데이터가 포함 된 글을 포..

2022. 12. 1. 19:46
Self-Study/계란으로 바위치기

[React] Next.js 레이아웃 설정

References https://logfetch.com/nextjs-multiple-layouts/ 개요 Next.js의 경우 기존 React와 달리 별다른 라우터 사전 설정이 필요 없는 장점이 있다. 그로 인해, 레이아웃을 설정하는 방법이 달라지는데 어떻게 해야 하는지 알아보자. 레이아웃 기본 설정 레이아웃 파일 만들기 레이아웃 파일을 생성한 뒤 다음과 같이 구현한다. /** DefaultLayout.js */ /** 레이아웃 파일 명칭은 자유! */ import { NavigationBar } from '../components/Header/NavigationBar'; import { Footer } from '../components/Footer/Footer'; // children : 해당 레이..

2022. 10. 19. 23:14
Self-Study/React

[React] React의 라이프사이클

References https://kyun2da.dev/react/리액트-라이프사이클의-이해/ https://velog.io/@minbr0ther/React.js-리액트-라이프사이클life-cycle-순서-역할 https://react.vlpt.us/basic 서론 React에서 데이터가 업데이트 되는 상황은 기본적으로 4가지이다. props가 바뀌는 경우 state가 바뀌는 경우 부모 Component가 다시 렌더링 되는 경우 Force Update 기능으로 인해 강제로 다시 렌더링 되는 경우 이러한 이벤트를 원활하게 처리하기 위해선 라이프사이클(Life-Cycle)이 필요한데 React에서는 어떤 방식으로 흘러가는지 기술한다. React의 라이프사이클 (Hooks) React의 라이프사이클은 크게 M..

2022. 10. 13. 15:19
Self-Study/Javascript

[Javascript] 데이터 바인딩의 이해

References https://sungjk.github.io/2015/11/22/AngularJS(2).html https://velog.io/@sunaaank/data-binding https://medium.datadriveninvestor.com/implementing-two-way-data-binding-without-using-any-framework-703963d00a94 데이터 바인딩이란? 데이터 바인딩(Data Binding)은 제공자(개발자)와 사용자가 접하는 데이터를 동일하게 묶는 기법으로, 자바스크립트 상에서 선언 및 반환한 데이터를 HTML 상에서도 동일하게 보일 수 있게 끔 하는 것이다. ... 변경 전 데이터 바인딩의 종류 단방향 데이터 바인딩 사용자의 입력에 따른 변경 이벤..

2022. 10. 13. 15:16
Self-Study/React

[React] Next.js의 기본 개념

References https://nextjs.org/ https://kyounghwan01.github.io/blog/React/next/basic/ Next.js의 정의 React를 이용한 SSR(Server Side Rendering) 프레임워크로 클라이언트 리소스 부담 절감 및 SEO(검색 엔진 최적화)를 목적으로 개발되었다. Next.js의 장점 hot reloading 별도의 새로 고침 기능 없이 소스 코드 저장시 자동 반영된다. 단, Async/Await 같은 비동기 함수의 경우에는 별도로 새로고침이 필요하다. automatic routing 기존 React의 라우팅의 경우 별도로 경로 지정 및 명칭을 지정해야했다. 반면, Next.js의 경우 이러한 과정 없이 프로젝트 폴더 내 /pages..

2022. 10. 6. 17:24