dev.jaieve 공부기록

CSR에서는 HTML문서에서 모든 내용을 수신하지 않고 클라이언트 측 JavaScript 라이브러리를 사용하여 브라우저에서 콘텐츠를 렌더링하낟. 새 페이지가 로드될 때 브라우저는 서버에 새 요청을 하지 않고, 페이지가 브라우저에 로드될 때까지 콘텐츠가 렌더링되지 않기 때문에 검색엔진 순위에 부정적인 영향을 미칠 수 있다. 하지만 CSR Application에서는 Web Side Rendering이 더 빠른 경향이 있다고 한다. 개발자는 SSR과 CSR을 고려할 때 프로젝트의 규모, Application의 복잡성, 사용자수, 사용자 경험 우선순위 등의 요소를 평가하게 된다고 한다. 개인적으로 가장 표면적인 이유가 바로 사용자 경험 우선순위라고 생각했다. 사용자입장에서 화면 전체가 깜빡이는 것을 보게되고 U..

앞서 작성한 SSR과 비교되는 기법인 Client Side Rendering. 핸들바를 사용하면서 어렴풋이 구분하기 시작했다가, React를 공부하면서 그 차이에 대해 실감하면서 앞으로 내가 새로운 서비스를 기획 및 설계 단계에서 부터 만들 때, CSR를 효율적으로 사용할 수 있게 되길 바라는 마음으로 CSR에 대해서 정리해본다. 그렇다면 CSR이란 무엇일까? CSR이란? CSR은 브라우저에 내장된 JavaScript엔진을 사용하여 브라우저에서 콘텐츠를 렌더링하는 기법으로 Single Page Application(SPA)에서 사용한다. HTML문서 자체에서 모든 내용을 가져오지 않고, 첫 로딩에는 JavaScript 파일을 가진 원본 HTML문서가 전송된다. 이후 브라우저에서 사이트의 나머지 부분을 렌..

회사에서 타임리프를 쓰고 있지만, 레거시 소스코드에는 핸들바라는 CSR도 함께 사용되고 있다. 처음 Ajax에 대해 배우면서 CSR에 대해 알게 되면서, 화면의 깜빡임 없이 새로운 정보를 클라이언트에게 제공할 수 있다는게 무조건적으로 장점이라고 생각했던 시절이 있었다. Thymeleaf와 Handlebar를 함께 써보고, React 공부를 하면서 배우고 느낀 SSR과 CSR에 대해 정리해보고자 한다. 먼저 SSR! SSR이란? SSR은 서버의 HTML파일을 클라이언트를 위해 요청받은 정보에 대한 응답으로 완전히 렌더링된. 즉, 클라이언트에게 보여줄 data가 그려진 형태의 페이지를 전송해준다. 서버쪽에서는 클라이언트에게 콘텐츠를 전송하기 전에 전달할 data를 indexing 하는 것 과 같이 미리 가공..

회사에서 개발을 할 때 마이크로서비스 구조로된 프로램을 개발하고 있어서 동시에 3개의 프로젝트를 run 한다. 그런데 어제까지만 해도 잘 실행되던 2개의 프로젝트를 run 했는데 다음과 같은 오류가 발생했다. 해당 메인 Applicaiton.java를 가서보니 @SpringApplicaiton 애너테이션이 제대로 import되지 않는 듯 빨간줄이 쳐져있었다. alt + Enter로 추천 해결방법을 적용하려고 했지만 dependency는 추가되지 않았다. 그래서 dependency를 설정하는 build.gradle를 확인해봤다. 하지만 그런데 문제는 build.gradle이 변경된적은 없다는 것... 프로젝트를 clean하고 다시 build해봤지만 오류는 여전했다. 그래서 구글링을 통해서 다음과 같은 방법..

인텔리제이의 git CLI가 아닌 터미널을 사용하여 commit & push를 할 때가 있다.(타이핑하고싶을 때) 그래서 집 노트북에서 작업을 하고, 회사에서 해당 레포의 commit histoyr를 확인해보니 다음과 같이 깨져있었다. 중간에 한글이 잘 들어간 것은 CLI로 커밋하고 push까지 한 이력이라서 한글이 잘보였다. 터머널에서 merge하고 checkout하는걸 선호해서 해당 문제를 해결하기 위해 검색해본결과 git log의 한글깨짐은 다음과 같이 설정해줌으로 해결했다. git config --global i18n.commitEncoding utf-8 git config --global i18n.logOutputEncoding utf-8 파일의 소스코드가 수정된 다음 테스트를 위해 다음과 같이..

DAY 10 🚀 오늘 읽은 범위 : 8 🔥 책에서 기억하고 싶은 내용 🤔 오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보자! 🔎 궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면?

DAY 8 🚀 오늘 읽은 범위 : 6장 객체와 자료구조 🔥 책에서 기억하고 싶은 내용 1. 자료추상화 변수 사이에 함수라는 계층을 넣는다고 구현이 저절로 감춰지지는 않는다. 구현을 감추려면 추상화가 필요하다.(p. 119) 2. 자료/객체 비대칭 객체는 추상화 뒤로 자료를 숨긴채 자료를 다루는 함수만 공개한다. 자료구조는 자료를 그대로 공개하며 별다른 함수는 제공하지 않는다.(p. 119) 3. 디미터 법칙 모듈은 자신이 조작하는 객체의 속사정을 몰라야 한다는 법칙이다. ... 즉, 객체는 조회 함수(getter)로 내부구조를 공개하면 안된다.(p.123) 🤔 오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보자! 1. 자료 추상화 추상인터페이스를 제공해 사용자가 구현을 모른 채 자료의 핵심을 조작할 수 ..

DAY 7 🚀 오늘 읽은 범위 : 5장 형식 맞추기 🔥 책에서 기억하고 싶은 내용 적당한 행 길이를 유지 소스 파일 첫부분은 고차원 개념과 알고리즘을 설명하낟. 아래로 내려갈수록 의도를 세세하게 묘사한. 마지막에는 가장 저차원 함수와 세부 내역이 나온다. 빈 행은 새로운 개념을 시작한다는 시각적 단서이다. 코드를 읽어내려가다 보면 빈 행 바로 다음 줄에 눈길이 멈춘다. 인스턴스 변수는 클래스이 맨 처음에 선언한다.(p.103) ... 한 함수가 다른 함수를 호출한다면 두 함수는 세로로 가까이 배치한다. 또 가능하다면 호출하는 함수를 호출되는 함수보다 먼저 배치한다. 그러면 프로그램이 자연스럽게 읽힌다. ... 그만큼 모듈 전체의 가독성도 높아진다.(p.104) 신문 기사와 마찬가지로 가장 중요한 개념을 ..

1. 다형성(polymorphism) 실제 세상을 비유로 들었을 때, 세상은 역할과 구현으로 구분할 수 있다. 키보드라는 개념과 다양한 모델들, 마우스라는 개념과 다양한 제품 모델들 과 같은 세상의 표준 인터페이스들 공연 무대 남주 및 여주(역할)에 더블캐스팅된 배우들(구현) 운전자(역할)와 자동차(역할). 그리고 다양한 자동차 모델(구현) a. 다형성 장점 프로그램을 사용하는 클라이언트는 대상의 역할만 알면된다. 클라이언트는 구현 대상의 내부 구조를 몰라도 된다. 클라이언트는 구현 대상의 내부 구조가 변경되어도 영향을 받지 않는다. 클라이언트는 구현 대상 자체를 변경해도 영향을 받지 않는다. b. 객체지향언어인 자바의 다형성 역할 = Interface / 구현 = 구현객체(Class implements..

인프런의 스프링 핵심원리 기본편 강의를 들으면서 객체지향의 특징에 대한 내용을 공부했다. 자바 공부를 시작한 뒤 잊을만하면 들려오는 핵심 개념이라서 이번 기회에 정리해볼까 한다. 이 포스팅은 현재 읽고 있는 로버트 마틴의 에 나오는 해당 부분만 골라서 블로그에 모은 글을 짧게 정리하는 글이다. 캡슐화 캡슐화란 객체의 실제 구현을 외부로부터 감추는 방식을 말한다. 세상의 모든 프로젝트는 오픈소스와 라이브러리를 사용하고 있다. 우리가 만든 코드에 외부에서 들어온 코드를 깔끔하게 통합시키기 위해서는 경계를 잘 지어야 한다. a. 클린코드 8장 모호한경계를 구분짓기 - 우리 코드를 보호하기 에서는 특정 상황을 가정한다. 프로그램에 Senser객체(역할)가 있어 관리되고 있고, 이는 외부에서 사용되는 상황이다. ..