전체 글
-
GitHub / React 배포 / gh-pages 사용하기Web dev/Git&Github 2022. 4. 11. 13:44
기존에 리엑트로 작업중인것을 깃헙페이지에 배포를 했는데 자꾸 흰화면만 뜨는것이다. 그래서 CRA를 새로 만들어 배포 했다. 기존 프로젝트에서 흰 화면만 뜨는것은 라우팅 설정 때문이였다. 라우팅 해결방법은 다음 포스팅에 적어볼 예정이다. gh-pages 사용하여 react github에 배포하기 1. 깃헙 레포지터리 만들기 2. 프로젝트 업로드 vscode 프로젝트열고 터미널에 실행 git init 깃설치 git add * 스테이트 올리기 git commit -m 'first commit' 커밋메시지 git remote add origin https://github.com/drrd100/test.git 저장소연결 git push -u origin master 마스터로 푸쉬 업로드 확인 3. 프로젝트에 gh..
-
Github / github 배포하기 / 레포지터리 생성Web dev/Git&Github 2022. 4. 11. 12:58
포트폴리오 올리려고 무료호스팅 사이트를 찾다가 깃헙페이지로 배포하기로 결정했다. 예전에 닷홈에서 무료호스팅을 썼지만 기간이 지나면 돈을 내야한다 ㅠ3ㅠ 어차피 깃헙 관리도 해야하니 1석2조라고 생각했다. 이번 포스팅에서는 기본 배포방법을 알아보고 다음번에는 리엑트프로젝트 배포를 해볼것이다. 1. 깃헙아이디를 만들어준다 > 레포지터리 이동 후 new를 눌러 생성해준다. 2. 레포지터리를 생성해준다. 퍼블릭으로 해야한다. > readme,gitignore 등등은 나중에 만들어도 된다. 3. 파일 업로드 > 그냥 따라하면된다. readme파일 체크안했더니 리드미 만들라고도 생겼다. 나는 vscode를 쓴다. 올릴 파일을 열고 터미널을 열어 그대로 따라해준다. 업로드가 된것을 확인 해준다. 이전에 올린 레포지터..
-
Error / React getElementByClassName() / Uncaught TypeError: Cannot read properties of undefined (reading 'add') 해결Web dev/Error 2022. 3. 30. 18:48
리엑트로 퍼블리싱중 .. Aside를 구현하는 중 버튼을 누르면 클래스를 주려했다. 처음엔 이렇게 구현을 했다. const handleAide = (e) =>{ const asideWrap = document.getElementsByClassName(aside.aside_wrap); const deemed = document.getElementsByClassName(aside.deemed); console.log(asideWrap) document.body.classList.add(aside.stop) asideWrap.classList.add(aside.aside_actve) deemed.classList.add(aside.on) } 'Uncaught TypeError: Cannot read prope..
-
React / 아코디언 메뉴 만들기Web dev/React 2022. 3. 30. 18:22
리엑트로 퍼블리싱중 사이드바를 구현하면서 아코디언을 구현해봤다. 제이쿼리를 쓰면 편하겠지만 제이쿼리를 안쓰려고 노력중이다. 처음엔 tab을 만들어본적이 있어서 useState를 사용해 구현해보려햇는데 젠장 다같이 동작해서 망했다 그렇다고 각메뉴에 useState를 사용하면 오히려 더 지저분해질것 같아서 그냥 구현해보았다. w3school를 참조했다. 1. for문을 돌려 각 리스트에 번호를 메긴뒤 그것이 클릭되면 이벤트를 주었다. 제이쿼리에 길들여져 그냥 구현하라 했으면 못했을것같다. 코린이는 웁니다... 여기서 문제는 예제는 this로 셀렉을 하던데 나는 이상하게 못가져오는것이다.. 자바스크립트 this는 어려워.. e.target으로 하니까 잘가져온다. useEffect로 로드 되었을때 한번 동작시켜..
-
React / window.location 이용해 특정페이지 header에 클래스 부여하기Web dev/React 2022. 3. 30. 17:49
리엑트로 퍼블리싱중에 header를 투명하게 디자인했다. 근데 만들다 보니 서브페이지에서는 바탕이 흰색이라 보이지가 않았다... 평소같았으면 서브헤더를 하나 더 만들었을텐데 리엑트는 SPA로 라우팅설정이 되어 있어 헤더를 두개 만들면 안될것 같아서 URL에 따라 클래스를 부여해줬다. 1. window.loaction 으로 URL을 가져와 조건문으로 클래스를 부여해줬다. 하지만 상품 디테일페이지라 파라미터를 받아 데이터를 뿌려주기 때문에 고민하다가 정규표현식으로 파라미터 숫자를 없애버렸다 ㅋㅋ 클래스네임을 가져올때는 module.css라서 저렇게 넣어줘야 css를 불러온다. 클래스네임을 가져올때 배열로 가져오기 때문에 지정해주거나 .item()으로 한번더 셀렉을 해줘야 된다 useEffect(() =>{ ..
-
Error / Error: listen EADDRINUSE: address already in use :::5000 노드종료하기Web dev/Error 2022. 3. 27. 12:41
dotenv 적용중에 환경변수를 수정하고 서버를 재시작해도 적용이 안되어 한참 버벅였다. 터미널에서 control + c 로 서버종료를 하는데 리엑트서버는 종료되고 노드서버는 종료가 안되었던것이다! 생각해보니 npm start를 하면 자꾸 이런 에러메시지가 콘솔에 찍혔었다. 이유는 노드서버는 종료가 안되었던 것.. 이미 5000포트는 사용중이라고 에러가 뜬다. [0] events.js:292 [0] throw er; // Unhandled 'error' event [0] ^ [0] [0] Error: listen EADDRINUSE: address already in use :::5000 1. 터미널에 명령어를 입력하면 현재 네트워크 상태가 뜬다. netstat -an 명령어를 입력하면 이거저것 많이나온..
-
NodeJS / dotenv 로 환경변수 설정하기Web dev/NodeJS 2022. 3. 27. 11:35
mysql로 AWS RDS 연결에 성공하였다. 파일그대로 깃헙에 업로드하면 DB계정정보가 유출되니까 환경변수에 설정하여 업로드 해준다. .env 파일은 .gitignore에 설정해줘야 한다. .gitignore에 설정하면 업로드 할 때 설정파일은 업로드 되지 않는다. // .gitignore .DS_Store .env .env.local .env.development.local .env.test.local .env.production.local 이런식으로 해주면 된다. 1. dotenv 설치 npm i dotenv 2. .env 설정 // .env 파일 파일명앞에 '.' 을찍어줘야함 PORT = 5000 DB_HOST = "호스트 정보" DB_USER = "아이디" DB_PSWORD = "비밀번호" DB..
-
React / loginCheck customHook 만들기Web dev/React 2022. 3. 27. 00:04
포트폴리오 만드는중..오랜 사투끝에 로그인로그아웃 기능을 만들었다...하지만 세션을 리펙토링 해야한다.. 그냥 세션스토리지에 저장했기 때문에..세션을 제대로 적용한것도 아니다.. 갈길이 머니 일단 넘어가야지 ㅋㅋ.. 로그인,로그아웃을 만드니 로그인 여부에 따라 UI를 다르게 해줘야 한다. 로그인체크를 반복하다보니 custom hook으로 만들어 관리해보았다. hook을 만들땐 앞에 use를 붙혀줘야 된다고들 한다. useLoginCheck.js import React, { useEffect, useState } from 'react' export default function useLoginCheck() { const [isLogin, setIsLogin] = useState(false) useEffec..