전체 글

CSS 전역변수 선언 및 사용하기 (CSS custom properties)

CSS에서도 변수를 선언하고 이를 사용할 수 있다. 변수를 선언하여 값을 사용하면, 추후 스타일의 변화가 있을 때 손쉽게 변경할 수 있다. 반복적으로 사용되는 색상이나 값을 저장하여 재사용함으로써, CSS를 더 효율적으로 사용해보자. 일단 CSS에서 변수를 선언하는 방법은 다음과 같다. .test { --primary-color: red; } p { color: var(--primary-color); } 위와 같이 --를 붙인 속성의 이름은 var()을 통해서 다른 곳에서도 사용될 수 있다. 다만, 선언된 사용자 지정 속성은 해당 태그와 그 하위의 요소에서만 유효하다. hello Good testing have a nice day 위의 HTML에서 test라는 클래스 이름을 지니는 div 하위에 존재하는..

useReducer의 장점 알아보기 (vs useState)

useReducer의 존재는 알고있었고, useState를 대체한다는 점 역시 알고있었다. redux의 dispatch나 reducer 개념이 useReducer로부터 비롯되었다는 것도 알았지만- 실제로 무슨 장점이 있기에 useState대신 useReducer를 쓰는가에 대해서 진지하게 생각해본적이 없었다는 것을 알게 되었다. 따라서, 이번 기회에 useReducer의 장점에 대해서 기록해보고자 하였다. 🐥 닉네임과 보유한 캐시를 상태로 가지는 컴포넌트를 가정하고, useState와 useReducer를 비교해보는 예제를 만들었다. 일단, useState를 사용한 예제이다. import { useState } from "react"; export default function App() { const ..

express의 template engine 사용하기 (ejs)

스프링에서 많이 사용되는 JSP, Mustache, Thymeleaf와 같은 템플릿 엔진이 express에도 있을 것이라 생각하였다. 그러던 중 강의에서 pug(구 jade)라는 템플릿 엔진을 알게 되었다. 그런데, pug는 마지막 커밋이 꽤나 오래전(약 2년전)이었고 좀 더 많이 사용되는 템플릿 엔진을 찾아보았다. handlebars나 nunjucks과 같은 템플릿 엔진도 찾을 수 있었지만, 가장 많이 사용되는 ejs를 간단하게 사용해보고 설정과 사용법을 남기도록 하였다. // ./index.js const express = require("express"); const app = express(); // ejs 설정 app.set("view engine", "ejs"); // ejs를 사용한다. ap..

React Native 인터넷 연결 확인하기 (@react-native-community/netinfo)

아무래도 대부분의 모바일 앱은 인터넷 연결이 필요한 경우가 많다. React Native 개발중에도 대부분의 경우 와이파이나 모바일 네트워크 연결이 필요한 경우가 대다수인데, API 요청을 보내고 나서야 네트워크가 연결되지 않은 것을 확인하는 케이스를 좀 더 진지하게 생각해보기로 하였다. 앱을 사용하는 도중에 와이파이 연결을 까먹고 에러가 나는 것 보다, 네트워크 연결이 필요한 앱이라면 처음부터 네트워크가 연결되지 않았음을 알려주는 편이 더 좋다고 생각하였다. 그래서 RN에서 네트워크 연결을 확인하는 방법에 대해서 알아보았고, 결과물을 공유하고자 한다. @react-native-community/netinfo 위의 라이브러리를 통해서 손쉽게 네트워크 연결 상태를 확인할 수 있다. npm i @react-..

브라우저 인터넷 연결 확인하기 (with Javascript, React 커스텀 훅)

브라우저가 인터넷에 연결되어 있는지는 기본적으로 navigator.onLine 변수를 확인할 수 있다. boolean값으로 인터넷에 연결되어 있는지 확인할 수 있다. 다만, 지속적으로 브라우저가 인터넷에 연결되어있는지 확인하기 위해서는 이벤트 핸들러의 연결이 필요하다. 브라우저에서 지속적으로 인터넷 연결을 확인하는 방법으로 eventListener를 사용할 수 있다. 다음과 같은 간단한 코드를 통해서 인터넷 연결을 확인할 수 있다. window.addEventListener("online", () => console.log("ONLINE! 🐥")); window.addEventListener("offline", () => console.log("OFFLINE... 😿")); 콘솔창에 위의 코드를 입력하고..

typeORM 사용하기

typeORM을 사용하면, node.js 환경에서 복잡한 쿼리문을 SQL이 아니라 타입스크립트 문법으로 작성할 수 있다. 사실, Sequelize를 사용해본 경험이 있는데 다소 구성이 복잡하였고, 무엇보다도 타입스크립트로의 전환이 쉽지 않았다. 때문에 좀 더 타입스크립트에서 사용하기에 좋고 더 간단한 ORM이 무엇일까 고민하였고 typeORM을 사용하게 되었다. 필요한 라이브러리 설치 & 설정 npm i typeorm reflect-metadata @types/node 타입스크립트 설치하기 npm i -D typescript ts-node 그리고 사용할 데이터베이스에 맞게 db 드라이버를 설치한다. (여기서는 mysql) npm i mysql or npm i mysql2 설치한 reflect-metada..

Type only import, export에 대해서

타입스크립트로 작성된 오픈소스를 보면, 종종 다음과 같은 코드를 직면하게 되는 순간이 있다. import type { Test } from "./Test"; export type { Test }; 해당 문법은 타입스크립트 버전 3.8에서 추가된 type only imports and exports 문법이다. 이는 타입만을 import하고 export하기에 타입스크립트에서 불필요하게 모듈을 불러오는 문제를 해결할 수 있다. 런타임 시 사용되지 않는 import를 구분할 수 있기에 컴파일 단계에서 사용되지 않는 import를 제거할 수 있다. ⭐️ 항상 완전히 지워지기 때문에, 런타임 실행 시 해당 코드는 남지 않는다. 때때로 타입에 대한 import/export가 제대로 지워지지 않아 오류가 발생하는 경우..

프로그래머스 코딩테스트 연습 - 롤케이크 자르기 JavaScript

이번 문제는 간단하게 생각하면, 이중 for문을 사용하여 계산할 수 있는 문제였다. 본질적으로 배열을 둘로 나누어 양 쪽의 값을 비교하는 문제였다. 따라서, 시간초과를 내지 않으며 문제를 해결하기 위해서 객체를 사용하여 배열의 데이터를 관리하였다. function solution(topping) { let answer = 0; const left = {}; let leftCount = 0; const right = {}; let rightCount = 0; topping.forEach(el => { if(!left[el]) { left[el] = 1; leftCount++; } else { left[el] += 1; } }); for(let t of topping) { if(right[t]) { righ..