석봉노트 석봉노트

분류 전체보기

• React 시작하기 2. Props

  DEV/react 2023. 12. 15. 18:48

  Props Properties는 component에 데이터를 전달하기 위해 사용됩니다. 1. src/App.js import React from 'react'; import Sample from './Sample'; function App() { return ( ); } export default App; 2. src/Sample.js // 컴포넌트 생성을 위해 React Import import React from 'react'; /** * [Props sample] * @param {*} props 전달 데이터 * @returns */ function Sample(props) { return {props.text} {props.name} sample component!! } // 컴포넌트 내보내기 (..

  Read More
• React 시작하기 1. Component

  DEV/react 2023. 12. 15. 16:09

  리엑트 프로젝트를 생성하였다고 가정하고 컴포넌트를 만들어보자. (프로젝트 생성 참고) https://seokbong.tistory.com/116 React node로 react app 만들기 및 실행 *node가 설치되어 있어야 함. react app을 만드는 명령어는 다음과 같다. npx create-react-app [앱 이름] 설치 후 하단 명령어를 통해 해당 폴더로 진입 및 실행 cd [앱 이름] npm start https://reactjs.org/docs/create- seokbong.tistory.com 1. src/Sample.js import React from 'react'; function Sample() { return Sample Component!! } export default..

  Read More
• svelte 데이터 불러오기, 불러온 데이터 사용하기

  DEV/svelte 2023. 11. 28. 15:49

  데이터를 불러올 route에 "+page.js" 파일을 생성하고 다음과 같이 데이터를 export한다. 본인은 src/routes/sample 에서 테스트하였다. svelte는 SSR(Sever Side Rendering) 또한 지원하기때문에 클라이언트에 노출되지 않고 사용하고 싶다면 "+page.server.js"로 파일을 생성하면 된다. DB접근이나 API키 사용 등 필요에 따라 사용하면 된다. ref) https://kit.svelte.dev/docs/routing Routing • Docs • SvelteKit Routing Edit this page on GitHub On this page On this page At the heart of SvelteKit is a filesystem-base..

  Read More
• svelte layout?

  DEV/svelte 2023. 11. 28. 15:11

  svelte의 레이아웃은 "+layout.svelte" 파일을 생성하여 적용 가능하다. 아래 예시를 보면 아주 쉽게 이해할 수 있다. ref) https://kit.svelte.dev/docs/routing Routing • Docs • SvelteKit Routing Edit this page on GitHub On this page On this page At the heart of SvelteKit is a filesystem-based router. The routes of your app — i.e. the URL paths that users can access — are defined by the directories in your codebase: src/routes is the ro ki..

  Read More
• svelte route와 page 생성 및 error page

  DEV/svelte 2023. 11. 28. 14:04

  svelte 프로젝트를 생성하면 기본적으로 다음과 같은 구조를 갖는다. (생성 방식에 따라 차이가 있을 수 있음) Routes 폴더에 "+page.svelte" 파일이 기본적으로 존재하며 svelte 로컬에서 나오는 페이지가 "+page.svelte" 임을 확인할 수 있다. 실제로 "routes/+page.svelte" 파일을 수정하면 로컬 브라우저에서 즉시 수정됨을 확인할 수 있다. 작성 방식은 기본적인 html 작성 방식을 따르면 된다. 여기서 확인한 것은 "src/routes/+page.svelte"은 localhost를 의미하는 것이다. 경로 기반 라우팅을 생각하면 된다. 그렇다면 다른 route 설정은 어떻게 할까? 그렇다고 합니다. + error page ref) https://kit.svel..

  Read More