frontend

지금까지 모달창을 만들기 위해 Mui나 부트스트랩의 도움을 많이 받았었습니다.제가 직접 만들어 쓰려고 시도를 했었지만, 딱 하나의 문제가 걸려 계속해서 사용했었습니다. 바로 영역 밖을 클릭하였을 때, 꺼지게 하는 기능입니다. 이번 작업에서 셀렉트 박스를 직접 만드는 기

레이지 로딩은 이름부터 알기 쉽습니다.이미지 로딩을 웹을 띄우고 나서 천천히 하는 것과 사용자의 데이터 낭비를 막아주는 것. 레이지 로딩에 대해서 알아보겠습니다. 레이지 로딩은 이미지에 대한 로딩을 뒤로 미루는 것을 의미합니다. 필요한 부분만 불러오고 나머지 부분은 사

👉 성능은 사용자 유지를 좌우합니다핀터레스트는 인지된 대기 시간을 40% 줄여 검색 엔진 트래픽과 가입수를 15% 늘렸습니다.COOK은 평균 페이지 로드 시간을 850 밀리초로 줄여 전환율을 늘리고, 세션당 페이지 수를 10% 늘렸습니다. 연구에 따르면 사이트를 로드

레이아웃 과정은 각 요소들의 화면 상 실제 위치를 계산하기 때문에 비용이 큽니다.사용자가 DOM 요소를 추가 수정 하면 위치를 다시 계산해야 하기 때문에 레이아웃이 다시 발생합니다.따라서 렌더링 최적화의 목표는 레이아웃을 최대한 적고 빠르게 발생시킵니다.👀 강제 동기

👉 프론트엔드 성능 최적화를 위해서는 브라우저 동작 원리부터 이해하고 있어야 합니다. 처음 프로젝트를 진행함에 있어서는 구현이 가장 우선이었습니다. 그 후에 유지 보수가 필요하거나 페이지 랜더링이 느리게 되는 페이지가 있어 성능 최적화가 필수적이었습니다. 성능최적화를

크로스 브라우징 관련되어 프론트엔드 개발자에게 webpack과 babel은 필수라고 하는데 react에서 기본적으로 제공되어 잘 모르고 있었습니다. 😭기본부터 잡기 위해 모듈 번들러에 대해 알아보도록 하겠습니다.모듈 번들러에 앞서 크로스 브라우징이 뭘까요?개발자마다

ES6 에서 ES5로 컴파일 해주는 트랜스 파일러입니다.컴파일러 : 한 언어로 작성된 소스 코드를 다른 언어로 바꾸는 것입니다.트랜스 파일 :a라는 소스코드 파일을 읽어서 b라는 소스코드 파일로 변환시키는 행위, 컴파일 했을 때 , 추상화 수준이 같은 코드로 변환합니

현재 프론트엔드 엔지니어로, React 만 사용하여도 충분하다고 생각했었습니다.하지만 날이 갈수록 프론트엔드로써 Next는 필수가 되어가고 있고, 선택이 아닌 필수라는 말이 많습니다.Next를 사용해보며 왜 이렇게 대세가 되었는지 알아보겠습니다.기존에 React는 Cl

| CSR 과 SSR 에 대한 기본 개념에 대해 알아보겠습니다.| CSR과 SSR에 대해서 알아보기에 앞서서는 SPA와 MPA 의 개념부터 알아야 합니다.react,vue하나의 페이지로 구성된 웹 어플리케이션php, jspMulti Page Application의 약자

업로드중..MVC 패턴이란 디자인 패턴 중에 하나입니다.디자인 패턴이란 SW 개발 방법을 공식화한 것입니다.Model & View & Controller 으로애플리케이션을 3가지 역할로 구분한 개발 방법론입니다.사용자는 요청을 컨트롤러에 보냅니다.컨트롤러는 모델을 사용

| "나중에 필요할 수도 있는 무언가를 저장하였다가 신속하게 회수할 수 있는 보관 장소"캐시를 알기 위해서는 몇가지 기본 원리가 필요합니다.메모리 계층 구조부터 알아보겠습니다.컴퓨터에서 메모리 공간의 속도와 용량은 반비례합니다.즉 속도가 빠를수록 용량이 작아집니다.그래

| 회사에서 WAS를 사용하고 있다고 합니다.| 뭔가 컴퓨터인거 같은데, 정확하게 어떤 것일지 확인해 보도록 하겠습니다.WebServer과 WAS를 비교해보는 시간을 가져보도록 하겠습니다.Web 서버는 인터넷을 기반으로 웹 서비스(HTML)를 제공합니다.즉 클라이언트가

웹브라우저에 www.google.com을 치면 일어나는 일에 대해서 알아보겠습니다.브라우저는 www.google.com의 IP 주소를 찾기 위해 DNS 캐시를 탐색합니다.브라우저 캐시를 확인합니다. 이전에 방문한 웹사이트에 대해 일정기간 DNS 정보들을 저장합니다.캐시

번들 사이즈 최적화에 앞서 번들링을 왜 해야할까요? 예전의 단순한 html에서 SPA 로 넘어오면서 파일들이 많아지기 시작했습니다. \-> 파일들을 보내야 하는데 양이 많아서 로딩 속도가 저하되었습니다.\-> 이 파일들을 모아 하나의 파일로 만드는 것이 번들러입니다.