분류 전체보기 (65) 썸네일형 리스트형 블로그 다크 모드 토글 스위치 만들기 이번 포스팅에서는 블로그에 다크 모드를 적용하고, 다크/라이트 모드를 전환할 수 있는 토글 스위치를 만드는 방법을 알아보자.특히, 사용자 기기의 기본 모드 설정을 우선으로 하고, 이후 사용자가 설정한 다크 모드 선택을 저장하여 브라우저에 기록하는 기능도 포함시킨다.다크 모드 기본 설정 및 Font Awesome 아이콘 불러오기먼저 다크 모드 구현을 위해 필요한 설정을 적용하고, 토글 스위치 아이콘에 사용할 Font Awesome 아이콘을 불러오자. 아이콘을 추가하기 위해서는 Font Awesome의 CDN 링크를 추가해야 한다. 이번에는 `fa-sun`과 `fa-moon` 아이콘을 사용할 것이다.Font Awesome CDN 추가Font Awesome을 통해 태양과 달 모양의 아이콘을 사용하면 사용자가 .. 티스토리에서 백틱(`)으로 인라인 코드 블록 표시하기 블로그를 작성할 때 코드 스니펫을 공유하는 일이 빈번하다. 특히 인라인 코드 블록은 문장 중간에 코드를 강조하기 위해 사용되는데, Notion 등 사용이 익숙하면 백틱(`)으로 간단하게 인라인 코드를 표시할 수 있다. 그렇다면 티스토리(Tistory)나 다른 블로그 플랫폼에서도 동일하게 구현할 수 있을까? 이번 포스트에서는 백틱을 사용하여 인라인 코드 블록을 쉽게 표시하는 방법을 소개해 본다.1. 문제 상황티스토리에서는 기본적으로 백틱을 사용하여 인라인 코드를 표시하는 기능을 제공하지 않는다. 따라서 블로그 포스트 작성 시 `이와 같은` 인라인 코드 강조를 위해 매번 태그를 직접 입력해야 하는 불편함이 있다.2. 해결 방법백틱을 사용하여 인라인 코드를 쉽게 표시하기 위해 JavaScript를 활용할 수 .. 1. Overview Intro to Computer System(과거 어셈)과 OS 간의 중간 강의다. internals of computer focusing on software-level 운영체제 과목 들을 때 중요하게 작용 컴퓨터가 OS와 어떤 식으로 상호작용하는지, 프로그래머 중심적 course이다. OS에 대한 지식을 사용하여 좋은 프로그래머가 되는 방법을 배우는 것이 목표고, OS 자체를 만드는 것은 아직 아님 주요 주제 Exceptional control-flow Process Synchronization Parallelism Virtual memory Uploaded by N2T 네트워크 계층 구조 OSI 참조 모델데이터 통신의 규격과 프로토콜을 통일하려고 ISO(International Organization for Standarization)이 시도했지만, 실패로 끝났다. 하지만 이 과정에서 선언한 OSI 참조 모델이라는 데이터 통신의 단계 구성도는 데이터 통신을 설명하는데 유용하게 쓰인다. OSI 참조 모델은 데이터 통신을 단계로 나누어 각 단계의 순서를 명확히 하고, 이 모델에 따라 프로토콜을 정의하였다. OSI 참조 모델은 데이터 통신을 7개의 계층(Layer)으로 나눈다. OSI 참조 모델의 구성제 7계층응용계층네트워크 서비스 제공내용표현제 6계층표현계층데이터 형식 결정제 5계층세션계층데이터 송수신 순서 등 관리제 4계층전송계층에러가 적은 전송 시행전송물제 3계층네트워크계층전송 규칙, 수.. 네트워크 개요 (프로토콜, 회선/패킷 교환, LAN, WAN) 네트워크의 정의와 그 구성요소컴퓨터와 컴퓨터가 데이터를 주고받는 것이 네트워크이고 그것을 실행하는 방법이 데이터 통신이다. 컴퓨터 네트워크는 컴퓨터와 통신 매체, 데이터로 이루어진다.데이터 통신을 통해 정보를 주고받으려면 데이터를 가진 컴퓨터, 데이터를 받는 컴퓨터, 이 둘을 연결하는 통신 매체가 필요하다.인터페이스, 프로토콜데이터가 지나는 통신 매체와 컴퓨터를 연결할 때 필요한 접속구를 인터페이스(Interface)라고 부른다. 데이터를 주고받을 때 규칙이 필요한데, 데이터를 보내는 쪽과 받는 쪽이 동일한 규칙을 사용해야 데이터가 올바르게 전달될 것이기 때문이다. 이 규칙을 프로토콜(Protocol)이라 한다.프로토콜은 데이터를 다루는 방법이나 주고받는 순서 등을 결정한다.사람 대화와 네트워크 .. React JS API Key(키) 숨기기 1. 문제 인식 앞선 포스트에서 create-react-app으로 미세먼지 정보 OpenAPI를 받아오는 React Application을 제작하는 과정을 소개했었다. 이러한 API에서 데이터를 받아오는 기능을 구현하는 React Application을 제작할 때는 API Key가 노출되지 않도록 하는 것이 중요하다. GitHub public repository에 올리거나 배포할 경우 API Key가 다른 사용자에 의해 악용될 우려가 있기 때문이다. 실제로 필자도 아무 생각 없이 GitHub Public Repositiry에 API Key가 포함된 코드를 올렸다가 바로 이런 이메일을 받았다. GitGuardian은 GitHub에서 다체적으로 운영하는 서비스도 아니고 가입한 적도 없는데.. 뭐지 GItHu.. React JS 공공데이터포털 미세먼지 API (한국환경공단 대기오염정보)이용하기 1. React Application 생성 위와 같이 dust-react라는 React Application를 생성한다. 참고로 create-react-app은 node 5.2.0 버전 이상부터 제공되는, 일회성 설치 옵션 npx를 사용하길 권장한다. 따라서 시작하기 전에 npm을 최신버전으로 설치하고, 위 스크립트를 실행한다. 생성된 dust-react 하위 디렉토리 안에서 작업을 진행한다. 2. 한국환경공단 에어코리아 OpenAPI 사용 OpenAPI는 공공데이터포털에서 제공하는, 한국환경공단_대기오염정보 API를 사용한다. 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 .. [C++] 백준 6603 로또 6603 로또 6603번: 로또 입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 테스트 케이스는 한 줄로 이루어져 있다. 첫 번째 수는 k (6 < k < 13)이고, 다음 k개 수는 집합 S에 포함되는 수이다. S의 원소는 오름차순으로 www.acmicpc.net (1) 일반적 풀이 C++ // // Created by SangWon Kang on 2020/09/04. // Copyright © 2020 SangWon Kang. All rights reserved. // #include using namespace std; typedef long long ll; typedef vector vi; typedef pair pii; typedef vector vpii; #define INF 987654.. [C++] 백준 15650 N과 M (2) 15650 N과 M (2) 15650번: N과 M (2) 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해 www.acmicpc.net C++ // // Created by SangWon Kang on 2020/09/04. // Copyright © 2020 SangWon Kang. All rights reserved. // #include using namespace std; typedef long long ll; typedef vector vi; typedef pair pii; typedef vector vpii; #define INF 987654321 #defin.. La La Land [책은 아니지만] n회차 감상에도 지루하지 않은, (내 기준) 명작 라라랜드. 모두가 항상 스포트라이트를 받으며 살아갈 순 없지만 자신의 꿈을 누군가 응원해줄 사람이 있다는 것, 또 그 꿈을 두려워하지 않을 용기가 있다는 것만으로도 우리는 각자의 삶 속 주인공이 될 수 있지 않을까. 언어의 온도 -이기주- 내가 누군가에게 남긴 짧은 말 한마디, 글 한 구절이 힘이 되었다고 할 때만큼 뿌듯할 때가 또 있을까. 나의 말과 글이 상대방의 마음 깊숙이에 꽂힌, 지지 않는 꽃이 되었으면 한다. 꽃을 보듯 너를 본다 -나태주- 이 시집을 펼 때면 마음이 말랑말랑해지는 것만 같다😌 이전 1 2 3 4 5 6 다음
