본문 바로가기
반응형
다크모드 구현과 로컬스토리지 페이지가 닫혀도 다크모드가 유지되도록 구현하기 다크모드는 눈 보호, 배터리 절약 등의 장점으로 많이 보편화 되어 있는 것 같다. 이렇게 자주 쓰이는만큼 내가 설정 해놓은 다크모드가 나중에 들어오거나 탭을 닫은 후에도 유지 되었음 좋겠다. 이렇게 지속적으로 필요한 데이터의 경우 로컬스토리지를 사용함으로써 문제점을 해결 할 수 있다. Window.localStorage Window.localStorage는 현재 출처(origin)의 로컬 저장 공간의 Storage 객체에 접근할 수 있게 해준다. 이 속성을 사용해서 현재 도메인의 로컬 Storage 객체에 접근한 후, 키-값 형태의 항목을 추가하거나 읽고, 제거까지 할 수 있다. 항목 추가 localStorage.setItem('darkMode', 'enab.. 2021. 8. 21.
[프로그래머스] 위장 | JavaScript 문제 풀이 같은 이름을 가진 의상은 존재하지 않습니다. -> 의상 이름 중복 X, 의상 종류 포커스 스파이는 하루에 최소 한 개의 의상은 입습니다. -> 의상을 모두 입지 않을 경우를 제외하자 예제 1번 clothes return [["yellowhat", "headgear"], ["bluesunglasses", "eyewear"], ["green_turban", "headgear"]] 5 예제 1번처럼 입을 수 있는 2가지의 의상 종류(headgear, eyewear)가 있다고 가정해보자. 풀이를 할 때 다음과 같은 경우를 고려해야한다. 해당 종류의 옷을 입지 않고 다른 종류의 옷을 입은 경우 - 기본값 1 해당 종류의 옷을 입었을 경우 - 값 +1 올리기 해당 종류의 다른 옷을 입었을 경우 - 값 +.. 2021. 8. 17.
API 이해하기(feat. 드림코딩) API..API..API!! 프로그래밍을 공부하다보면 API란 단어를 자주 접한다. 그러다보면 API에 대해 검색도 해보고 어느정도 뜻을 알게되는데 또 다른 API를 보면 '이게 내가 알던 API의 의미가 맞나?' 생각이 들 정도로 다양한 범위에서 사용되는 것 같다. 그렇게 정확하게 알지 못하고 혼란을 겪다가 API를 사용하게 된 이유와 역사를 통해 나름 정의를 내릴 수 있게 되었다. 1964년 API(Application Programming Interface)란 단어는 1964년 36비트 컴퓨터 시스템을 사용할 때부터 등장하기 시작했다. 이때는 기종에 관계없이 모든 종류의 컴퓨터에서 사용이 가능하도록 하는 하드웨어의 독립성(Hardware Independence)을 위해 주로 사용 되었다. 예를 들어.. 2021. 8. 17.
[프로그래머스] 멀쩡한 사각형 | JavaScript 문제 풀이 프로그래머스에서 알고리즘 문제를 풀다보면 수학적인 문제가 나올 때가 꽤 있는 것 같다. 이번 문제에선 대각선에 의해 잘라진 사각형의 개수를 구해서 풀 수 있었는데, 초등학교 5학년 경시대회 문제에서 답을 얻었다. 대각선과 만나는 격자점과 잘라진 사각형의 개수 대각선에 의해 잘라진 사각형의 개수는 격자점의 개수와 연관이 있다. 먼저 작은 수부터 차례대로 나열하여 규칙을 찾아보자. 대각선과 만나는 격자점이 존재하는 (2), (5), (6)번 같은 경우 1보다 큰 가로와 세로의 최대공약수가 존재한다. (2)번의 최대공약수는 2, (5)번의 최대공약수는 3, (6)번의 최대공약수는 3이다. 여기서 규칙을 찾을 수 있는데 격자점이 존재하지 않는 (1)번, (3)번, (4)번은 '(가로) + (세로) -.. 2021. 8. 15.
포스트맨(Postman) 사용법과 다운로드(feat. 유튜브 API) 모바일 개발, 프론트엔드, 백엔드 모두 유용하게 쓰이는 API 개발 툴인 포스트맨을 사용해보자. 개발 하기전 테스트용으로도 사용 가능하고 변수 설정을 통해 편하고 보기 좋게 관리할 수가 있다. 또한 컬렉션에 내가 사용했던 API들을 모아 볼 수 있어서 따로 홈페이지를 재방문 할 필요 없이 재사용 가능한 API를 만들 수 있다. API 부자가 되어보자! 포스트맨(Postman) 사용하기 🚀 01. 포스트맨 다운로드 간단하게 구글에 포스트맨 다운로드를 검색하면 사이트에 접속해 앱을 설치할 수 있다. 그냥 웹에서 사용이 가능하지만 자주 사용하는 만큼 어플리케이션으로 다운로드 받아 편하게 사용하는 것을 추천한다. 먼저 가입을 해야하고 운영체제에 맞는 파일을 다운로드 및 설치를 해준다. 02. 앱 실행과 새로운 .. 2021. 8. 8.
크롬 브라우저는 어떻게 작동 할까? - 04 Google Developers 사이트에서 읽은 내용을 정리한 글입니다. 컴포지터에 입력이 들어오고 있어요! 저번 글에선 렌더링 프로세스와 컴포지터에 대해 알아봤다. 이번 글에선 컴포지터가 어떻게 사용자 입력(input) 시 매끄럽게(smooth) 상호작용을 하게 만드는지 알아보자. 브라우저 관점에서의 입력 이벤트(input events) 일반적으로 우리가 "입력 이벤트(input events)"라고 하면 텍스트 박스에 타이핑을 하거나 마우스 클릭 이벤트를 떠올릴 것이다. 하지만 브라우저 관점에서 의미하는 입력은 사용자가 하는 모든 행동(gesture)을 뜻한다. 즉, 마우스 휠 스크롤도 입력 이벤트이며 터치 또는 마우스 오버(mouse over) 또한 입력 이벤트인 것이다. 화면에 터치와 같은 사용자 .. 2021. 8. 8.
크롬 브라우저는 어떻게 작동 할까? - 03 Google Developers 사이트에서 읽은 내용을 정리한 글입니다. 렌더러 프로세스의 내부 동작 저번 글에서 탐색에 대해서 자세히 알아봤다면 이번 글에서는 렌더러 프로세스의 내부에선 무슨 일이 일어나는지 알아보자. 렌더러 프로세스 내부에서는 많은 일들이 일어나기 때문에 여러 가지 측면에서 웹 성능과 연관이 있다. 본 글에서 일반적인 개요를 살펴 보자. 렌더러 프로세스의 웹 컨텐츠 처리 렌더러 프로세스는 브라우저 탭 안에서 일어나는 모든 일들을 담당한다. 여기서 메인 스레드가 우리가 구현한 대부분의 코드를 처리한다. 웹 워커 또는 서비스 워커를 사용할 경우엔 워커 스레드가 자바스크립트 코드 일부분을 처리하게 된다. 컴포지터와 래스터 스레드는 렌더러 프로세스 내부에서 페이지를 효율적이고 매끄럽게 렌더하.. 2021. 7. 29.
반응형

티스토리툴바