회사에서 Thymeleaf를 사용하는데 React에 익숙한 나로썬 html 파일을 편집할 때마다 서버를 재시작하는 과정이 매우 불편했다.게다가 재시작 후 로그인 시 그 정보를 DB에 남기고 이게 화면에 표시되도록 만들었기 때문에 내가 쌓은 데이터만 10페이지가 넘어갈 때 쯤.. 서버 재시작 없이 리로드 할 수 있는 방법이 있다고 해서 적용하게 되었다! 1. cache: false 설정타임리프 같은 템플릿 엔진은 파싱 후 결과를 캐시에 저장하게 된다. 프로덕션에서는 성능 향상에 기여하지만 개발 단계에서는 매우 불편하므로 이를 꺼준다. thymeleaf: cache: false 2. build.gradle에 의존성을 추가한다.spring-boot-devtools는 리로드를 포함한 개발에 편리한 ..

기존에는 Create React App 방식으로 프로젝트를 만들었지만 2023년 이후 유지보수가 중단되어 Vite 사용이 권장되고 있다. Vite는 프랑스어로 '빠르다' 를 의미하며 '바이트' 가 아닌 '비트' 로 읽는다. 개발 서버와 빌드 도구 역할을 하며 React, Vue, Svelte 등 다양한 프론트엔드 라이브러리, 프레임워크를 지원한다.Vite는 개발할 때는 ESM 기반으로 파일을 바로 실행시켜서 매우 빠르고 빌드할 때는 Rollup을 사용한다. ES모듈 (ESM) : 최신 JS 표준으로 import와 export 키워드를 사용한다.CommonJS : Node.js 환경에서 주로 사용되며 require()과 module.exports 를 사용한다.commonJS의 경우 모듈 로더가 동기적으로 ..

이번에 취업을 하고 새로운 서비스의 관리자 콘솔을 구축하기 위해 CDD를 채택해서 개발해보려 한다!그럼 CDD는 뭘까? 컴포넌트 주도 개발 (Component-Driven Development) 는 모듈화된 컴포넌트로 사용자 인터페이스를 구축하는 개발 및 디자인 방식이다.여기서 '모듈' 과 '컴포넌트' 라는 단어가 나오는데 얼핏 보면 비슷해보이지만 다른 의미를 가지고 있다. 먼저 컴포넌트와 모듈 두 가지의 개념을 알아보자면 컴포넌트사용자 인터페이스의 가장 작은 단위로 과업에 상관없이 일관성 있게 사용되는 공통 요소 현대의 사용자 인터페이스는 복잡하다. 사람들은 여러 기기에서 개인화된 경험을 기대하고 이는 프론트엔드 개발자와 디자이너가 UI에 더 복잡한 로직을 포함시켜야 한다는 의미이다. 컴포넌트는 상..

HTTP HTTP는 HyperText Transfer Protocol의 약자로 직역하면 HyperText를 전송하는 규약이다.Hypertext : 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트, 인터넷과 결합하여 HTML의 주된 구성요소가 됨- 하이퍼링크를 통해 각 텍스트가 비선형적으로 연결됨 이는 클라이언트 - 서버 사이에서 이루어지는데, 예를 들어 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹 페이지나 그림 정보를 요청(request)하면, 서버는 이 요청에 응답(response)하여 필요한 정보를 클라이언트에 전달한다. 요청 / 응답 방법 HTTP 요청(Request)와 응답(Response)의 구조는 매우 유사하며, 아래와 같은 4가지 기본적인 구성 요소로 이루어져 있다..

https://youtu.be/NRgZuuwD2WY?si=UqpQxwCTm3OnDPDa  명령형 프로그래밍과 선언형 프로그래밍은 프로그래밍 패러다임 중 하나이다. 프로그래밍 패러다임은 어떤 방식으로 문제를 해결하고 코드를 작성할지에 대한 사고방식이며 각 언어나 시스템이 문제를 표현하고 해결하는 방식을 다르게 정의한다.    명령형 프로그래밍 명령형 프로그래밍은 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명한다. 쉽게 말하면 컴퓨터가 수행할 명령들을 순서대로 쓰는 것이다.  프로그램의 상태(변수 값)를 계속해서 업데이트 하며, 제어 흐름(순차, 반복, 조건문 등)을 통해 동작을 지시한다. int main() { int sum = 0; for (int i = 1; i   어떤 방식으로..

42 트센을 하면서 모듈 중 SSR이 있어 용어는 들어봤지만 뜻은 막연하게 서버에서 화면을 그려주는 것? 정도로 알고 있었다. 이번에 앱티브 스터디를 하며 제대로 알고가면 좋을 것 같아 정리해본다! 🍀Rendering우선, 렌더링(Rendering) 이 뭘까?SSR과 CSR 모두 Rendering 이라는 단어가 들어간다. 렌더링의 사전적인 의미는 표현이다. 여러 분야에서 렌더링이라는 단어를 사용하는데 컴퓨터 그래픽스 관점에서의 렌더링은 2D 또는 3D 모델에서 이미지를 그리는 과정이다. 웹 브라우저 관점에서의 렌더링도 비슷하다. 웹 브라우저의 랜더링은 웹사이트가 그려지는 과정을 뜻한다.  웹 사이트가 그려질 때 1. Parsing2. Style3. Layout4. Painting5. Composite..