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 사용예시 […]
(출처 : 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 때문일거란다. 가서 확인해보고 삭제했더니 에러 해결됨!
먼저 Working Directory를 Github repository와 연동시킴 2. 코드를 Push 한 후에, Settings가서 Github Page section에서 master 체크 후 save 3. package.json에 homepage와 script 추가 4. cmd에서 npm run deploy (predeploy는 deploy를 실행 시, 자동으로 실행됨) 5. 다시 github settings(2번)으로 가면 gh-pages라는 브랜치가 생성되어 있음. 그럼 그 브랜치로 Source 변경 후, Save. 6. 끝! 주소로 들어가보면 […]
미리보기 Navigation 구조 1.MenuItems.js Navigation에 들어갈 list의 data (title, url, className *nav-links-mobile은 mobile 화면에서만 보일것) 2. Button.js / Button.css Button Component (Navigation에서는 Desktop에서 Sign-Up Button 사용) 3. Navbar.js / Navbar.css clicked가 false 일 땐 toggle == bars && menu className = .nav-menu clicked가 true 일 땐 toggle == times && menu className = .nav-menu.active MenuItems에서 […]
React에서 array의 data들을 모두 보여주고 싶을 때 간단히 하면 <div>arr[0]</div> <div>arr[1]></div>…식으로 여러개 반복하며 쓸 수 있다. 하지만 array의 크기가 정해지지 않았을 때는 한계가 있다. 따라서 array나 반복되는 코드를 구현할 때는 map()함수를 이용하면 된다. 2개의 object를 갖는 array가 있을 경우, 이렇게 array를 map을 이용해 render하는 변수를 만든 후, return 문에서 사용하면 된다! (return 할 때, key나 […]