Eddie Sunny's Blog

Svelte

Svelte - Reactivity

2020.12.26

📌 목록 Introduction Assignments Declarations Statements Updating arrays and objects Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 가장 중요한 reactivity에 대해서 알아보겠습니다. 되게 javascript 스럽더라구요. 직관적이기도 합니다. vanila javscript를 짜는 느낌이 많이 강하게 들었던거 같아요. 그럼 한번 볼까요? 📌 Assignments 일단 먼저 간단하게 counter를 구현해볼게요. reactivity를 확인하기 위해서 click event를 사용하게 됩니다. {count} + - let 키워드를 간단하게 바로 이렇게 해줄 수 있어요. 📌 Declarations vue에서의..

Svelte

Svelte - Basic

2020.12.26

📌 목록 Introduction Adding Data Dynamic Attribute Styling Nested components HTML tags Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 지난번에 이어 svetle에 기본적인 부분에 대해서 한번 알아보겠습니다. 많은 부분 vue에서 영향을 받은 것 같은 느낌이 드네요. 📌 Adding Data 일단 간단하게 hello world을 그려보겠습니다. Hello {name} 여기서 신기한건 이렇게 해도 동일하게 동작을 합니다. Hello {name} 위치는 딱히 상관이 없어보여요. 이걸 토대로 눈치를 챌수 있는 부분은 단순 javascript 형식으로만 compile을 하는게 아닌거 같아요.(아직 확실 한건 아니지..

Svelte

Svelte - 설치 및 실행 방법

2020.12.26

목록 Introduction Set Up Conclusion Reference 📌 Introduciton 안녕하세요. 오늘은 요즘 한창 뜨고 잇는 svelte에 대해서 알아보겠습니다. 사실 이걸 접하게 된 계기는 실제로 svelte에 contribution을 해보고 싶어서 svelte을 공부하게 되었습니다. 아마 마지막 챕터에서는 실제로 contribute을 해보는 그런 단계가 이 블로그에 적혀있으면 좋겠네요. 그럼 이제 한번 시작해볼게요. 📌 Set Up Svelte을 시작하는 방법에는 두가지 방법이 있습니다. 하나는 REPL이라는걸 이용하는 건데요. 이걸 이용하면 codebox처럼 인터넷에서 svelte을 사용할수 있어요. 두번째 방법은 digit을 이용하는 방법입니다.(CRA나 vue-cli같은 툴..

Graphql_Apollo

Apollo - vue3에서 apollo 사용하기

2020.12.21

목차 Introduction Installation main.js webpack gql file apollo composable Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 apollo를 vue3에 한번 적용해보는 포스팅입니다. 해당 코드는 여기서확인 가능합니다. 📌 Installation npm install @apollo/client graphql react @vue/apollo-composable graphql-tag 여기서 왜 갑자기 react가 튀어나오나 싶으시겠지만...😭 네 react를 설치를 해줘야합니다. 크응... apollo client에 아마.. react가 있고.. 더 자세한건... 생략하겠습니다. 📌 main.js // main.js impo..

Graphql_Apollo

Apollo - nodejs + mongo 서버 만들기

2020.12.20

목차 Introduction Apollo with express Connect mongo db Conclusion 📌 Introduction 안녕하세요. 오늘은 Apollo를 어떻게 연동하는지에 대해서 한번 알아볼게요. 해당 예제 코드는 여기서 확인 할 수 있습니다. 📌 Apollo with express Apollo에서 가장 중요한건 typeDefs와 resolvers입니다. import express from "express"; import { ApolloServer, gql } from "apollo-server-express"; const app = express(); // typeDefs로 스키마를 설정해줄수 있어요. const typeDefs = gql` type Query { hello: S..

React Study

React - context api

2020.12.15

📌 목차 Introduction context api Conclusion 📌 Introduction 안녕하세요. 오늘은 context api를 사용해서 전역에서 상태 값을 관리하는 법에 대해서 알아보겠습니다. 📌 context api context api를 사용하기에 앞서 두가지 hook을 알야합니다. createContext useContext 입니다. createContext는 말그대로 context를 만들어줍니다. const MyContext = createContext("defaultValue"); 첫번째 인자로 초기 값을 설정할 수 있습니다. useContext는 createContext로 만든 값을 사용하게 됩니다. const text = useContext(MyContext); 그럼 이제 간..

React Study

React - custom hook

2020.12.13

목차 Introduction custom hook Conclusion 📌 Introduction 안녕하세요. 오늘은 custom hook에 대해서 알아보겠습니다. custom hook은 자주 사용되는 react hooks를 묶어서 dry함을 유지하기 위해 사용이 됩니다. 그럼 한번 알아볼까요? 📌 custom hook import { useReducer, useCallback } from "react"; const CHANGE_FORM = "CHANGE_FORM"; const RESET_FORM = "RESET_FORM"; function reducer(state, action) { switch (action.type) { case CHANGE_FORM: return { ...state, [action...

React Study

React - useReducer

2020.12.13

목차 Introduction useState와의 차이점 reducer useReducer Conclusion 📌 Introduction 안녕하세요. 오늘은 react에서 또다른 state관리 hook인 useReducer에 대해서 알아보겠습니다. useReducer는 vuex와 비슷하다고 생각하면 됩니다. action을 통해 상태를 변경해줄 수 있다는 점에서 비슷합니다. 📌 useState와의 차이점 일단 useState에서 값을 바꿔줄때는 다음과 같습니다. setState(5);이렇게 setState를 이용하여 바꿔주게 되는데 useReducer는 조금 다릅니다. dispatch({ type: INCREMENT });이렇게 action에 type을 받아 값을 바꾸는 것을 수행하게 됩니다. 또한 useS..

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

전체 글

Svelte - Reactivity

Svelte - Basic

Svelte - 설치 및 실행 방법

Apollo - vue3에서 apollo 사용하기

Apollo - nodejs + mongo 서버 만들기

React - context api

React - custom hook

React - useReducer

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역