멍멍이코더

https://kit.svelte.dev/docs/routing 😎 이 글은 공식문서를 번역한 것입니다. SvelteKit에서는 /src/routes의 하위 디렉토리가 URL의 경로가 된다. src/routes => '/' 경로 src/routes/about => '/about' 경로 src/routes/blog/[slug] => 'blog/1234' 와 같이 파라미터를 갖는 경로 1. +page 💡 +page.svelte +page.svelte 컴포너트는 페이지를 정의한다. 기본적으로 페이지는 초기 요청에 대해 SSR로 이뤄지고, 이후 탐색에 대해서는 CSR을 통해 브라우저에서 랜더링 된다. Hello and welcome to my site! About my site About this site TO..

Next.js 앱 생성 1. 프로젝트 생성 "npx create-next-app@latest --ts" 명령어로 Next.js 프로젝트를 생성한다. ❯ npx create-next-app@latest --ts ✔ What is your project named? … nextjs-init ✔ Would you like to use ESLint with this project? … No / Yes ✔ Would you like to use `src/` directory with this project? … No / Yes ✔ Would you like to use experimental `app/` directory with this project? … No / Yes ✔ What import alias w..

UseEffect import { useEffect, useState } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value) console.log("i run all the time..."); return ( {counter} click me ); } export default App; 버튼을 Click할 때마다 컴포너트가 Re-Rendering되어 con..

😎 이전게시글 2023.03.08 - [개발/React] - React App 만들기(1) - 프로젝트 생성 1. Button 컴포넌트 생성 src 폴더 하위에 text를 props로 가지는 Button.js 파일을 생성한다. function Button({text}) { return ( {text} ) } // App.js에서 import 하기위해 해당 코드를 추가한다. export default Button; Button 컴포넌트를 App.js에 import한다. 컴포넌트는 무조건 대문자로 시작해야 한다! import Button from "./Button"; function App() { return ( ); } export default App; 2. Props 타입 설정하기 prop-types ..

1. nodejs 설치 1) nodejs 공식사이트에서 각각의 OS에 맞는 버전을 다운로드하여 설치한다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2) node -v 커맨드를 통해 설치가 잘 되었는지 확인한다. > node -v v18.12.1 3) npx 명령어가 잘 동작하는지 확인한다. > npx Entering npm script environment at location: /Users/user/Desktop Type 'exit' or ^D when finished npx 란? 자바스크립트 패키지 관리 모듈인 npm(Node Packag..

Svelte Bundler의 역사 Svelte는 Svelte Framework의 공식 번들툴을 Rollup을 사용하였는데 이는 Svelte를 개발한 리치 해리스가 만든 번든툴이 바로 Rollup이었기 때문입니다. 당시 Rollup에서는 HMR을 지원하지 못했는데 이는 매우 강력한 기능이기에 Svelte에도 이러한 HMR이 되기를 바랬고 Svelte는 Rollup을 버리고 Snowpack을 공식 번들툴로 변경하려고 하는 작업을 하게 됩니다. 그렇게 해서 Svelte의 공식 번들툴이 Snowpack으로 변경이 되면서 Svelte도 esbuild의 빠른 속도와 강력한 HMR기능을 손에 얻게 됩니다. 그러나 snowpack은 안정적이지 못했습니다. 웹팩과 연동해서 사용하는 과정에서 다소 버그들이 있었도 webp..

Spring Boot + Svelte를 하나의 프로젝트로 관리하고자 할때 One Build가 가능하도록 프로젝트를 구성할 수 있다. 결론적으로 gradle build 명령어를 통해 Spring Boot + Svelte 프로젝트의 빌드를 한번에 할 수 있도록 프로젝트를 구성할 것이다. Svelte 빌드 결과물을 SpringBoot의 static 디렉토리로 위치 rollup.config.js output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/build/bundle.js' // 변경 전 } output: { sourcemap: true, format: 'iife', name: 'app', file: '../src/main/resourc..

Intellij에서 SpringBoot 프로젝트 생성 Intellij > File > New > New Project Gradle 관련 오류가 발생하면 Springboot와 Gradle 버전 충돌일 수 있으니 gradle > wrapper > gradle-wrapper.properties에서 Gradle 버전을 수정한다. SpringBoot 프로젝트 내부에 Svelte 생성 0. SpringBoot 내부에 frontend 디렉토리 생성 1. Svelte 프로젝트 생성 degit을 통한 github 저장소를 clone하여 사용한다. Svelte에도 공식 CLI가 있긴 했는데 지금은 더 이상 사용하지 않고, 공식 홈페이지에서도 예시로 주어진 템플릿 코드를 clone하여 사용하라고 설명하고 있다. degit이..