전체 글

HTML 태그 더 잘 사용하기

html 과 htm의 차이점은 없다. 과거 확장자의 글자수가 제한되어 있었을 때 htm이 사용되었다. Escaping &은 &를 의미한다. 은 줄바꿈을 의미한다. ( ) 는 띄어쓰기를 의미한다. HTML에서 띄어쓰기 여러 번을 표기하기 위해서는 를 사용한다. Map 태그 Map 태그의 자손으로 area 태그를 설정할 수 있다. area 태그의 shape, coords, href와 같은 속성을 설정하여 모양, 크기, 연결된 링크를 설정할 수 있다. img 태그의 usemap 속성을 이용하여 map 태그에 이미지를 연결할 수 있다. 참고 자료 : https://developer.mozilla.org/ko/docs/Web/HTM..

프로그래머스 코딩테스트 연습 - 대충 만든 자판 JavaScript

이번 문제는 해결은 어렵지 않았으나, 처음 봤을 때 문제를 이해하기가 어려웠다. function solution(keymap, targets) { const answer = []; const keyMapObj = {}; keymap.forEach(el => { for(let i = 0; i i + 1) { keyMapObj[el[i]] = i + 1; } } }); for(let i = 0; i < targets.length; i++) { let count = 0; for(j of targets[i]) { if(!keyMapObj[j]) { count = -1; break; } count +=..

타입스크립트에서 /// <reference ... /> 의 의미 (Triple-Slash Directives)

타입스크립트를 사용하는 사람이라면, 어느 라이브러리 내부에서 다음과 같은 코드들을 본 적이 있을 것이다. /// /// /// 이는 삼중 슬래시 지시문이라고 한다. 삼중 슬래시 지시문은 단일 XML 태그를 포함하는 단 한 줄짜리 주석으로, 주석의 내용은 타입스크립트 컴파일러 지시문으로 사용된다. 삼중 슬래시 지시문의 내용은 단일 파일에서만 유효하며, 이는 파일의 최상단에 위치해야 한다. 그렇지 않으면, 일반 주석으로 인식된다. /// 가장 일반적인 삼중 슬래시 지시문으로, 파일간의 의존성을 나타낸다. 컴파일러에 해당 파일을 포함하도록 지시한다. 입력 파일 전처리 (Preprocessing input files) 과정으로 추가한 파일이 컴파일에 포함된다. /// 이는 패키지 의존성을 설정하는데, impor..

reduxjs/toolkit 더 자세히 알아보기 (typescript 적용)

예전에 역시 redux toolkit을 사용해보고 글을 남긴적이 있었다. https://citron031.tistory.com/entry/Redux-Toolkit-rtk-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 Redux Toolkit (rtk) 사용하기 로그인 정보를 전역 상태로 사용하기 위하여 redux를 사용하기로 마음먹었다. 자연스럽게 일단 전역 상태를 저장할 store를 만들기 위해 createStore를 불러왔는데, 다음과 같은 상황에 처했다. 커서 citron031.tistory.com 단순한 사용법에 대해서 작성했었는데, 타입스크립트의 적용이나 dev tool 사용하는 법 등 좀 더 사용하고 알게된 점들에 대해서 추가로 남기기로 하였다. import {configu..

프로그래머스 코딩테스트 연습 - 카드 뭉치 JavaScript

이번 문제는 순서대로 접근하며 해당 케이스가 가능한지 확인하는 문제로, 분기가 갈릴 수 있으므로 이를 놓치지 않는 게 중요하다고 생각하였다. function solution(cards1, cards2, goal) { const dfs = (idx1, idx2, goalIdx) => { if(goalIdx === goal.length) { return true; } if(cards1[idx1] === goal[goalIdx]) { if(cards2[idx2] === goal[goalIdx]) { return dfs(idx1 + 1, idx2, goalIdx + 1) || dfs(idx1, idx2 + 1, goalIdx + 1); } else { return dfs(idx1 + 1, idx2, goalId..

Blob과 File, FileReader 사용하여 파일(.txt) 읽고 쓰기

blob은 전에도 사용한 적이 있지만, 이번에 다시 사용하며 사용한 내용을 정리하기로 하였다. Blob은 JavaScript 네이티브 형태가 아닌 데이터또한 표현할 수 있다. File이 Blob에 기반한 인터페이스로, 사용자 시스템의 파일을 지원하기 위해 Blob 인터페이스를 상속해 기능을 확장한 것이다. Blob과 File은 생성자를 통해서 인스턴스를 만든다. import { useState, useEffect } from "react"; const IoComponent = ({setTexts, texts}) => { const [url, setUrl] = useState(""); useEffect(() => { const blob = new Blob([texts], {type: "text/plain"..

React Navigation 타입스크립트 사용하기

React Native는 이제 타입스크립트를 사용하는 것이 기본 옵션이 되었다. 그에 따라서, 나 역시 타입스크립트를 사용하는데 react navigation의 타입스크립트 설정이 유난히 번거로웠다. 그래서 다음번의 번거로움을 줄이고자, 내가 사용해본 react navigation의 타입스크립트 설정을 기록으로 남겨두기로 했다. 🍖 코드들은 stack navigator를 기준으로 설명한다. import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {Setting, Home, Login} from "./components"; export type RootStackParamList = { Login: undefined;..

System Call이란?

System call이란? OS에서 제공하는 서비스에 대한 programming interface를 말한다. I/O 장치에서 system call은 OS의 서비스를 필요로하는 함수를 뜻한다. I/O가 완료될 때 까지 사용자를 기다리게 한다. System Call 일반적으로 C나 C++과 같은 high-level language로 작성된다. 주로 직접 system call을 사용하는 대신 Application Programming Interface, API를 통해 프로그램이 접근할 수 있다. system call 호출 -> interrupt, trap(소프트웨어 interrupt) 발생 🥘 interrupt는 https://citron031.tistory.com/entry/Interrupt란 에서 정리했다..