html css .twoanswer-ai-section.active2 .suggest-img-wrapper{ animation : cardMove 1s ease forwards; animation-delay: calc(var(--n) * 0.2s + 2s); }

너비와 높이 (width and height): 요소의 너비(width)나 높이(height)를 설정할 때 % 단위는 부모 요소의 너비나 높이를 기준으로 합니다. 예를 들어, 부모 요소의 너비가 500px일 때 자식 요소의 너비를 50%로 설정하면, 그 자식 요소의 너비는 250px이 됩니다. 패딩과 마진 (padding and margin): 패딩(padding)이나 마진(margin)을 백분율로 설정할 경우, 이는 해당 요소의 부모 요소의 너비를 기준으로 계산됩니다. 예를 들어, 부모의 너비가 600px이고, 자식 요소의 마진을 10%로 설정하면, 그 마진은 60px이 됩니다. 위치 (position): 요소의 위치를 %로 지정하면, 이는 위치의 기준점(예를 들어 position: relative의 ..

POST (Create) 용도: POST 메소드는 새로운 리소스를 생성하거나 데이터를 제출할 때 사용됩니다. 동작: 클라이언트가 서버로 데이터를 보내면, 서버는 해당 데이터를 이용하여 새로운 리소스를 생성합니다. 중복된 데이터: 같은 요청을 여러 번 보내면, 여러 개의 리소스가 생성될 수 있습니다. 안전하지 않음: POST 요청은 보통 서버의 상태나 데이터를 변경하는 데 사용되므로, 요청이 여러 번 실행되어도 안전한 동작을 보장할 수 없습니다. 예시: 새로운 게시물을 생성할 때, 회원가입을 처리할 때 등에 사용됩니다. PUT (Update) 용도: PUT 메소드는 특정 리소스의 전체 내용을 업데이트할 때 사용됩니다. 동작: 클라이언트가 서버로 업데이트할 데이터를 보내면, 서버는 해당 데이터를 사용하여 리..

1. 헤더(Header): 용도: HTTP 요청의 메타데이터를 전달하기 위해 사용됩니다. 요청의 속성이나 특정 정보를 서버에게 알리는 데 사용됩니다. 특징: 키-값 쌍 형태로 데이터를 전달합니다. 보통 헤더는 요청의 메타데이터를 나타내는데, 인증 정보, 콘텐츠 유형, 캐시 제어, 사용자 에이전트 등의 정보를 전달할 수 있습니다. 헤더는 요청 또는 응답의 첫 부분에 위치하며, 다양한 헤더 필드가 있습니다. 2. 바디(Body): 용도: 실제 데이터를 전달하기 위해 사용됩니다. 주로 POST 요청에서 사용되며, 사용자가 입력한 데이터나 서버가 전송할 데이터를 담습니다. 특징: 요청 본문에 실제 데이터가 포함되어 있습니다. JSON, XML, 폼 데이터 등 다양한 형식으로 데이터를 전송할 수 있습니다. 보안적..

"Authorization"은 보통 HTTP 요청 헤더에 담겨서 전송되며, 해당 요청이 서버에서 수행되기 전에 권한 부여에 대한 정보를 전달합니다. 이를 통해 서버는 요청을 수신한 후 해당 요청이 허용되는지 여부를 결정할 수 있습니다. 일반적으로 "Authorization" 헤더에는 사용자 인증을 위한 정보가 포함되는데, 이는 보통 토큰 기반 인증 방식에서 많이 사용됩니다. 예를 들어, JWT(JSON Web Token)를 사용하는 경우, 클라이언트는 HTTP 요청의 "Authorization" 헤더에 JWT를 담아서 서버에 전송합니다. 이 JWT에는 사용자의 인증 상태와 권한 정보가 포함되어 있습니다. 서버는 이 토큰을 검증하여 사용자의 인증 상태를 확인하고, 해당 요청이 허용되는지 여부를 결정합니다...

function formatNumberWithCommas(number) { // 숫자를 문자열로 변환 var numStr = number.toString(); // 정규 표현식을 사용하여 세 자리마다 쉼표 삽입 // \B는 단어 경계가 아닌 위치를 나타냄 // (?=(\d{3})+(?!\d))는 뒤쪽에 숫자가 세 개 있고, 그 뒤에 숫자가 없는 위치를 찾음 return numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ','); }

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