React components 구조에 익숙해지고 나니 MobX에 대한 필요성을 느꼈다. 전에는 MobX를 다른사람 코드만 보고 따라해봤는데 이젠 목표를 정해서 익숙해지려고 한다. 처음 구현해볼 것은 아주 간단한 Counter이다. Counter 구조 src > pages > Counter.jsx : component역할 src > stores > counter.js : store 역할 useStore.js : stores를 하나에 모아 useStore()로 제공 counter.js : count하는 변수와 메소드를 […]
오늘은 어제 하던 data insert에 이어서 select, update, delete를 테스트했다. routing과 sequelize를 이용한 data 조작은 의외로 재밌었다. 단, 항상 주의할 점은 데이터를 통신할 때 key는 양측에서 동일해야 한다. ex) data: {‘key’:value}, data insert client에서는 async, await, axios(POST)를 이용해 업데이트할 데이터 전송 성공했다는 response를 받으면 알람을 띄우고, window reload server에서는 create메소드를 이용해 데이터를 삽입, 성공할 경우 […]
2020년 11월 10일 느낀 점: DB, Back단은… 쩝 DB 구축(mariadb) DB는 남자친구 서버에 mariaDB로 구축하였다. MongoDB를 할까했지만, 일단 정형화된 DB를 먼저 겪어보고 싶어서 MariaDB로 선택! Sequelize 설치 Sequelize는 Node.js 기반의 ORM으로 Object-Relation Management이다. 쉽게 말하면 테이블과 객체 연동을 해준다는것 model 설계 (DB의 table 역할) 각 필요한 Table을 js로 설계하고, index.js 파일에서 관리한다. 나는 아직 따라하는 […]
용도: server, database 현황 파악과 관리(update, delete) React + Node.js + MariaDB로 구성 여기서는 React만 정리 선정이유 남자친구가 필요하기도 하고 리액트 첫 프로젝트라 난이도가 높지 않은 주제를 선택하게 되었다. 디자인패턴 React 상태관리를 처음 접했는데, Redux보단 MobX가 Hooks에 친화적인 것 같고, 구조가 익숙해서 Observer 패턴을 사용하게 되었다. 프로젝트 구조 app을 제외한 컴포넌트들은 모두 components에 있으며, 컴포넌트별로 […]
MobX에선 decorator를 사용해서 문법을 편하게 작성할 수 있다. 그런데 decorator를 사용하려면 babel 설정을 위해 eject를 해야하는데 아직 configuration을 직접 유지보수할 단계가 아니라 eject를 안하고 decorator를 사용해보려고 한다. 1.customize-cra, react-app-rewired 설치 2. package-json의 script 수정 3. decorators plugin 설치 4. config-overrides.js 파일 생성 후 customize
조건에 따라 해당 Element나 Component를 표시하고 숨길 때, hook {useState}을 사용하는 방법 (코드보단 원리를 보는게 응용하기 좋을 것 같아 로직위주로 정리) 1. hook에서 useState로 state변수를 생성: 해당 state가 true가 되거나 값이 채워지면 요소가 보이게 하기, 여기서는 boolean을 사용하였다 2. 조건이 만족되면, setState를 이용해 state를 변경 3. component를 return할 때, 해당 state변수가 참이라면, 보여질 수 있도록 […]
1. axios란? Make XMLHttpRequests from the browser Make http requests from node.js Supports the Promise API Intercept request and response Transform request and response data axios github의 설명에 따르면 httprequests을 만들고, Promise API를 지원하며 data변환까지 지원해주는 라이브러리 (출처: https://github.com/axios/axios) 2. axios 설치 yarn을 사용하고 있어서 프로젝트에 간편하게 설치했음 package에서 설치확인이 되면 해당 프로젝트에서 import 시킨 후 사용하면 됨 3. axios 사용예시 […]
처음 프로젝트를 하면서 js form 유효성 검사를 하게 되면서 공부함 이름이나 전화번호 같이 정해진 형식이 있는 경우나 빈 입력값이 있으면 안될 경우엔 서버로 데이터를 전송하기 전에 front단에서 먼저 검증을 해야함 정규식 패턴 이용 : 먼저 형식별로 변수를 지정한 후에, 조건문에서 검증할 수 있음 검증예시 2. 체크박스에 빈 값 검사 : 반복문을 이용해 checked값이 True인 경우만 […]
(출처 : https://www.youtube.com/watch?v=qiii35VZvBE&list=PLKWa_W4Kolgwt9pboQ34OkkJSmuNTtO-z) 전체 코드는 유튜브에 있음 Side bar 구획 logo / navbar / updated-courses / stats / name side-bar는 fixed로 고정하고, top / left / bottom 모두 지정 2. logo(img)는 block으로 지정한 후에 크기고정 (만약 크기가 정확하면 width: 100%으로 하고, div 조절) 3. navbar 구성 : object array로 변수 지정하고 map함수를 이용 currentPage라는 state를 […]
react github 배포 중에 predeploy라는 스크립트를 먼저 사용해버려서 gh-pages already exists라는 에러가 뜸 build directory가 먼저 생기고 deploy를 입력해서 그런 줄 알고, build directory를 삭제해도 똑같은 문제 발생 결국 구글링을 했는데, node_module/.cache 때문일거란다. 가서 확인해보고 삭제했더니 에러 해결됨!