Web dev
-
React / react-router-dom v5 와 v6 라우팅 설정Web dev/React 2022. 3. 3. 20:19
react-router-dom v6로 2021년 11월쯤 바뀐 것 같다. 버전 업데이트가 되면서 약간씩 변화가 생겼다. v6로 connetedrouter 를 사용했었는데 아직 호환이 안되는듯 싶어 v5로 다운그레이드하여 했다. v5 다운 그레이드 npm i react-router-dom@5.2.0 1. 라우팅 설정 switch 와 routes , component 와 element v5 방식 import { BrowserRouter, Route, Switch } from "react-router-dom"; import Home from "./pages/Home"; import Write from "./pages/Write"; function App() { return ( } /> } /> Page Not..
-
React / useRef로 checkbox trigger 하기Web dev/React 2022. 3. 2. 11:18
포트폴리오 제작중이다. 디자인도 직접했다 .. 옷도 잘 못입는데 디자인은 더어렵다.. 지금은 로그인/로그아웃 기능을 만들고 있는데 망할 리덕스사가가 동작을 안한다 ㅠㅠ 빨리 취업하고싶다..ㅠㅠ 늦은 나이 무슨 부귀영화를 누리겠다고 직업을 바꾸려할까.. 무튼 aisde 의 gnb에서 메뉴를 누르면 해당 섹션으로 스크롤값이 변하며 이동하려 한다. useRef 훅 쓰는법도 간단했다. 하지만 나에게 온시련은 gnb메뉴를 클릭하여 해당 섹션으로 가고 aside도 잘 닫히는데 저 햄버거놈이 가만히 있는것이다.. 그래서 생각한게 저걸 트리거해보자! 트리거란 저 햄버거놈을 클릭하지 않았지만 클릭한 효과를 주는것이다. 사이드바가 움직이는 원리는 css클래스를 하나 만들어 줬다뺐다 하는것이다. 제이쿼리에서는 addClas..
-
React / useState Hook으로 toggle 하기Web dev/React 2022. 3. 2. 10:55
햄버거 메뉴의 aside를 구현하기 위해 토글기능이 필요했다. 리엑트의 useState 훅을 사용하면 쉽게 구현할 수 있다. 1. useState를 import 해준다. 2. useState를 선언해준다. 3. click 이벤트에 넣어준다. useState초기 상태값은 false로 해준다 아직 클릭이 안되었기 때문이다. import React, { useState,useRef } from 'react'; import { Link } from 'react-router-dom'; export default function Aside() { const [showAside, setShowAside] = useState(false); const hamburgerBtn = useRef(null); const han..
-
Error / AWS RDS MySQL Workbench 연결오류 해결법 error 2003Web dev/Error 2022. 2. 18. 16:42
mysql로 AWS RDS DB에 연결하려고 하는데 2003 error가 발생했다. 엔드포인트 유저네임 패스워드 올바르게 입력했는데도 잘안되서 mysql workbench로도 해봤는데 안되서 검색했더니 VPC 보안그룹에서 인바운드 규칙편집에 들어가 규칙을 추가해주면 오류가 해결된다 1. VPC 들어가서 보안그룹 접속 2.보안그룹 편집 접속 > 인바운드 규칙 편집 3.첫번째꺼는 기본으로 있는 규칙이고 규칙추가하여 두번째꺼 처럼 해준다. 구글링하다보면 소스필드에 아무거나라고 체크하면 된다고하는데 anywhere-1pv4 로 해주면된다. 0.0.0.0/0 도 입력해주면된다. 처음에 v6인가해서 했는데도 안되었다. 접속해주고 mysql -u 유저네임 --host 엔드포인트 -p 요로케 나오면 완성
-
NodeJS / http 내장모듈로 로컬서버 띄우기Web dev/NodeJS 2022. 2. 17. 21:33
1. http 내장모듈을 require하고 createServer 매서드로 app변수를 만들고. 2.app.listen(포트번호,콜백함수); 3.라우팅 설정 if문을 사용해 라우팅설정을 해준다. createServer 매서드는 req,res를 인자로 받을 수 있다. 4. 상당히 지저분해지므로 express를 사용하면 된다. 출처 : https://www.youtube.com/channel/UCS0F25vig_sPIQXMiK8IdSg
-
NodeJS / express 서버 띄우기Web dev/NodeJS 2022. 2. 17. 21:18
1. node.js 공홈에서 다운로드 한 뒤 작업할 디렉토리를 만들어준다. 2.익스프레스를 설치해준다. (-s 는 --save 라는 표현으로 package-lock.json파일과 node_modules 폴더가 생성된다.) npm i express -s 3.app.js 파일을 만들고 express 를 require 해서 app 변수에 넣고 app.listen(포트숫자, 콜백함수) 4.노드를 실행시켜 로컬서버가 실행됐는지 확인 node app.js 이렇게 떴다면 성공! 서버가 안띄어져 있으면 표시할 수 없음으로 뜬다. 코드가 수정되면 서버를 껐다 켜야하는데 nodemon 을 사용하면 껐다켰다 안해도 된다. npm i nodemon -s 노드몬 실행방법 nodemon node 실행파일경로 package.jso..