LazyWon Story

목차 들어가며.. 좋은 git 커밋 메시지를 작성하기 위한 7가지 규칙 Commit 메시지 작성법 들어가며.. git 커밋 메시지를 일관성 있게 잘 작성해야 하는 이유는 다음과 같다. 더 좋은 커밋 로그 가독성 더 나은 협업과 리뷰 프로세스, 팀원들과의 원활한 커뮤니케이션 더 쉬운 코드 유지보수 커밋 메시지 컨벤션이 없는 경우, 일관성이 없는 메시지 내용은 각 커밋 위치에서 어떤 작업을 했는지 명확하게 알아보기 어렵거나 시각적 통일성을 떨어뜨려 커밋 히스토리 파악에 어려움이 있을 수 있다. 혼자가 아닌 여럿이서 같이 일하는 실무에서 커밋 메시지를 규칙으로 작성하는 것은 중요하다. 보편적으로 사용되는 좋은 커밋 메시지 작성 기준에 대해 알아보자 ! 좋은 git 커밋 메시지를 작성하기 위한 7가지 규칙 아래..

목차 프론트엔드 트렌드 변천사 SSR, CSR, SSG 프론트엔드 프레임워크 비교 🎠 프론트엔드 트렌드 변천사 웹 프론트엔드 트렌드 변천사 전통적인 웹 동작 방식은 웹 서버가 HTML 전체 페이지를 브라우저에게 전송하는 구조로 동작했다. 과거 웹 사이트는 지금에 비해 문서 하나에 전달되는 파일 용량이 매우 적었다. User Interaction이 거의 없는 단순한 HTML, CSS 자체의 정적인 페이지를 개발하는데 그쳤다. 그래서 어떤 요소를 한 번 클릭하면 완전히 새로운 페이지를 서버에서 전송해주곤 했다. 이후 동적인 웹 서비스가 등장하면서 웹 서버가 HTML 페이지와 더불어 Javascript를 통해 필요한 데이터만을 주고받으며, User Interaction을 구현하게 되었다. Javascript를..

목차 들어가며.. Flask와 Django 비교 💡 결론 들어가며.. Flask와 Django는 Python 언어를 기반으로 한 Web Framework이다. 이 둘을 비교하기 전에 기본적으로 알아야 할 개념은 다음과 같다. 프레임워크가 많은 것을 해주면 당연히 유연해질 수밖에 없다. 프레임워크 안에서 방대한 자유도를 가지게 되면, 보안의 문제가 생길 수 있다. 유연 = 책임 Flask와 Django 비교 둘의 범주에서 차이가 있다. Django는 Full-stack Framework이며, Flask 는 Micro Framework이다. Flask는 가벼운 프레임워크이기 때문에, 개발자가 거의 모든 것을 설정하고 세팅해야 하는 번거로움이 있지만, 그만큼 내가 원하는 기능을 편하게 확장할 수 있으며, 보다..

목차 Image Lazy Loading이란? Intersection Observer API Intersection Observer API를 이용한 이미지 Lazy Load 구현 실무 적용 및 성능 측정 결과 Image Lazy Loading이란? 이미지 지연 로딩은 페이지 안에 있는 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩할 수 있도록 하는 기법이다. 웹 페이지 내에서 바로 이미지를 로딩하지 않고 로딩 시점을 뒤로 미루는 것이라 볼 수 있다. Image Lazy Loading을 이용하면 다음과 같은 두 가지 이점이 있다. 1. 성능 향상 페이지 초기 로딩 시 필요한 이미지의 수를 줄일 수 있다. 리소스 요청을 줄이는 것은 다운로드 bytes를 줄이는 것이며, 이는 유저가 사용할 수 있는 제한..

목차 프로그래밍 패러다임 객체지향의 기본적인 개념들 정리 객체지향의 특성 알아보기 인프런 "모든 개발자의 실무를 위한 필수 기본기 클래스" 강의를 듣고 정리한 내용 + 따로 검색하여 공부한 내용입니다. 프로그래밍 패러다임 프로그래밍을 어떤 기준으로 바라보고 작성할 것인지에 대한 관점을 프로그래밍 패러다임이라고 한다. 함수적 호출 과정(프로시저)을 중심으로 설계한다면 절차 지향 프로그래밍이 되고, 객체 중심으로 설계한다면 객체 지향 프로그래밍이 된다. 가장 대중적인 프로그래밍 패러다임은 객체 지향 프로그래밍이다. 대표적으로 절차 지향 언어로 C언어가 있으며, 객체 지향 언어로는 자바가 있다. 파이썬과 자바스크립트는 이 두 패러다임을 모두 수용하는 멀티 패러다임 언어이다. 절차 지향 프로그래밍 순차적인 함수..

목차 객체지향 프로그래밍의 5가지 설계 원칙 SOLID 원칙 인프런 "모든 개발자의 실무를 위한 필수 기본기 클래스" 강의를 듣고 정리한 내용 + 따로 검색하여 공부한 내용입니다. 객체지향 프로그래밍의 5가지 설계 원칙 SOLID란 객체 지향 프로그래밍을 하면서 지켜야 하는 5대 원칙이다. SRP(단일 책임 원칙), OCP(개방-폐쇄 원칙), LSP(리스코프 치환 원칙), ISP(인터페이스 분리 원칙), DIP(의존 역전 원칙)의 앞글자를 따서 만들어졌다. SOLID원칙을 지키면 시간이 지나도 변경이 용이하고, 유지보수와 확장이 쉬운 소프트웨어를 개발하는데 도움이 되는 것으로 알려져 있다. SOLID 원칙 SRP (Single Responsibility Principle, 단일 책임 원칙) 객체는 하나의..

목차 들어가며.. throttle, debounce 함수 이용 requestAnimationFrame (rAF) 함수 이용 Passive Listener 들어가며.. 스크롤 이벤트를 이용한 성능 최적화를 위한 방법이 무엇이 있을지 알아보고자 한다. 보통 addEventListener()의 scroll 이벤트를 이용하여 특정 위치에 도달했을 때 어떤 액션을 취하도록 한다. document에 스크롤 이벤트를 등록하고, 특정 위치를 관찰하며 엘리먼트가 위치에 도달했을 때 실행할 콜백 함수를 등록하는 것이다. document.addEventListener("scroll", function() { console.log(`scroll`); }); 하지만 scroll 이벤트는 사용자가 스크롤 할 때마다 이벤트를 발생..

목차 [jQuery] $(document).ready()와 $(function(){}) [Vanila Javascript] window.onload 정리 [jQuery] $(document).ready()와 $(function(){}) 두 소스는 같은 역할을 한다. 외부 리소스, 이미지와는 상관 없이 브라우저가 DOM(Document Object Model) 트리를 생성한 직후에 실행된다. 따라서 $(document).ready()는 리소스들이 로드되기 전에 동작할 수 있다. window.onload 보다 더 빠르게 실행되며, 중복으로 사용하여 실행할 수 있고, 선언 순서대로 실행된다. .ready() 이벤트는 jQuery 3.0 이후부터는 사용하지 않는 것을 권장한다. 권장 방법 $(function()..

Testing Library를 이용하여 리액트 컴포넌트 테스트 코드 작성 시 아래와 같은 에러가 발생했다. 테스트는 통과하는데 cosole.error가 자꾸 발생했다. console.error Error: Expected key descriptor but found "" in "" See https://github.com/testing-library/user-event/blob/main/README.md#keyboardtext-options for more information about how userEvent parses your input. ... 에러가 발생한 코드는 다음과 같다. userEvent.type(input, ''); input에 빈 값('')을 입력 후, 특정 함수를 호출하려 하면 해..

목차 Flask 이해하기 Flask 프로젝트 구조 살펴보기 웹 브라우저와 웹 서버 동작 방식 이해하기 Flask 이해하기 Flask는 Python 언어 기반의 마이크로 웹 프레임워크이다. 여기서 마이크로 웹 프레임워크란, 프레임워크를 간결하게 유지하고, 확장할 수 있도록 만든 것을 뜻한다. Flask의 특징 1. Flask는 간결하다. 플라스크를 이용하면 파일 하나로 구성된 짧은 코드만으로도 완벽하게 동작하는 웹 프로그램을 만들 수 있다. 2. 확장성 있는 설계가 가능하다. 플라크스에는 폼과 데이터베이스 처리 기능이 없다. Django에는 프레임워크 자체에 폼과 데이터베이스 처리 기능이 포함되어 있다. 그래서 장고는 덩치가 큰 프레임워크이다. 반대로 Flask는 확장 모듈을 사용한다. 처음부터 모든 기능..