본문 바로가기

전체 글

CSR과 SSR, SSG ◼ 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 브라우저 렌더링이라고 한다. ◼ 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 화면에 그려주는 것이다. ◼ 그리고 이러한 브라우저 렌더링은 크게 CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation)으로 나뉘어 이에 대해 알아보고자 한다. CSR(Client Side Rendering) CSR은 클라이언트(브라우저)에서 렌더링이 이루어지는 방식을 말한다. 즉, 클라이언트는 서버로부터 HTML, CSS, JavaScript를 받아와서, 받아온 파일들을 이용.. 더보기
TypeScript 사용하기 /* JavaScript */ 10 - '1' // 9 (Dynamic Typing) /* TypeScript */ 10 - '1' // 컴파일 시점에 에러로 출력 ◼ JavaScript는 타입에 관련된 에러를 런타임 시점에 확인할 수 있다. 이러한 문제점을 개선하기 위해서 TypeScript가 나왔다. ◼ 즉, TypeScript는 JavaScript + Type 문법으로 JavaScript에 타입에 대한 내용을 확장시킨 언어이다. ◼ 컴파일 시점에 타입에 관련된 에러를 보여주기 때문에, 버그를 방지할 수 있다. 프로젝트에 적용하기 ✔ 별다른 라이브러리 없이 사용하기 ◼ nodejs 설치하기 ◼ npm install -g typescript 명령어로 설치한다. { "compilerOptions": { .. 더보기
[Spring] checkstyle 적용하기 📒 왜? ◼ 팀프로젝트를 진행하면서, 코딩 컨벤션을 구성하고 잘 지키는 것이 협업의 기본이라고 생각한다. ◼ 코드 리뷰 시, 통일된 코드 구성의 가독성과 로직 이해에 도움이 될 것 같아서 lint 설정을 알아보게 되었다. 💬 sonarlint vs checkstyle sonarlint는 IDE 플러그인으로 코딩 컨벤션을 제공해 주기 때문에, 개인이 설정 파일을 설정해주어야 하고, 이러한 설정 파일을 팀원들과 공유하면서 사용해야 한다. 또한, 해당 방식은 코딩 컨벤션에 어긋난 상태로 pull-request를 등록해도 자동으로 merge를 강제할 수 있는 방법이 없다. 반면, checkstyle은 gradle build를 진행할 때, 등록한 코딩 컨벤션에 맞게 코딩 컨벤션을 체크할 수 있으며, 프로젝트에 파.. 더보기
React 성능 개선하기 📒 왜? ◼ React는 SPA로, 사용자가 처음 메인 페이지에 접속하면, 모든 js 파일을 다운로드 하여 초기 로딩 속도가 느려, 성능 개선 작업을 위한 방법에 대해서 알아보고자 한다. 📒 React 성능 개선하기 ✔ 개발 도구 설치 ◼ React Developer Tools를 설치한다. ◼ Components 창에서 Component의 구조, Props 등을 확인할 수 있다. ◼ Profiler 창에서 성능 저하가 발생하고 있는 Component를 찾을 수 있다. (녹화 버튼을 누르고 페이지 이동 및 버튼 클릭 등 사용하다 보면 Component 별로 렌더링 속도를 알려준다.) 💥 대부분의 지연은 서버의 통신이 느린 것 ✔ Lazy 로딩 ◼ React는 SPA이기 때문에, 하나의 html, js, c.. 더보기
React 사용하기 📒 왜? (React 사용 이유) ◼ Single Page Application을 만들 때, 사용한다. 💬 Single Page Application은 새로고침 없이 돌아가는 페이지로 앱처럼 부드럽게 동작한다. ◼바닐라 JS로 웹 페이지를 만들 경우, 코드가 길어지고 너무 복잡해진다. 그래서 React 라이브러리를 사용한다. ◼ React를 사용하면 HTML 재사용이 편리해진다. ✨ React는 HTML, CSS, JavaScript 웹 개발을 편리하게 도와주는 라이브러리이다. 📒 개발 환경 세팅하기 1. node js를 설치한다. 2. 터미널에서 원하는 경로로 이동한 뒤, npx create-react-app {프로젝트 폴더명} 명령어를 입력한다. 💬 create-react-app(cra)는 React.. 더보기
JavaScript ES6 & 객체 지향 문법 📒 왜? (사용 이유) ◼ JavaScript로 UI 같은 것은 매우 쉽게 만들 수 있지만, JavaScript 문법을 사용하다 보면 어렵고 불편한 문법들이 많다. ◼ ES6는 JavaScript 버전(2015)으로 대규모 업데이트가 진행되어, JavaScript를 조금 더 쉽고 편리하게 사용할 수 있도록 많은 문법들을 지원해 준다. 📒 Arrow function ◼ 함수를 만드는 방법에는 위 두 가지 방법이 존재한다. ◼ function 키워드 대신 ES6의 Arrow function을 사용해서 방법 2와 같이 함수를 만들 수 있다. ◼ this 값을 재정의 하지 않아도 될 때, 사용하는 것이 좋다. ✔ Arrow fucntion의 장점 ◼ 함수를 만들 때 가독성이 향상된다. ◼ 파라미터가 1개 있을 .. 더보기
[JavaScript] this 키워드 알아보기 📒 왜? ◼ JavaScript를 사용하면서 this를 사용했을 때, 어떤 경우에는 {window}가, 또 다른 경우에는 Object가 출력되었다. ◼ 이에 this에 대해 정리하고자 글을 작성한다. 📒 this 키워드 ◼ this는 상황에 따라서 뜻이 3~4 가지로 변경된다. ✔ 최상위 this & function에서 this 사용 ◼ 출력 결과는 window에 대한 정보가 표시된다. ◼ window는 전역 변수 보관소이다. ✔ strict mode에서 function에서 this 사용 ◼ strict mode (엄격한 실행)에서 일반 함수 안에 this를 사용하면 undefined가 출력된다. ✔ Object 안의 function에서 this 실행 ◼ Object 안의 함수에서 this를 실행하면, .. 더보기
JavaScript 기본 및 사용하기 📒 왜? (사용 이유) ◼ JavaScript를 쓰는 가장 큰 이유는 HTML 조작이 목적이다. ◼ 그 외로, 서버와 통신 가능, 클릭 및 타이핑 감지, 비동기 처리, 자료 다루기 등의 목적으로도 사용된다. 📒 JavaScript ◼ JavaScript는 Call Stack이 하나로, single thread로 동작한다. ◼ event loop를 이용해서 비동기 방식으로 동시성을 지원하는데, 이는 자바스크립트 엔진에서 지원하는 것이 아닌, 브라우저나 node.js에서 지원된다. ✔ JavaScript 구조 ◼ Heap & Call Stack: V8과 같은 JavaScript 엔진의 구성요소이다. ❗ Heap: JavaScript의 객체의 주소 값, 구조화되지 않은 메모리 영역이 쌓인다. ❗ Call St.. 더보기

티스토리툴바