독학 썸네일형 리스트형 비전공자의 프로젝트 만들기) 스케줄 프로젝트 만들기 - part2 오류 수정 후 오류 수정.... 스케줄 프로젝트 만들기 - part2 저번일지에서 리덕스 설치 후 오류 수정하러 간다고 했던 MIN입니다. 오류를 수정하고 다시 돌아왔습니다. 하지만 아시죠... 오류를 수정하면 또 다른 오류가 나온다는 거를............ 나름 인강을 듣고 리덕스 쪽에 이해를 했다고 생각했던 제가 너무 안일했던 거 같네요... 상태관리... 아직은 저 같은 주니어한테는 어렵네요. 그럼 저번시간에 생겼던 오류가 무엇이냐면... 바로 리액트 18버전에서는 랜더링 하는 방식이 다른데 제가 무지성으로 블로그에 있는 글을 막 들고 와서 작성을 하는 바람에 생겼던 오류였더라고요..... 당연히 그 문제는 아닐 거라 생각해서 진짜 한시간 넘게 오류 찾았어요.... 이번시간에도 리덕스 때문에 데이터가 안 받아지고 데이터 저장이.. 더보기 비전공자의 프로젝트 만들기) 스케줄 프로젝트 만들기 - part1 오류의 위기 ...... 스케줄 프로젝트 만들기 - part1 그동안 인강을 보여 공부하면서 배웠던 내용이 얼마나 내 것이 되었는지 확인하기 위해 혼자서 스케줄 프로젝트를 진행하였다. 일단 기획단에서 작업을 했는데 나는 기획을 배워본 적이 없어서 완벽한 기획은 아닐 것이다. vscode에서 drawio를 설치해 간단한 프로젝트 구상도를 기획했다. 이런 느낌의 구성으로 해야지 생각을 하고 이번엔 디자인 관련해서 서칭을 해보았다. 다양한 디자인을 서칭 하다 내가 원하는 느낌의 디자인을 찾게 되었다. https://dribbble.com/shots/15755836-Construction-Calendar Construction Calendar Happy Monday 😃 We continue to show you a part of our.. 더보기 비전공자의 공부일지 - Recoil 이란? Recoil이란??? Recoil 은 React 애플리케이션을 위한 상태관리 라이브러리입니다. Recoil은 Github에 14,000개 이상의 별이 있는 오픈 소스 상태관리 라이브러리이며 Facebook의 소프트웨어 엔지니어인 Dave McCabe가 발명했습니다. React 애플리케이션의 모든 구성 요소가 상태를 쉽게 공유할 수 있도록 전역 상태를 제공하며 Redux에 비해 최소화됩니다. React에 offical 라이브러리는 아니라고 한다. 하지만 Facebook에서 만든 거라 React와 호환이 잘된다고 한다. Recoil 공식사이트에 가면 간단한 사용 방법예제라고 있는데 이번엔 그걸 만들어 볼 생각이다. https://recoiljs.org/ko/docs/introduction/getting-st.. 더보기 비전공자의 공부일지 - 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 버전도 한번 알아두면 좋을 .. 더보기 비전공자의 공부일지 - 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/ .. 더보기 비전공자의 공부일지 - 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를 요청하면 해당 페이지를 보여 주는 .. 더보기 이전 1 2 다음
