const router = require('express').Router() const controller = loadModule('basic', 'controller'); router.post('/post', controller.submitPost); //게시글 쓰기 router.get('/postlist', controller.getPosts); // 게시글 목록을 불러오기 router.get('/post/:idx', controller.getPostById); //게시글 상세 불러오기 router.put('/post', controller.updatePost) //게시글 수정하기 router.put('/postdelete', controller.deletePost) //게시글 삭제하기 module...

"vite 는 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다"라는 메시지는 일반적으로 해당 컴퓨터에 vite가 설치되지 않았을 때 나타납니다. vite를 전역으로 설치하려면 다음 명령어를 사용해보세요: npm install -g create-vite 그런데, 만약 이미 vite를 설치했는데도 같은 오류가 발생한다면, 환경 변수 Path에 npm 전역 모듈이 설치된 디렉토리가 제대로 추가되어 있는지 확인해보세요 또한, 이와 비슷한 문제로 'react-scripts’이(가) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다라는 에러가 발생할 수 있습니다. 이 경우에는 다음과 같이 해결할 수 있습니다 프로젝트 위치에서 npm update를 실행합니다. ..

경로이름 members /my/health라는 경로를 가진 애들 한테는 active를 부여한다 members/my/health/two 도 active가 붙는다

const navigate = useNavigate(); let location = useLocation(); useEffect(() => { if(location.pathname === '/') { navigate('main'); } }, [])

(loading.io) https://loading.io/ 바를 조절해가면서 만들 수 있다 왼쪽에 결과 이미지가 나오고 오른쪽의 출력을 원하는 형태로 출력이 가능하다 free라고 쓰여있는 두 줄은 무료로 이용 가능하고 아래의 1.99 달러로 표시되어있는 것은 요금제를 이용해야 가능하다

input[type=file]::file-selector-button{~css속성들~} css 에서 ::file-selector-button 을 사용하면 파일선택하는 버튼을 커스텀 할 수 있다

모듈(module) : 전체를 이루는 부품 하나하나 require 함수 : 객체 하나를 반환하는 함수 아래 예시처럼 js파일을 연동해서 사용할 수 있다 let m = require('./number.js'); console.log(m.plus(7,2)); //** number.js에서 plus를 실행시킨다 function add(a,b){ return a+b; } exports.plus=add; //** 함수 add를 다른 파일에서 plus로 내보낼것이다 파일 이름에 js를 꼭 붙이지 않아도 된다. 모듈의 경로를 정확하게 작성해야한다. require 함수가 리턴하는 객체는 상수로 대입하는 게 좋다. (중복 선언의 오류가 있을 수 있으므로 변수로 선언하기 보다는 const로 선언하는 것이 권장됨) 모듈 안..

dom트리 : 웹 문서 안에 있는 요소들간의 부모 자식 관계를 계층구조로 나타낸 것 각각의 요소들을 node라고함 요소노드의 속성노드는 자식노드이다 getElementById() getElementsByClassName() > 반환 값이 2개 이상일 수 있음 getElementsByTagName() > 반환 값이 2개 이상일 수 있음 querySelector(”#ID”) / querySelector(”.ClassName”) / querySelector(”p”) .addEventListener(’동작’,함수(이벤트 타겟)); queryselector(선택자) 한 개의 값을 반환함 / 반환 값이 여러 개일 경우 제일 처음 요소를 선택함(ex.class) queryselectorAll(선택자 또는 태그) 반환..

let/const/var 설명 재할당 여부 재선언 여부 범위 let 값이 변하는 변수 O X 블록 레벨 스코프 const 값이 변하지 않는 상수 X X 블록 레벨 스코프 var 값이 변하는 변수 O O 함수 레벨 스코프 블록 스코프를 활용해서 코드를 짜는게 권장된다. 전역 범위 되도록X const는 선언과 동시에 초기값을 가지고 있어야 한다. 재할당/재선언 재선언 var box1 = document.getElementsByClass(’box’); 재할당 box1 = document.getElementsByClass(’box’); 1번 변수와 상수는 데이터를 저장할 때 쓰이는 이름이 붙은 저장소를 의미한다. 선언한 값을 바꿀 수 있는 변수 let과 선언한 값을 바꿀 수 없는 상수 const가 있는데 변수와..

비교 연산자 =을 1개 쓰는 것은 할당하는 것이다 a가 3과 같은가 > a=3(X) / a==3(O) 동등(==) 피연산자가 서로 같으면 true를 반환합니다. 부등(!=) 피연산자가 서로 다르면 true를 반환합니다. 일치(===) 두 피연산자의 값과 타입이 모두 같은 경우 true를 반환합니다. 불일치(!==) 피연산자의 값 또는 타입이 서로 다를 경우 true를 반환합니다. 큼(>) 왼쪽 피연산자가 오른쪽 피연산자보다 크면 true를 반환합니다. 크거나 같음(>=) 왼쪽 피연산자가 오른쪽 피연산자와 같거나 크면 true를 반환합니다. 작음(

{ gsap.to(".test", { scrollTrigger: { trigger: ".div-wrap", markers: true, start: "500px center", end: "bottom center", scrub: true, }, x: `-4000px`, }); } { gsap.to(".test", { //내가 효과를 주고 싶은 요소 scrollTrigger: { //스크롤로 효과를 제어 trigger: ".div-wrap", //스크롤 효과를 줄 기준 markers: true, //기준 maker 보이게하는거 start: "500px center", // 시작점 : 언제시작(trigger)? 기준(뷰포트) end: "bottom center", // 끝점 : 언제끝(trigger)? 기준(..

position fixed position relative 가 차례로 선언되어있는 각각의 div가 있다 기본적으로 요소가 html 에 나오는 순서대로 스택순서가 결정이 된다. 즉 나중에 선언된 요소가 더 위에 렌더링 되고 있는 것이다. !! 잘못 알고 있었던 부분 position fixed를 선언하면 다른 position 요소들 보다 위에 보일 거라고 생각했는데 (z-index를 선언한 것처럼) fixed를 선언하고 z-index를 추가로 선언해야 앞에 올라와서 따라오는 효과를 낼 수 있다. fixed를 맨 처음 선언하고 밑에 다른 position 요소들을 만들면 position 요소들 뒤로 뷰포트에 고정되어 따라온다.