728x90 Frontend52 QueryFailedError: Unknown column '_______' in 'where clause' 해당 오류는 클라이언트에서 api를 사용할 때, 서버에서 기대하고 있는 형식에 맞지 않아서 발생하였습니다. 만약 서버 쪽에서 DTO를 설정하여 다루는 데이터의 형식을 정의했다면, 클라이언트 쪽에서도 해당 형식을 맞춰서 데이터를 보내줘야 합니다. 예를 들어서 서버에서는 다음과 같이 DTO를 설정하였는데,class UserDTO { userId: string; username: string; email: string;} 클라이언트에서는 다음과 같이 데이터를 보내면 오류가 발생하게 됩니다. { "id": "123", "name": "John Doe"} 발생 오류 예시ERROR [ExceptionsHandler] Unknown column 'userId' in 'where clause' QueryFai.. 2024. 7. 12. [React] 컴포넌트(Component) 리액트에서 컴포넌트(Component)란, 리액트 앱의 UI 요소를 표현하는 최소한의 단위 요소입니다. 독립적인 부품으로 존재하기 때문에, 각 컴포넌트는 의존성이 낮아 재활용성이 높아집니다. 컴포넌트의 이름은 항상 대문자로 시작해야 하는데, 리액트는 소문자로 시작하는 요소들을 모두 DOM 태그로 인식하기 때문입니다. 컴포넌트를 생성하는 방법에는 1) 함수형 컴포넌트와 2) 클래스형 컴포넌트가 있습니다. 현재는 주로 함수형 컴포넌트로 컴포넌트를 생성하는 방법을 지향하지만, 기존 코드에서는 클래스형 컴포넌트가 사용되는 경우도 많기 때문에 두 가지 방법을 모두 알아보겠습니다. 1) 함수형 컴포넌트 함수형 컴포넌트는 function 키워드나 화살표 함수와 같이, 전형적인 JavaScript 함수의 형태로 작성됩.. 2024. 3. 10. 쿠키, 웹 저장소, 캐시 HTTP 통신의 특징은 무상태성(Statelessness)을 가진다는 것입니다. 클라이언트의 상태를 유지하지 않기 때문에 필요한 정보를 매번 통신을 통해서 가져와야 한다는 것입니다. 불필요한 통신이 늘어나는 문제점을 해결하기 위해서 여러 형태의 저장소가 개발되었습니다. 1. 쿠키 (Cookie)쿠키는 유저의 웹 브라우저에 저장되는 가벼운 데이터입니다. 쿠키는 4KB까지의 데이터를 저장할 수 있으며 통신이 이루어질 때마다 서버로 전송됩니다. 쿠키를 통해 사용자를 식별할 수 있으며, 사용자의 상태와 정보를 저장할 수 있게 되었습니다. 쿠키의 종류:세션 쿠키 (Session Cookie) : 임시 쿠키로 창이 닫히면 지워집니다. 서버 쪽에 저장되며 유효기간을 별도로 저장할 수도 있습니다.지속 쿠키 (Pers.. 2024. 3. 2. [JavaScript] <script> 태그의 위치 async 속성을 추가한다면, 자바스크립트 코드와 HTML 코드를 동시에 읽습니다. 자바스크립트 코드가 모두 읽혔다면, HTML 파싱을 멈추고 자바스크립트 코드를 실행합니다. 기본 설정에 비해 코드를 읽는 시간은 절약이 되지만, 실행하는 동안은 똑같이 시간이 지연된다는 점에서 유사한 문제점을 가지고 있습니다. 1-3. defer 속성 추가 defer 속성을 추가한다면, async 옵션과 유사하게 자바스크립트 코드와 HTML 코드를 동시에 읽습니다. 하지만 코드가 모두 로딩된 다음에 바로 실행하는 것이 아니라, HTML 파싱이 완료될 때까지 기다리다가 페이지가 모두 로딩이되면 실행됩니다. 2. 태그 내부 2-1. inline 방식 코드가 짧다면 직접적으로 HTML 코드에 자바스크립트 코드를 삽입할 수도 있.. 2024. 2. 12. [JavaScript] toggle() 메서드 toggle() 메서드는 요소에 클래스를 추가하거나 삭제합니다. 만약 요소에 해당 클래스가 존재하지 않는다면 추가하고, 존재한다면 삭제를 하는 on/off 스위치와 유사한 역할을 합니다. 만약 toggle()이 없다면 이전 글에서 정리한 addEventListener()와 조건문을 활용해서 기능을 구현해야 합니다. toggle() 메서드를 활용함으로써 코드가 더 간결해집니다. toggle() 메서드의 또 다른 장점은, 기존에 가지고 있는 클래스들을 유지할 수 있다는 것입니다. 만약 toggle() 을 사용하지 않고 어떤 요소에 새로운 클래스를 설정하면, 먼저 존재하던 클래스들이 사라지게 됩니다. 다음은 toggle() 메서드의 사용 예시입니다. index.html 내용 더보기 h1 Information .. 2024. 2. 4. [JavaScript] addEventListener() 메서드 addEventListener() 메서드는 타겟 요소에서 특정 이벤트가 발생했을 때 어떤 함수가 실행될지를 설정합니다. 타겟 요소는 주로 HTML 요소, Document, 또는 Window입니다. addEventListener() 메서드의 Syntax:eventTarget.addEventListener('eventType', listener) eventType의 대표적인 예시로는 click, load, scroll과 키보드 관련 이벤트, 마우스 관련 이벤트들이 있습니다. 다음은 addEventListener()를 사용한 예시 코드입니다. h1 Information const title = document.querySelector("h1");console.log(title).. 2024. 2. 2. 이전 1 2 3 4 ··· 9 다음 반응형
