분류 전체보기 (30) 썸네일형 리스트형 [React] Lighthouse 최적화_(2): 개선 방법 지난 포스팅에서 Lighthouse 측정 결과 및 해설, 그리고 결과 공유방법을 작성했습니다.[React] Lighthouse 최적화_(1) [React] Lighthouse 최적화_(1)Lighthouse 최적화 시작하기어제 드디어 팀프로젝트가 끝났습니다..!!!사실 협업의 전반적인 전략, 네이밍, 소통 등 규칙이나 흐름에 집중하느라기술적으로 특별히 내세울만한 프로젝트는 아니라ok-frontdev.tistory.com 지난 측정 결과를 토대로, 팀원들과 성능 최적화를 시도해봤습니다.대체 텍스트와 meta 태그, robots.txt 파일은 팀원분들이 해주셨고, 저는 Performance 항목에서 경고가 뜨고 있었던LCP 개선과 안쓰는 JavaScript 코드 줄이기에 대해 찾아 개선해봤습니다. 개선 결과.. [React] Lighthouse 최적화_(1) Lighthouse 최적화 시작하기어제 드디어 팀프로젝트가 끝났습니다..!!!사실 협업의 전반적인 전략, 네이밍, 소통 등 규칙이나 흐름에 집중하느라기술적으로 특별히 내세울만한 프로젝트는 아니라는 점이 아쉬웠습니다. 프론트엔드 팀원들끼리 좀 더 해볼만한 게 없을까 고민하다최근 최적화에 관심이 생겨 Lighthouse 측정과 개선을 해보자고 제안했습니다. 현재는 크롬 확장프로그램으로 사용할 수 있어서설치 후, 측정한 결과를 팀원들에게 공유했습니다. Lighthouse 결과 공유하기Lighthouse viewer에 HTML, JSON 파일을 넣으라는 글도 있고,Gist URL을 넣으라는 글도 있는데 HTML 파일은 일단 안넣어집니다.Gist URL도 공유는 할 수 있는데 원하는 인터페이스로 보여지진 않네요.. [React] SEO 검색엔진 최적화 방법 SEO( Search Engine Optimization ) 란? SEO란, 검색엔진 최적화의 줄임말로, 검색엔진이 콘텐츠를 이해하도록 돕고, 사용자가 사이트를 찾고, 검색엔진을 통해 사이트를 방문할지 여부를 결정하도록 돕습니다. - 구글 검색 센터 즉, 구글이나 네이버 등의 검색엔진에 크롤링되어 상위노출되도록 내 프로젝트를 최적화하는 것을 의미합니다.블로그를 써보셨다면 검색이 잘 되도록 찾아보신 경험이 있으실 텐데요,저도 구글 서치 콘솔을 이용하다가 React 프로젝트를 진행하면서 블로그 말고, 애플리케이션은 어떻게 검색엔진을 최적화시키는지 관심이 생겨 찾아봤습니다. SEO 최적화 방법으로는 다양한 방법이 있는데,React 프로젝트에 적용하기 위해 찾아보았기 때문에신경써야하는 부분은 공통적이지만, 적용.. [CS] - REST? REST API? RESTful API ? (+ 작성 규칙) REST란 ?: 자원(resource)의 표현(representation)에 의한 상태 전달 Representational State Transfer(REST)는 인터넷과 같은 복잡한 네트워크에서 통신을 관리하기 위한 지침으로 만들어진 소프트웨어 아키텍처입니다. 자원(resource)은 다양한 애플리케이션이 클라이언트에게 제공하는 정보를 말합니다. 이미지, 동영상, 텍스트 등 모든 유형의 데이터가 자원이 될 수 있고, 클라이언트에게 자원을 제공하는 시스템을 서버라고도 합니다. 조직은 이 자원(resource)을 API를 사용해 공유하고 보안, 제어 및 인증을 유지하면서 웹 서비스를 제공합니다. 또한 특정 내부 리소스에 액세스할 수 있는 클라이언트를 결정하기도 합니다. 여기서 자원의 표현이란, 자원을.. [CS] - HTTP / HTTPS 차이점 비교 HTTP 와 HTTPS 차이점HTTP (Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 통신 규칙 또는 프로토콜입니다. 사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 HTTP 요청을 전송하고, 웹 서버는 HTTP 응답을 보냅니다. 즉, HTTP 프로토콜은 네트워크 통신을 작동하게 하는 기본 기술입니다. HTTPS(Hypertext Transfer Protocol Secure)는 문자 그대로 Secure가 추가된 안전한 버전입니다. HTTP가 데이터를 일반 텍스트로 주고 받는 반면, HTTPS에서는 브라우저가 데이터를 전송하기 전에 안전하고 암호화된 연결을 설정합니다. 정확히는, HTTP가 통신 시 사용하는 TCP/IP 소켓 통신에서, 일반 텍스트 대.. [JS] - 브라우저 저장소 비교(localStorage, sessionStorage, IndexedDB) 브라우저 저장소의 차이점웹 스토리지는 HTML5에 추가된 클라이언트 기반 key-value 형태의 저장소이며, 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있습니다. 두 저장소의 차이점은 영구성과 범위에 있으며 자세한 내용은 아래에서 비교해 보겠습니다.마지막으로 IndexedDB 또한 클라이언트 스토리지에 속하는 저장소입니다. 다만 차이점은 비동기적으로 동작한다는 점과, 데이터 타입 및 저장 용량에 대한 제한 폭이 비교적 크다는 점입니다. 전반적으로 그렇지만 브라우저 및 기기에 따라 저장공간은 상이하기 때문에 필요할 때 찾아보는 것을 추천합니다. 로컬 스토리지(localStorage)로컬 스토리지는 도메인 별로 지속되는 저장소로, 저장한 데이터를 명시적으로 지우지.. [JS] - Class를 활용해 모듈화하는 방법 Class 란? JavaScript에서 Class 란 다른 언어들에서 쓰이는 Class 와는 다르다. Class 기반 언어들과 달리, 프로토타입 기반의 객체지향 언어인 JavaScript 에 진입장벽을 느끼는 개발자들이 보다 빠르게 습득할 수 있도록 ES6의 Class 는 단순명료한 새로운 문법을 제시한다. Class 는 객체를 생성하기 위한 틀로, 객체가 아니다. prototype 과는 달리 constructor 를 포함하며, Class의 선언이 호이스팅 되거나 메모리에 올라가지 않는다. 더 정확히는 호이스팅 되지만 let, const 처럼 TDZ 를 갖는다. TDZ 설명은 아래 글에서 정리한 바 있다. [JS] - 호이스팅(Hoisting) 이란? TDZ(Temporal Dead Zone) 이해하기 .. [제로베이스 부트캠프] - 프론트엔드 스쿨 23기 JavaScript 과제 후기 제로베이스 JavaScript 과제 후기 제로베이스 부트캠프를 시작한지 벌써 3개월.. 이제 막 기초 개념과 프로그래머스 0단계를 수월하게 풀 정도의 병아리로 거듭난 것 같은데 5개의 과제를 제출해야 했다. 사실 3번까지는 뚝딱거리면서도 할만 하다는 생각으로 금방 했는데 4번을 누가봐도 혼잡하게 완성하고 나서 5번은 포기할 뻔 했다 ㅎㅎ ㅋㅋㅋㅋㅋㅋㅋ 반성하면서... 빨리 모범 답안을 보고 따라 치는 프로젝트 말고 직접 구현하는 프로젝트를 다양하게 많이 해보고 싶다. JavaScript 공부하면서 느낀 점 종종 다른 퍼블리셔나 신입 개발자이력서에 JavaScript 스킬을 얼마나 할 줄 아는지 상/중/하 또는 % 로 써놓는 걸 봤는데,, 그거야말로 얼마나 JavaScript 를 모르는지 알려주는 것 같다.. 이전 1 2 3 4 다음
