STUDY/TIL (27) 썸네일형 리스트형 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.. S3와 CloudFront Amazon Simple Storage Service(Amazon S3)? 인터넷 스토리지 서비스(저장소) = 데이터(사진, 동영상, 문서 등)를 저장해두는 곳 = 웹에서 파일에 접근 할 수 있음 저장 공간을 무제한으로 제공하고 고가용성 및 내구성이 높은 방식으로 데이터를 저장함 하나의 데이터가 5TB를 초과하지 않는 한 모든 종류의 데이터를 저장할 수 있음. 버킷(bucket): 객체에 대한 컨테이너. 모든 객체는 특정 버킷에 포함됨. S3 최상위 폴더. 객체를 그룹핑. 100개까지 생성 가능. 전역적으로 고유한 이름을 사용해야 함.(버킷은 리전별로 생성가능하나 버킷 이름은 모든 S3리전 중에서 유일해야 함). 폴더(계층구조)생성이 가능하나 실제로는 객체 이름이 경로까지 포함하는 것. 객체(object.. Public API로 GraphQL 경험해보기 GraphQL을 간단하게 경험해보기 위해 공용 API에 접근해보기. 0. 사용할 공용 GraphQL API 릭앤모티api. 캐릭터목록, 에피소드 등을 반환해준다. 간단해서 사용해보기 좋을 것 같아 선택. graphql로도 지원하기 때문에 플레이그라운드로 경험해볼 수 있다. query와 mutation이 가능. Documentation This documentation will help you get familiar with the resources of the Rick and Morty API and show you how to make different queries. rickandmortyapi.com 1. project 생성 create-react-app으로 생성해줌 $ create-react-ap.. GraphQL GraphQL은 쿼리 데이터베이스용으로 만들어진 개념을 가져다가 인터넷에 적용해 만들어진 것입니다. GraphQL 쿼리 하나로 여기저기 흩어져 있는 데이터를 한데 모아 받습니다. SQL처럼 GraphQL 쿼리도 데이터를 변경하거나 삭제할 때 사용합니다. GraphQL과 SQL은 둘 다 쿼리 언어이기는 하나, 사용 환경이 완전히 다릅니다. (출처: 웹 앱 API 개발을 위한 GraphQL | 이프 포셀로, 알렉스 뱅크스 저) SQL 쿼리 데이터베이스로 보냄 SQL데이터는 데이터 테이블 안에 저장돼 있음 데이터베이스용 쿼리언어 주로 벡엔드 시스템에서 작성하고 호출 GraphQL쿼리 API로 보냄 GraphQL데이터는 저장 환경을 가리지 않음 - 단일 데이터베이스, 여러 개의 데이터베이스, 파일 시스템, RE.. Ionic | 아이오닉 + 리액트 프로젝트 시작하기 0. Node.js가 설치되어있어야 함 아래 명령어를 입력했을 때 Node의 버전 정보가 뜨면 설치되어 있는 것. $ node -v 1. Ionic 설치 -g명령어를 통해 글로벌로 설치해주기. $ npm install -g @ionic/cli 2. 새로운 프로젝트 생성하기 현재 리액트를 사용하여 프로젝트를 만들 것이기 때문에 type은 리액트로 지정해주었습니다. 템플릿은 세 가지 종류 중 한 가지를 선택할 수 있습니다. $ ionic start [프로젝트명] [템플릿] --type=react // 예시 $ ionic start ionicReact blank --type=react 3. 브라우저에서 프로젝트 구동시키기 ionic serve를 입력하면 8100번 포트로 아이오닉-리액트 프로젝트가 브라우저에 .. 네이티브 앱, 웹 앱, 하이브리드 앱 Native App? 구글 플레이스토어, 앱 스토어에서 설치 가능 - 기기의 홈 화면에서 접근가능한 아이콘 생성 운영체제에 맞는 개발언어 사용 - Android는 Kotlin(혹은 Java), iOS는 Swift(혹은 Objective-C) 모바일 장치의 기능(GPS, 카메라, 전화번호부 등)을 최대한 사용할 수 있음 푸쉬 알림(Push Notifications) 가능 인터넷 연결이 되지 않은 오프라인 상황에서도 사용 가능 UI/UX 구성요소 대부분이 패키지 혹은 라이브러리화 되어 제공되므로 로딩시간이 단축됨 각 플랫폼 별로 따로 개발해야 함 - 개발시 더 많은 비용과 시간을 소모 업데이트를 자주해주어야 함 Web App? 따로 다운받을 필요 없음 - Safari나 Chrome과 같은 브라우저 환경에서 .. 이전 1 2 3 4 다음
