전체 글92 [Web] Webpack HMR과 풀 페이지 리로드 (+IE9 해결 방법) 1. 계기이전 프로젝트 진행 시, IE9을 대응해야 했다. 그리고 이 프로젝트를 기반으로 브랜치를 따 새로운 프로젝트를 진행하게 되었는데, 이로 인해 기존 개발 환경을 그대로 유지하고 있었다.이전에는 눈치채지 못했으나, 스타일을 수정할 일이 잦아지면서 자동으로 반영되지 않는 문제를 발견하게 되었다.특히 저장할 때마다 페이지를 새로고침하지 않아도 바로 적용되던 HMR(Hot Module Replacement) 기능이 제대로 작동하지 않아 큰 불편함을 느꼈다.개발에 직접적으로 WebSocketServer를 쓰는 것이 아니라서, 구현 상의 문제는 없으나, 스타일 수정이 잦아 개발 시의 불편함을 해결하고 싶었다.(개발 시 자동 새로고침 이슈가 발생한다면 HMR 문제가 아닌지 확인하길 추천합니당.)같은 보일러플레.. 2025. 3. 14. [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. 이전 1 2 3 4 ··· 16 다음
