[CSS][Sass] Syntax | 02. Variables
·
Frontend/CSS
Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself. But despite their simplicity, they’re one of the most useful tools Sass brings to the table. Variables make it possible to reduce repetition, do complex math, configure libraries, and much more. Sass에서의 변수는 그 이름 앞에 $를 붙여 선언할 수 있습니다. 변수를 호출할 때도 동일하게 그 앞에 $를 ..
[CSS][Sass] Syntax | 01. Mixin & Include
·
Frontend/CSS
Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries. Mixin은 스타일 시트에서 사용자가 정의한 스타일을 재사용할 수 있게 해주는 구문입니다. 기본적으로 mixin으로 정의하고, include로 불러옵니다. Mixin을 이용한 스타일은 아래와 같이 정의할 수 있습니다.@mixin center { display: flex; justify-content: center; align-item..
[CSS][Sass] Sass & SCSS에 대해서
·
Frontend/CSS
SassSass(Syntactically Awesome Style Sheets)는 CSS를 좀 더 쉽게 다루기 위해 개발된 전처리기(preprocessor) 입니다. CSS는 단순하지만, 프로젝트의 규모가 커질 수록 쓰기 불편한 점이 많았습니다. 특정 색상이나 선택자가 반복해서 나타나거나, 조건문 또는 반복문 등의 흐름제어가 불가능 한 것, 그리고 변수를 지원하지 않는 것 등이 그 예입니다. Sass는 이런 문제점들을 보완하고자 기존 CSS에 추가적인 문법을 추가하였습니다.$main-color: #3498dbbody color: $main-color background: whiteSass는 빌드할 때 CSS로 변환되기 때문에, 기존에 존재하던 CSS 파일도 확장자만 바꾸면 Sass 파일로서 사용할 수..
[JS] Syntax | 20. 파일 입출력
·
Language/JavaScript
외부 파일안의 내용을 읽거나 쓰는 방법입니다. 크게 일반적인 경우와 큰 파일을 다루는 경우로 나누어 정리합니다. 일반적인 경우큰 파일을 다루는 경우읽기readFile( )createReadStream ( )쓰기writeFile( )createWriteStream ( )readFile( )주로 작은 파일(.json, .config 파일 등)을 읽을 때 사용합니다.readFile( )은 fs 모듈을 통해 사용할 수 있습니다.const fs = require('fs');const data = fs.readFile('file.txt', 'utf-8');기본적으로 비동기 함수이기 때문에, 후작업을 위해서는 콜백 함수를 사용하거나 async-await으로 해소해야 합니다.// 1. 콜백 함수const fs = r..
[JS] Syntax | 19. require & import - 외부 파일 불러오기
·
Language/JavaScript
JavaScript에서 외부 파일을 불러오는 방법은 JavaScript의 유형에 따라 두 가지로 나뉩니다.1. require - CommonJS파일을 불러올 때// 1const fs = require('fs');// 2const express = require('express');// 3const { pathToFileURL } = require("url");파일을 내보낼 때// 1module.exports = greet;// 2exports.greet = greet;2. import - ES파일을 불러올 때// 1import fs from 'node:fs';// 2import express from 'express';// 3import { pathToFileURL } from 'node:url'; 파일..
[PS] NYPC | 2515. 잃어버린 섬 여행
·
CS/PS
문제당신은 공룡이 살아 숨쉬는, N개의 섬으로 이루어진 섬나라를 여행하게 되었다. 각 섬은 1번부터 N번까지 번호가 매겨져 있으며, 당신은 이 모든 섬을 빠짐없이 방문하려고 한다. 섬들 중 어떤 M개의 쌍에는 선후 관계가 존재한다. 섬 a에서 섬 b로 선후 관계가 존재한다면 반드시 a번 섬을 먼저 방문한 뒤에 섬 b를 방문해야 한다. 각 섬에는 0, 1로 표시되는 두 종류 중 하나의 자외선 위험이 있다. 자외선으로부터 몸을 보호하기 위해 당신은 방호복을 입어야 한다. 같은 종류의 자외선 위험이 있는 섬을 연속으로 방문하는 경우에는 방호복을 갈아 입을 필요가 없지만, 한 종류의 자외선 위험이 있는 섬을 방문한 직후에 다른 종류의 자외선 위험이 있는 섬을 방문하려면 방호복을 갈아 입어야 한다. 처음 방호복을..
[PS] NYPC | 2513. 등차수열
·
CS/PS
문제N개의 항을 가진 수열 A가 있다. 각 항에 11을 더하거나 빼는 연산을 수행할 수 있다. 단, 이 연산은 항 하나에 최대 한 번만 적용 가능하다. 즉, A의 i번째 항의 값이 초기에 x로 주어졌다면, 최종적으로 i번째 항의 값은 연산을 수행하지 않은 경우에는 x, 연산을 수행한 경우에는 x+1 혹은 x−1중 하나가 가능하다. 최소한의 연산으로 수열 A가 공차 1인 등차수열이 되도록 만드는 프로그램을 작성하라. 여기서 공차 1인 등차수열이라 함은, 1 ≤ i N인 모든 정수 i에 대해, i+1번째 항 A_{i+1​}에서 i번째 항 A_i​를 뺀 값이 A_{i+1}−A_i=1임을 뜻한다.예시Example 1.입력5 1 3 4 5 5출력2조건첫 줄에 수열의 길이를 나타내는 정수 N이 주어진다. (1≤N≤..
[Backend][Deploy] Fly.io로 백엔드 배포하기
·
Backend
.toml 파일 만들기fly.toml 파일은 Fly 앱의 배포 설정을 정의하는 파일로, Fly.io에 서버를 배포하기 위해서는 필수적으로 만들어야 합니다.아래 명령어를 통해 자동으로 .toml파일을 만들 수 있습니다.fly launch아래와 같이 서버 현황이 나오고, 설정을 변경할 것인지 묻게 됩니다. Y로 계속 진행하면, 새로운 브라우저 창이 뜨면서 배포 설정을 할 수 있는 fly.io 페이지가 나오게 됩니다.여기서는 지역만 nrt - Tokyo, Japan으로 바꾸었습니다.Confirm settings를 하면 브라우저 창을 닫고 터미널로 복귀할 수 있습니다.Dockerfile과 .dockerignore 두 개 파일이 모두 생성되면, .toml 파일도 따라서 생성됩니다.# fly.toml app con..