본문 바로가기
반응형

전체 글369

안드로이드 스튜디오에서 넘치는 글 개행하기: soft wrap 안드로이드 앱을 제작할 때,json파일을 불러와 사용하는 경우도 생기는데요.긴 텍스트가 포함된 JSON 데이터를 안드로이드 스튜디오에서 확인할 때,개발자들은 끊임없이 가로 스크롤을 해야 합니다.이로 인해 가독성이 떨어지고 오타를 찾기가 매우 어려워지죠. 이를 개선하려면, 안드로이드 스튜디오자체에서 개행을 할 수 있도록 해 주어야 하는데요.이를 'soft wrap' 혹은 'word wrap'이라고 합니다.오늘은 이를 안드로이드 스튜디오에서 설정하는 방법을 정리하겠습니다. 1. 설정먼저 안드로이드 스튜디오의 'Preferences'를 찾습니다.단축키는 아래와 같습니다.Command + ,(콤마)  2. Editor 나오는 좌측 네비게이션에서,"Editor > General"로 들어갑니다.그럼 아래와 같이.. 2024. 10. 10.
CSS에서 VH, VW 와 %에 대한 이해 오늘은 CSS에서,상대적인 사이즈를 계산하도록 도와주는,VH, VW와 %에 대해서 정리해 보겠습니다. 1. VHVH는 Viewport Height 에 대한 약자입니다.현재 브라우저 창의 높이를 기준으로 하는 상대적인 단위인데요.1vh는 뷰포트 높이의 1%를 의미합니다.100vh라고 하면 뷰포트의 전체 높이와 같습니다. 예를 들어 아래와 같은 html이 있다고 가정해 보겠습니다. 전체 높이절반 높이  css를 아래와 같이 해주면 쉽게 전체 높이 또는 절반 높이에 대해서 그리는 것이 가능합니다. .full-height { height: 100vh; background-color: #f0f0f0;}.half-height { height: 50vh; background-color: #d0d.. 2024. 9. 17.
FlexBox 로 구현하는 모던 CSS 테이블이나,float, position등을 이용한 CSS는,디자이너들의 복잡한 요구사항을 구현하는데 많은 어려움이 있었습니다.반응형이 기본이 되어버린 시대에,점점 더 구현이 어려워지게 되었는데요. 이러한 문제들을 해결하기 위한 방법으로,Flexbox가 등장하였고,2017년경부터는 대부분의 브라우저에서 지원을 하고 있습니다.오늘은 이 Flexbox에 대해서 정리해 보도록 하겠습니다. 1. FlexBoxFlexBox는 반응형 웹 디자인을 구현하거나, 복잡한 레이아웃을 간단하게 만드는 데 매우 유용한데요.컨테이너가 그 자식 요소들(flex items)의 크기와 순서를,동적으로 조정해 줄 수 있기 때문입니다. 블럭요소나 inline요소를 이용해 css를 구성하는 경우가 많은데요.하지만 flex로 모든 것을 구성.. 2024. 9. 17.
NodeJS Handlebars 레이아웃 분리하기: Navigation과 Bottom 웹디자인을 적용할 때,모든 페이지마다 네비게이션과 bottom의 카피라이트 영역의 코드를 작성하는 것은,매우 비효율적인 방법입니다.그래서, 이러한 레이아웃 영역을 분리해서 코딩을 하게 되는데요.오늘은 NodeJS의 뷰템플릿엔진인 Handlebars를 사용할 때,Navigation과 Bottom영역등의 레이아웃을 분리하는 방법에 대해서 정리해 보겠습니다. 참고로 Handlebars에 대한 기본적인 사항은 아래 글을 참조해 주세요.>> Handlebars 사용방법의 모든 것: Nodejs 뷰 템플릿 엔진 1. 파일 구성 및 nodejs 설정1-1. 파일 구성직접 코딩 작업을 하기 전에,각각의 레이아웃들을 어떻게 폴더로 나누어서 저장하는지에 대해서 먼저 보겠습니다.handlebars의 파일들은 보통 '/vie.. 2024. 9. 16.
도메인 등록을 하기 전 알아야 하는 것들 # DNS 웹사이트 개설에는 도메인이 필수적입니다.도메인은 인터넷상의 주소로,등록을 통해 사용자들이 웹사이트에 접속할 수 있게 해 주는데요.오늘은 도메인이 어떤 것이고, 어떻게 웹사이트와 연결해 주는지 정리하겠습니다. 1. 도메인1-1. 도메인인터넷은 수많은 컴퓨터들이 서로 연결되어 있는 거대한 네트워크인데,각 컴퓨터는 인터넷에 연결되 있는 동안, 유일한 IP 주소를 가지도록 되어 있습니다. 이 때 IP주소들은 모두 숫자로 구성되어 있는데요.예를 들면, '192.0.2.1'과 같이요. 이런 주소는 기억하기가 너무 어렵습니다.그래서, 네트워크의 컴퓨터들의 구분은 이러한 숫자로 하되,사람들에게는 이에 매칭되는 기억하기 쉬운 이름을 사용할 수 있도록 하고 있는데요. '192.0.2.1'이라는 IP 주소 대신,'examp.. 2024. 9. 16.
HTTP Header를 이용한 클라이언트 타입 확인 방법 인증 및 보안을 할 때는,디바이스의 특징에 따라서 다른 접근이 필요한 경우가 발생합니다.이럴 대, HTTP Header를 사용해서 클라이언트, 즉 디바이스의 타입을 구별할 수 있는데요.오늘은 HTTP Header를 이용한 클라이언트 타입 확인 방법을 알아보겠습니다. 1. User-Agent 헤더 활용하기User-Agent 헤더는 클라이언트의 브라우저, 운영 체제, 디바이스 등의 정보를 포함하기 때문에,이를 활용해서 클라이언트의 타입을 확인할 수 있습니다. const userAgent = req.headers['user-agent'];if (userAgent.includes('Mobile')) { // 모바일 디바이스} else if (userAgent.includes('Tablet')) { // 태블.. 2024. 9. 14.
실행중인 서버의 IP주소 알아내기: ifconfig Docker나 Docker-compose를 이용해서 컨테이너를 띄우거나,웹서버를 만들어서 실행시켰을 때,해당 서버의 ip 주소로 접속해, 잘 실행이 되었는지 알고 싶을 때가 있습니다. 오늘은 ip주소를 알아낼 수 있는 방법 2가지에 대해서 정리해 보겠습니다.ifconfig.me 서비스 사용하기 (외부서비스 사용)ifconfig 명령어 (리눅스 내부 명령어 사용) 1. ifconfig.me 서비스 사용하기1-1. ifconfig.meifconfig.me는 현재 사용 중인 네트워크의 공인 IP 주소를,빠르고 간단하게 확인할 수 있게 해주는 웹 서비스입니다.이 서비스를 이용해 서버의 터미널 창에서,다음 명령어로 쉽게 ip주소를 확인할 수 있습니다. curl ifconfig.me  위에서 사용된 'ifconfi.. 2024. 9. 14.
tailwind css 와 handlebars 함께 사용하기 오늘은 NodeJS에서 많이 사용하는 handlebars 뷰템플릿 엔진과,tailwind css를 함께 사용하는 방법에 대해 알아보겠습니다. 1. tailwind와 handlebars의 설치tailwind는 개발환경에서 css작성 후,최종적으로 css로 컴파일 된 파일만,production 레벨에서 사용하게 됩니다. 따라서, Production레벨에서는 tailwindcss모듈을 설치할 필요가 없습니다.그래서 설치할 때, 개발 의존성으로 -dev를 붙여줍니다. npm install tailwindcss --save-dev  handlebars는 설치와 설정이 조금 더 복잡한데요.이에 관해서는 아래 글을 참조해 주세요.>> Handlebars 사용방법의 모든 것: Nodejs 뷰 템플릿 엔진 2. tail.. 2024. 9. 13.
Docker Compose로 NodeJS, Nginx 설치 및 실행하기 # YAML Docker Compose 는 여러 컨테이너로 구성된 애플리케이션을 정의하고 관리하게 해주는데요.오늘은 Docker Compose를 이용해서,NodeJS, NGINX를 설치하고 서버를 실행하는 방법을 정리해 보도록 하겠습니다. 이 글에서는 NGINX나 Docker의 기초에 대해서는 다루지 않고 있는데요.Docker에 관한 글은 아래 글을 참조해 주시구요.>> Docker와 DockerHub를 이용한 배포 와 실행 # NodeJS Dockerfile NGINX에 관한 글은 아래 글을 참조해 주세요.>> NGINX에 대한 정리 #Upstream #Reverse Proxy #Proxy_pass 1. Docker Compose하나의 프로덕트를 서버에서 실행하려면,여러개의 Docker 컨테이너가 필요합니다.가장 .. 2024. 9. 13.
Git 사용방법 총정리 하기 # github branch stash 오늘은 Git을 사용하는 방법에 대해서 총정리해 보도록 하겠습니다.이 글은 Git을 VSCode 나 Android Studio 혹은 Source Tree같은 IDE나 그래픽 버전관리프로그램의 도움없이도,기본적인 기능들을 다룰 수 있도록 하는 것을 목표로 작성하였습니다. 1. Git의 설치1-1. MacGit의 설치는 MacOS를 기준으로 Homebrew 를 사용하면 편리한데요.Homebrew가 설치되어 있지 않다면, 터미널에서 아래 명령어로 Homebrew를 설치해주면 됩니다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 이제 설치된 homebrew를 이용해서 아래 명령어로 gi.. 2024. 9. 13.
전개 연산자(Spread Operator) 정리 오늘은 Javascript의 전개연산자(Spread Operator)에 대해서 정리해 보겠습니다. 1. 전개연산자...는 전개 연산자(Spread Operator)로 ES6부터 도입되었는데요.배열이나 객체를 펼쳐서(확장해서),다른 배열이나 객체로 복사하거나 병합할 때 사용합니다.코드를 더 간결하게 해주고 가독성을 높여줍니다. 1-1. 배열병합전개연산자를 이용한 배열병합을 잘 이해하도록 도와주는 코드를 보겠습니다.아래의 arr1과 arr2는 전개 연산자인 '...'을 이용해서,아래와 같이 conbinedArray라는 병합된 array를 쉽게 만들어 낼 수 있습니다. const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const combinedArray = [...arr1, ... 2024. 9. 12.
데이터베이스 시간 기록: created_at 과 updated_at 자동 업데이트 하기 SQL문을 이용하면, 데이터베이스의 열이 업데이트 되면, 갱신된 현재의 시간으로 데이터가 바뀌도록 쉽게 할 수 있는데요. 오늘은 이것을 NodeJS과 MySQL을 이용해 구현해 보겠습니다. 1. 데이터베이스 생성 쿼리 먼저 student라는 학생에 관한 데이터를 다루는 테이블을 생성하는 SQL문을 생성하겠습니다. 주의해서 볼 부분이 'created_at'과 'updated_at'인데요. 'DEFAULT CURRENT_TIMESTAMP': 값이 지정되지 않은 경우, 현재 시간이 기본값으로 설정 됨 'ON UPDATE CURRENT_TIMESTAMP': 열을 UPDATE 할 때 해당 열에 현재 시간을 설정함. 특정 열의 값을 업데이트할 때마다 해당 열의 값이 현재 시간으로 자동으로 갱신됨. 'ON UPDAT.. 2024. 4. 13.
Docker 컨테이너 내부의 파일 복사하기: cp 명령어 사용법 오늘은 Docker 컨테이너 내부에서 특정한 파일을 복사하는 방법에 대해서 정리해 보겠습니다. 1. cp 명령어 이용한 복사 Docker에는 이러한 파일 복사를 위한 명령어가 존재합니다. 복사를 하기 위해서는 아래의 사항들을 알고 있어야 합니다. 복사할 파일과 저장할 파일의 위치 컨테이너 이름 or 컨테이너 id A. 컨테이너 이름을 이용한 복사 컨테이너 이름을 이용한 cp 명령어 사용방법은 아래와 같습니다. 이 때 명령어 실행은 컨테이너 내부가 아니라, 바깥에서 실행해 주어야 합니다. docker cp :/usr/src/app/db/app-db.db ~/Downloads/ 2024. 4. 12.
Linux 크론탭으로 작업 예약 마스터하기: Crontab 스케쥴링 특정한 시간에 스크립트로 작성한 작업들을 실행시키도록 하려고 할 때, 필요한 것이 리눅스의 크론탭인데요. 오늘은 이것을 활용하여 작업을 예약하는 방법에 대해서 정리해 보겠습니다. 1. Crontab(크론탭) 1-1. Crontab crontab은 유닉스 기반 시스템에서 반복적인 작업을 스케줄링하기 위해 사용되는 유틸리티입니다. crontab의 이름은 "cron table"의 줄임말인데요. 시간 기반 작업 스케줄러인 cron이 참조하는 설정 파일을 관리합니다. 쉽게 말해서 Crontab은 특정 시간, 날짜, 간격에 자동으로 스크립트나 프로그램을 실행하도록 스케줄을 설정해서, 미래의 반복적인 작업을 자동화 할 수 있게 도와줍니다. 1-2. 스크립트 크론탭을 정해진 시간에 실행하기 위해서, 실행할 스크립트를 .. 2024. 4. 10.
linux 환경변수 설정 방법 정리: Bash 와 Z Shell PATH 및 기본 에디터 변경(Nano) 환경변수에 PATH를 추가하거나, 기본에디터를 nano로 바꾸고 싶을 때, 환경변수를 정의해 놓고 사용하면 편리한데요. linux 에서 환경변수를 설정하는 방법에 대해서 정리해 보겠습니다.  1. 현재의 환경변수 값 알아보기 현재 linux에서 환경변수 값들을 알아보기 위해서는 아래 명령어를 입력해 주면 됩니다. 아래 명령어는 현재 시스템에서 설정된 모든 환경 변수의 이름과 해당 값들을 보여줍니다. printenv 'printenv' 명령어 볼 수 있는 환경변수 값들은, 모두 'echo $환경변수'로 개별적으로 확인해 볼 수 있습니다. 환경변수 값 중 PATH에 대한 값을 보고싶다면 아래 명령어를 사용합니다. echo $PATH 2.기본 쉘 확인하기 기본 쉘을 확인하는 명령어는 다음과 같습니다. ech.. 2024. 4. 9.
async 와 await 로 작성하는 읽기쉬운 비동기코드 # forEach Javascript에서 비동기를 사용할 때 Promise라는 API를 정리해 보았었는데요. 오늘은 또다른 API인 aysnc와 await에 대해서 정리해 보도록 하겠습니다. 1. async와 await Async와 await는 Javascript에서 비동기 처리를 쉽게 할 수 있게 해줍니다. 비동기 코드를 동기 코드처럼 읽고 쓰기 쉽게 만들어 주기 때문인데요. 콜백의 연쇄로 인한 복잡성을 피하고, 코드를 보다 직관적으로 만들 수 있게 도와줍니다. Promise에 대한 기본적인 이해가 있다면, async와 await의 개념을 쉽게 받아들일 수 있습니다. Promise에 대해서는 아래 글을 참조해 주세요. >> Javascript의 Promise를 알아보자 #ES6 1-1. Code를 통한 Promise 와.. 2024. 4. 6.
Handlebars 사용방법의 모든 것: Nodejs 뷰 템플릿 엔진 NodeJS와 함께 널리 사용하는 뷰템플릿 엔진인 Handlebars에 대해 정리하겠습니다. 1. Handlebars Handlebars는 JavaScript 템플릿 엔진입니다. 웹 애플리케이션에서 동적으로 HTML을 생성하는 데 사용되는데요. 중괄호'{{ }}'를 사용하여 템플릿 내에 변수, 조건문, 반복문 등을 삽입해 줍니다. HTML형식을 해치지 않으면서도, 서버에서 데이터를 가져와 동적인 HTML을 생성하는 데 유용합니다. 2. Handlebars 설치 아래는 npm을 이용해서, handlebars의 모듈을 설치하는 코드입니다. npm install express-handlebars --save 3. 중괄호 문법 handlebars 를 설정하고 사용하기 전에, 핵심이 되는 중괄호 문법을 보겠습니다.. 2024. 4. 2.
Javascript Spread 문법(...): 코드를 간결하게 만드는 비법 오늘은 Javascript의 spread 문법에 대해서 정리해 보겠습니다. 1. Spread(...)문법 이 문법은 ES6(ES2015)에 도입되었는데요. Spread 문법은 ... (세 개의 점)을 사용해 배열, 객체, 혹은 함수의 인자 등을 '펼쳐서(spread out)', 사용하게 해 주는데요. 이 점3개가 요소가 펼쳐짐을 의미합니다. 객체나 배열을 분해해 펼쳐서 사용하게 해주는 유용한 문법이지요. Spread 문법(...)을 이용하면, 배열이나 객체를 쉽게 조작할 수 있게 해주기 때문에, 코드가 간결해지고, 데이터 처리가 유연해 집니다. 함수 인자를 다루는 상황에서도 활용도가 매우 높구요. 2. Spread(...) 문법 사용 예 1-1. 배열 합치기 코드를 보면서 Spread 문법을 이해해 보겠.. 2024. 2. 17.

티스토리툴바