오늘은 아주 사소하지만 중요한, 그리고 누구나 한 번쯤은 겪을 수 있는 HTTP 요청 실수에 대해 이야기해보려고 한다.사건의 발단서버에 POST 요청을 보내야 했다. 그런데 특별히 보낼 데이터는 없어서, 다음과 같이 null을 body에 실어서 보냈다.axios.post("/api/something", null, { headers: { "Content-Type": "application/json", },});이때까지만 해도 아무 문제가 없을 줄 알았다. 하지만 요청을 보내자마자 클라이언트에서 예외가 발생했다. 대략 이런 에러였다:SyntaxError: Unexpected token 'n', "null" is not valid JSON뭐가 문제였을까?처음엔 axios 버그인가 싶어서 공식문서를 다..
frontend
저번 시간에 기본적인 테이블과 페이지네이션을 테스트코드까지 작성하여 개발했었습니다.TDD의 마지막은 언제나 리팩토링이어야 합니다!오늘은 그동안 미뤄왔던 리팩토링을 진행하겠습니다. 우선 APP의 기능을 3가지로 나눈다면1. 테이블2. 페이지네이션3. 게시글 로드 app.js에서 테이블과 페이지네이션의 상세 구현까지는 필요가 없으므로 이 두가지를 컴포넌트로 분리하겠습니다.간단하게 잘라내기 + 붙여넣기로 pagination.js와 post-table.js를 만들어줍니다. 그러면서 필요한 부분에 함수 분리도 해줍니다.사실, 이전까지 몰랐던 클래스 관련 ES2022의 새로운 기능들에 대해서도 알게 되었습니다!1. 이제 js에서 클래스 필드 초기화 가능2. 접근제어자 추가 관련 상세한 내용은 아래 게시글로 확인해..
개요SSAFY에서 프론트 수업을 한 지도 3일이 되었습니다. 같은 반 사람들의 코드리뷰를 해주면서 알게 된 공통적인 실수들을 모아보았습니다.사실 저도 이번에 알려주면서 새로 알게 된 부분들도 많답니다! 😂함께 체크해보아요! 1. HTML과 CSS의 역할 분리를 명확히 해주세요.HTML : HyperText Markup Language의 약자로, 웹 페이지의 구조와 콘텐츠를 정의하는데 사용CSS : Cascading Style Sheets의 약자로, 웹 페이지의 스타일을 정의하는 데 사용HTML은 구조와 콘텐츠 정의를 하는 데 사용되어야 합니다.이 말 뜻은, 태그 사용시 스타일을 고려하지 말고 콘텐츠에 집중하여야 한다는 말입니다. 가장 많이 하는 실수가, 중요하지는 않아도 디자인에서 글씨가 크다..
이 글은 body을 처음 배우는 사람을 위한 글입니다. 쉬운 이해를 위해 JAVA에 비유해서 설명을 할 예정입니다. 앞으로 【자유법】은 자바식 비유라고 생각해 주세요. HTML이란? HTML HyperText Markup Language의 약자로, 마크업 언어입니다. 웹 페이지의 구조와 콘텐츠를 정의하는 데 사용되며, 웹 페이지를 브라우저에서 표시할 때 사용됩니다. 웹 페이지에 있는 텍스트, 이미지, 링크, 비디오 등의 요소를 구조화하고 레이아웃을 정의합니다. 코드로 먼저 봅시다. //전 HTML입니다 // 【자유법】class 파일의 최 상단 class 선언하고 감싸는 부분 // 실제 화면에 보이는 부분【자유법】 메인 메소드 제목입니다. 실제 코드에 저런 식으로 주석하시면 안 됩니다!! 보기 쉽게 적어놓..
