오늘은 아주 사소하지만 중요한, 그리고 누구나 한 번쯤은 겪을 수 있는 HTTP 요청 실수에 대해 이야기해보려고 한다.사건의 발단서버에 POST 요청을 보내야 했다. 그런데 특별히 보낼 데이터는 없어서, 다음과 같이 null을 body에 실어서 보냈다.axios.post("/api/something", null, { headers: { "Content-Type": "application/json", },});이때까지만 해도 아무 문제가 없을 줄 알았다. 하지만 요청을 보내자마자 클라이언트에서 예외가 발생했다. 대략 이런 에러였다:SyntaxError: Unexpected token 'n', "null" is not valid JSON뭐가 문제였을까?처음엔 axios 버그인가 싶어서 공식문서를 다..
Study/Frontend
만약 페이지 조회 요청 순서가 1 -> 2 -> 1 이라면 총 세번 요청하게 됩니다.하지만 만약 해당 게시판이 커뮤니티처럼 데이터가 유동적으로 계속 바뀌는 것이 아니라 역사 자료 게시판(?)처럼 변동성이 낮다면 어떨까요?1을 받았을 때 1을 저장해뒀다가 1페이지를 다시 요청하면 이전에 받았던 정보를 다시 사용하면 되지 않을까요?이러한 처리를 캐싱 이라고 합니다.(알고리즘에도 많이 사용되죠!)오늘은 캐싱 기능을 추가해보겠습니다. 캐싱이 많으면 무조건 좋을까요? 그건 아닙니다. 왜냐하면 받은 데이터를 전부 저장해버리면 언젠가 메모리 overflow가 발생하기 때문입니다. 따라서 오늘은 한계점을 지정하고 그 한계를 벗어나면 메모리에서 삭제되도록 구현하겠습니다.테스트 추가하기app.test.js에 테스트를 추가..
저번 시간에 기본적인 테이블과 페이지네이션을 테스트코드까지 작성하여 개발했었습니다.TDD의 마지막은 언제나 리팩토링이어야 합니다!오늘은 그동안 미뤄왔던 리팩토링을 진행하겠습니다. 우선 APP의 기능을 3가지로 나눈다면1. 테이블2. 페이지네이션3. 게시글 로드 app.js에서 테이블과 페이지네이션의 상세 구현까지는 필요가 없으므로 이 두가지를 컴포넌트로 분리하겠습니다.간단하게 잘라내기 + 붙여넣기로 pagination.js와 post-table.js를 만들어줍니다. 그러면서 필요한 부분에 함수 분리도 해줍니다.사실, 이전까지 몰랐던 클래스 관련 ES2022의 새로운 기능들에 대해서도 알게 되었습니다!1. 이제 js에서 클래스 필드 초기화 가능2. 접근제어자 추가 관련 상세한 내용은 아래 게시글로 확인해..
changePage 함수가 비동기로 페이지를 변경한다.통과하지 않는 테스트 it("changePage 함수가 비동기로 페이지를 변경한다.", async () => { // changePage 함수가 Promise를 반환하도록 가정 const secondPageButton = document.getElementById("page-button-2"); await app.changePage(2); // 비동기 함수 호출과 완료를 기다림 expect(app.page).toBe(2); // 페이지 상태가 올바르게 변경되었는지 확인 expect(secondPageButton.classList.contains("current-page")).toBe(true); // 버튼의 클래스가 바뀌었..
/* 제목 스타일 */h1 { text-align: center; margin-top: 5%;}/* 테이블의 기본 스타일 설정 */table { width: 30%; /* 전체 너비를 차지하도록 설정 */ border-collapse: collapse; /* 테두리 겹치기 방지 */ margin: 20px auto; /* 마진 설정 */ font-family: "Arial", sans-serif; /* 폰트 스타일 설정 */ font-size: 16px; /* 글자 크기 설정 */ color: #333; /* 글자 색상 설정 */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 */}/* 테이블 셀 설정 */th,td { padding: 12..
SSAFY 자율 프로젝트는 오픈 소스를 하기로 결정했습니다! 본격적인 개발에 앞서, 모듈 번들러부터 선택하게 되었는데요. 어떤 과정을 거쳐 선택했을지 따라오시죠! 1. 모듈 번들러란? 모듈 번들러는 웹 개발에서 중요한 도구로, 개발자가 작성한 여러 개의 JavaScript 파일과 기타 자원(예: CSS, 이미지)을 하나의 파일 또는 몇 개의 파일로 결합하는 역할을 합니다. 이 과정은 웹 애플리케이션의 로딩 시간을 최적화하고, 파일 요청의 수를 줄여 네트워크 부담을 감소시킵니다. 모듈 번들러는 소스 코드를 모듈로 관리할 수 있게 해주며, 각 모듈은 독립적인 기능을 가진 단위로 개발될 수 있습니다. 이렇게 모듈화된 코드는 재사용성과 유지 관리가 용이해지며, 대규모 프로젝트에서 특히 유용합니다. 주요 모듈 번..
[!tip] This Post exists for #Jest TDD 방식 개발 방법론이 유행하기 시작하면서 테스팅 기법에 대한 관심도가 올라가기 시작했는데, 우리는 이러한 흐름에 맞춰서 테스팅 기법이 무엇인지, 프론트엔드에서 어떤 방식으로 TDD가 이뤄지는지 알아보도록 하겠다. TDD TDD[^1]는 소프트웨어를 개발하는 여러 방법론 중 하나, 제품이 오류 없이 작동하는 지에 대한 여부와 프로그래머가 코드를 작성한 이후 테스팅을 통해 안정적으로 서비스를 유통하기 위한 목적임. 즉, 안정적인 서비스의 개발과 테스팅을 통한 버그가 없는 코드를 만들고자 할 때에 사용할 수 있다. 하지만, 단점으로는 사용자가 무조건 개발자가 원하는 방향으로 흘러가지 않는다는 점과, 테스트가 명확하게 설계되지 않으면, 개발에서 ..
REST API REST API는 Representational State Transfer의 약자로, 웹 서비스의 설계 패러다임 중 하나입니다. 하나의 URI는 하나의 고유한 리소스를 대표하도록 설계된다는 개념에 전송방식을 결합해서 원하는 작업을 지정한다. 웹의 장점을 최대한 활용할 수 있는 아키텍처(설계구조)로써 REST를 발표 HTTP URI를 통해 제어할 자원(Resource)을 명시하고, HTTP Method(GET, POST, PUT, DELETE)을 통해 해당 자원을 제어하는 명령을 내리는 방식의 아키텍처 REST 구성 자원 (Resource) : URI 행위 (Verb) : HTTP Method 표현 (Representations) REST 특징 자원 지향: 각 URL은 특정 자원을 나타냅니..
프로젝트 초기 설정 없이 프로젝트를 바로 시작해봅시다. 아래는 제가 구성한 boilerplate 인데요, Vue, TS, AntdV가 설정되어있습니다. TS가 아니라 JS로 하고싶으신 분들은 조금 기다려주세요! 프로젝트를 직접 세팅하고 싶으신 분은 아래 링크를 참고해주세요. https://lire-eruel-dev.tistory.com/entry/Vue-3-AntDV%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0 Github 로그인을하고 접속합니다. 사용할 언어에 맞게 Github에 접속합니다. TypeScript : https://github.com/LireEruel/boilerplate-vue-ts-antd JavaS..
Vue 3부터는 vite 기반으로 프로젝트가 생성됩니다. 오늘은 npm과 yarn이 있다고 가정하고 프로젝트를 세팅하도록 하겠습니다. 기본적인 세팅을 함께하고, 제가 하는 프로젝트 초기 세팅도 함께 해보겠습니다. Vue 3 생성하기 npm create vite@latest 위 명령어를 입력하면 여러가지 설정을 할 수 있습니다. 그리고 yarn을 입력해서 패키지를 설치합니다. yarn success가 뜨고, yarn lock 파일이 생긴 것을 볼 수 있습니다. 이제 실행해봅시다. yarn dev http://localhost:5173/ 에 접속해봅시다. 이렇게 간단히, 프로젝트를 생성하였습니다. 화면에 보이는 것처럼 VS CODE에 Volar를 설치하는 것이 더 편합니다. Ant Design Vue 적용하..
