Study28 [Web] 브라우저 렌더링, SSR과 CSR는 다를까? 1. 계기개발을 하면서 CSR과 SSR의 개념을 명확하게 이해하는 것이 중요하다고 느꼈다. 아래는 이번 글을 쓰게 된 계기이자 내가 헷갈렸던 부분이다.CSR과 SSR의 가장 큰 차이는 무엇인가?CSR에서는 백엔드 서버가 HTML을 제공한다고 하는데, 프론트엔드 서버가 있어도 백엔드에서 HTML을 제공하는 건가?SSR에서 "서버"란 무엇을 의미하는가? 프론트엔드 서버인가, 백엔드 서버인가?프론트엔드 서버와 백엔드 서버의 역할은 무엇인가?어느 정도 알고 있다고 생각했었는데, 한번 헷갈리기 시작하니 과연 내가 제대로 알고 있던 것이 맞았는지 의문이었다.그래서, 이번 기회로 정말 정말로 제대로 이해하고 넘어가기로 했다 !2. 브라우저 렌더링 과정CSR과 SSR을 설명하기에 앞서, 먼저 이 글을 쓰게 된 초기 궁.. 2025. 2. 11. [Next.js] App Router vs Pages Router (feat. 달라진 폴더 구조) 1. 계기Next.js로 새로운 프로젝트를 진행 중인데, 최신 버전으로 설치하여 14 버전을 사용하게 되었다.이전(몇 넌 전...) 프로젝트를 진행했던 경험과 구글링을 참고해 폴더 구조를 구성하다 보니, 뭔가 라우팅이 원활하게 되지 않았다.문제를 알 수 없어 검색을 해보다, Next.js 14 버전은 Next.js 13부터 생긴 App Router를 기본적으로 사용하고 있어, 내가 이전에 사용했던 Pages Router 기반의 폴더 구조를 중간중간 참고하려고 하니 충돌이 생겼던 것이다.이참에, Next.js의 App Router와 Pages Router에 대해 비교해 보고 정리하고자 한다.2. 개발 환경Next.js 버전: 14Node.js 버전: 18.16.03. Pages Router우선 기존의 Pa.. 2025. 1. 19. [JavaScript] 디바운스 구현하기 (feat. 더블 클릭 이슈 해결하기) 1. 계기유지보수 진행 중인 프로젝트에서 캘린더를 조작하면 API를 바로 요청하여 테이블을 조회하는 기능이 있었다. 이 경우, 캘린더를 키보드나 마우스로 빠르게 조작할 시, 변경되는 날짜마다 API가 요청되어 서버 쪽 부하가 생길 것 같아 로직 수정이 필요해 보였다. 추가로 최근 더블 클릭 이슈가 발생하여, 해당 문제를 해결하고자 다양한 방법을 시도하였다. 그 중 채택된 방법이 현재 작성할 디바운스를 활용한 방법이다.현재 프로젝트의 규모와 이후 작업을 고려해봤을 때, 해당 방법이 가장 최선이라 선택하게 되었다.앞서 말한 디바운스 구현 시에는 딱 한 군데에서만 필요했고, 코드 양이 적어 코드를 분리하지 않았는데, 이번 디바운스 적용으로 코드를 모듈화 하였다.라이브러리를 사용하지 않고 직접 구현한 이유는, .. 2024. 8. 31. [Node.js] Excel 파일 업로드 및 다운로드 하기 (feat. Multer) 1. 계기 회사에서 진행 중인 프로젝트에서 여러 명의 사용자를 추가할 때, 엑셀 파일을 업로드한 후, 해당 파일 데이터를 파싱하여 사용하려고 하는 로직이 추가되었다. 프론트에서도 추가적으로 양식을 다운로드한 후, 작성된 파일을 다시 업로드하는 컴포넌트를 만들게 되었다. 로직은 크게 1. 서버로부터 받은 파일 다운로드 2. 파일 서버로 업로드 두 가지다. 아직 서버쪽 API 개발이 완성되지 않았다고 하여, 임시로 express.js로 node.js 서버를 구현해 테스트해보았다. 2. 개발 환경 테스트용 서버로 express를 사용하였고, FormData 형식의 데이터를 읽기 위해 Multer를 사용할 예정이다. 기본적인 서버는 아래와 같이 세팅하였다. // server.js import cors from .. 2024. 2. 21. [Vue.js] Excel 파일 업로드 및 다운로드 하기 (feat. 다른 이름으로 저장하기) 1. 계기 회사에서 진행 중인 프로젝트에서 여러 명의 사용자를 추가할 때, 엑셀 파일을 업로드한 후, 해당 파일 데이터를 파싱하여 사용하려고 하는 로직이 추가되었다. 프론트에서도 추가적으로 양식을 다운로드한 후, 작성된 파일을 다시 업로드하는 컴포넌트를 만들게 되었다. 프론트 쪽 로직은 크게 1. 서버로부터 받은 파일 다운로드 2. 파일 서버로 업로드 두 가지다. 아직 서버 쪽 API 개발이 완성되지 않았다고 하여, 임시로 express.js로 node.js 서버를 구현해 테스트해보았다. 2. 개발 환경 현재 vue2를 사용 중이며 서버로 파일을 전송할 때에는 axios로 FormData를 사용하여 파일을 전송할 예정이다. 기본적인 UI는 아래와 같이 세팅하였다. // App.vue 양식 다운로드 파일 .. 2024. 2. 21. [Vue.js] Vue2 IE 지원하기 (3) Vue2에서 IE(2024년 1월 기준 IE9까지) 지원하는 방법은 이전 포스팅들을 참고해 주세요. 2024.01.30 - [Study] - [Vue.js] Vue2 IE 지원하기 (1) [Vue.js] Vue2 IE 지원하기 (1) IE 지원 계기 및 지원 현업에서 개발 중인 프로젝트가 IE 대응이 필요해져 현재 프로젝트를 IE에 호환할 수 있는 방법에 대해 조사하게 되었다. IE 9까지만 지원한 궁극적인 이유는, Vue가 IE8 이하를 ktmihs.tistory.com 2024.01.31 - [Study] - [Vue.js] Vue2 IE 지원하기 (2) [Vue.js] Vue2 IE 지원하기 (2) 🔍 IE 지원 동기 및 시작 방법은 이전 글을 참고해 주세요 2024.01.30 - [Study] -.. 2024. 2. 11. 이전 1 2 3 4 5 다음
