Today Hailie Learned

프로젝트 마무리 단계에서나 배포하기 전에 확인하면 좋을 내용을 간단히 정리합니다. 1. 웹 페이지 Title에는 React App 또는 Vite + React app가 아니라 파비콘과 앱 이름이 정확히 적혀 있어야 합니다. 저는 프로젝트에서 Vite라는 빌드 도구를 사용했습니다. 아무런 설정을 하지 않으면 아래와 같이 웹 탭이 생성이 되는데, 프로젝트를 배포할 때에는 꼭 설정을 해서 완성도를 높여야 합니다. 2. SNS로 다른 사람에게 링크로 공유시 og 카드는 제대로 나와야 합니다. (Open Graph태그 설정하기) 'og 카드'라는 단어가 생소해도 위의 캡쳐본을 보면 한눈에 알겠죠? og 카드는 SNS미리보기 화면이라고 생각하면 되고, SNS에 게시되는데 최적화된 데이터를 가질 수 있도록 설정하는 ..

이 내용은 우아한테크코스 테코톡 영상을 보고 정리한 글입니다. MVC란? 유지보수가 편해지는 코드 구성 방식! Model : 데이터와 관련된 부분 View : 사용자한테 보여지는 부분 Controller : Model과 View를 이어주는 부분 MVC는 왜 생겨났을까? 코드가 많아지면 많아질수록 코드가 복잡해져서 코드를 파악 하기도 힘들어지고 기능을 수정할 때마다 대부분의 코드를 갈아엎는 경우가 많았다고 합니다. 유지보수를 편하게 하기 위해 고민하다가 생겨나게 된 디자인 패턴이 바로 MVC 입니다. MVC 맛보기 1. 유저가 '무언가'를 검색함 2. Controller는 유저가 검색한 데이터를 Model에게 요청함. 3. Model은 결과 데이터를 Controller에게 줌 4. Controller는 M..

최적화 (Optimization) 란? 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정이다. 최적화를 잘 해놓은 앱일수록 더 빠르게 함수를 호출한다. => 앱이 더 빠른 속도로 구동되면서 유저에게 좋은 UX를 준다. 여러 분야에서 최적화의 의미가 다르지만, 웹 개발에서의 최적화란, 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 하는 것이다. 왜 최적화를 해야할까?? 1. 이탈률 감소 웹 개발에서의 최적화는 화면을 최대한 빠른 속도로 표시하는 것인데, 만약 최적화가 잘되지 않은 웹이라면 화면 로딩시간이 오래 걸린다는 뜻이다. 이는 사용자가 페이지를 이탈할 확률이 높아진다는 뜻이다. => 웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면, 사용자의 이탈률을 효과적으로..

►배포 자동화 파이프라인 : 소스 코드의 관리부터 실제 서비스로의 배포 과정을 연결하는 구조. 1. Source 단계 : 원격 저장소에 관리되고 있는 소스 코드에 변경 사항이 일어날 경우, 이를 감지하고 다음 단계로 전달하는 작업을 수행 2. Build 단계 : Source 단계에서 전달받은 코드를 컴파일, 빌드, 테스트하여 가공한다. 이 단계를 거쳐 생성된 결과물을 다음 단계로 전달하는 작업을 수행한다. 3. Deploy 단계 : Build 단계로부터 전달받은 결과물을 실제 서비스에 반영하는 작업을 수행한다. ►CI/CD 파이프라인 ✔️ 지속적 통합 (CI : continuous integration) 팀 구성원이 각자의 작업을 자주 통합하는 소프트웨어 개발 방식. Code : 개발자가 코드를 코드 저..

Lighthouse란? 사이트를 검사하여 성능 측정을 할 수 있는 도구이고, 개선책도 제공해주는 자동화 툴이다. - 구글에서 개발한 오픈소스이고, 성능, 접근성, PWA, SEO 등을 검사 한다. - Chorme DevTools, CLI, 노드 모듈 등 다양한 경로를 통해 사용 가능하다. - 검사 결과에 따른 리포트를 생성해주어, 점수가 낮은 지표를 한눈에 알아볼 수 있다. 1. 구글 개발자 도구에서 lighthouse 탭에서 검사 가능 2. Node CLI 에서 실행하기 - 전역 모듈로 설치 npm install -g lighthouse - 검사 실행 lighthouse - 모든 옵션 보는 명령어 lighthouse --help 👇 크롬에서 본 백준 페이지의 Ligthhouse 👇 👇 크롬에서 본 정..

번들링이란? 프론트엔드 개발에서 번들링은 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정이다. => 사용자에게 배포하기 위해 번들링이 꼭 필요하다. Webpack 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러*이고, 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러이다. * 모듈 번들러는 HTML, CSS, JS 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링하는 도구이다. Webpack에서의 모듈은 JS의 모듈에만 국한하지 않고, HTML, CSS, .jpg, .png 같은 이미지 파일도 전부 포함한 포괄적인 개념이다. Webpack은 주요 구성 요소인 로더(loader)를 ..

WAI-ARIA 란? WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격, 짧게, 웹 접근성을 향상시킬 수 있는 방법 중 하나 WAI (web accessibility initiative) = 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관 ARIA (accessible rich internet applications) = 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술 RIA (rich internet applications) = 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. WA..

웹 접근성(Web Accessibility)이란? 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것. 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있다. 시력이 좋지 않은 경우, 텍스트를 음성으로 읽어주는 스크린 리더를 사용한다. 그런데 이미지에 들어있는 글자의 경우는 스크린 리더가 인식할 수 없어 음성으로 읽어줄 수 없다. 국내 온라인 쇼핑몰 사이트를 보면 상세 정보가 이미지로 올라와 있는 경우가 많다. 우리나라 웹 사이트들의 웹 접근성 평균 점수는 100점 만점에 60.8점..! 웹 접근성을 갖추면 얻을 수 있는 효과 1. 사용자층 확대 : 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 되고, 매출 증가..

SEO가 무엇인지 SEO의 종류 SEO가 왜 필요한지 SEO에 영향을 미치는 요소의 종류와 각 요소의 작성 방법 SEO란? 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업 SEO를 통해 검색 엔진에서 웹페이지를 더 상위에 노출될 수 있도록 만든다. SEO의 2가지 종류 ✔️ On-Page SEO 웹 페이지 내부에서 진행할 수 있는 SEO. 제목, 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법을 이용하는 방법 Off-Page SEO 웹 페이지 외부에서 이루어지는 SEO. 소셜 미디어 홍부, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법 (웹 페이지 내용이나 구조와 관계없다.) 구글에 특정 키워드를 검색하면 나오는 게시글 중에 상위에 있는 컨텐츠를 클릭해서 HTML 요소..

웹 표준은 어떤 환경에서도 이용할 수 있는 웹 페이지를 만들 수 있는 방법이다. 더 많은 사람들이 이용할 수 있는 웹 페이지를 만들 수 있도록 해보자! 웹 표준의 개념 웹 표준의 등장 배경 웹 표준을 왜 지켜야하는지 / 필요성 웹 표준의 개념 인터넷이 웹보다 더 포괄적인 개념이다. 인터넷 : 전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망 (웹, 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스 모두 포함) 인터넷은 클라이언트와 서버로 구성되며, TCP/IP라는 기본 프로토콜을 통해 제공되고 있다. 웹(world wide web) : 인터넷 상에서 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간 웹표준 : W3C(World Wide Web Consort..