즐겁게, 코드

가끔씩 다른 사이트들을 돌아다니다 보면 "이건 무슨 기술로 만들어졌을까?" 하는 호기심이 생길 때가 있을 것입니다. 오늘은 사이트를 구축한 기술 스택을 확인할 수 있는 서비스인 Wappalyzer 를 소개하려 합니다. www.wappalyzer.com/ Technology lookup - Wappalyzer Wappalyzer is trusted by thousands of professionals world-wide www.wappalyzer.com Wappalyzer는 한달의 50개의 사이트를 무료로 확인할 수 있으며 어떤 기술이 어떤 역할로 사용되었는지 구체적으로 알려주는데요, 예를 들어 개츠비와 리액트로 제작한 제 이전 블로그를 확인해 보면 이런 분석 결과를 얻을 수 있습니다. 신기하지 않나요? ..

타입스크립트 코드를 트랜스파일하기 위해서는 tsc 커맨드를 사용합니다. // index.ts const name: string = "chanmin"; $ tsc index.ts // index.js var name = "chanmin"; 다만 위의 트랜스파일 결과물은 var 키워드를 사용하는 구버전 자바스크립트 코드입니다. 어떻게 하면 이 끔찍한 var 에서 벗어날 수 있을까요? ⚙️ tsconfig 설정 타입스크립트를 조금 잘 아는 분이시라면 tsconfig 파일에서 타겟 옵션을 지정할 수 있다는 것도 알고 계실 겁니다. // tsconfig.json { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this ..

타입스크립트에서 원시 타입 외에 참조 타입을 사용하는 방법에 대해 알아보겠습니다. 🏗 배열(Array) const array1: number[] = [1, 2, 3, 4, 5]; const array2: Array = [1, 2, 3, 4, 5]; 배열 타입을 사용하는 방법은 두 가지가 있는데, 기능적인 차이는 없으니 눈에 익은 스타일 또는 팀 컨벤션대로 사용하면 됩니다. 🛢 튜플(Tuple) const pointX: [string, number] = ["x", 255]; const pointY: [string, number] = ["y", 0]; // 트랜스파일 결과 const pointX = ["x", 255]; const pointY = ["y", 0]; 튜플은 배열과 유사하게 생겼지만 배열과는 달..

특이한 점은 없는 탐색 문제다. 오랜만에 푸는 탐색 문제다 보니 DFS 코드를 어떻게 구현할지 고민을 많이 했었는데, 그래도 감을 더듬어가며 코드를 짜니 금방 풀렸다. [정답 코드 - Python] T = int(input()) dy = [1, 0, -1, 0] dx = [0, 1, 0, -1] def DFS(row, col, visited): for i in range(4): new_row = row + dy[i] new_col = col + dx[i] if field[new_row][new_col] == 1 and visited[new_row][new_col] == False: visited[new_row][new_col] = True DFS(new_row, new_col, visited) for _..

[백준 온라인 저지 - 문제 링크] 아이디어도 아이디어지만, 은근히 구현이 어렵게 느껴진 문제였습니다. [정답 코드 - Python] N = int(input()) t = [0] for i in range(N): t.append(list(map(int, input().split()))) for i in reversed(range(N)): for j in range(i): t[i][j] = t[i][j] + max(t[i + 1][j], t[i + 1][j + 1]) print(*t[1]) 풀이는 아이패드 구입 후 조만간 업데이트하도록 하겠습니다..

// utils.js const sayHello = () => { console.log("안녕하세요!"); }; const sayNothing = () => { console.log("..."); }; export { sayHello, sayNothing }; import { sayHello, sayNothing } from "./utils.js" 자주 보셨을 import-export 구문입니다. 그런데 조건에 따라 모듈을 불러오는 것도 가능할까요? // Error!!! if(person === "friend") { import { sayHello } from "./utils.js"; sayHello(); } else if(person === "professor") { import { sayNothing..

CSS의 확장팩 중 하나인 Scss에서는 정말 많은 편의기능을 제공하는데요, 오늘은 여러 기능들 중 다른 Scss 파일을 불러올 수 있는 import 기능에 대해 알아보겠습니다. components │ ├── Button │ ├── Button.jsx │ └── Button.scss ├── Card │ ├── Card.jsx │ └── Card.scss ├── Header │ ├── Header.jsx │ └── Header.scss │ ├── App.scss └── App.jsx ... 위의 폴더 구조는 제가 이전에 애용하던 컴포넌트 폴더 구조입니다. 폴더별로 컴포넌트와 스타일 파일을 관리하는 방식은 나쁘지 않지만, scss를 활용한다면 더 멋지게 폴더 구조를 개선할 수 있습니다. components ..