프린이 썸네일형 리스트형 비전공자의 공부일지 - 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 버전도 한번 알아두면 좋을 .. 더보기 비전공자의 공부일지 - Redux, Reducer, Provider, reduxToolkit Redux Props properties의 줄임말이다. Props는 구성 요소가 서로 통신하는 방법이다. Props는 상위 구성 요소에서 아래쪽으로 흐른다. 해당 값을 변경하려면 자식 관점에서 Props를 변경할 수 있으며, 부모는 내부 상태를 변경해야 한다. State 부모 컴포넌트에서 자식 컴포넌트로 data를 보내는 게 아닌 해당 컴포넌트 안에서 data를 전달할 때 사용 예를 들어서 검색 창에 글을 입력할 때 글이 변하는 것은 state로 변경 State is mutable = 조작 가능하다는 뜻이다. State가 변하면 re-render 된다. ※ 출처 : 패스트캠퍼스 (프론트엔드 웹 개발의 모든 것 초격차 패키지 Online) 리덕스 공식 홈페이지 https://ko.redux.js.org/ .. 더보기 비전공자의 공부일지 - 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는 고.. 더보기 비전공자의 공부일지 - Axios, Styled Component, 동기? 비동기? 현재 패캠에서 프론엔드 웹개발 관련 인강을 듣고 있어서 해당 인강에서 배운 내용을 토대로 복습하는 중입니다. 복습노트 겸 혹시라도 도움이라도 조금 될 수 있을까 하고 블로그에도 같이 글을 작성 중입니다.프로젝트는 추후 프로젝트 카테고리를 생성해서 내용을 정리할 예정입니다. 1. Axios API 통신을 위해 사용되는 라이브러리이다. fetch를 사용해서 통신을 해도 되지만 fetch는 response가 json 형식이 아니라 json으로 변경해 줘야 되는 부분이 있는데 fetch가 많이 없을 때는 괜찮지만 fetch가 많아지고 하면 복잡해지고 하기 때문에 axios를 사용한다. fetch에 관해서는 복습을 하지 않아 기억이 잘 나지 않아 조만간 다시 공부해야 될 것 같다. fetch('http://exa.. 더보기 비전공자의 공부일지 - 리액트란 무엇인가, 리액트의 컴포넌트란?, 가상돔?? 오늘의 공부내용을 복습하자. 공부했던 내용을 기억이 나는데로 적고 있어서 잘못된 내용이 있을 수도 있습니다. 1. 리액트란 무엇인가 리액트는 페이스북 에서 사용자 인터페이스를 만들기 위한 JavaScript의 라이브러리이다. React는 Vue, Angualar와 많이 비교되는데 뷰와 앵귤러는 프레임 워크이고 리액트는 라이브러리 이다. 그럼 프레임 워크란 라이브러리들을 모아놓은것을 말합니다. 그렇기 때문에 개인적인 생각으로는 리액트는 뷰와 앵귤러와 다르게 다양한 라이브러리(리액트 훅, 리덕스)를 이용해서 작업이 가능할것 같습니다. 그리고 지금도 다양한 기업들에서 리액트를 사용해서 프로젝트를 만들고 있어 다양한 정보들이 많이 있습니다. 2. 리액트의 컴포넌트란? 리액트의 컴포넌트란 페이지를 구성하기 위한 .. 더보기 이전 1 다음
