반응형

전체 글 128

JavaScript JSON

자바스크립트 사용 환경에서 JSON 데이터와 Javascript 객체 간의 양방향으로 변환하는 방법에 대해서 알아봅니다. 1. Javascript 객체에서 JSON 데이터로 변환 "JSON.stringify" 함수를 사용합니다. const myObject = { name: 'David', age: 23, } // Javascript 객체 const myJsonString = JSON.stringify(myObject) console.log(myJsonString) // {"name":"David","age":23} 2. JSON 데이터에서 Javascript 객체로 변환 "JSON.parse" 함수를 사용합니다. const myJsonObject = JSON.parse(myJsonString) conso..

Ubuntu ssh 포트 변경

Ubuntu 서버에서 ssh 포트를 변경하는 방법에 대해서 알아 봅니다. ssh의 기본 포트 번호는 '22'번입니다. 기본 포트를 사용하는 경우 많은 해킹 공격 스크립트에 노출되어 네트워크 트래픽도 많이 생기고, 그에 의해서 로그파일도 많이 생성되므로, 외부 서비스 포트(예: 80, 443)를 제외하고 잘 알려진(well-known) 포트는 변경하고 사용하시기 바랍니다. 1. ssh 설정파일 vim 편집기로 열기 sudo vim /etc/ssh/sshd_config 2. 포트 변경 port 포트번호 * vim 편집기 간단 사용법 - 편집모드 진입: "i" 키 입력 - 저장: "Esc"키를 눌러 명령어 모드로 진입 후 ":wq" 혹은 ":x" 입력 - 저장하지 않고 나가기: "Esc"키를 눌러 명령어 모드..

Windows hosts 파일 수정 후 적용

로컬 환경에서 도메인이나 서브도메인 테스트를 해야 하는 경우 hosts 파일을 수정하는 경우가 많은데요, Windows환경에서 hosts 파일을 수정하는 방법은 아래와 같습니다. 1. cmd를 "관리자 권한"으로 실행합니다. 2. hosts 파일 수정 아래의 명령어를 실행해서 "hosts"파일을 notepad(메모장)로 열어서 편집합니다. notepad drivers/etc/hosts hosts 예제 ## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1localhost 255.255.255.255br..

IT 일반 2022.02.20

[게임] 뱀파이어 서바이벌 - 기술 & 패시브

기술 & 패시브 위 표에서 다음과 같은 내용을 확인할 수 있습니다. 캐릭터별 기본 기술 기술에 버프효과를 주는 패시브(Passive) 최종 기술로 강화하기 위한 패시브(Passive) 최종 기술 조합 최종 기술로 강화하기 위한 기술과 패시브 조합만 요약한 내용입니다. [게임] 뱀파이어 서바이벌 - 숨겨진 캐릭터 얻는 방법 (엑스대시, 붉은 죽음의 가면) 저렴한 가격과 시원시원한 타격감으로 유명한 뱀파이어 서바이벌의 숨겨진 히든 캐릭터를 얻는 방법을 설명합니다. (Steam 에서 현재 무려 단돈 ₩3,300에 판매 중) 엑스대시 엑시비크 (Exdash Exiviiq) ccusean.tistory.com

IT 일반 2022.02.18

Visual Studio 모든 제품 시리얼 키

Windows 개발을 위한 최고의 편집 & 디버깅 툴인 Microsoft Visual Studio 6.0에서부터 2022까지 모든 제품에 대한 시리얼 키입니다. 인터넷에 돌고 있는 시리얼키이며, 아마도 사용자를 늘리기 위해 몰래 풀어놓은 키인 것 같습니다. Microsoft 계정 로그인 없이 설치하시는게 안전할 것 같습니다. Windows 개발에 막 입문하시거나, 개발툴 버전에 대해 고려해 보고 계신분들에게 도움이 되었으면 좋겠습니다. 즐거운 코딩하세요~! Visual Studio 2022 Professional: TD244-P4NB7-YQ6XK-Y8MMM-YWV2J Enterprise: VHF9H-NXBBB-638P6-6JHCY-88JWH Visual Studio 2020 HG8FD-DR6F8-T7G9..

IT 일반 2022.02.11 (6)

Expo 프로젝트관련 명령어

expo-cli 설치 expo 명령어를 사용하기 위해서 "expo-cli" 패키지를 전역에 설치합니다. (cli는 "command line interface"를 뜻합니다.) npm install expo-cli -g expo 프로젝트 생성 expo init 프로젝트명 expo 프로젝트 실행 expo-cli 명령어를 사용하는 경우 # 서버 실행 expo start # 서버 + android 실행 expo start -a # 서버 + ios 실행 expo start -i yarn 명령어를 사용하는 경우 전역에 "yarn" 패키지가 설치되어 있어야 합니다. (예: npm install yarn -g) # yarn 설치명령어 #npm install yarn -g # 서버 실행 yarn start # 서버 + a..

Express 프로젝트 초기설정

Express란, Node.js의 웹 애플리케이션 프레임워크입니다. (현재 가장 많이 사용되고 있습니다.) "express-generator"를 이용해서 프로젝트를 만들고, 실행하는 방법과 포트 설정하는 간단한 방법에 대해서 알아 보겠습니다. 전역에 "express-generator" 설치 npm install express-generator -g express 프로젝트 생성 express --view=뷰엔진 프로젝트명 뷰엔진(view engine) 종류 ejs

npm 명령어

npm (Node.js Package Manager)에 대해서 간략히 설명하고, 자주 사용하는 명령어를 정리해 봅니다. 주로 프로젝트("cd 프로젝트 경로"로 이동)에 패키지를 설치하는 경우는 배포 시에 필요한 패키지를 설치합니다. 전역에 설치하는 패키지들은 "expo-cli, express-generator, eas-cli, yarn"과 같은 프로젝트를 생성, 배포, 전송, 대체 패키지 관리자와 같은 명령어들을 전역에 설치하여 사용합니다. (프로젝트 배포 시 필요하지 않은 패키지) 전역에 패키지 설치 시에는 프로젝트 내에서 사용하는 명령어와 동일하나 끝에 "-g"옵션만 붙여주면 됩니다. 프로젝트 내에 패키지를 설치하고 배포 시에는 추가되지 않도록 하는 방법은 "--dev" 옵션을 붙여주면 됩니다. 패키..

React Native UI Components Library Top 3

Fullstack 개발자 혹은 개인 개발자의 경우 컴포넌트들을 일 일이 혹은 조금 예쁘게 꾸미기에는 시간과 노력이 많이 들어가게 됩니다. 그럴 때 UI 컴포넌트 라이브러리를 사용하여 개발 시간을 단축 혹은, 조금 더 사용자에게 친화적인 UI/UX를 구성하는데 도움을 주는 3대 UI 컴포넌트 라이브러리에 대해서 알아보겠습니다. 아래는 최근 5년동안의 "native-base, react-native-elements, react-native-paper"에 대한 트렌드를 보여주는 그래프입니다. 아래의 3개의 컴포넌트는 현재 React Navigation과 아주 호환이 잘 되어 있습니다. React Navigation | React Navigation Routing and navigation for your Re..

Ubuntu 패키지 관리 툴 apt

Ubuntu 서버를 최신 상태로 유지하고, 필요한 패키지를 설치 관리할 수 있는 패키지 관리자인 apt명령어입니다. 아래에 서버 운영하면서 가장 많이 자주 사용하는 명령어들을 정리합니다. 패키지 업데이트 sudo apt update 패키지 정보를 업데이트합니다. 패키지 업그레이드 sudo apt upgrade 시스템에 설치된 패키지를 업그레이드합니다. 패키지 설치 sudo apt install 패키지명 시스템에 특정 패키지를 설치합니다. 패키지 삭제 sudo apt remove 패키지명 시스템에서 특정 패키지를 삭제합니다. sudo apt autoremove 시스템에서 불필요한 패키지를 삭제합니다. (패키지 의존성 확인 후 더 이상 사용되지 않는 패키지들을 삭제합니다.) 패키지 검색 sudo apt se..

Ubuntu locale 문자셋 변경

서버호스팅 업체를 통해서 Ubuntu 서버를 할당받은 경우, 기본 언어인 영어로 설정되어 있는 경우가 있습니다. 영어가 능숙하지 않은 경우, 언어적인 면에서 약간의 괴리감이 생길 수 있습니다. 따라서, 좀 더 친숙한 대한민국(한국어)으로 Locale(지역화)과 언어를 변경하여 좀 더 편리하게 서버를 운영할 수 있도록 하는데 목적이 있습니다. 아래에 그 방법을 정리해서 올립니다. 시스템 locale 확인 현재 시스템에 설정되어 있는 Locale(지역화), 기본 언어와 각종 단위(예: 날짜, 시간)를 확인 할 수 있습니다. locale 언어팩 설치 (한글) 한글을 사용하기 위해서 한글 언어팩을 설치합니다. sudo apt install language-pack-ko Locale 파일 생성 템플릿파일을 이용해..

Ubuntu 기본 편집기 변경

Ubuntu OS 의 기본 편집기가 "nano"로 변경 되었습니다. 아직 익숙하지 않고, 학습할 시간이 부족하고, 급하게 일처리해야 하는 경우에는 익숙한 vi(vim)편집기로 변경 후 진행하는게 좋습니다. 아래의 명령어로 기본 편집기를 변경 할 수 있습니다. 기본 편집기 변경 명령어 select-editor 명령어를 실행하면 위와 같이 4가지의 편집기를 선택 할 수 있습니다. 자, 특정 명령어(예: crontab -e)에 의해 편집모드로 진입하면 원하는 편집기로 편집이 가능합니다.

Mac Python 3 명령어

Mac OS 환경에서 python 관련 명령어가 다른 OS (Windows, Linux)에서 사용할 때와 조금 달라서 개인적인 메모 목적으로 적어 놓는다. 명령어들이 왜(?) pip3와 python3에 링크되어 있는지 이해가 되지 않는다. alias 설정을 해 놓으면 되지만, 시스템 설정은 웬만하면 건드리지 않는 것이 경험상 나아서 그냥 사용하고, 메모만 한다. 1. 패키지 관리 pip3 install 패키지명 # Windows, Linux pip install 패키지명 2. python 명령어 python3 test.py # Windows, Linux python test.py

프로그래밍/Mac 2022.02.04

Mac nodejs LTS, Latest(Current) 버전 설치 방법

Mac OS 환경에서 패키지 관리 툴인 "Homebrew"를 사용해서 Node.js의 LTS 버전과 Latest(Current) 버전을 설치하는 방법에 대해서 설명합니다. 현재 날짜(2022-11-07) 기준으로 Node.js 버전은 아래와 같으며, LTS 버전은 v18.12.1, Latest(Current) 버전은 v19.0.1입니다. 설치하기에 앞서서 MAC 패키지 관리 툴인 Homebrew가 설치되어 있어야 합니다. Homebrew설치방법은 아래의 포스트를 참고하시기 바랍니다. > ~/.zshrc # 방법2: 직접 수정 vim ~/.zshrc # .zshrc파일의 적당한 위치에 아래의 문구를 추가합니다. export PATH="/usr/local/opt/node@18/bin:$PATH" 참고로 No..

프로그래밍/Mac 2022.02.04

Mac hosts 파일 수정 후 적용

로컬환경에서 도메인이나 서브도메인 테스트를 해야 하는 경우 hosts 파일을 수정하는 경우가 많은데요, Mac환경에서 hosts파일을 수정하는 방법은 아래와 같습니다. 1. host파일 편집 sudo vim /etc/hosts 혹은 sudo vim /private/etc/hosts 예제 ## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1localhost 255.255.255.255broadcasthost ::1 localhost 127.0.0.1*.test.com 127.0.0.1*.localhos..

프로그래밍/Mac 2022.02.04

Android Virtual Devices 에 Play Store 추가하는 방법

Android Virtual Devices 중에서 Play Store를 지원하지 않는 가상 기기에 추가하는 방법에 대해서 알아보겠습니다. (현재 Tablet 버전은 전부 지원이 되지 않고 있습니다.) 1. Android Virtual Device Manager에서 Play Store를 추가하려는 emulator의 Actions버튼에서 Show on Disk를 선택합니다. 그러면, 파일 탐색기(mac은 Finder)가 열리며, 폴더 안에 config.ini파일을 열어 봅니다. 2. PlayStore.enabled=false를 PlayStore.enabled=true로 변경합니다. 3. "image.sysdir.1=system-images/android-30/google_apis/x86/"를 "image.s..

CKEditor 5 플러그인 설치 방법

CKEditor 5 플러그인 설치방법 두 가지를 설명드립니다. superbuild 버전 사용법 Online builder 사용법 플러그인이 적용된 CKEditor 5의 화면은 아래와 같습니다. 방법1: superbuild 버전 사용 CKEditor에서 제공하는 superbuild 버전을 이용하는 방법입니다. 아래의 소스와 같이 적용하면 됩니다. 단, 프리미엄 플러그인 사용기간이 있기 때문에 "removePlugins: [ ... ]"항목에 추가해서 제거해 줍니다. 아래의 사이트에서 미리 사용해 볼 수 있습니다. CKEditor with all free plugins - 꾸션(ccusean) Just test CKEditor with all free plugins. ccusean.com 방법2: Onlin..

html 입력 자동 완성 datalist 활용

html의 datalist 태그를 사용하면, 사용자의 입력을 자동완성시켜주는 기능을 쉽게 구현할 수 있어서 이를 소개해 드립니다. javascript로 어렵게 구현하던 기능을 datalist로 쉽게 구현이 가능하게 해 줍니다. 사용방법 예시 선호하는 웹브라우저를 선택하세요. 아래와 같이 문자 'e'를 입력한 경우, 해당 문자를 포함하지 않은 'Safari'를 제외한 항목만 보여지며, 사용자의 입력이 정확히 입력 되도록 유도 됩니다.

JavaScript로 sleep함수 구현

자바스크립트로 sleep(delay) 함수를 구현하는 방법은 아래 소스와 같습니다. sleep함수 구현 // 화살표 함수로 구현 const sleep = (ms) => { return new Promise((resolve) => setTimeout(resolve, ms)) } // 일반 함수로 구현 function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)) } sleep함수 사용 (2가지 방식) 1) async, await 방식 // 화살표 함수로 구현 const func = async () => { await sleep(3000) // 3초 console.log('Do something...') } // 일반 함수로 구현 ..

CKEditor 5 사용법

홈페이지에서 글 편집기로 가장 많이 이용되고 있는 CKEditor 5를 사용하는 간단한 방법에 대해서 알아 보겠습니다. 흔히, WYSIWYG(What You See Is What You Get)형태의 HTML Rich Text Editor로 유명한 편집기들이 많이 있습니다. 과거 거의 독보적인 1등을 달리던 Summernote도 있으나, CKEditor 5가 무서운 기세로 평점과 인기를 올리고 있습니다. 다른 좋은 편집기도 있으니, 검색해보고 구미에 맞는 편집기를 사용하면 되겠습니다. 간단히 3가지 편집기에 대해 알아 보겠습니다. CKEditor: Summernote와 많이 비교가 되며, 무서운 기세로 인기와 평점을 올리고 있는 편집기 Summernote: 과거 독보적인 1등 편집기 Tinymce: 티스..

반응형