Front-End (8) 썸네일형 리스트형 파일-시스템 라우팅 이해하기 앞서 Next.js를 시작한 프로젝트 폴더에서 파일-시스템 라우팅을 살펴보겠습니다. 공식문서 URL도 남겨놓을게요,https://nextjs.org/docs/app/building-your-application/routing Building Your Application: Routing | Next.jsLearn the fundamentals of routing for front-end applications.nextjs.org I. App RouterIn version 13, Next.js introduced a new App Router built on React Server Components, which supports shared layouts, nested routing, loading sta.. Next.js 시작하기 I. Next.js 란?https://nextjs.org/ Next.js by Vercel - The React FrameworkNext.js by Vercel is the full-stack React framework for the web.nextjs.orgNext.js는 React Framework (vs Library) 라고 합니다. 리액트는 라이브러리로 알려져 있고, 개발에 있어서 주도권이 개발자에게 있었지만 Next.js는 주도권이 우리에게 없다고 보면 됩니다. 대신, 프레임워크를 사용해 여러가지 결정과 처리를 자동화하고 정해진 룰(Rule)을 따라서 개발을 진행하면 되는 장점이 있다고 알고있습니다. 핵심적인 기능은 다음과 같습니다 (공식사이트 참조) Next.js가 제시한 규칙을 지키고 사용.. ES6 Module System 이해하기 모던 자바스크립트라고 부르는 현재의 Javascript ES6 표준에서는 기존 ES5와 다르게 여러가지 변화가 있었는데, 그중에 하나인 모듈 시스템에 대해서 제대로 이해하기 라는 저 나름의 정리를 위한 포스팅을 해보았습니다. I. 자바스크립트 모듈https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules JavaScript modules - JavaScript | MDN이 가이드는 JavaScript 모듈 구문을 시작하는데 필요한 모든 것을 제공합니다.developer.mozilla.org 위 MDN 문서를 참고하시는것을 추천해드립니다. 자바스크립트는 알려져있는 대로 그 시작이 간단한 효과를 웹에 추가하기 위해 시작된 언어로, 초기에는 그렇게 .. React.js | Vite로 시작하기 이 글은 리액트 v18 기준입니다. 사실 작년까지는 CRA로 리액트 프로젝트를 사용했던것 같아요, 뭐...한두번이야 직접 CDN 방식으로 React를 구성해보기도 했지만..알잖아요? 귀찮은거.. 혹시나 CRA도 궁금하신 분들은 (아마 없겠죠?) 아래 북마크를 참고해보시고요,..일단 vite에 대해서 살펴보려고 해요! https://create-react-app.dev/ Create React App Set up a modern web app by running one command. create-react-app.dev 대부분 CRA에 익숙할거 같네요, 저도 그랬으니깐...일단 vite를 사용해서 프로젝트를 구성한지는 얼마 되지 않아서, 어느정도 정리 차원에서 글 남기는거니깐~ 일단 vite(프랑스어로 .. 한 입 크기로 잘라먹는 타입스크립트 자바스크립트만 쓰다가 보면, 타입스크립트의 필요성이 부쩍 느껴지곤 했는데..마침 인프런에서 타입스크립트 강의가 올라와서 관심을 두고 있던차에~ 강의 저자께서 50% 할인쿠폰 증정 이벤트 소식도 알려주셔서 무사히(?) 쿠폰도 받고, 간만에 인프런 강의 하나 수강해봤습니다. 사실, 교재는 사두고 이따금씩 이건 이렇지~ 하다가 제대로 못 익혀볼것 같아서 ㅎㅎ 작심하고 결제!! 했어요 두근두근, 1강부터 들어보고 있지만..졸음이 @.@ 난 졸린데, 지칠순 없지..다들 열심히 수강을 하시는군요 ㅎㅎ 아시다시피 타입스크립트는 요즘 필수죠, 자바스크립트의 한계를 느낄때쯤..타입스크립트를 익혀야하잖아요 먼지쌓인 타입스크립트 책도 꺼내어 보고, 정환님의 강의를 2강까지 수강하고 열심히 해보겠다는 다짐을 하며~ 오늘은 자.. React 준비운동! 아, 오늘 시간이 조금 생겨서~ 글 하나 더 투척할게요 ㅎ 지난 시간, 이야기 했던것 처럼 리액트를 사용하려면 HTML, CSS, Javascript를 접해보고 이게 뭔지, 어떤 특징이 있고 무엇을 할 수 있는지 정도는 알아야 리액트를 사용할 수 있을거에요 먼저, 본 글은 이전 게시글은 'React 개발 환경 구축하기' 파트에 이어서 작성하려고 하니까, 아직 준비가 안되신 분들은 아래 링크를 클릭해서 '개발환경'을 구축하고 다시 와주세요! https://stack-full.tistory.com/5 React 개발 환경 구축하기 와, 티스토리 블로그 만들어 놓고 진짜! 오랜만에 글을 써봐요..이번이 두번째 글이네요 일단 React(=리액트)가 뭔지 부터 다시한번 짚어보고 오늘 주제에 따른 내용을 기록해볼게.. React 개발 환경 구축하기 와, 티스토리 블로그 만들어 놓고 진짜! 오랜만에 글을 써봐요..이번이 두번째 글이네요 일단 React(=리액트)가 뭔지 부터 다시한번 짚어보고 오늘 주제에 따른 내용을 기록해볼게요 I. 리액트란? 어, 그러니까 우리가 사용하는 웹이나 앱의 화면,버튼 같은것들 있잖아요? 그걸 보통 인터페이스라고 해요, 그냥 화면이라고 볼수도 있고 사용자가 편리하게 서비스를 이용할수 있게 색상이나 각종 단추나 검색창같은것들을 화면에 그리거나 배치시키는거 말이에요, 리액트는 크게 2가지로 구분하면 되거든요, 리액트(React) 리액트 네이티브(R.N : React Native) 우선 웹은 리액트, 앱은 리액트 네이티브 이렇게 구분하시면 됩니다. 일단, 리액트 네이티브는..이후에 주제로 다루고 본 글의 주제인 리액트에 대해서.. React Step by Step. 시작해볼까요?! full-stack-junior가 만들어가는 블로그입니다. spa 프레임워크인 Vue.js 그리고 React.js 위주의 블로그를 만들어볼게요! 1. Vue.js (https://kr.vuejs.org/v2/guide/index.html) 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 2. React.js (https://ko.reactjs.org) React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 3. Angular.js (아..이건..) 그리고~! 4. typescript(https://www.typescr.. 이전 1 다음
