Programming/11. etc5 005_npm ci, npm i 🔥 호락호락하지 않은 프로젝트 설치 입사하고 나서 이래저래 회사 생활에 적응하던 중, 드디어 우리 팀 프로젝트 설치를 하는 순서가 찾아왔다. 이전까지 yarn이라는 패키지 매니저 위주로 사용하다 오랜만에 npm으로 설치하려는데 선임 분께서 'npm i 대신 npm ci로 설치를 진행해주세요' 라고 요청해주셨다. 그동안 npm i만 알고 있던 내게 또 다른 설치 방법이 있다는게 신기하기도 했고, 구체적으로 어떻게 다른지 확인해보기로 했다. ⚡️ npm ci? 우선 npm ci의 'ci' 는 다음 용어의 줄임말이다. ci : clean install 그냥 설치하는 것도 아니고 클린하게 설치한다는 것은 무슨 뜻일까? 이 뜻을 이해하려면 먼저 package.json과 package-lock.json에 대해 이해.. 2022. 5. 8. 004_cdn 🔗 정의 & 특징 Content Delivery Network 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화한다. 왜 필요한가? 1. 물리적 거리의 한계 미국에서 제공하는 어떤 서비스가 있다고 가정해보자. 우리가 웹 페이지에 접속하는건 해당 서비스를 제공하는 서버에 요청을 보내고 그 응답으로 돌아오는 컨텐츠를 이용하는 것이다. 그렇다면 이 서비스를 이용하는데 서버와 가까운 미국 사람들은 쾌적하게 서비스를 즐길 수 있겠지만, 저 바다 건너 한국, 인도네시아, 남극 이런 곳들은 거리가 있기 때문에 요청과 응답에 시간이 걸리게 되는 문제가 생긴다. 2. 서버의 과부하 글로벌 서비스의 .. 2022. 4. 16. 003_css의 다양한 숨김처리 방법 🙄 같지만 다르다? 화면을 구성하면서 때때로 이벤트 효과나 기타 목적으로 요소를 보이지 않게 해야 할 때가 있다. CSS에서는 이러한 기능을 다양한 방식으로 작성할 수 있는데 지금부터 어떤 방식이 있는지 알아보자! 1. display: none 컨텐츠가 사라지면서 해당 컨텐츠가 차지하고 있던 영역도 함께 사라진다. 이벤트 (ex. 클릭)는 작동하지 않는다. 화면 영역에서 사라지는 것 뿐만 아니라 보조기기나 검색엔진이 접근하지 못하게 되어 텍스트인 경우 스크린리더 사용자가 해당 내용을 들을 수 없다. 브라우저 렌더링 시 렌더링 트리에서 요소를 완전히 제거한다. 2. visibility: hidden display: none과 달리 컨텐츠는 사라져도 해당 영역은 그대로 존재한다. 이벤트 (ex. 클릭)는 .. 2022. 4. 11. 002_인터넷 🌎 인터넷, 다 아는거 아닌가? 처음엔 그렇게 생각했다. 그러다 문득 개발자가 되겠다는 생각을 갖고 초창기에 봤었던 프론트엔드 개발자 로드맵을 다시 보게 됐는데, 가장 기초인 인터넷 항목에 대해 제대로 공부하지 않았다는 생각이 들었다. 로드맵 기준으로 가장 처음 위치에 있는 이 인터넷 파트를 넘어가서 무작정 HTML, CSS, JS를 공부했다는게 뭔가 부끄럽기도 했고, 그래서 준비한 이번 글은 인터넷에 관한 이야기이다. 1. 인터넷은 어떻게 동작할까? 우선 인터넷의 어원은 다음과 같다. 인터넷이란 이름은 1973년 TCP/IP를 정립한 빈튼 서프( Vinton Gray Cerf) 와 로버트 칸( Robert E. Kahn )이 '네트워크의 네트워크'를 구현하여 모든 컴퓨터를 하나의 통신망 안에 연결( Int.. 2022. 4. 3. 001_브라우저의 저장소에 대해 알아보자 🌎 Web Storage Web Storage란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다. Web Storage는 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 저장한다. 영구 저장소(LocalStorage)와 임시 저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분해 사용할 수 있다. Web Storage는 사이트의 도메인 단위로 접근이 제한된다. 예를 들어 A도메인에서 저장한 데이터는 B도메인에서 조회할 수 없다. HTML5부터 새롭게 지원하는 저장소이기 때문에 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다. Web Storage vs Cookie 웹 스토리지 쿠.. 2022. 3. 31. 이전 1 다음 반응형
