Studying Front-end
2020년 11월 9일 임영웅 팬페이지 프로젝트 시작! 관리자 페이지도 도전 중이지만, 해당 프로그램을 따로 카테고리를 낸 이유는 혼자서 프론트와 백 모두 혼자하는 풀스택 첫 도전이기 때문이다… 프론트는 쉴 때도 계속 찾아볼 정도로 재밌어하지만 컴맹이었던 과거로 인해 백은 아직도 호달달이다. 근데 엄마한테 칭찬받고 싶은 마음과 편하게 임영웅 노래 들으면서 좋아하셨으면 하는 마음으로 도전하게 되었다! 먼저 카카오 […]
용도: 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 사용예시 […]
Auto Rename Tag : 태그 입력이나 수정할 때, 닫는 태그도 함께 업데이트 2. ES7 react/redux/graphql/react-native snippets : react 구조 생성 지원 es) rcc => react class component, rsi => react function component 3. Highlight Matching Tag : 태그를 클릭시 닫는 태그 함께 highlight, 가독성 좋음 4.indent-rainbow : text 들여쓰기를 보기좋게 색상별로 마킹 5. Live Server: […]
처음 프로젝트를 하면서 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 때문일거란다. 가서 확인해보고 삭제했더니 에러 해결됨!
먼저 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. 끝! 주소로 들어가보면 […]