async function getData() { try { const {data} = await api.get(`경로`) // 경로로 get을 해온 후 data에 할당한다 * 비동기 통신 setProductData(data); // data로 불러온 것을 set 해준다 **set은 useState로 따로한다 }catch (e) { // 오류가 생기면 console.error(e); // 콘솔에 오류를 출력한다 } } getData는 의도대로 버튼을 눌러서 onClick 이벤트로 만들거나 useEffect 를 사용해서 불러오기를 한다 useEffect를 사용하면 페이지가 랜딩되면 실행되고 onClick 이벤트를 사용하면 사용자가 이벤트를 발생시키는 타이밍에 해당 함수를 작동시킬 수 있다

SQL 쿼리를 작성할 때, SELECT 문과 FROM 문의 순서가 직관적이지 않게 느껴질 수 있습니다. 쿼리는 논리적으로 FROM 절에서 데이터를 먼저 선택하고(wb_member AS U), 그 다음에 SELECT 절(U.*)에서 특정 데이터를 선택하는 순서로 처리됩니다. 그러나 문법적으로는 SELECT가 먼저 작성되고, 그 다음에 FROM이 작성됩니다. 실제로 SQL 쿼리가 실행될 때는 다음과 같은 순서로 처리됩니다: FROM 절: 먼저, 데이터베이스는 FROM 절에서 지정된 테이블(wb_member)을 찾습니다. 이때 AS U를 사용하여 이 테이블에 U라는 별칭을 지정합니다. 이 순간부터 U는 wb_member 테이블을 참조하는 별칭으로 사용될 수 있습니다. SELECT 절: 그 다음, SELECT ..

React에서 API 통신 React에서는 보통 외부 API와 통신하기 위해 fetch, axios 같은 라이브러리를 사용합니다. 예를 들어, axios.get 같은 함수를 사용하여 서버로부터 데이터를 비동기적으로 요청하고 받아옵니다. 이 경우, await 키워드를 사용해 비동기 요청의 결과를 기다립니다. async function fetchData() { const response = await axios.get('https://api.example.com/data'); console.log(response.data); } 여기서 axios.get 메소드는 HTTP GET 요청을 서버에 보내고, 서버로부터의 응답을 기다립니다. Node.js에서 모델과의 연결 Node.js에서, 특히 Express와 같..

함수에서 매개변수의 순서를 바꿔서 function(myHandler(req, res)) 대신 function(myHandler(res, req))와 같이 지정한다면, 이는 실제로 매개변수의 이름만 바뀌는 것이 아니라 그들이 받는 객체도 바뀌게 됩니다. Express와 같은 프레임워크에서는 함수의 매개변수 순서가 중요하며, 첫 번째 매개변수로 들어오는 것이 항상 요청 객체(req), 두 번째 매개변수로 들어오는 것이 응답 객체(res)입니다. 따라서, 매개변수의 순서를 바꾸면, 코드 내에서 req라고 지정된 객체가 실제로는 응답 객체를 참조하게 되고, res라고 지정된 객체는 요청 객체를 참조하게 됩니다. 이는 매우 혼란스럽고, 의도하지 않은 동작을 초래할 수 있기 때문에, 매우 주의해야 합니다. // 올..

1. 좋은 프롬프트란?1) 구체적이고 명확하게 적기 (수치화가 가능하면 좋다.)예를 들어, 사과에 대해서 짧은 설명을 해 줘 보다 사과에 대해서 유치원생이 이해할 수 있을 정도의 단어와 문장을 사용해서 3줄 이내로 설명을 해 줘가 더 좋다.내가 어떤 기능을 원하고 어떠한 출력값을 원하는지 명확하게 하는 편이 좋다. (정보 출력과 가공의 질이 좋아진다)2) 파운드 기호 사용해서 지침을 묶기 (같은 기호 3개로 묶기. ex) """지침""" ###지침### ```코드```)   2. 출력 형식 만들기Desired Format :Places : >> 쉼표로 구분된 이름의 리스트들이 출력됨>> 이 외에도 JSON, 순서나열 등으로 결과들을 출력할 수 있게 할 수 있다.   3. 요약하기INPUT 에 담긴 값을 ..

1. 보안 등급이 서로 안맞을경우 (http / https) 2. 백엔드로만 통신 가능하게 한 경우 (서버가 있는 경우에만 통신) https://velog.io/@sebinn/CORS-%EB%B0%9C%EC%83%9D-%EC%9B%90%EC%9D%B8%EA%B3%BC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95 CORS 발생 원인과 해결 방법 CORS에 대해 간단히 알아보기 velog.io https://bohyeon-n.github.io/deploy/web/cors.html

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 을 사용하면 파일선택하는 버튼을 커스텀 할 수 있다