WEB

[Web] Next.js 로 PWA(Progressive Web App)를 적용해보자!

온보딩을 진행중인데, Next.js 를 사용한 PWA 페이지를 만드는 태스크를 받게 되었다. 이에 진행을 하면서 PWA 란 무엇이고 어떻게 만들 수 있는지 알아보며 정리를 해보려고 한다. PWA 의 정의 Progressive Web App 이란 쉽게 말하면 웹 기술로 네이티브 앱과 같은 유저 경험을 제공하는 기술이다. (전혀 쉽지 않은데?) 다시 말하면, 웹을 만드는 기술(Html, CSS, JS) 로 네이티브 앱처럼 홈 화면에 아이콘을 추가하거나, 푸시 알림을 보내는 등의 기능을 하게끔 만들 수 있다. (실행은 브라우저에서...) 브라우저에서 보안상의 이유로 접근하지 못하는 시스템 하드웨어 등에도 접근이 가능하다는 장점이 있다. 왜 사용하는가 웹 기술로 네이티브 앱처럼 만드는 것의 장점을 가지고 있기 ..

Github Action 으로 S3 버킷 배포하기

Github Action 이란? Github이 공식 제공하는 빌드, 테스트, 배포 파이프라인 자동화를 위한 CI/CD 플랫폼이다. 어떤 이벤트가 발생했을 때 수행될 워크플로우를 .github/workflows 디렉토리에 형식으로 저장한다. yaml 이란? Yel Another Markup Language 의 약자로, 사람이 읽을 수 있는 데이터 직렬화 언어이다. JSON의 상위 격인 언어로 key : value의 계층 구조로 이루어진다. key : value 에서 value는 반드시 따옴표로 감싸야 한다. | 기호는 줄바꿈, > 기호는 줄무시를 의미한다. 간단한 예시 # Workflow 이름 name: Workflow Name # 해당 workflow 의 실행을 위한 이벤트 등록 # 현재는 push,와 ..

Lighthouse 활용해보기

Lighthouse 구글의 오픈소스 품질 검사 자동화 툴이다. 검사할 페이지 url을 Lighthouse에 전달하면, 해당 페이지에 대한 여러가지 검사를 실행한다. 이 툴을 사용하면 현재 페이지의 성능, 접근성, 웹 표준 준수 여부, 검색 최적화 그리고 PWD(Progressive Web App) 현재 페이지가 모바일 앱에서도 잘 작동하는지를 확인하는 체크리스트를 리포트로 제공해준다. 해당 사항들에 대해서 문제점을 파악하고 개선 방향을 제시해준다. Lighthouse 워크플로우 검사할 페이지 url 을 라이트하우스에게 알려준다. 브라우저의 경우 url 을 입력해 페이지에 접속한 뒤 개발자 도구에서 Lighthouse를 선택하여 실행할 수 있다. Node CLI 환경에서는 Lighthouse 를 설치하고 ..

프론트엔드에서의 최적화 방법

최적화란? 주어진 조건에서 최대의 효율을 낼 수 있도록 만드는 것! 컴퓨터 공학에서는 가능한 적은 리소스를 소모하면서 빠르게 원하는 결과를 얻도록 하는 것이다. 최적화가 되어있는 웹페이지의 장점은 아래와 같다. 1. 이탈률 감소 : 로딩이 너무 길어지면 기다리다가 나가버린다. 2. 전환률 증가 : 전환율이란, 사이트 방문자가 사이트의 어떠한 기능을 이용하는 비율이다. 3. 수익 증가 : 위의 장점으로 트래픽이 증가해 결과적으로 수익 증가로 이어진다. 4. UX 향상 : 페이지 로딩이 빠를 수록 UX 는 향상된다. HTML CSS 코드에서의 최적화 리렌더링이 발생할 때 렌더트리의 크기가 크고 복잡할수록 리렌더링에 소모되는 시간이 늘어난다. 1. DOM 트리 가볍게 만들기 : 트리에서는 자식요소가 많을 수록..

CSR 과 SSR 알아보기! 부제 : 브라우저 렌더링은 서로 다르게 일어나는가?

오늘은 CSR과 SSR 에 대해서 개인적으로 정리한 내용을 공유하고자 한다. 궁금증을 해결하기 위해서 공부한 내용이라, 기존 나의 지식과 새로 생긴 궁금증을 바탕으로 알아가는 흐름으로 글을 진행하려고 한다. 지금까지 나는 CSR과 SSR에 대해서 정말 간략하게 클라이언트에서 페이지를 렌더링한다, 서버에서 페이지를 렌더링한다 정도로만 알고있었다. 렌더링이라는 용어 때문에 SSR 에서는 '브라우저 렌더링 과정이 일어나지 않는 것인가?!' 라는 궁금증이 생기기도 해서 조금 더 정확하게 알고싶어서 공부하고, 발표까지 하게 되었다. ✅지금까지 알고있는 것 CSR 은 서버에서 주는 데이터를 바탕으로 클라이언트에서 페이지를 렌더링 하는 것. SSR 은 서버에서 렌더링을 마친 페이지를 클라이언트에서 보여주는 것. SP..

Webpack 으로 번들링을 해보자!

Webpack을 사용하는 이유 개발 편의성을 위해 모듈로 분리하여 작업한 리소스들을 그대로 내보내면, 브라우저에서 요청시 각 파일에 대해 개별적인 http 요청을 해야하므로 네트워크 비용이 많이 소모된다. 즉 로딩이 오래걸리고 사용자의 사이트 이탈율이 늘 수밖에 없다. 웹팩이라는 번들러를 사용해 모듈로 분리된 파일들을 연관성 있는 것 끼리 묶어서 압축하고 하나로 만들게 되면 일단 파일이 축소되고, 여러번 요청할 필요가 없게된다. 웹팩은 모듈 번들러 중에서도 프론트엔드에서 가장 많이 쓰인다. loader와 plugin을 통해서 js, json이 아닌 css, html, 이미지 파일 까지도 포함할 수 있어서 편리하다. 기본적인 Webpack 설정 html, css, javaScript 파일의 번들링을 위한 ..

브라우저의 동작 원리 : 브라우저 구조와 렌더링까지!

😸브라우저란 무엇인가? 웹 개발을 처음 시작할때 (특히 프론트엔드), 이런 말을 많이 들어봤을 것이다. HTML, CSS, JavaScript 먼저 공부해보세요~ 이 세가지 언어는 우리의 웹앱이 동작하게될 장소, 웹 브라우저가 사용하는 언어이기 때문이다. 리액트에서는 JSX 라는 자바스크립트 확장 문법으로 HTML 과 JavaSCript가 합쳐진 코드를 작성하게 되는데, 실제로 웹브라우저에서 동작을 하기 위해서는 바벨 Babel 이라는 변환기로 브라우저가 알아먹을 수 있는 자바스크립트 코드로 번역된다. 우리는 위의 세 가지 브라우저가 이해하는 언어를 가지고 개발을 한다. 작성한 코드들은 최종적으로 브라우저라는 프로그램을 통해서 동작하게 된다. 실제로 코드가 동작하는 장소인 브라우저에 대해서 제대로 알고 ..

[UI/ UX] 사용자 인터페이스(UI) , 사용자 경험(UX) 를 이해해보자

UI, UX는 무슨 뜻인가? UI 란 User Interface 를 의미한다. 사용자가 컴퓨터와 상호작용하는 모든 시스템을 포함하고, 넓게 보면 컴퓨터 화면과 그 주변기기까지 포함된다. 좁은 의미로만 보자면, 그래픽 즉 GUI 를 의미한다. 프론트엔드 개발에 있어서 UI란 주로 이 GUI를 의미하게 된다. UX란 User Experience 를 의미한다. 즉 사용자가 제품을 사용하며 느끼는 총체적인 경험을 의미한다. UX는 단순하게 사용이 편리하다는 의미 뿐만 아니라, 사용자가 제품을 사용하며 가치를 느끼는지, 매력적으로 느끼는지 등 다양한 기준이 존재한다. 총체적 경험이라는 의미는 제품 하나에 대해 측정하는 것이 아니라, 제품과 관련된 모든 서비스에 대한 사용자 경험이라는 의미이다. UI와 UX의 차이..

[WEB] Postman - Weather API 사용해보기

Postman이란? 서버에 HTTP 요청을 보내고 결과를 받아올 수 있는 플랫폼이다. 주로 API 를 테스트 할 때 사용한다. GET 요청 같은 경우 URI를 활용해 브라우저에서도 충분히 테스트 할 수 있지만, GET 요청이 아닌 다른 요청을 보낼때는 조금 번거로워진다. 이 때 Postman 같은 도구를 사용하면 쉽게 API를 테스트할 수 있다. Postman 시작하기 좌측 상단 Workspaces 탭에서 새로운 워크스페이스를 생성하거나, 기존 워크스페이스에서 작업할 수 있다. 워크스페이스 생성 후 콜렉션을 생성해 API 호출 기록을 저장해 둘 수 있다. New 탭에서 HTTP Request 를 선택하면 새로운 요청을 생성할 수 있다. GET 요청 Open Weather Map API 를 활용하여 현재 ..

[WEB] REST API를 알아보자!

REST API REST(Representational State Transfer)는 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다. (출처 : 위키피디아 REST) 위키피디아에 REST에 대해 위와 같이 설명하고 있다. 로이 필딩이라는 분이 HTTP 프로토콜의 장점을 최대한 활용할 수 있도록 고안한 네트워크 아키텍처이다. 2000년에 처음 소개되었고, 2022년 현재까지 널리 사용되는 API 설계의 원칙이라고 할 수 있다. API가 무엇인가요? 웹 상에서 데이터를 주고 받기 위해 HTTP 프로토콜(규약) 을 사용한다. 그리고 HTTP를 사용해서 원활하게 소통하기 위해서 위해서 API라는 것을 만들고 활용한다. API는 간략하게 설명하면, 프로그램끼리 서로 소통..