본문 바로가기

전체 글57

브라우저 저장소 정리(feat.localStorage, sessionStorage, IndexedDB) localStorage, sessionStorage 및 IndexedDB는 최신 웹 브라우저에서 사용할 수 있는 세 가지 웹 저장소 기술이다. 사용자의 브라우저에 로컬로 데이터를 저장한다는 동일한 목표를 공유하지만 용도, 용량 및 성능이 다르다. 재밌어보이니 각각의 스토리지 기술의 차이점과 장점/단점에 대해 정리했다. ✅ localStorage localStorage는 브라우저에 키-값 쌍을 저장할 수 있는 간단하고 가벼운 스토리지 기술이다. 최대 10MB의 데이터를 저장할 수 있으며 사용자가 브라우저를 닫은 후에도 데이터를 계속 사용할 수 있다. localStorage에 저장된 데이터는 도메인에 따라 다르다. 즉, 한 도메인에 저장된 데이터는 다른 도메인에서 접근 할 수 없다는 걸 말하며, 다른 사용자.. 2023. 3. 20.
animation 최적화 정리 애니메이션은 웹 사이트를 좀 더 화려하게 만들어 사용자들의 이목을 끌 수 있는 좋은 기능이지만 잘못 사용할 경우 사이트가 느려지는 성능 저하 문제로 이어져 사용자가 기피하는 사이트로 만들 수도 있는 사용자 경험에 있어 민감한 기능이다. 기본적으로 알려진 애니메이션이 사용자 경험에 불편함을 느끼는 수치는 초당 60 프레임 미만으로 알려져 있다. 애니메이션을 주는 방식은 CSS와 JS 둘 다 가능하며 사용자 경험에 불편함을 주지 않게 신경 쓰고, 최적화하는 방법을 조사하고 정리해 보았다. 💪 CSS 애니메이션과 VS JavaScript 애니메이션 ✅ CSS로 만든 애니메이션 : 선언적 애니메이션 그림과 스타일링을 담당하는 CSS 애니메이션은 메인 스레드가 아닌 브라우저의 컴포지터 스레드에 의해 처리된다. 컴.. 2023. 3. 11.
시멘틱 태그를 사용하는 이유, 웹 표준을 지키는 이유 👁‍🗨 일반적으로 시멘틱 태그사용 시 장점으로 자주 언급되는 3가지 1. HTML 문서의 가독성과 유지보수가 쉽다. 만약 모든 태그들을 div로 만들었다고 가정했을 때, HTML 문서가 길어진다면 어디가 어느 부분인지, 어떤 영역인지 한눈에 파악하기가 힘들어진다. 하지만 시맨틱 태그를 활용하면 유지보수를 할 때나 다른 작업자가 코드를 파악하기가 보다 쉬워진다. 2. HTML만 봐도 영역 구분이 쉽다. 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있다. 이는 웹 접근성 시각에서 볼 때도 중요하게 사용된다. 예를 들어 시각장애인들이 사이트를 사용할 때 사용되는 화면의 텍스트를 읽어주는 스크린 리더기 등을 통해 활용.. 2023. 3. 5.
[CSS] CSS 우선순위 새로 알게 된 점 정리 제로베이스 데일리 스크럼을 하던 중 팀원 중 한 분의 의문을 제기한 게 사건의 발단이었다. 그분이 제시한 의문은 굉장히 흥미로웠는데 css style을 attribute를 통해 주게 되었을 때 class로 준 스타일이 먹지 않는다는 의문이었다. 다음은 의문의 코드와 비슷한 맥락으로 재현한 전체 코드다. 전체 코드 예시) 안녕 나는 위 코드처럼 했을 때 우리 팀원들은 tag로 준 스타일의 우선순위 보다 class로 준 우선순위가 더 높을 거라 예상해 당연히 될 것이라 굳게 믿었다. 하지만, 늘 그렇듯 믿음은 배신당한다^.^ 당연히 빨간색이라는 자신감을 처참히 뭉개고 시퍼런 아쿠아색을 뽐내고 있었다. 그래서 차근차근 단계를 밟아가 알아보기로 했다. 테스트 코드 예시) 처음 시도한 것은 attribute 속성.. 2023. 3. 3.
[CS] 리눅스 배경지식 이해 📖 리눅스의 시작 대학에 있는 UNIX 컴퓨터를 집에서 쓰고 싶다는 생각으로 리누스 토발즈(Linus Torvalds)가 개발했다고 한다. 리눅스는 다중 사용자, 다중 작업(시분할 시스템, 멀티 태스킹)을 지원하는 유닉스(UNIX)와 유사한 운영체제를 가지고 있다. ✅ GNU 프로젝트 GNU = Gnu is Not Unix. 유닉스 운영체제를 여러 회사에서 각자 개발, 소스를 공유하지 않는 문화에 반발 리차드 스톨만 : 초기 컴퓨터 개발 공동체의 상호협력적인 문화로 돌아갈 것을 주장하며, 1985년도에 GNU 선언문을 발표 GNU 프로젝트를 지원하기 위해 자유 소프트웨어 재단(FSF) 설립과, GNU 공개 라이선스(GPL)라는 규약을 제공 ✅ GPL 라이선스와 GNU프로젝트 GPL라이선스는 쉽게 얘기하면.. 2023. 3. 3.
[CS] 부팅 과정 이해 📖 Boot 컴퓨터를 켜서 동작시키는 절차를 뜻한다. ✅ Boot 프로그램 운영체제 커널을 Storage에서 특정 주소의 물리 메모리로 복사하고 커널의 처음 실행위치로 PC를 가져다 놓는 프로그램을 말한다. ✅ 부팅과정 컴퓨터를 키면, BIOS가 특정 Storage를 읽어와 bootstrap loader를 메모리에 올리고 실행한다. bootstrap loader 프로그램이 있는 곳을 찾아서 실행시킨다. 라고 정리 할 수 있지만 조금 더 길게 풀어 쓰면 다음과 같다. 미리 컴퓨터에 픽스 되어있는 ROM에서 BIOS 코드를 로드해서 하드웨어가 문제가 없는지 간단하게 체크하는 작업을 한다 반드시 특정주소에서 특정 작은 영역을 읽게 끔 약속이 되어 있는데 아주 간단한 부트프로그램을 로딩할 수 있는 프로그램을 심.. 2023. 3. 1.
[CS] 가상머신과 운영체제 이해 📖 Virtual Machine (가상 머신) 하나의 하드웨어(CPU, Memory 등)에 다수의 운영체제를 설치하고, 개별 컴퓨터처럼 동작하도록 하는 프로그램이다. 대표적인 가상머신 시스템을 두 가지 타입으로 나눈다면, ✅ Type1 (native 또는 bare metal) 하이퍼 바이저(또는 VMM) : 운영 체제와 응용프로그램을 물리적 하드웨어에서 분리하는 프로세스 하이퍼바이저 또는 버추얼 머신 모니터 (VMM)라고 하는 소프트웨어가 Hardware에서 직접 구동 대표적인 예 ) Xen, KVM 하드웨어 위에 가상머신 프로그램을 설치해서 공간별로 운영체제를 따로 설치한다. 💡 KVM AWS(아마존 클라우드 컴퓨팅 서비스) 등에서 사용 ✅ Type2 하이퍼바이저 또는 버추얼 머신 모니터 (VMM)라고.. 2023. 3. 1.
[CS] inode 파일 시스템 구조 이해 📖 inode 파일 시스템 구조 이해 inode 방식의 파일 시스템은 기본적으로 블록단위로 이루어져 있다. 수퍼 블록 : 파일 시스템에 대한 정보 및 파티션 정보를 가지고 있다. 아이노드 블록 : 각각의 파일에 대한 상세한 정보가 들어 있다. 데이터 블록 : 실제 데이터가 들어 있다. ✅ inode와 파일 리눅스 시스템에서 각각의 파일은 유일한 inode 고윳값과 inode 기반으로 하는 PCB 같은 자료구조에 의해 주요 정보를 관리한다. 과정을 대략 정리하면 다음과 같다. '파일이름 : inode'로 파일이름은 inode 번호와 매칭 파일 시스템에서는 inode를 기반으로 파일 액세스 inode 기반 메타 데이터 저장 💡 inode 기반 메타데이터에는 어떤 것들이 있을까? inode 기반 메타데이터 에.. 2023. 3. 1.

티스토리툴바