리액트 썸네일형 리스트형 비전공자의 공부일지 - Mobx todo앱 만들기 Mobx로 앱만들기 Mobx로 간단한 todo 앱을 만드는 프로젝트를 했다. 이번에는 TypeScript로 작업을 진행하였다. 아직 TypeScript에 대해 익숙하지 않아서 내용을 잘못 적을 때도 있다. CRA 할 때 --template typescript 해서 설치하였다. UI 세팅전에 todoStore을 만들었다. todoStore.tsx import { action, computed, makeObservable, observable } from "mobx"; interface TodoItem { id: number; title:string; completed:boolean } export default class TodoStore{ todos:TodoItem[] = [] constructor(){.. 더보기 비전공자의 공부일지 - Mobx Mobx란?? Mobx는 Redux이후 React 개발자들이 많이 사용하는 상태관리 라이브러리라고 한다. Mobx는 간단하고 확장 가능한 상태 관리, 쉽고 확장성 있게 만들어 주는 검증된 라이브러리라고 소개되어있다. https://ko.mobx.js.org/README.html MobX에 대하여 · MobX ko.mobx.js.org Mobx 5 버전에서는 데코레이터가 권장되었다고 한다. class TodoList{ @observable todos = [] @computed get unfinishedTodoCount () { return this.todos.filter((todo) => !todo.finished).length } } 나는 지금 6 버전으로 공부하고 있지만 5 버전도 한번 알아두면 좋을 .. 더보기 비전공자의 공부일지 - reactContext 1. reactContext 지금까지 데이터를 보관하거나 자식요소에게 보내는 방식으로 state, props를 사용했는데 이번에는 reactContext를 사용해서 해보려고 한다. reactContext는 props, state와 다르게 reactContext의 태그에 value값을 준 상태에서 자식요소들에서 따로 선언을 해주지 않아도 바로 사용할 수 있다. import { createContext, useContext } from 'react'; const ThemeContext = createContext(null); export default function MyApp() { return ( ) } const theme = useContext(ThemeContext); ThemeContext라는 이.. 더보기 비전공자의 공부일지 - firebase, LocalStorage, firebase를 이용해서 웹, 앱 배포하기 5월 1일 근로자의 날이라 오랜만에 3일의 휴식을 취하고 다시 시작되는 공부일지 이번주는 주말 동안 조카가 놀러 오기 때문에 5/5일 금요일부터 쉬는 날이지만 쉬는 게 쉬는 거 같지 않을 거 같다. 1. firebase firbase는 앱이나 웹 어플리케이션을 만들기 위해 구글에서 개발한 플랫폼이다. 지금 프론트를 배우고 있지만 웹이나 앱을 만들 때 프론트뿐 아니라 백 쪽으로 서버 작업(로그인, 데이터관리, 인증 등)을 해야 하나의 서비스가 완성된다. 하지만 프론트를 이제 막 시작한 프리니는 java, python, php, node 등 서버 쪽 언어를 잘 모르기 때문에 그걸 대체할 수 있는 게 firebase이다. https://firebase.google.com/ Firebase Firebase는 고.. 더보기 비전공자의 공부일지 - React Router Dom, useDebounce 오늘은 어제 하던 디즈니플러스 앱을 마무리하려고 한다. 요즘 재밌게 보고 있는 유튜브가 있는데 asmr처럼 말없이 키보드 소리만 들리는 유튜브인데 꽤 재미있고 javascript에 대해 도움도 많이 되는 거 같다. 심심 할 때 한 번씩 보면 좋을 거 같아요. 나름 꽤 도움도 되고 재밌더라고요 1. React Router Dom Router란 네트워크가 서버에서 사용자에게 까지 전송되는 네트워크의 경로를 최적화해서 해당 경로를 선택해서 우리에게 알려줌 https://www.cloudflare.com/ko-kr/learning/network-layer/what-is-routing/ 위의 링크로 접속하시면 상세한 정보를 얻을 수 있음 하지만 간단하게 생각하면 우리가 url를 요청하면 해당 페이지를 보여 주는 .. 더보기 비전공자의 공부일지 - Axios, Styled Component, 동기? 비동기? 현재 패캠에서 프론엔드 웹개발 관련 인강을 듣고 있어서 해당 인강에서 배운 내용을 토대로 복습하는 중입니다. 복습노트 겸 혹시라도 도움이라도 조금 될 수 있을까 하고 블로그에도 같이 글을 작성 중입니다.프로젝트는 추후 프로젝트 카테고리를 생성해서 내용을 정리할 예정입니다. 1. Axios API 통신을 위해 사용되는 라이브러리이다. fetch를 사용해서 통신을 해도 되지만 fetch는 response가 json 형식이 아니라 json으로 변경해 줘야 되는 부분이 있는데 fetch가 많이 없을 때는 괜찮지만 fetch가 많아지고 하면 복잡해지고 하기 때문에 axios를 사용한다. fetch에 관해서는 복습을 하지 않아 기억이 잘 나지 않아 조만간 다시 공부해야 될 것 같다. fetch('http://exa.. 더보기 이전 1 2 다음
