Jonghyun Jonghyun

오랜만에 지킬(jekeyll) 테마 기반의 깃헙 페이지에서 탈출하려고 합니다. Next.js 리액트 서버사이드 렌더링 프레임워크로 옮겨보았습니다. Mui + Next.js (feat. Typescript) https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts 리액트 진영의 컴포넌트는 거의 대부분 MUI를 활용하죠. 그래서 Next.js 예제를 찾아보았더니- 역시 최신 소스가 있군요. Next.js 는 이번 13버전으로 올라오면서 기존 page 라우터 기반에서 App 라우팅 방식으로 구조가 좀 변경되었습니다. 물론 기존 page 기반 라우팅도 선택적으로 활용할 수 있죠. 위 깃헙 소스를 클론하거나 적용하게 되면 아래와 같..

# SPA ## 히스토리 1. 서버-클라이언트(페이지 reload) 2. 템플릿 기반 Angular.js 등 3. 이젠 React.js 등 컴포넌트 개념의 다양한 라이브러리와 프레임워크 등장 ## 특징 1. 라우팅 2. 컴포넌트 ## 장점 1. 네이티브 앱과 유사한 UX 2. 정적 리소스를 최초에 한번만 로드 3. 페이지 갱신에 필요한 데이터만 전달받아 전체적인 트래픽 감소 ## 단점 1. 초기 구동 속도가 상대적으로 느림 ## SPA의 핵심 가치 UX 향상 및 애플리케이션 속도 향상 (Mobile First) https://m.blog.naver.com/dktmrorl/222085340333 # Javascript callback ## 정의 파라미터로 함수를 전달받아, 함수 내부에서 실행하는 함수 예)..

안녕하세요! 신규 프로젝트를 시작할 때 우리 개발자들이 흔히 하게 되는 고민 중에 하나이죠. 새로운 마음으로 이번에는 잘(?) 해보자!! 프로젝트의 폴더(파일) 구조를 잡는 것입니다. 지난(2021) 과제에서 React를 처음 사내 도입할 때는 React 공홈에 있는 "파일구조" 페이지를 잠시 둘러보고 개발하면서 리펙토링을 진행하였습니다. https://ko.reactjs.org/docs/faq-structure.html 파일 구조 – React A JavaScript library for building user interfaces ko.reactjs.org 동시에 다른 분들의 기술 블로그도 조금 차용하였죠. 최근 구성한 구조는 아래와 같습니다. 보시다시피... 정리가 안되어 있죠. 프로젝트가 끝난지 ..