본문 바로가기

STUDY

(287)
Svelte | Svelte 프로젝트 github pages로 배포하기 github pages에 배포를 해보자...! 일단 build를 한 후 $ npm run build 빌드 결과물이 담긴 public 폴더로 이동 $ cd public index.html수정 "/"으로 시작되는 경로들을 모두 "./"으로 변경 public경로에서 git init후 gh-pages라는 브랜치 생성(브랜치명은 자유) $ git init $ git branch gh-pages 리포지토리 연동 $ git remote add [별칭] [리포지토리 주소] 그리고 푸시푸시베이비 $ git add . $ git commit -m "커밋메시지" $ git push origin gh-pages 이제 github 세팅을 변경합시다 Settings 메뉴로 들어가서 GitHub Pages설정에서 gh-pages로..
Svelte | 스벨트(Svelte)로 TODO LIST 만들기 (2) 할일을 추가했으니 삭제/완료 처리를 해야한다.. 1. 할일 삭제하기 이제 다 똑같다.. App.svelte에서 함수 생성하고, Todos컴포넌트로 전달 > Todos에서 TodoItem으로 전달 > 이벤트 연결 deleteTodo라는 함수를 생성해준다 id를 인자값으로 받아와서 filter를 이용해 걸러(?)준다 // src/App.svelte To Do List // Todos로 전달 이제 Todos에서.. TodoItem으로 전달하면 된다.. // scr/components/Todos.svelte {#each todoList as todo } // TodoItem으로 전달 {/each} 그리고 버튼 onClick이벤트에 연결 // src/components/TodoItem.svelte {todo.id..
Svelte | 스벨트(Svelte)로 TODO LIST 만들기 (1) 투두앱 질리지만.. 후딱 만들 수 있으니까 해보기로 합니다.. 1. 컴포넌트 생성 src폴더 하위에 compoents폴더를 생성한 뒤, Todos.svelte / TodoItem.svelte / Input.svelte 세 파일 생성 📌Todos : 투두 아이템을 감쌀 컴포넌트 📌TodoItem : 할일 하나하나.. 나중에 for each문이 돌면서 촤라락 나올 것.. 📌Input : 할일을 입력하는 컴포넌트 코드보기👇 더보기 💥Todos 💥TodoItem x 💥Input ADD 그리고 App.svelte에서 불러옵니다.. // src/App.svelte To Do List 2. Todo List 뿌려주기 App.svelte에서 todoList배열을 생성한 뒤 Todos컴포넌트로 props를 넘겨줍니다. ..
Svelte | Svelte프로젝트 시작해보기 말로만 듣던 스벨트 한 번 해보기로 했다! 1. 템플릿 다운로드 react의 CRA(create-react-app)처럼 git의 리포지토리를 클론받는 형식으로 세팅이 완료된 템플릿을 다운받는다. $ npx degit sveltejs/template [프로젝트명] The easiest way to get started with Svelte The easiest way to get started with Svelte This'll only take a minute. Rich Harris Mon Aug 07 2017 Svelte is a new kind of framework. Rather than putting a tag on the page, or bringing it into your app with i..
React | useRef로 DOM 선택하기 📌ref는 특정 DOM을 선택할 때 사용한다. 📌함수형 컴포넌트에서는 useRef Hook을 사용한다. 📌클래스형 컴포넌트에서는 React.createRef 함수를 사용한다. 📌Ref는 서드파티 DOM 라이브러리를 사용할 때, 애니메이션을 직접적으로 실행시킬 때와 같은 상황에서 사용한다. useRef를 사용하기 위해 Import import React, { useRef, useState } from "react"; 버튼을 클릭하면 input에 focus가 잡힌다! ✔️useRef()를 사용해서 ref객체를 만든다 ✔️ref객체의 current를 통해 DOM에 접근할 수 있다 ✔️ref={nameInput}을 이용해 ref객체를 전달한 것 function InputSample() { const [name,..
AWS | S3 HTTP Referer + CloudFront (S3 핫링크 방지) S3에 올라간 객체를 특정 도메인에서만 접근할 수 있도록 설정한다. ✔️Resource의 [bucket-name]부분에 꼭 해당 버킷 명으로 변경할 것 ✔️Referer를 하나만 적을 경우 []배열 지워줄 것 ✔️Effect 허용에 대한 설정이므로 Allow ✔️Principal은 정책을 적용할 대상. 모두 공개로 설정(*) ✔️파일을 보여줄 때의 상황이므로 Action은 GetObject가 됨 ✔️Condition은 조건절을 설정하는 곳. StringLike는 문자열을 포함한다는 뜻으로 aws:Referer를 통해 도메인을 설정한다 { "Version": "2012-10-17", "Id": "http referer policy", "Statement": [ { "Sid": "Allow get reque..
React | Next.js 사용해보기 (2) - Assets, Metadata 1. Assets static assets 이미지같은 정적인 리소스들은 public 폴더 하위에 둔다. public폴더 하위에 images폴더를 생성한 뒤, 이미지를 넣어줬다. 그리고 index.js에서 불러오기! 2. Metadata HTML의 나 태그는 Head 컴포넌트를 통해 수정할 수 있다. 페이지별로 title을 다르게 할 수 있다..!! 그냥 리액트만 사용할 땐 못했었던 것.. index.js에서 Head 컴포넌트를 import 한다. import Head from "next/head"; Head 컴포넌트를 정의해준다 태그와 태그를 Head 컴포넌트로 감싸주는 형식!
React | Next.js 사용해보기 (1) - 생성 및 실행, navigation 공식 문서를 보며 차근차근 따라해보기로 한다... Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 👀 Next.js Next.js는 리액트 프레임워크로, 리액트가 가지고 있는 여러 문제점(?)들을 해결해준다. ✔️page-based routing system ✔️SSG / SSR ✔️Fast Refresh 특히 SSR과 SEO때문에 사용해보고자 함... 0. Node.js 설치 Node.js가 설치되어있지 않다면 설치..