7942yongdae의 등록된 링크

 7942yongdae로 등록된 티스토리 포스트 수는 186건입니다.

AWS - EC2 인스턴스를 종료(삭제) 하는 방법 [내부링크]

AWS에서 운영하던 서비스를 내리게 되면서 EC2를 정리했습니다. EC2 인스턴스 종료 방법은 간단하지만 모르면 헤매게 설정이 되어있어 간략하게 EC2 인스턴스를 내리는 방법을 정리합니다. EC2 인스턴스를 삭제하는 방법 AWS에서 제공하는 EC2 기능은 애플리케이션 서버 혹은 OS(운영체제)의 인스턴스를 생성해서 쓰는 개념이기 때문에 삭제하는 기능이 존재하지 않습니다. 대신 사용 중에 멈출 수 있는 정지와 사용을 하지 않겠다는 종료 기능을 제공합니다. 따라서 사용하던 EC2 인스턴스를 삭제하려면 삭제가 아닌 종료 기능을 사용해 EC2 인스턴스를 정리하면 됩니다. EC2 인스턴스 종료가 안될 때 글을 시작하면서 이야기 한 부분인데요. EC2 인스턴스를 정지해도 종료 버튼이 활성화되지 않아 이 기능을 활성..

Typescript - 타입 주석과 타입 추론 [내부링크]

타입스크립트의 장점 중 하나가 자바스크립트와 달리 명시적으로 타입(Type)을 정의해서 활용할 수 있다는 부분입니다. 개인적으로는 Type을 타입이라고 부르기보다는 유형이라고 생각하는 게 개념적으로 이해하기에는 좋다고 생각하는데요. 이번 글에서는 타입 스크립트가 가지는 타입 주석과 타입 추론에 대해 알아보겠습니다. 타입 주석 - type annotation let n: number; let b: boolean; let s: string; 타입 주석은 변수에 할당되는 값의 유형을 정의하는 타입스크립트 문법입니다. 사용 방법은 변수를 선언하고 콜론(:)과 변수에 정의할 수 있는 값의 유형을 기입하면 됩니다. number는 숫자를 boolean은 true, false은 string은 문자를 받을 수 있다는 의..

Javascript - Number의 정의와 유효 값의 범위 [내부링크]

자바스크립트에서 숫자 값은 Number 타입으로 정의해서 사용 할 수 있습니다. 다르게는 자바스크립트에서 숫자는 Number로 취급된다고 이야기 할 수 있죠. 그런데 자바스크립트에서 취급하는 숫자(Number)가 어떻게 정의되는지 코드로 사용되는 유효 값의 범위가 얼마인지 알고 계신가요? 얼마 전 숫자를 다루는 기능을 만들다보니 Number에 대해 추상적으로만 생각하고 사용했구나 라는 생각이 문득 들었습니다. 오늘은 자바스크립트의 숫자 정의와 유효 범위에 대해 이야기해볼까 합니다. 숫자를 다루는 Number의 정의

Javascript - 숫자에 금액 단위 형식 사용하기 [원, 만, 억, 조, 경] [내부링크]

숫자에 금액 단위 형식을 적용하면 어떻게 될까요? 돈(금액)을 화면에 보여주다 보면 단순히 숫자로 10,000원 이렇게 표기되는 것보다, 1만원이라고 표기되는 게 단위를 세지 않아도 되어 읽기가 편합니다. 돈의 단위를 숫자에 적용하면 가독성이 좋다는 건 사람마다 주관적인 부분이라 다르게 생각할 수 있는 부분이니 이게 꼭 옳다고 이야기는 어려운 부분이네요. 숫자 금액 단위 형식 적용하면? - 원, 만, 억, 조, 경 일반적으로 숫자에 포맷 형식을 적용하면 천 단위를 기준으로 "," 를 사용해 표기를 합니다. 하지만 금액(돈)을 셀 때는 만, 억, 조, 경 단위를 붙여 읽습니다. 위에서 제시한 결과처럼 말이죠 처음에 금액에 단위 형식을 적용하면 가독성을 높이고 문자의 길이가 짧아져서도 좋을 거라고 생각했는데..

MacOS - Mac Ventura 설치 USB 만들기 [내부링크]

지금 사용하고 있는 개발 환경에 문제가 생겨 MacOS를 다시 설치하게 되었습니다. 오늘은 MacOS Ventura를 설치 할 수 있는 USB를 만드는 방법에 대해 알아보겠습니다. Ventura MacOS 다운로드 App Store를 통해 macOS Ventura 페이지로 이동해 Ventura 설치 파일을 받기 버튼을 눌러 다운로드 합니다. Ventura OS 다운로드가 완료되면 아래의 캡쳐 화면과 같이 OS를 설치하라는 실행 화면을 확인 할 수 있습니다. Ventura 설치 USB를 만들기 위해서 Ventura OS를 설치 할 필요는 없기때문에 OS 설치를 종료합니다. 키보드의 Command + Q 를 눌러 설치를 종료하거나, 화면의 좌측 상단의 macOS 설치 종료 버튼을 눌러 종료 할 수 있습니다...

Javascript - 새로운 자바스크립트 ESNext [내부링크]

ESNext는 다음 버전의 자바스크립트를 말합니다. 처음에 이 단어를 접했을 때는 "이건 뭐지?"라고 했었는데, 다음의 Javascript를 가리킨다니 어떻게 보면 재미난 용어인 것 같기도 합니다. ESNext의 정의 ESNext에 대한 명확한 정의는 Mozila의 문서에서 확인할 수 있습니다. 본문 내용을 해석해본다면, ESNext는 작성 시점에 다음 버전을 가리키는 역동적인 이름이다. ESNext 기능들은 제안이라고 부르는 것이 더 정확하다. 정의에 따라 사양이 아직 확정되지 않았기 때문에라고 설명되어 있습니다. 즉 ESNext는 단순히 신규 버전의 자바스크립트로 생각하기보다는 앞으로 발전할 자바스크립트를 통칭하는 단어라고 말할 수 있을 것 같습니다.

Github Token 발급받아 Jenkins 자격 등록하기 [내부링크]

Github과 Jenkins 연동을 검색해서 하다 보니 불편해, 글로 필요한 부분만 정리해봅니다. 매번 신규로 CI/CD 환경을 구축하는 게 쉽지 않네요. 1. Github 토큰 발급받기 1.1 사용자 정보 메뉴 중 Settings 항목 선택 1.2 환경설정(Settings) 메뉴 중 Developer settings 항목 선택 - URL: https://github.com/settings/profile 1.3 개발자 설정(Developer settings) 메뉴 중 Personal access tokens 항목 선택 후 Generate new token 버튼 클릭 - URL: https://github.com/settings/apps 1.4 Generate token 버튼을 눌러 Github Acces..

Error - Failed to connect to repository : Error performing git command: git ls-remote with jenkins [내부링크]

앱 배포 환경 구축을 위해 젠킨스(Jenkins)를 처음부터 설치해서 사용하다 다음과 같은 상황을 문제를 확인했습니다. "Failed to connect to repository : Error performing git command: git ls-remote" Failed to connect to repository 문제 해결 방법 Github의 repository를 연결하려다 발생한 문제인데, 그냥 Git이 설치되지 않아 생긴 문제였네요.. Jenkins가 운영되는 서버에 "yum install git" 명령어를 사용해 git을 설치합니다. git을 설치하는 명령어는 운영체제마다 다르니 운영 환경을 확인 후 알맞는 설치 스크립트를 작성해서 사용해주세요.

Error - Invocation failed Unexpected end of file from server [내부링크]

정확한 어떤 이유인지는 알수 없지만 갑자기 Git push를 할 때 Invocation failed Unexpected end of file from server 메시지가 뜨면서 commit한 내용을 올릴 수 없었습니다. Invocation failed Unexpected end of file from server 문제 해결 방법 이 문제를 해결하는 방법은 stack overflow를 참고하였습니다. Invocation failed Unexpected end of file from server 에러가 발생하지 않게 하는 방법은 Git의 Use credential helper 옵션을 활성화 시키면 문제가 해결됩니다. 동일한 문제로 Git push를 하지 못하는 경우 위의 이미지 내용대로 git의 Use c..

Error - [08S01] Communications link failure [내부링크]

얼마 전까지 문제없이 사용하던 DataGrip에서 갑자기 Communications link failure 메시지가 출력되면서 데이터 베이스에 접근하지 못하는 문제가 발생했습니다. Communications link failure 문제 해결 방법 이 문제를 해결하는 방법을 찾아보니 몇 가지가 있었는데 문제를 유일하게 해결했던 방법은 데이터베이스에 연결할 때 사용하는 드라이버 옵션을 바꾸는 방법이었습니다. YouTrack에 동일한 이슈와 해결 방법이 있어 문제를 해결 할 수 있었습니다. 기존에 사용하는 드라이버를 MySQL에서 > Amazon Aurora MySQL로 변경하면 Communications link failure 문제를 해결할 수 있습니다. TLS 프로토콜 옵션을 수정하면 문제를 해결 할 수 ..

javascript - Axios 파일 업로드 기능 구현해보기 [내부링크]

오늘은 Axios를 사용해 파일 업로드 기능을 구현하는 방법에 대해 알아보겠습니다. 이전에 Axios 파일 다운로드 기능에 대한 글을 쓴 적이 있는데, 이번에는 그 후속 편으로 Axios로 파일을 업로드하는 방법을 코드로 확인해보겠습니다. Axios 파일 업로드 요청하기 axios({ headers: { "Content-Type": "multipart/form-data", }, url: "https://7942yongdae.tistory.com/file-upload", // 파일 업로드 요청 URL method: "POST", data: formData, }).then(...); Axios를 사용해서 파일을 업로드할 때 중요한 부분은 headers의 Content-Type, data입니다. 이 두 가지 ..

Kotlin - Enum 정의와 사용 방법 알아보기 [내부링크]

Enum은 Enumeration를 줄여서 사용하는 단어로 한국 말로는 열거형이라고 표현하는 단어입니다. 여기서 이야기하는 열거라는 단어는 `나열`되는 것들을 의미하는데, 프로그램에서는 특정한 특질이나 속성으로 분류해서 사용하는 값들을 나열할 때 쓰입니다. 간단히 말해 상수들을 나열해 놓은 것을 열거형(Enum)이라고 표현합니다. 열거(Enumeration) 개념 알아보기 일반적으로 프로그램을 개발할 때 상수(Constant)로 지정해서 사용하면 좋은 값들이 있습니다. 예를 들어 최대 값과 같이 값(리터럴) 자체가 의미를 가지고 있는 경우입니다. fun main() { val number = 10 validateNumber(number) if (number > 9) { // 사용하지 못하는 값을 전달 받은..

Kotlin - 함수와 변수 기초 배우기 [내부링크]

모든 프로그래밍이 배울 때 함수와 변수부터 시작하듯 코틀린을 배우는 방법도 첫 단추는 함수와 변수입니다. 코틀린으로 어떤 앱을 만들든 웹 서버를 만들든 함수와 변수는 가장 기초에 속하는 개념입니다. 오늘은 코틀린에서 정의된 함수와 변수의 기초 개념을 공부해보도록 하겠습니다. 앱을 만들어 보고 싶어 코틀린을 배우고 있는데 접한 지 얼마 되지 않아 많이 서투르고 어색하네요 Hello, world! 틀에 박힌 시작이기는 하지만 "Hello, world"를 출력하는 코드로 가볍게 코틀린을 알아보도록 하겠습니다. fun main(args: Array) { println("Hello, world") } 자바로 프로그래밍을 배우신 분이라면 뭔가 비슷한 형태의 코드라고 생각하실 수 도 있겠네요. 위에서 정의한 "Hel..

리뷰 - 아이패드 미니 6과 5 실물을 비교해보자 .feat 3달 사용기 [내부링크]

아이패드 미니 6을 구매해서 사용한 지 어느새 3개월이 지났네요. 막상 살 때는 고민을 했었는데 지금 보면 왜 굳이 미뤘나 싶을 정도로 편하게 사용하고 있습니다. 아쉬운 부분이 없지는 않지만 아이패드 미니 5에 비해 디스플레이의 공간감은 확실히 나아져서 좋습니다. 자 그럼 아이패드 미니 6과 아이패드 미니 5의 실물을 사진으로 확인해보겠습니다. 그리고 사용하면서 느낀 장단점들도요. 아이패드 미니 6과 아이패드 미니 5의 실물을 비교해보자 이번에 애플 공홈을 통해 구매한 아이패드 미니 6의 색상은 퍼플입니다. 스페이 그레이와 같은 어두운 톤이 아닌 밝은 톤의 색을 선택한다는 게 약간 고민이 되긴 했는데 분위기도 바꿔볼 겸 퍼플로 선택했습니다. 색감이 세련되어서 그런지 눈에 튀지 않고 고급스러워 보여서 좋아..

Nodejs - MacOS Node 버전 업데이트 하기 [내부링크]

의외로 nodejs는 배우기 전에 설치 혹은 버전 때문에 문제가 되는 경우가 많습니다. 이번에는 NPM을 사용해 Nodejs 버전을 업데이트하는 방법을 알아보겠습니다. requires Node 10 or higher. Please update your version of Node. 간혹 Nodejs의 버전이 맞지 않아서 프로젝트를 만들거나 실행할 때 문제가 발생하곤 합니다. 이런 문구와 말이죠. npm 명령어를 사용해서 nodejs 버전 올리기 이미 nodejs를 설치해서 사용하고 있다면 nodejs의 버전을 올리는 방법은 어렵지 않습니다. n을 설치해서 nodejs 버전을 관리하면 됩니다. n은 nvm과 같이 nodejs 버전을 관리할 수 있게 해주는 도구 중에 하나로 nodejs 버전을 단일 혹은 여..

DataGrip - 테이블 DDL을 코틀린 Data Class로 변환하는 스크립트 [내부링크]

DataGrip에는 데이터 베이스의 테이블 DDL 정보를 손쉽게 특정 언어로 변환하는 기능이 있습니다. 바로 DataGrip의 Generate Code인데요. 예를 들어 기존 사용하는 데이터 베이스를 JPA를 이용해 사용하려고 할 때 일일이 직접 테이블 정보를 확인해서 @Entity 클래스 코드를 만들어야 하는 번거로움 덜어낼 수 있습니다. DataGrip의 Generate Code가 기본으로 제공하는 Generate POJOs.groovy 스크립트는 테이블 DDL을 자바 클래스 코드로의 변환을 도와줍니다. 간단하게 사용할 수 있는 기능이지만 조금 더 상세한 사용방법을 원하신다면, 공식 사이트의 Generate Code 기능 사용 방법을 확인해주세요. 코틀린 Data Class 스크립트 추가 하기 fea..

블로그 - 조금 늦은 2021년 블로그 운영 결산기 [내부링크]

새해가 시작한 지 엊그제인 것 같은데 시간이 흘러 벌써 5월이 되었네요. 블로그를 시작한 지도 어느덧 1년이 지났어요. 처음으로 글을 올린 게 2021년 3월이었는데 지금은 1년이 지나 2년 차가 되었고 빠른 주기는 아니지만 여전히 꾸준하게 글을 올리고 있어요. 글을 쓰기 시작한 지 1년이 지나서 일까요? 어떻게 블로그가 변화했는지 그리고 어떤 이야기들을 했는지 확인해보고 싶은 마음이 생겨 이 글을 쓰게 되었습니다. 처음에 블로그를 운영할 때만 해도 여러 가지 주제를 탐문하고 많은 생각과 이야기들을 쓸 수 있을 거라고 생각했지만 지금의 결과를 보면 부족한 부분이 많아 내심 부끄럽기도 하네요. 자 그럼 조금은 늦은 감이 있지만 지나간 2021년을 되돌아보며 어떤 일들이 일어나고 변화했는지 살펴보겠습니다. ..

Android - findViewById() 대신 데이터 바인딩을 사용해보자 [내부링크]

안드로이드 앱을 개발할 때 일반적으로 사용하는 기능 중 하나가 바로 findViewById()입니다. 특정 TextView의 문자 값을 변경하거나 이벤트를 처리할 때 등등 화면의 요소를 findViewById()로 찾아 제어합니다. val textView: TextView = findViewById(R.id.text_main) 이런 코드로 말이죠. 하나의 TextView 정도야 예제 코드처럼 쉽게 쓸 수 있지만 화면에서 관리해야 하는 요소가 늘어날수록 findViewById()는 부담스러울 정도로 늘어납니다. 이러한 부분을 조금 더 간결한 코드로 손쉽게 해결할 수 있는 방법이 데이터 바인딩입니다. 데이터 바인딩은 데이터와 화면을 연결 짓는 기술로 안드로이드 앱뿐만 아니라 화면과 관련된 기술들(WinFor..

Java - 객체를 문자로 표현하는 toString()을 잘 사용하는 방법 [내부링크]

자바에서는 객체를 문자화 시킬 때 toString()을 사용합니다. 대부분 사람들이 처음 toString()을 배울 때 단순한 출력문 함께 배우기 때문에 toString()을 인스턴스를 표현하는 @어쩌고의 문자 값 정도로 인지하지만 알고 보면 재미있는 녀석이 toString()입니다. toString()은 객체의 단순하게 보면 문자 값이지만, 객체의 입장에서 본다면 인스턴스화 된 자신을 문자로 표현할 수 있는 Object의 유산이에요. toString()을 잘 사용한다면 조금 더 재미있게 객체의 관점에서 객체를 바라볼 수 있어요. Object가 물려준 유산이 toString() 외에도 여러 가지가 있지만 오늘은 toString()에 대해서 이야기해보겠습니다. toString()은 어디에 사용될까? - 내..

Java - 의존성 주입(Dependency Injection)이란? [내부링크]

의존성 주입(Dependency Injection)은 객체의 생성과 사용 관심사를 분리하는 프로그래밍 설계 방식입니다. 자바 같은 경우 추상화 도구(인터페이스, 추상 클래스)를 사용하면 손쉽게 의존성 주입하는 코드를 만들 수 있습니다. 오늘은 의존성 주입(DI)이라는 단어가 주는 부담을 덜어낼 수 있도록 이 글을 작성하게 되었습니다. 아직까지 의존성 주입이라는 개념이 대하기 어려우셨다면 뒤에서 이야기할 이야기를 통해 조금이라도 의존성 주입을 쉽게 이해하실 수 있으면 좋겠습니다. 아 그리고 의존성 역전(IOC)은 의존성 주입과 다른 개념이니 의존성 주입과 의존성 역전을 혼동하지 말아 주세요. 분명 둘은 다른 개념입니다. 의존성 정의부터 알아보자 의존성이라는 단어의 사전적인 정의는 "다른 것에 의지하여 생활..

Android - 앱의 기초 개념인 4가지 컴포넌트와 인텐트 알아보기 [내부링크]

안드로이드 앱을 개발하기 위해서는 기초적으로 알야 할 개념이 다섯 가지가 있습니다. 바로 액티비티(Activity), 서비스(Service), 브로드캐스트 리시버(Broardcast receiver), 콘텐츠 프로바이더(Content provider)라고 불리는 4개의 컴포넌트, 그리고 메시지를 칭하는 인텐트(Intent)입니다. 아직은 공부하는 중이라 코드 수준으로 명확하게 설명하기는 어렵지만 개념적으로는 한번 정리해두는 게 좋을 것 같아 이렇게 정리해봅니다. 안드로이드 앱에서 이야기하는 컴포넌트라는 것은 우리가 집을 만든다고 하면 필요한 시멘트나 골조나 벽돌 같은 개념입니다. 제대로 사용할 줄 몰라도 어떻게든 사용은 가능하지만 조금 더 정확히 알고 사용방법을 분명히 안다면, 더 멋진 앱을 만들 수 있..

Android - 안드로이드 스튜디오로 빈 프로젝트 만들고 실행하기 [내부링크]

최근 앱을 만들어보고 싶어 져서 코틀린과 안드로이드 앱 공부를 시작했습니다. 아직 잘 모르는 부분이 많아 안드로이드 앱을 만드는 내용을 기초 단계에서부터 차근 차근히 조금씩 정리를 해보려고 합니다. 이번에는 그 시작 단계로 안드로이드 스튜디오를 사용해 빈 프로젝트를 만들고 실행하는 과정을 알아보겠습니다. 안드로이드 스튜디오를 설치하는 과정은 따로 정리하지 않았습니다. 필요하신 분은 공식 홈페이지에서 확인해주세요. 안드로이드 앱 빈 프로젝트 생성하기 안드로이드 스튜디오를 설치하고 실행하면 위와 같은 화면이 보입니다. New Project는 신규 안드로이드 앱 프로젝트를 생성할 수 있고, Open은 컴퓨터에 저장되어 있는 기존에 사용하던 앱 프로젝트를 열 수 있습니다. Get from VCS는 Git, SV..

javascript - Axios 파일 다운로드 기능 구현해보기 [내부링크]

이번에는 Axios 파일 다운로드 기능을 만들어보려고 합니다. 개발을 하다 보면 자주 구현하는 기능 중에 하나가 파일 다운로드입니다. 간단한 내용이지만 정리를 해두면 좋을 것 같아 매번 정리해둔다고 하면서 한 적이 없어 이제 정리해보려고 합니다. 글의 제목은 Axios 파일 다운로드 기능 구현이지만 실제로 구현할 코드는 Axios 뿐만 아니라 fetch나 jQuery.ajax에서도 사용할 수 있는 내용입니다. Axios 파일 다운로드 요청하기 axios({ url: 'https://7942yongdae.tistory.com/file-download', // 파일 다운로드 요청 URL method: 'GET', // 혹은 'POST' responseType: 'blob', // 응답 데이터 타입 정의 })..

Javascript - 소수점 자릿수를 반올림, 올림, 내림을 하는 방법 [내부링크]

자바스크립트에서 소수점을 내리거나 올리거나 혹은 반올림하는 방법을 알고 계신가요? 소수점 계산을 해야 하는 경우가 별로 없다 보니 Math 객체에 대해 크게 관심을 가져 본 적이 없는데요. 이번에 반올림(round), 올림(ceil), 내림(floor)을 사용해 소수점 단위까지 검증이 필요한 요구사항을 구현하게 되어 Math에 대해 알아보려고 합니다. 아 그리고 소수점 처리에서 빠질 수 없는 Number 객체 toFixed()도 같이 공부해보겠습니다. 소수점 반올림 - Math.round() 반올림은 근삿값을 구할 때 4 이하의 수는 버리고 5 이상의 수는 윗자리에 1을 더하는 방법입니다. 예를 들어 0.4를 반올림하면 1, 0.5 반올림하면 1이 됩니다. 자바스크립트에서 소수점 반올림은 Math.ro..

무료/유료로 배우는 프로그래밍 강의 사이트 추천 [내부링크]

괜찮은 프로그래밍 강의 사이트는 어느 곳이 있을까요? 요즘은 개발자 직군의 인기가 높다 보니 자연스레 프로그래밍을 주제로 한 사이트들이 늘어나고 있는데요. 오늘은 이 중에서 개인적으로 사용하면서 좋았던 프로그래밍 강의 사이트들을 알려드리려고 글을 쓰게 되었습니다. IT라는 분야가 일상이 되면서 프로그래밍 혹은 코딩이라는 단어도 자연스럽게 일상에 녹아들게 된 시대인만큼 가벼운 마음으로 코딩을 배워보는 것도 좋을 것 같네요. 인프런 (유료/무료) 인프런은 프로그래밍 강의 영상 중 질이 좋다고 생각되는 강의들을 다수 가지고 있는 프로그래밍 강의 사이트입니다. 최근 많은 기능들이 추가되면서 약간은 복잡해지고 있다고 생각하지만 여전히 잘 사용하고 있는 프로그래밍 강의 사이트입니다. 강의들은 유료/무료로 수강할 수..

블로그 글로 자바스크립트 책 만들어보기 [내부링크]

개발자로 살면서 하고 싶은 몇 가지 버킷리스트가 있다. 바로 프로그래밍 개발 책을 출판해보는 것이다. 어떻게 보면 막연하게 느껴지기는 하지만 아무것도 모르면서 국비지원을 시작으로 개발자가 되었던 것처럼 1년 넘게 이 블로그를 운영하고 있는 것처럼 시작조차 하지 못하면 앞으로도 하지 못할 거라는 생각이 들어 조금은 용기를 내어 이 글을 시작으로 프로그래밍 서적 출판을 목표로 블로그 글을 써볼까 한다. 글의 주제 - 자바스크립트 프로그래밍 일단 글의 주제는 자바스크립트로 프로그래밍 세계에 입문하는 사람들을 대상으로 하려고 한다. 최근 코틀린과 안드로이드에 흥미가 생겨 안드로이드를 글의 재료로 써볼까도 생각해보았지만 아직은 누군가에게 이야기할 만큼 알지 못하기에 어느 정도는 알고 있다고 생각하는 자바스크립트를..

Javascript - Array groupBy() 함수 사용법 [내부링크]

이번에는 Javascript의 Array가 가진 groupBy() 함수의 정의와 사용 방법에 대해 알아보겠습니다. groupBy() 함수는 알아두면 컬렉션(Collection)을 다룰 때 유용하게 쓸 수 있기 때문에 기본적인 사용 방법뿐만 아니라 알아두면 활용하는 부분도 예제 코드로 확인해보겠습니다. 그리고 자바의 스트림 API에서도 groupBy() 기능을 사용할 수 있어요. groupBy() 정의 Array.prototype.groupBy ( callbackfn[, thisArg] ) MDN에서 groupBy() 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다고 정의합니다. 조금 말이 어렵다고 생각되는데요. groupBy() 함수가 주로 사용되는 용..

아이폰 배터리 자가 교체를 하는게 좋을까? [내부링크]

애플의 제품들을 사용하면서 느낀 점이 있다면 구매 비용도 높은 편이지만 유지 비용도 다른 전자 제품에 비해 높은 편입니다. 그래서인지 조금이라도 비용을 줄이기 위해 배터리 자가 교체를 고민하게 됩니다. 아이폰 배터리로 검색을 하면 배터리 자가 교체나 배터리 셀프 교체가 연관 검색어로 나오는 것을 보면 저뿐만 아니라 아이폰이나 기타 애플 제품들을 쓰는 사람들은 한 번씩 고민해보는 부분이라는 것을 알 수 있습니다. 금전적인 여유가 있다면 애플케어를 가입하는 것도 하나의 방법이 될 수 있습니다. 아이폰 배터리를 교체하는 이유 배터리는 소모품에 해당하는 전자 제품 부품입니다. 따라서 사용 시간이 지남에 따라 노후화되고, 새것으로 교체해야 하는 부품입니다. 사람마다 사용 빈도가 달라 차이가 있지만 배터리의 수명은..

Javascript - JSON 객체를 확인하는 stringify() 사용 방법을 알아보자 [내부링크]

자바스크립트에서 JSON은 JavaScript Object Notation의 줄임말로 문자 기반의 표준 포맷을 말합니다. 그리고 자바스크립트에서 데이터를 다룰 때는 주로 JSON 형식을 취하기 때문에 JSON의 사용하는 방법에 대해 알아두는 것이 좋습니다. 특히 JSON을 다루기 위해 내장되어 있는 JSON.stringify(), JSON.parse() 사용 방법을 알아두면 JSON 객체를 다루기도 쉽고 개발의 생산성, 효율성도 좋아집니다. JSON은 무엇일까? JSON을 잘 사용하는 방법을 알아보기 전에 먼저 JSON에 대한 정의를 알아보겠습니다. JSON을 잘 사용하기 위해서는 JSON의 정의를 아는 것도 중요합니다. 서문에서는 JSON(JavaScript Object Notation)을 문자 기반의..

jQuery - click()이 동작하지 않으면 on()을 사용해보자 [내부링크]

jQuery 라이브러리를 사용하게 되면 많이 이용하는 메서드가 바로 click()이나 change() 같은 이벤트를 다룰 때 사용하는 이벤트 핸들러 메서드입니다. 그런데 click(), change() 같은 이벤트 핸들러가 잘 동작하다가 특정 상황에서 동작하지 않는지 이유를 알고 계신가요? 그리고 click()나 change()가 동작하지 않을 때 on()을 사용하면 문제가 해결되는 걸까요? 오늘은 on()과 click()의 차이 그리고 그 차이점을 통해서 click() 대신 on()을 써야 하는지 알아보겠습니다. click()이 동작하지 않으면 on()을 쓰자 click()와 on()의 차이점을 알아보기 전에 click() 이벤트 핸들러가 정상적으로 동작하지 않는 경우 on()을 사용해서 이벤트를 처리..

Javascript - 자주 사용하는 정규 표현식을 예제 코드로 알아보자 [내부링크]

프로그래밍에서 정규 표현식을 잘 사용하면 보다 간단하게 문제들을 해결할 수 있습니다. 대표적으로는 공백, 숫자, 한글과 같은 문자 유효성 검증을 이야기할 수 있겠네요. 정규 표현식(regular expression)을 사용하면 if문을 사용하지 않는 검증을 만들 수 있을 뿐만 아니라 코드의 가독성도 높일 수 있고 문자 탐색에서도 이점을 가질 수가 있습니다. 오늘은 자바스크립트를 이용해 유효성을 검증하는 정규표현식에 대해서 알아보겠습니다. 유효성 검증의 경우 대표적으로 사용하는 사례는 공백 확인, 영문자 혹은 한글 확인과 같이 사용자의 입력 값을 확인하는 경우입니다. 그럼 예제 코드를 통해서 정규 표현식에 대해 알아보겠습니다. 이 글에 예제 코드로 작성한 유효성 검증 코드는 공백 확인, 숫자 확인, 영문자..

[리뷰] 애플 공식 홈페이지에서 구매한 아이패드 미니 6 구매기 [내부링크]

애플 공식 홈페이지에서 2021년 12월 마지막 날에 구매한 아이패드 미니 6을 2달가량 기다려 일주일 전쯤 받아 볼 수 있었는데요. 오늘은 아이패드 미니 6 구매 과정과 간단하게 느낀 점을 글로 써볼까 합니다. 주문 후 2달을 기다려서 받은 아이패드 미니 6 온라인 쇼핑몰을 통해 구매하면 더 빠르게 배송을 받아 볼 수 있지만 공식 홈페이지에서 구매하면 혹시나 모를 문제가 발생한 경우 환불이 쉽기 때문에 공식 홈페이지에서 아이패드 미니 6을 구매하였습니다. 이전에도 아이폰을 구매했을 때 초기 불량이 있었는데 대리점이나 통신사를 통한 교환이 쉽지 않아 애플 공식 홈페이지를 이용했는데 쉽고 간편하게 제품을 환불하고 구매할 수 있었습니다. 지금은 보편화된 알림 서비스이기는 하지만 애플 공식 홈페이지에서 제품을..

Spring Security - MySql Password()을PasswordEncoder로 구현하는 방법 [내부링크]

스프링 시큐리티(Spring Security)를 사용할 때 적용되는 패스워드 암호화 부분은 PasswordEncoder를 이용하면 자유롭게 커스터마이징이 가능합니다. 예를 들어 MySQL의 암호화 기능인 Password()도 PasswordEncoder를 구현해서 사용하면 스프링 시큐리티에 적용할 수 있습니다. MySQL의 암호화 기능 Password() 스프링 시큐리티의 PasswordEncoder를 통해 구현하기 위해 먼저 MySQL의 Password()가 정의된 내용을 확인해보겠습니다. /* Generate binary hash from raw text string Used for Pre-4.1 password handling SYNOPSIS hash_password() result OUT stor..

나는 왜 글을 잘쓰지 못할까? [내부링크]

주위에 간혹 문서를 잘 쓰시는 분들을 보면 대단하다는 생각이 든다. 단순한 매뉴얼이나 릴리즈 노트라면 모를까 몇 장 혹은 몇 십장에 달하는 보고서나 문서를 누가 봐도 논리 정연하게 써내는 사람들을 보면 진심으로 존경심이 피어난다. 단연 이 블로그를 운영하게 된 까닭에는 그런 사람들이 보여준 멋진 글쓰기도 한몫을 했다. 언제쯤이면 그런 사람들처럼 설득력 있는 문장을 만들 수 있게 될지는 잘 모르지만 조금은 나아지기를 바라며 왜 나는 글쓰기가 어려웠을까라는 생각이 들어 글로 정리해볼까 한다. 설득보다는 결론만 말하는 글쓰기 개발자들은 다 그렇다고 할 수 없지만 기본적으로 프로그래밍이 익숙한 사람들은 글을 쓸 때 문장에 수식을 붙이기보다는 핵심만 간단명료하게 적게 된다. 왜냐하면 프로그래밍을 하는 방식이 익숙..

jQuery - CDN을 이용해서 제이쿼리를 사용해볼까? [내부링크]

jQuery를 사용할 수 있는 방법은 무엇이 있을까요? jQuery를 사용하기 위해서는 jQuery 모듈을 우리가 사용하는 프로젝트에 포함시켜야 합니다. jQuery뿐만 아니라 어떤 자바스크립트 라이브러리가 되었던 우리가 명시적으로 사용한다는 스크립트를 추가해야 사용이 가능해집니다. CDN 방식을 이용해서 jQuery를 사용하기 CDN(Content Delivery Network)은 콘텐츠 전송 네트워크라는 의미로 간단하게 설명하면 네트워크(인터넷)를 통해서 콘텐츠(jQuery 라이브러리 파일)를 배포하는 방식을 말해요. 즉 사용하는 사람 입장에서 쉽게 이용할 수 있도록 만들어진 방식이에요. jQuery의 CDN 주소는 공식 홈페이지를 통해서 확인할 수 있습니다. CDN 방식으로 배포되는 타입은 unco..

Git - 삭제한 branch 혹은 commit를 복구하는 방법 [내부링크]

이번에는 삭제한 branch나 commit를 복구하는 방법에 대해서 알아보겠습니다. 개발을 하다 보면 생각지 못한 실수로 branch나 commit를 삭제하는 경우가 있습니다. 이런 경우 생각보다 어렵지 않은 방법으로 삭제한 기록을 되살릴 수 있는 방법이 있는데요. 바로 git이 제공하는 reflog를 사용하는 것입니다. reflog로 삭제한 기록을 복구해보자. reflog는 참조(ref)에 대한 이력을 볼 수 있는 방법이에요. git에서 사용되는 command는 참조를 포함해서 기록되고 있기 때문에 reflog를 이용하면 git을 이용해 작업한 모든 이력을 확인할 수 있어요. 1. git reflog를 사용해서 시점을 찾자. git reflog // 추가 명령어를 이용하게 세밀하게 기록을 찾는 방법 g..

Java - Stream API는 함수형 프로그래밍을 할 수 있게 해준다 [내부링크]

자바 8 버전에서 새롭게 추가된 스트림(Stream) API는 자바가 함수형 프로그래밍을 지원한다는 사실을 잘 보여주는 패키지입니다. 여기서 다루지는 않지만 자바 8 버전부터 도입된 람다식(lambda expressions)을 통해 자바는 함수형 프로그래밍을 일부 지원하게 되었고 그 활용의 대표적인 예가 바로 스트림 API입니다. 공식 홈페이지의 말을 인용해 스트림(Stream) API에 대해 설명하면 Collection의 요소를 Stream을 통해 함수형 연산을 지원하는 패키지입니다. 아 그리고 여기서 한 가지 알아 둘 점은 지금 이야기하고 있는 스트림은 데이터 입출력(I/O)을 다룰 때 사용하는 그 스트림이 아니에요. 자바에서 사용하는 List, Map, Set과 같은 자료 구조의 집합인 컬렉션(Co..

Javascript - 만들면서 배우는 map 함수의 정의와 사용 방법 [내부링크]

이번 글에서는 자바스크립트의 map() 함수를 만들어보겠습니다. 이전에 filter()를 구현했던 것과 같이 map()을 직접 정의해보면서 map() 함수에 대해 알아가 보도록 하겠습니다. map() 함수도 filter() 함수처럼 구현하는 내용이 어렵지 않기 때문에 글 내용을 따라 코드를 작성해보시기를 추천드립니다. map()를 사용하는 이유 map() 함수는 새로운 자료구조 혹은 객체를 정의할 때 사용하는 함수입니다. 객체보다는 주로 새로운 자료구조를 필요로 하는 경우에 많이 사용한다는 점을 알아주세요. 예를 들어 성과 이름으로 나누어진 사용자 데이터가 주어졌을 때 성과 이름을 합친 사용자 데이터 사용해야 하는 상황이 발생한 경우에 map()을 사용할 수 있습니다. map()은 주어진 값을 새로운 값..

Javascript - 고차 함수(Higher-Order Function)란 무엇일까? [내부링크]

고차 함수의 정의는 함수를 매개변수로 사용하거나 함수를 반환하는 함수입니다. 문장으로만 보면 어렵게 느껴질 수 있는 개념이지만 함수형 프로그래밍에서는 필수적으로 알아야 하는 개념이기도 합니다. 고차 함수(HOF)라는 용어가 생소하고 개념도 낯설어서 어렵다고 느껴질 뿐 조금만 익숙해지면 함수형 프로그래밍을 보다 빛나게 해주는 멋진 기술입니다. 예를 들어 자바스크립트의 filter(), map(), reduce() 함수도 고차 함수 개념을 활용해 만들어져 있습니다. filter()를 구현하는 방법에 대해서도 다룬 적이 있으니 흥미가 있으시다면 한 번 확인해보셔도 좋습니다. 고차 함수와 비슷한 개념으로는 고차 컴포넌트(HOC: Higher-Order Component)도 있습니다. 고차 컴포넌트가 주로 리엑트..

Javascript - 만들면서 배우는 filter 함수의 정의와 사용 방법 [내부링크]

이번 글에서는 자바스크립트의 filter() 함수를 직접 만들어보겠습니다. 가벼운 내용이지만 자바스크립트가 가진 filter() 함수를 구현해본다면 이전보다 filter() 함수에 대해 잘 이해할 수 있을 뿐만 아니라 함수형 프로그래밍이 가진 멋진 장점을 알 수 있습니다. filter()를 사용하는 이유 filter() 함수는 의미 그대로 "거르다"를 하기 위해 정의된 함수입니다. 예를 들어 특정 사용자 데이터(이름, 나이)가 주어지고 그중에서 특정 조건을 만족하는 대상들을 찾는 경우에 filter()를 사용할 수 있습니다. 선언적인 프로그래밍 방식으로 이 문제를 해결한다면 for문 혹은 while문을 사용해서 다음과 같은 방식으로 코드를 작성할 수 있습니다. const users = [ { name: ..

Javascript - 객체지향 프로그래밍과 함수형 프로그래밍의 차이 [내부링크]

객체지향 프로그래밍과 함수형 프로그래밍의 차이가 무엇이고 어떤 프로그래밍이 좋은 방법인 걸까요. 객체지향 프로그래밍이 좋다? 함수형이 좋다? 재미있게도 최근의 프로그래밍 언어들을 보면 함수형 프로그래밍은 객체지향 프로그래밍의 패러다임을 따라가고 객체지향 프로그래밍은 함수형 프로그래밍 패러다임을 따라갑니다. 프로그래밍 방식이 저마다의 장단점을 지니고 있기 때문에 이런 현상이 일어난다고 생각합니다. 결국 어떤 프로그래밍이 좋다고 단정 짓기는 어렵습니다. 객체지향 프로그래밍과 함수형 프로그래밍 사이에서 어떤 프로그래밍 방식이 좋다는 결론을 내리지 못해도 적어도 두 프로그래밍 방식 간의 차이는 알고 있는 게 좋습니다. 자바스크립트를 사용하면 손쉽게 객체지향이나 함수형 프로그래밍을 할 수 있습니다. 오늘은 간단한..

매개변수(Parameter)와 인수(Argument)의 차이점은 무엇일까? [내부링크]

매개변수와 인수는 프로그래밍에서 자주 사용되는 용어입니다. 영어로는 Parameter(매개변수), Argument(인수)로 정의되고 쓰이는데요. 프로그래밍을 할 때 자주 쓰이는 용어인 만큼 명확하게 구분하고 인지하는 게 중요합니다. 오늘은 간단한 내용이지만 혼란을 야기하는 용어인 매개변수(Parameter)와 인수(Argument)에 대해 알아보겠습니다. 매개변수와 인수의 정의로 알아보는 차이점 매개변수와 인수의 차이점은 쓰임의 차이에 있습니다. 함수를 정의할 때 사용되는 변수를 매개변수, 실제로 함수가 호출될 때 넘기는 변수값을 인수라고 설명할 수 있습니다. 그럼 오랜만에 글보다는 그림을 통해 매개변수와 인수를 알아보도록 하겠습니다. Oracle 공식 홈페이지에서는 매개변수와 인수를 다음과 같이 정의한..

애플 2022년 신학기 맥북, 아이패드 교육 할인 이벤트 [내부링크]

애플에서 2022년도 신학기 할인 이벤트가 시작되었습니다. 애플은 매년 신학기를 맞이해 교육 할인 프로모션 행사를 진행합니다. 애플의 교육 할인은 통해 구매하면 정가의 약 6%를 할인받아서 구매할 수 있는데요. 신학기 이벤트 기간에는 애플 케어 20% 할인과 더불어 에어팟 2세대를 증정품으로 제공됩니다. 혹시 교육 할인 대상이 되시는 분 중에 애플 제품 구매를 고려하시는 분이 계시다면 애플 신학기 프로모션 기간에 구매하시는 것을 추천드립니다. 2022년 애플 신학기 이벤트는 2022년 1월 6일부터 3월 7일까지 진행됩니다. 애플 2022년 신학기 교육 할인 혜택 프로모션 제품 2022년 애플에서 진행하는 신학기 할인 이벤트는 상시 진행하는 교육 할인과 애플 케어 20% 할인에 추가로 에어팟 2세대를 증..

2021년 한 해 티스토리 블로그를 운영하면서 느낀 점 [내부링크]

티스토리 블로그를 운영한 기간을 계산해보니 오늘을 기준으로 286일이네요. 첫 글을 작성한 게 엊그제 같은데 어느새 9개월이 지났네요. 처음에는 호기롭게 1일 1포스팅 같은 것도 해보고 주간 회고록 같은 것도 써보았는데 지금까지는 유지하지 못한 게 매우 아쉽네요. 아직은 블로그를 운영한 게 1년도 지나지 않았지만, 저에게 있어서 짧지만은 않은 그리고 재미있는 경험을 할 수 있는 시간들이 되었던 것 같아요. 오늘은 2021년 한 해 동안 블로그를 운영하면서 느꼈던 점을 정리해보려고 합니다. 정리할 수 있는 머릿속 이야기 글을 쓰기 위해서는 글의 주재 즉 재료가 필요한데요. 이 재료는 주로 일상과 밀접하게 연관되어 있습니다. 알고 있지 못한 사실들을 글로 쓸 수 없기 때문이죠. 그렇다 보니 글의 주제는 자..

Javascript - 타입을 판별 할 수 있는 typeof 연산자 사용법 [내부링크]

자바스크립트에서 typeof란 판별하려고 하는 대상의 값이 기본 타입인지 아니면 함수인지 혹은 객체인지 구체적으로 값을 식별하는 연산자입니다. 이전에도 typeof 연산자에 대해 이야기를 한 적이 있는데요. 오늘은 이전 내용을 조금 더 보충하기 위해 이 글을 작성하였습니다. 그림으로 보는 typeof 연산자 - 타입 연산자 typeof를 이용해서 판별할 수 있는 값의 타입은 숫자, 참 혹은 거짓, 문자열, 함수, 객체입니다. typeof 연산자로는 null을 구분할 수 없기 때문에 데이터의 타입을 식별하기 위해서는 먼저 "==" 연산자를 이용하는 게 좋습니다. 그런 이유로 앞서 정의한 순서도에서도 값을 구분하기 전에 식별하는 값의 null 여부를 판별합니다. 값이 null도 아니고 undefined도 아..

jQuery - 데이터를 설정하는 data() 원리와 사용 방법을 알아보자 [내부링크]

jQuery에서 제공하는 data()는 DB(Database)와 같은 데이터 저장소 역할을 합니다. data()가 데이터 저장소와 같은 역할을 한다면 화면을 개발할 때 무슨 필요가 있냐고 생각할 수 있지만, 화면에서 특정 기능이 동작하기 데이터가 필요한 경우 매번 서버와 통신하는 것은 불필요합니다. 특히 불필요하게 서버와의 통신이 빈번하게 일어나면 서버에 과부하를 주는 요소가 되기 때문에 어느 정도의 데이터는 화면에서 관리하고 사용하는 게 화면을 개발할 때 편리합니다. 그럼 오늘은 jQuery의 data()에 대해 학습해보도록 하겠습니다. data()는 어떤 원리로 동작하는 걸까? jQuery의 data()는 앞서 이야기드렸듯이 데이터를 설정하는 기능입니다. 그런데 한 가지 의문스러운 부분은 DB도 아니..

Javascript - 실시간으로 위치를 확인하는 Geolocation의 사용 방법을 알아보자 [내부링크]

자바스크립트를 통해 사용자의 위치 정보를 알아내는 방법은 Geolocation를 사용하는 것입니다. Geolocation API는 사용자의 현재 위치를 가져오는 API로 주로 사용자 위치를 지도에 표시할 때 사용하거나 사용자 위치 기반의 서비스를 제공하는 경우에 사용됩니다. 또한 사용자의 위치 데이터는 개인 정보와 관련되어 있기 때문에 사용자의 동의 없이는 사용할 수가 없습니다. 이번 글에서는 Geolocation을 이용해서 사용자의 위치를 일회성 혹은 실시간으로 확인하는 방법에 대해 알아보도록 하겠습니다. 사용자의 위치를 확인하는 방법 geolocation를 이용해 사용자의 위치를 확인하는 방법은 간단합니다. getCurrentPosition()을 이용해 성공, 실패 콜백 함수를 등록하면 됩니다. 사용..

Javascript - 스크립트 코드를 실행시키는 eval() 사용 방법을 알아보자 [내부링크]

자바스크립트의 eval() 함수는 문자열로 이루어진 스크립트 코드를 실행하는 함수입니다. 그렇기 때문에 eval()을 잘 활용하면 동적으로 Javascript 실행문을 만들어서 실행할 수도 있지만, 보안에 취약하다는 문제점도 있는데요. 오늘은 eval()의 사용방법을 통해 어떤 점이 좋고 나쁜지 알아보도록 하겠습니다. 문자를 실행시키는 eval() console.log('2 + 2'); // output: '2 + 2' 일반적으로 함수의 매개변수로 문자 값을 사용하면 문자 리터럴로 인식되고 있는 리터럴로 사용됩니다. 위의 예제처럼 말이죠. 하지만 eval()을 사용하면 재미있는 결과를 만들어 낼 수 있습니다. console.log(eval('2 + 2')); // output: 4 eval()은 매개변수..

웹 프로그래밍 - RESTful한 HTTP 요청 메서드와 HTTP 응답 상태 코드 [내부링크]

HTTP 요청 메서드와 HTTP 응답 코드를 잘 알고 사용한다면 우리는 보다 쉽게 RESTful 하게 HTTP 프로토콜을 사용할 수 있습니다. 뿐만 아니라 HTTP 프로토콜은 REST(Representational State Transfer) 아키텍처 위에서 더 큰 빛을 발하는 통신 규약입니다. 하지만 생각보다 API를 REST 하게 설계하고 사용하는 것은 말처럼 그리 간단치 않습니다. HTTP 요청 메서드 먼저 알아볼 부분은 HTTP 요청 메서드입니다. HTTP 요청 메서드는 요청(Request)을 통해 기대하는 행동을 말합니다. 예를 들어 서버에서 처리를 하지 않는다고 해도 https://7942yongdae.tistory.com/이라는 URL에 GET 요청(Request)하면 조회를 하고 싶다는 의..

Java - 정적 팩토리 메서드의 정의와 네이밍 컨벤션 [내부링크]

정적 팩토리 메서드(static factory method)는 실무에서도 활용하기 쉬운 프로그래밍 기법입니다. 정확히는 GoF 디자인 패턴 중 팩토리 패턴에서 용어를 가져와 정의한 기법으로 "객체 생성 메서드"라고 정의할 수 있습니다. 프로그래밍을 처음 접한 사람은 조금은 어려울 수 있지만 간단하게라도 개념을 익히고 알아둔다면 프로그래밍을 하는데에 있어 도움이 되는 개념 중에 한 가지입니다. 정적 팩토리 메서드의 정의 정적 팩토리 메서드라는 용어가 생소하게 느껴질 수 있지만, 사실 그리 생소하지 않은 방법입니다. 자바에서 말하는 클래스의 인스턴스화, 즉 객체 생성을 흔히 사용하는 생성자가 아닌 정적(static) 메서드로 하는 것을 정적 팩토리 메서드라고 합니다. 글로만 설명하면 어려울 수 있으니 코드를..

에어팟3를 닮은 무선 이어폰 Lenovo LP40 사용 후기 [내부링크]

이번에 레노버 LP40 무선 이어폰을 구매하게 되었습니다. 가격이 저렴하면서 언제든 아무 때나 사용하고 망가져도 무관한 오픈형 무선 이어폰을 찾던 중에 찾은 제품입니다. 구매 당시 제조사의 인지도와 에어팟3을 닮은 외관은 꽤나 매력적이라고 생각되었지만, 실제로 제품을 받고 사용한 결과는 아쉬운 점이 많은 제품인 것 같습니다. 알리 익스프레스를 통해 구매한 Lenovo LP40 무선 이어폰 주문하고 일주일이 조금 지난 시점에 구매한 제품을 받아 볼 수 있었습니다. 알리 익스프레스를 통해 구매한 레노버 LP40의 가격은 12,000원 정도입니다. 제품 구성은 무선 이어폰 1쌍, 무선 이어폰 충전 본체, USB-C 케이블, 제품 설명서입니다. 한 달간 써보고 쓰는 레노버 LP40 사용 후기 레노버 LP40 무..

HTML - 참조값으로 접근하는 DOM의 노드 탐색 기능 [내부링크]

DOM(Docuemnt Object Model)은 document 내의 노드(Node) 탐색을 위해 몇 가지 편의 기능을 제공합니다. 오늘은 그중에서 다른 노드에 대 참조를 사용하는 부분에 대해 알아보려고 합니다. 여기서 중요한 점은 참조를 기반한 DOM의 탐색은 element 뿐만 아니라 text와 comment를 포함한다는 사실입니다. 오해하기 쉬운 DOM 노드 탐색의 사실과 불편하지 않게 노드 탐색을 할 수 있는 방법에 대해 알아보겠습니다. 불편한 DOM의 노드 탐색 결과 오해까지는 아니지만 처음 DOM의 노드 탐색을 사용하는 경우에 이상하게 여길 수 있는 부분이 있습니다. 바로 참조값을 이용한 접근인데요. 참조를 사용한 대표적으로는 parentNode, firstChild, lastChild, n..

진눈깨비소년 - 불안이 하는 일 [내부링크]

불안이 우릴 일 하게하지. 불안과 걱정, 쓸데없는 잡생각... 물론 일에 대한 확신과 희망 같은 것으로도 기차는 움직이지만, 그것만으로는 평지를 겨우 달릴 수 있을 뿐이야. 언덕을 만나면 그것만으로는 어렵지. 그때는 불안과 걱정 같은 걸 넣어서 함께 태워야지. 불안과 걱정, 우울이 한밤에 일어나 불을 켜게 만들고, 이불을 걷어차게 만들고, 기어이 책상 앞에 앉게 하지. 불안이 이미 끝낸 일을 다시 펼치게 만들고, 불안이 지나쳐버린 실수를 찾아내고, 불안과 긴장이 일이 끝날 때까지 쓰러지지 않게 등과 다리에 힘을 주지. 불안이야말로 일의 주적이자, 최고의 동맹이야. 진눈깨비소년 - 205화 불안이 하는 일 중에서

Javascript - 자바스크립트를 통해 배우는 순수 함수의 개념 [내부링크]

순수 함수(Pure Function)란 무엇일까요? 순수 함수에 대한 정의를 내리자면 동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수(코드 블록)입니다. 함수라면 당연한 거 아니냐 라고 생각하실 수 있지만 가장 기초적이면서 지키기 어려운 개발이 순수 함수를 만들고 그 함수들을 조합해 확장성, 재사용성을 높이는 코드를 작성하는 것입니다. 오늘은 자바스크립트를 통해 함수형 프로그래밍을 하는데에 있어 쉽지만 지키기는 순수 함수에 대해 이야기해볼까 합니다. 막상 내일 책상 앞에서는 일정에 쫓겨 잊겠지만, 적어도 오늘보다는 멋진 프로그래밍을 할 수 있기를 바라보면서 말이죠 순수 함수의 정의 - Pure Function 순수 함수의 정의는 서문에서 말한 것과 같이 동일한 매개변수가 주어지면 항상 동일한 결..

구글 애드센스 첫 수익 인증과 굿네이버스에 기부하기 [내부링크]

처음으로 구글 에드센스 수익이 100$를 넘어 드디어 통장으로 첫 수익이 입금되었습니다. 애드센스를 통해 수익을 얻고 이렇게 인증받는 글을 쓸 수 있다니 기분이 매우 좋네요. 블로그에 글을 처음 올린 게 2021년 3월 말쯤이었는데 지금이 11월이니 처음으로 애드센스 수익을 얻는데 약 7개월 정도가 걸렸습니다. 길다면 길고 짧다면 짧은 기간이네요. 그럼 이제 처음으로 애드센스 수익을 인증하는 글을 써볼까요? 구글 애드센스 인증 블로그를 운영하면서 돈을 벌어본 적이 없어 이번 기회를 통해 구글 애드센스가 광고 수익금을 지급하는 방법을 알 수 있었습니다. 간략하게 내용을 설명하면 애드센스 수익은 블로그의 광고를 통해 수익이 발생한 뒤 애드센스에 설정되어 있는 지급 기준 금액(기본: 100$) 이 초과하면 지..

iOS15 - 변경 된 아이폰 통화 연결음 해결 방법 feat. iOS 15.1 [내부링크]

아이폰의 iOS를 2021년 9월 21일에 정식으로 배포된 iOS 15 버전으로 업데이트하면서 생긴 이슈 중에 하나가 바로 통화 연결음 문제입니다. 버전 업데이트를 하면서 이전에 사용하던 통화 연결음 대신 한국 사람들에게는 익숙하지 않은 ETSI 표준의 통화 연결음으로 변경이 되어 생긴 이슈입니다. 처음 ETSI 표준 통화 연결음을 듣는 사람은 상대방과 전화가 연결된 것처럼 착각할 수 있는 소리입니다. 아이폰 통화 연결음을 복구하는 방법 다시 업데이트를 하자! 변경된 아이폰 통화 연결음을 이전으로 돌리는 방법은 바로 업데이트를 하는 것입니다. 정확히는 오늘(2021년 10월 26일) 배포된 iOS 15.1 버전으로 아이폰을 버전을 업데이트하면 이전에 사용하던 통화 연결음으로 변경이 됩니다. 이전의 통화 ..

Spring Boot - 스프링 부트에서 오류 페이지를 정의하고 사용하는 방법 [내부링크]

이번 글에서는 스프링 부트에서 제공하는 화이트라벨(Whitelabel) 대신 사용자가 정의한 오류 페이지를 사용하는 방법에 대해 이야기해볼까 합니다. 스프링 부트의 오류 처리 방법은 스프링에서 정의한 화이트라벨(Whitelabel)이 기본값으로 사용됩니다. 토이 프로젝트에서 사용하기는 문제가 없지만 멋진 웹 프로젝트를 만들기 위해서는 사용자 정의 에러 페이지를 쓰는 것이 좋습니다. Spring Boot에서 정의하는 오류 처리 방법 - feat. Whitelabel Spring Boot Features - Error Handling에서는 스프링 부트 오류 처리 방법에 대해 아래와 같이 정의합니다. By default, Spring Boot provides an /error mapping that handl..

macOS - 몬터레이(Monterey)를 지원하는 맥북 알아보기 [내부링크]

올해 애플이 세계 개발자 회의(WWDC 2021)에서 차세대 macOS인 몬터레이(Monterey)를 발표했습니다. 오랫동안 지원을 해주었던 2014년도 MacBook Pro 라인도 이번에는 지원 대상에서 제외되었습니다. 개인적으로 MacBook Pro 2014 mid를 사용하고 있어서 몬터레이(Monterey) 지원 대상에 포함되기를 조금은 기대했던 부분이 있는데 아쉽기도 하네요. 올해 새롭게 출시될 거라고 예상되고 있는 신형 맥북을 노려야 할 것 같습니다. 몬터레이(Monterey)를 지원하는 Mac 제품 목록 확인하기 애플 공식 홈페이지에서는 몬터레이(Monterey)가 지원하는 하드웨어 목록을 다음과 같이 공개했습니다. - iMac (2015년 후반 이후 모델) - Mac Pro (2013년 후반..

Javascript - Promise를 사용해서 Callback hell을 벗어나자 [내부링크]

Promise를 한 마디로 정의한다면 비동기 작업을 나타내는 객체입니다. 조금 더 풀어서 설명하면 비동기 작업을 쉽게 사용할 수 있도록 적의 된 객체입니다. Promise는 ES6(ES2015)에 표준으로 등록된 사양이고, 모던한 Javascript에서는 가진 역할과 책임이 더 중요해졌습니다. 그럼 이번 글에서는 콜백 지옥(Callback hell)을 벗어나는 방법을 통해 Promise가 가진 장점을 알아보도록 하겠습니다. Promise를 사용하는 방법 먼저 콜백 지옥을 벗어나는 방법을 알아보기 전에 Promise의 사용 방식을 알아보려고 합니다. Promise의 사용 방식은 생각보다 중요한데요. 그 이유는 바로 Promise는 비동기에 Callback을 전달하지 않고 첨부하기 때문입니다. 말로는 이해하..

Javascript - 배열의 요소를 다룰 때 index 대신 at()을 사용해보자 [내부링크]

일반적으로 Javascript의 배열의 요소에 접근하는 경우 index를 사용합니다. 예를 들면 array.length를 사용해서 말이죠. 하지만 at()라는 함수를 사용하면 조금 더 멋진 방법으로 배열(Array)의 요소를 다룰 수 있습니다. 이번에는 at()을 이용해 index 없이 배열을 사용하는 방법에 대해 알아보겠습니다. index를 이용한 배열 요소 접근 방법 배열의 요소에 접근하는 방법으로 주로 사용되는 방법은 바로 index를 사용하는 방법입니다. index는 위치를 기준으로 정의된 값입니다. 배열에서의 index는 배열 시작으로부터 몇 번째에 위치하느냐를 가리키는 위치 값입니다. 그렇기 때문에 배열의 첫 번째 요소를 가리키는 경우 index의 값으로 0을 사용합니다. const numbe..

Spring - 실무에서 사용하는 React + SpringBoot 프로젝트 만들기 with Gradle [내부링크]

이 글에서는 실무에서 사용할 수 있는 React + SpingBoot 프로젝트 구조를 만드는 과정을 알아보겠습니다. 이전에 Vue + SpringBoot 프로젝트를 만드는 방법을 알아보았는데요. 이 방법은 전문가처럼 React나 Vue 같은 Javascript 프레임워크를 사용할 수 있는 구조가 아니기 때문에 토이 프로젝트 혹은 간단한 팀 프로젝트에서 이용할 수 있는 구조이지 실무에서는 사용하기 부적합한 구조입니다. 이번 글에서는 프론트엔드 전문가처럼은 아니지만 그에 준하는 수준으로 React를 사용할 수 있는 SpringBoot 프로젝트를 만들어보겠습니다. 스프링 부트 프로젝트 만들기 먼저 프로젝트의 중심이 되는 스프링 부트 프로젝트를 만들어보겠습니다. Gradle이나 Maven과 같은 빌드 도구를 이..

Spring boot - vuejs를 사용하는 스프링 부트 프로젝트 만들기 [내부링크]

이번 글에서는 프론트엔드를 Vue.js를 Spring boot를 백엔드를 사용하는 간단한 프로젝트를 만들어보겠습니다. Spring boot만으로도 웹 개발의 생산성을 높일 수 있지만 프론트엔드에서 사용되는 자바스크립트 프레임워크인 Vue.js를 사용한다면 더 빠르고 쉽게 웹 개발을 할 수 있습니다. 물론 Vue.js 외에도 React.js나 Angular.js를 이용해도 좋습니다. 스프링 부트 프로젝트 만들기 먼저 백엔드에 해당하는 스프링 부트 프로젝트를 만들어보겠습니다. 빌드 도구를 이용할 수도 있지만 조금 더 손쉽게 만들어보기 위해 스프링 부트 프로젝트를 Spring Boot initializr를 이용해보겠습니다. 아직은 프로젝트를 구성하시는 게 어려우시다면 위에 설정한 내용을 참고해서 스프링 부트 ..

CSS - 스타일시트의 최신 버전은 왜 3이 끝일까? [ CSS Level 3 ] [내부링크]

왜 CSS(Cascading Style Sheets)의 버전은 Level 3가 끝일까요? 인터넷 검색을 해도 책을 통해 공부를 하려 해도 CSS3라는 단어는 잘 보이는데 CSS4라는 단어는 찾기가 어렵습니다. 이전에 간단하게 CSS의 정의에 대해 이야기를 한 적이 있는데요. 이번에는 CSS 버전에 대한 이야기를 해보려고 합니다. 앞으로도 CSS4는 존재하지 않는다. 사실 CSS3도 엄밀히 따지면 CSS 2.1에서 확장된 개념으로 CSS 2.1 이후에 공개(published) 된 것들을 이야기합니다. 정확히는 표준 사양을 정의하는 집단(CSSWG)에서 CSS 2.1을 수립하는 과정 중 단일로 정의하는 버전 체계는 좋지 않다는 것을 인지했습니다. CSS 2.1에 버전 3에 해당하는 모듈들을 일부 포함하게 되..

Gradle - dependencies로 배우는 프로젝트의 의존 관계 구성하기 (1) [내부링크]

그래들(Gradle) 빌드 시스템을 사용하면 외부 라이브러리 혹은 내부에서 사용하는 프로젝트나 라이브러리 모듈의 의존성을 쉽게 관리할 수 있습니다. 보다 자세한 Gradle의 의존성 관리 개념은 공식 사이트 가이드를 통해 익히시는 게 좋습니다. 이번 글에서는 Gradle을 사용하게 되면 필수적으로 알아야 하는 build.gradle 파일의 dependencies 설정에 대해 알아보겠습니다. 의존 유형을 알아야 한다. [ Dependency types ] build.gradle에서 사용되는 정의 중 가장 먼저 알아야 할 부분은 의존 유형(Dependency types)입니다. Gradle을 이용해 프로젝트에 의존성을 추가하려면 build.gradle 파일의 dependencies 블록에 implementa..

너에게 묻는다 - 안도현 [내부링크]

너에게 묻는다 연탄재 함부로 발로 차지 마라 너는 누구에게 한번이라도 뜨거운 사람이었느냐 반쯤 깨진 연탄 언젠가는 나도 활활 타오르고 싶을 것이다 나를 끝 닿는 데까지 한번 밀어붙여 보고 싶은 것이다 타고 왔던 트럭에 실려 다시 돌아가면 연탄, 처음으로 붙여진 나의 이름도 으깨어져 나의 존재도 까마득히 뭉개질 터이니 죽어도 여기서 찬란한 끝장을 한번 보고 싶은 것이다 나를 기다리고 있는 뜨거운 밑불위에 지금은 인정머리없는 차가운, 갈라진 내 몸을 얹고 아래쪽부터 불이 건너와 옮겨 붙기를 시간의 바통을 내가 넘겨 받는 순간이 오기를 그리하여 서서히 온몸이 벌겋게 달아 오르기를 나도 느껴보고 싶은 것이다 나도 보고 싶은 것이다 모두들 잠든 깊은 밤에 눈에 빨갛게 불을 켜고 구들장 속이 얼마나 침침하니 손을 ..

Docker - 도커로 MongoDB 컨테이너 설치하는 방법을 알아보자 [내부링크]

MongoDB는 NoSQL 데이터베이스로 JSON 형태의 데이터를 저장하는 도큐먼트 지향 데이터베이스입니다. MongoDB도 Mariadb처럼 도커(Docker)를 사용하면 손쉽게 설치해서 사용할 수가 있는데요. 이번 글에서는 도커(Docker)를 이용해서 MongoDB를 설치하는 방법에 대해서 알아보도록 하겠습니다. 도커가 처음이어도 이 글에서 정의된 명령문을 사용하면 쉽게 MongoDB를 설치해서 사용할 수 있습니다. tip. 도커(Docker)를 설치하지 않았다면 먼저 도커를 다운받자 도커를 설치하지 않으셨다면, 공식 사이트를 방문해 도커를 다운 받아 설치해주세요. 도커 설치 방법은 일반적인 응용 프로그램과 동일합니다. 운영체제 맞는 설치 프로그램을 다운 받아 실행을 시키시면 됩니다. Docker ..

Docker - 도커로 Mariadb 컨테이너 간편하게 설치하기 [내부링크]

도커(Docker)를 이용하면 손쉽고 빠르게 Mariadb를 설치해서 사용할 수 있습니다. Mariadb 뿐만 아니라 가상화되어 있는 수많은 이미지들을 컨테이너로 만들어 사용할 수 있습니다. 처음 도커를 사용하신다고요? 그래도 이 글에서 소개할 명령문만 있으면 헤매지 않고 Mariadb를 설치해서 쓸 수 있습니다. tip. 도커(Docker)를 설치하지 않았다면 먼저 도커를 다운받자 도커는 엑셀과 같이 운영체제 위에서 돌아가는 하나의 프로그램입니다. 그렇기 때문에 도커를 설치하지 않으셨다면, 공식 사이트를 방문해 도커를 다운하여 설치해주세요. 설치방법은 일반적인 응용프로그램처럼 다운로드 받아 실행을 시키시면 됩니다. Docker hub에서 Mariadb 이미지를 다운로드 받자 공식 홈페이지에서 도커를 다..

Javascript - HTTP 쿠키의 정의와 사용하는 방법 with js-cookie [내부링크]

HTTP 쿠키는 웹 브라우저에 저장되는 작은 크기의 문자열로, HTTP 통신을 할 때 값을 주고받을 수 있도록 만들어진 보조적인 수단입니다. 기본적으로 HTTP 프로토콜은 상태가 없으며(stateless), 제한적이지만 쿠키를 이용해 값들을 주고받을 수 있게 정의된 개념입니다. 정확한 명세는 RFC 6265에 정의되어 있습니다. HTTP 쿠키의 정의를 알아보자. 쿠키(Cookie)는 브라우저와 서버 간에 지속적으로 유지할 수 있는 데이터를 제공함으로써, 상태를 가질 수 있도록 하는 HTTP 상태 관리 개념입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 전달받은 내용(데이터)을 저장하는데 이를 쿠키라고 이..

Error - Failed to configure a DataSource 에러 원인과 해결 방법 [내부링크]

Failed to configure a DataSource 에러와 원인과 해결 방법 메시지 Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. *************************** APPLICATION FAILED TO START *************************** Description: Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. Reason: Failed to de..

Javascript - 바닐라 스크립트란 무엇이고 왜 필요한가 [내부링크]

바닐라 자바스크립트 (Vanilla Javascript)는 과연 무엇일까? 그리고 왜 필요한 걸까? 이 질문에 대해서 대답하기 위해서는 최근의 자바스크립트가 아니라 이전의 웹 생태계와 그 안에 있던 자바스크립트를 이해할 필요가 있다. 완전히 같다고는 이야기할 수 없지만 Java에 빗대어 보면 POJO (Plain Old Java Object)와 비슷한 맥락을 가지고 있다고 생각한다. 먼저 바닐라 스크립트가 어떤 것인지 알아보자 - Vanilla Javscript Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. 바닐라 JS는 빠르고 가벼운 크로..

HTML - 회원가입 양식 템플릿 만들기 기본편 with HTML5 [내부링크]

이번에는 HTML5를 기준으로 간단하게 회원가입 양식 템플릿을 만들어보겠습니다. 이전에 부트스트랩을 사용해서 회원가입 화면을 만든 적이 있는데요. 부트스트랩을 사용하지 않고 순수하게 HTML5만 사용해서 화면을 만들어 보는 것도 좋을 것 같아 이 글을 작성하게 되었습니다. 일반적으로 회원가입 양식에는 , , , , , 등 여러 가지 태그를 이용합니다. 하지만 이 글은 기본편으로 처음 회원가입 화면 개발하는 분이 쉽게 개발을 해볼 수 있도록 간단하게 , 만 사용해보았습니다. 시작하기 HTML5라는 단어를 써서 말은 거창해 보이지만 HTM5라고 해서 HTML과 다른 부분은 거의 없습니다. ". html" 파일의 선언 부만 위와 같은 구문을 명시하면 됩니다. HTML과 HTML5의 자세한 면면을 살펴보면 선언..

2021 07월 티스토리 기술 블로그 지표 및 애드센스 수익 분석하기 [내부링크]

조금 늦게 기술 블로그 지표와 애드센스 수익 분석 글을 올립니다. 지난 2021.06월에는 7월 지표가 좋지 않을 것이라고 미리 예상을 했었는데요. 예측했던 것과 달리 블로그 지표가 나빠지지는 않았습니다. 약간 의외의 결과가 나와서 신기하기도 하고, 이전에 열심히 작성했던 글들이 인정받은 것 같아 기분이 좋기도 하네요. 7월 블로그 방문자 유입 분석 지난 6월에 블로그 방문객은 총 6,358명이었습니다. 7월의 블로그 방문객 수는 총 14,241명으로 6월과 비교하면 방문객이 7,883명이 늘어났습니다. 지표가 좋지 않을 거라는 예측이 완전히 빗나가고 2배 이상으로 방문객이 증가했습니다. 구글 검색으로 유입된 방문객도 6월 대비 6,819명이 늘어났습니다. 많은 분들이 블로그를 방문해주셨네요. 이 글을 ..

로지텍 M570으로 처음 만난 트랙볼 마우스 사용기 [내부링크]

처음 트랙볼 마우스를 쓰게 된 계기는 아시는 분이 본인은 사용이 어려우시다며 로지텍의 M570 마우스를 선물로 주셔서입니다. 트랙볼 마우스를 사용하는 게 처음에는 어려웠지만 일주일 가량 적응 기간을 거치 고나니 일반 마우스보다 유용한 부분이 많다는 것을 느끼게 되었습니다. 이제는 트랙볼 마우스가 가진 편안함을 벗어날 수 없어 최근에는 켄싱턴 에르고 버티컬 트랙볼 마우스도 구매해서 사용하게 되었습니다. 이번 글에서는 로지텍의 M570 마우스 사용기를 통해 트랙볼 마우스 경험기를 이야기 해 보려고 합니다. 새로운 경험을 만들어주는 트랙볼 마우스 그리고 로지텍 M570 일반적으로 트랙볼 마우스를 접하게 되는 경우는 잦은 마우스 사용으로 손목이 아프거나 결릴 때 인터넷 검색을 통해서입니다. 그래서 보통 사무실에..

HTTP로 통신하는 클라이언트와 웹 서버 [내부링크]

HTTP는 네트워크에서 클라이언트와 서버가 통신하는 규약(Protocol) 중 하나입니다. 이전에 웹에서 이야기하는 서버와 클라이언트에 대해 간단하게 정리한 적이 있는데요. 웹 개발을 배우게 되면 일반적으로 프로그래밍을 주요하게 다루지만, 프로그래밍만큼 중요한 내용이 바로 웹에서 사용되는 네트워크 개념입니다. 그래서 이번 글에서는 이 부분을 조금 더 구체적으로 이야기해볼까 합니다. HTTP 프로토콜은 왜 사용할까? HTTP(Hypertext Transfer Protocol)는 TCP/IP 위에서 돌아가는 통신 프로토콜입니다. 웹에서 클라이언트와 서버는 HTTP를 기반으로 통신을 하기 때문에 웹 개발자라면 기본으로 숙지해야 하는 개념이기도 합니다. 프로토콜이란 개념을 처음 접하셨다면 전문과 같은 규약 혹은..

나는 왜 글을 쓰는가? [내부링크]

블로그를 운영하는 이유는 여러 가지가 있지만, 그중에 가장 큰 이유는 글을 잘 쓰고 싶어서이다. 가끔은 생각을 정리하기 위해 글을 쓰고 싶을 때가 있는데 대체적으로 머릿속으로 생각하는 쓰고 싶은 글과 실제로 쓰고 있는 글은 매우 다르다. 그래서 이렇게라도 블로그를 운영하면 글 쓰기 실력이 늘지 않을까 하는 막연한 생각에 글 쓰기를 시작했다. 그런데 생각보다 쉽지가 않다. 무엇부터 어떻게 글을 써 내려가야 할지 막연하다. 어찌어찌해서 하고 있는 일을 주제로 삼기는 했는데, 기술적인 역량을 늘리기에는 나쁘지 않은 방법이지만 처음 목표로 했던 글쓰기 실력은 도통 나아질 기미가 보이질 않는다. 뭐 그뿐이라면 그러려니 하고 글을 쓰겠는데 그게 끝이 아니다. 막연히 글 쓰는 행위를 하기 위해 쓸데없는 주제를 글을 ..

Java - 현재 디렉토리 경로를 확인하는 방법 [내부링크]

이번 글에서는 자바를 이용해서 현재 디렉토리 경로를 확인하는 방법을 알아보도록 하겠습니다. 개발을 하다 보면 간혹 현재 작업하는 경로를 확인해야 하는 경우가 있습니다. 예를 들면 파일 업로드 폴더 위치를 확인하거나 환경설정 파일과 같은 특정한 파일들이 제 위치에 존재하는지 유무를 판별하기 위해서 말이죠. 때론 개발자의 작업 환경과 다른 서버 환경에서의 배포 이슈로 인해 자바가 인식하고 있는 현재 경로를 알아야 합니다. System.getProperty() 메서드를 사용한 현재 경로를 확인하는 방법 public class CheckDirectory { public static void main(String args[]) { String path = System.getProperty("user.dir"); ..

켄싱턴 에르고 버티컬 트랙볼 마우스 사용 후기 [내부링크]

무슨 트랙볼 마우스를 사용해보신 적이 있으신가요? 이전에 우연한 계기로 트랙볼 마우스를 사용하게 되었는데 그때부터 지금까지 트랙볼 마우스의 편안함에 익숙해져 일반 마우스는 잘 사용하지 않게 되었습니다. 처음에 트랙볼 마우스로 접한 제품은 로지텍의 M570 제품인데 현재까지도 잘 사용 중인 제품입니다. 다만, M570의 경우 리시버를 사용하다 보니 USB 사용이 제한되는 경우 이용하기 힘들다는 제약이 있습니다. 일반적이지는 않을 수 있지만 맥북 제품들은 연결 포트 개수가 제한이 있어 허브가 필수인 것처럼 리시버를 사용해야 하는 M570은 사용에 제한이 있습니다. 사실 이건 새로운 마우스를 구매하기 위한 핑계 일뿐, 5년 이상 사용하다 보니 새로운 마우스가 가지고 싶은 마음에 켄싱턴 에르고 버티컬 트랙볼 마..

HTML - <a> anchor 태그와 href를 알아보자 [내부링크]

HTML(Hyper Text Markup Language)를 배울 때 가장 먼저 배우는 태그 중 하나가 바로 태그입니다. 태그는 anchor를 의미하는 태그로 한글로는 닻을 말합니다. 웹에서 태그 쉽게 쓰고 사용되지만, 가진 의미는 결코 가볍지 않은데요. 이번 글에서는 태그가 가지는 역할과 기능에 대해서 알아보도록 하겠습니다. 태그와 href 그리고 닻(anchor) HTML에서 태그가 가진 역할을 설명하기 위해 배와 닻(Anchor)의 그림을 만들어 보았습니다. 사람들은 본인의 상황에 따라 필요하거나 도움이 되는 정보를 찾기 위해 WWW(World Wide Web)라는 무수히 많은 서버가 연결된 네트워크를 돌아다닙니다. 이때 바다 위(네트워크)를 떠다니는 배(사용자)가 정박할 수 있도록 좌표(주소 혹은..

서버와 클라이언트를 그림으로 알아보자 [내부링크]

웹 프로그래밍을 하다 보면 자연스럽게 서버와 클라이언트라는 단어를 자주 접합니다. HTML - Form을 이해하고 사용하자라는 글에서도 클라이언트와 서버 간의 통신에 대해서 언급을 했었는데요. 이번 글에서는 웹 서버와 클라이언트를 주제로 이야기해보려고 합니다. 서버는 무슨 일을 할까? 간단하게 말하면 서버가 하는 일은 클라이언트로부터 요청을 받아, 요청한 일을 처리해 넘겨주는 일을 합니다. 예를 들어 사람들은 몇 번의 클릭 혹은 터치만으로 쉽게 인터넷을 이용합니다. 이 과정에서 사용자는 알 수 없지만 클라이언트와 서버 간의 통신이 이루어집니다. 먼저 사용자가 웹 브라우저를 통해 서버에 있는 자원(Resource)을 요청하는 것이 시작점이 됩니다. 요청(Request)은 서버로 전달이 되고, 서버는 사용자..

HTML - Form을 이해하고 사용하자 [내부링크]

이번에는 HTML의 element 중에서 form에 대해 알아보려고 합니다. form은 화면을 개발할 때 div만큼 많이 사용하는 요소 중에 하나입니다. 바로 데이터를 전송하는 데에 있어서 form이 가진 역할이 있기 때문인데요. form이 가진 의미(Semantic)를 생각해본다면 당연한 이야기입니다. 그러면 본격적으로 form을 이해하고 사용하는 방법에 대해 알아보도록 하겠습니다. HTML의 일반 요소와 Form의 차이 Name: E-mail: Message: HTML의 form은 무엇일까요? 위에서 제시한 코드를 보았을 때 HTML에서 사용되는 기존 요소들과 form의 차이점은 없습니다. 오히려 사용법이 다르지 않기 때문에 차이를 알 수가 없습니다. HTML의 일반 요소와 form의 가장 큰 차이점..

맥북 프로를 위해 구매한 노트북 스탠드 - 마제스탠드 사용 후기 [내부링크]

맥북 프로 사용하면서 구입한 물건 중 가장 효용가치가 높은 한 가지를 말하라면 단연코 노트북 스탠드입니다. 정확히는 노트북 스탠드 중에 마제스탠드라는 접착형 노트북 받침대입니다. 만족도가 매우 높아 개인적으로 사용하는 맥북 프로 노트북뿐만 아니라 회사에서 사용하는 맥북 프로 m1 노트북에도 사용하는 제품입니다. 직업도 프로그래머이다 보니 맥북과 같은 노트북의 사용 빈도가 높아, 노트북을 편리하게 쓰기 위해 노트북 주변 기기들을 눈여겨보고 구매해서 사용하는 편입니다. 맥북만이 아니라 일반적으로 노트북은 노트북 스탠드와 같은 눈높이 보조 제품을 같이 사용하지 않으면, 이용하는 데에 불편함이 따릅니다. 때론 목이나 어깨가 결리거나 혹은 구부정하게 등을 굽히거나 말이죠 노트북 스탠드를 구매하면서 고려했던 점 노..

Spring - JSP를 사용하는 스프링 부트 (Spring Boot) 프로젝트 만들기 [내부링크]

스프링 부트(Spring Boot)로 프로젝트를 만들면서 JSP를 사용해야 하는 경우는 어떤 경우일까요? 바로 레거시 웹 프로젝트를 스프링 기반으로 업그레이드(변경) 해야 하는 경우입니다. 예전에 자바로 만들어진 웹 프로젝트들은 Thymeleaf, Velocity와 같은 템플릿 엔진을 사용하지 않고 JSP(Java Server Page)로 만든 경우도 흔합니다. 이러한 이유로 최신의 기술(스프링 혹은 스프링 부트)을 사용하려고 한다면 스프링 부트에 JSP를 사용할 수 있도록 설정을 해주어야 합니다. JSP를 사용하는 스프링 부트 (Spring Boot) 프로젝트 만들기 현재 스프링 부트에서 추천하는 템플릿 엔진은 Thymeleaf, Freemarker, Mustache 등입니다. 그래서 손쉽게 몇 번의 ..

2021 06월 티스토리 기술 블로그 지표 및 애드센스 수익 분석하기 [내부링크]

지난 2021.05월에 이어 2021년 06월의 기술 블로그지표와 애드센스 수익을 확인해보겠습니다. 6월 같은 경우에는 개인적인 사정이 생겨 약 3주간의 공백기간을 가지게 되었습니다. 그래서 어떤 지표를 가지게 될지 개인적으로는 매우 궁금했습니다. 그럼 지난 6월의 블로그 지표와 애드센스 수익을 확인해보도록 하겠습니다. 6월 블로그 방문자 유입 분석 지난 5월에 블로그 방문객은 총 4,421명이고 6월의 블로그 방문객 수는 총 6,358명입니다. 5월과 6월을 비교하면 방문객이 1,937명 늘어났습니다. 5월에 늘어난 유입량 1,533명과 대비해서 많이 늘어나지는 않았지만, 3주라는 공백기를 감안한다면 좋은 수치라고 생각됩니다. 실제 6월의 운영 공백기가 반영될 7월달의 수치가 어떨지 궁금합니다. 이전에..

CSS - 스타일시트란 무엇일까? [내부링크]

CSS(Cascading Style Sheets)는 워드 프로세서에서 사용하는 스타일 기능을 웹으로 가져온 것입니다. CSS를 사용하면 DOM(Document Object Model)에 스타일(Style)을 적용할 수 있습니다. 정확히는 CSS를 사용하면 HTML 문서에 디자인을 적용할 수 있습니다. CSS는 HTML과 같이 사용되며, HTML에 정의된 태그(Tag)가 보여주는 디자인을 재정의해서 HTML의 시각적 요소를 담당하는 언어입니다. 예를 들어 주제롤 표현하는 이라는 태그를 보여주는 방법은 브라우저(Chrome, Safari, Firefox)가 정의하지만, CSS를 사용하면 이 표현되는 시각적인 정의를 바꿀 수 있습니다. CSS는 태그의 특성을 원하는 대로 변경이 가능합니다. h1 { margi..

CSS - 모바일에서만 hover 스타일을 제거해보자 [내부링크]

반응형으로 웹 화면을 개발하다 보면 모바일에서만 hover 스타일이 적용되지 않게 해야 하는 경우가 발생합니다. 모바일 기기에서 특정 이나 를 터치(클릭)를 했는데 해당 요소를 누르고 있는 것처럼 hover 스타일이 적용되어 있기 때문입니다. hover 스타일이 적용되는 이유 :hover 스타일이 해제되지 않고 지속적으로 적용되는 이슈는 모바일 화면이 아닌 모바일 기기 화면에서 발생하는 문제입니다. 모바일 기기에서만 이런 현상이 일어나는 이유는 모바일 기기가 상호작용 하는 방식 때문입니다. 마우스 커서와 같은 포인터가 DOM의 element 요소 위에 위치하면 적용되는 스타일이 바로 의사(Pseudo) 클래스인 :hover인데, 모바일 기기는 터치(Touch)가 포인터의 역할을 합니다. 즉 모바일 기기 ..

Javascript - debounce의 개념과 예제 코드 [내부링크]

이번에는 디바운스(debounce) 혹은 디바운싱(debouncing)이라고 불리는 개념을 알아보도록 하겠습니다. 이 글에서는 debounce라는 단어를 사용하여 개념을 설명합니다. Debounce의 개념 debounce는 한 문장으로 요약정리하면 처리해야 하는 일들을 미루어두었다가 한 번에 실행하는 방법을 말합니다. 의미 그대로 하나의 방법이기 때문에 표현하는 방법이나 설명하는 방식은 여러 형태로 존재하지만, 단순히 이벤트 핸들러 혹은 이벤트 처리하는 기술에 국한되는 것이 아니라 포괄적인 개념으로 실행해야 하는 일련의 일들을 한 번에 처리한다고 이해하시면 좋을 것 같습니다. 위 그림은 일반적인 일을 수행하는 시점과 debounce를 적용한 일을 수행하는 시점을 시각화한 내용입니다. 처리해야 할 일이 생..

Node.js 디자인 패턴 바이블 - 서평 [내부링크]

Node.js 디자인 패턴 바이블 책은 어떤 책일까요? 책 제목으로 Node.js 디자인 패턴 바이블의 내용은 Node.js와 디자인 패턴을 이야기한다는 것을 알 수 있습니다. 일반적으로 Node.js는 자바의 JVM처럼 Javasciprt의 런타임 환경이고, 디자인 패턴은 프로그래밍을 통해 문제 해결을 위한 형식화된 일종의 설계 구조를 의미합니다. 사실 그런 부분에 있어 Node.js와 디자인 패턴이라는 주제가 각 각 개별적으로는 이해가 가지만 조합된 내용은 쉽게 머릿속에 그려지지 않습니다. 그럼 Node.js 디자인 패턴 바이블이라는 책은 어떻게 이 내용을 다루었는지 이야기해보도록 하겠습니다. Node.js 디자인 패턴 바이블의 개요와 독자 대상 Node.js 디자인 패턴 바이블 책은 기본적으로 No..

Javascript - 화살표 함수를 선언하는 방법 [arrow function] [내부링크]

자바스크립트 ES6에서 새롭게 추가된 내용 중 화살표 함수(arrow function)는 함수를 단축해서 사용하는 방법으로 유용한 문법입니다. 함수를 단축해서 사용하는 문법이 화살표 함수라고 말했지만, 사실 화살표 함수(arrow function)가 일반 함수(function)와는 결을 달리 합니다. 그럼 오늘은 자바스크립트 ES6에 새롭게 추가된 화살표 함수를 알아보도록 하겠습니다. 화살표 함수를 선언하는 방법 화살표 함수는 일반 함수와 다른 점이 몇 가지 있습니다. 대표적으로는 선언하는 방법과 this의 범위입니다. 오늘은 먼저 화살표 함수를 선언하는 방법을 알아보겠습니다. function fn1() { return 'Hello World!' } const arrowFn1 = () => 'Hello ..

온프레미스(On-premise)의 정의는 무엇인가? [내부링크]

온프레미스(on-premise)는 IT 서비스를 운영하는 회사가 자체적으로 보유한 공간에 물리적으로 하드웨어 장비를 가지고 직접 운영하는 방식을 말합니다. 온프레미스는 클라우드 컴퓨팅 기술이 나오기 전까지 일반적인 기업이 사용하던 일반적인 인프라 구축 방식이기도 합니다. 온프레미스 방식은 현대에 정의되고 사용되는 클라우드 컴퓨팅 기술의 이전 방식이기 때문에 인프라를 구축하는 전통적인(Traditional) 방법으로 통용되기도 합니다. 온프레미스 방식은 인프라를 구축하는 하나의 방법일 뿐 일종의 레거시(Legacy)로만 받아들이는 것은 잘못된 이해입니다. 온프레미스(On-premise)의 정의 온프레미스는 IT 서비스 운영을 위해, 직접적으로 인프라를 구축하는 방식을 말합니다. 클라우드 서비스를 어느 정도..

사전, 시대를 엮다 [오스미 가즈오] - 독후감 [내부링크]

사전, 시대를 엮다. 책을 읽고 나서 이 책에서는 사전을 “여러 가지 사항을 일정한 순서로 배열하고, 그 각각에 해설을 붙인 책”이라고 이야기하고 있으며, 오늘날의 백과사전과 거의 유사한 ‘예전에 중국에서 경 사자 집의 여러 책들을 내용이나 항목별로 분류하여 편찬한 책을 통틀어’ 것을 유서라고 일컫습니다. 즉 사전 또는 유서는 만들어지고 쓰이던 당시 사회의 전반적인 지식을 나름의 규칙을 가지고 정리하고 기술한 것으로 문자를 통해 만들어진 그 사회의 모습이 아닐까라고 생각합니다. 한마디로 이 책을 정의한다면 “책의 역사”라고 할 수 있습니다. 일본의 대표적인 유서를 고대부터 근대까지 시대순으로 나열하여 그 시대의 모습을 상세하게 기술하였기 때문입니다. 각 장의 제목은 그 시대를 대표는 유서의 제목들을 쓰고..

가상 화폐 그리고 비트코인을 알아보자 [내부링크]

가상 화폐라고 하면 무엇이 떠오르시나요? 최근 이슈가 뜨거웠던 도지코인? 아니면 비트코인? 이더리움? 오늘은 가상 화폐의 시초라고 할 수 있는 비트코인에 대해 알아보려고 합니다. 비트코인 - 가상 화폐의 시작 비트코인은 2008년 나카모토 사토시에 의해 만들어졌습니다. 지금도 본인이 사토시라고 이야기하는 사람들은 많이 있지만, 아직도 정확히 누구라고 특정되지 않았습니다. 본인이 사토시라면 첫 번째 코인을 확인시켜주면 될 텐데 현재까지 이 증거를 확인시켜준 사람은 없기 때문이기도 합니다. 누가 만들었는지는 밝혀지지는 않았지만, 전 세계적으로 가상화폐(비트코인, 도지코인, 이더리움)가 큰 이슈임에는 틀림이 없습니다. 그렇다면 비트코인은 정확히 무엇일까요? 비트코인은 새로운 지불 시스템이자 완전한 디지털 화폐..

2021 05월 티스토리 기술 블로그 지표 및 애드센스 수익 분석하기 [내부링크]

지난번에 이어서 2021년 05월의 기술 블로그 운영 지표와 애드센스 수익을 분석해보려고 합니다. 블로그를 운영하진 이제 3개월 차인데 약간은 힘에 부치기도 어려운 것도 많은 것 같네요. 이 글은 지난 한 달간 블로그에 방문한 지표를 토대로 어떻게 블로그가 운영되는지 분석하기 위해서 작성한 글입니다. 애드센스 수익은 주가 아닌 부차적인 개념으로 다루고 있습니다. 5월 블로그 방문자 유입 분석 지난 4월에 블로그 방문객은 총 2,888명이고 5월의 블로그 방문객 수는 총 4,421명입니다. 그림에도 나와있지만 이전 달에 비해 방문객이 1,533명 늘어났음을 알 수 있습니다. 개인적인 생각으로는 총 방문객 수보다 중요한 지표는 검색을 통해 유입된 방문자수라고 생각합니다. 4월은 검색을 통해 유입된 방문자는 ..

Javascript - 간단하게 CSS를 활용한 모달창 만들기 [Modal / Dialog] [내부링크]

화면을 개발할 때 자주 나오는 구성 요소 중 하나가 바로 모달(Modal) 창입니다. 팝업(Popup) 창과 약간 혼동해서 쓰는 경향이 있기는 한데 Modal과 Popup는 개념이 다릅니다. 팝업(Popup)은 현재 화면에 다른 화면을 하나의 창(Browser)으로 보여주는 기능이고, 모달(Modal)은 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리할 수 있게 만드는 기능입니다. 모달은 Winform에서 말하는 Dialog와 같은 개념이기도 합니다. 오늘은 자바스크립트를 사용해서 모달 창을 만드는 방법을 알아보도록 하겠습니다. 자바스크립트로 모달(Modal) 만들기 Modal Modal 띄우기 먼저 CSS를 사용해서 Modal이 되는 대상의 position을 absoulte로 설정하고, ..

개발자가 말하는 맥북 프로 [MacBook Pro 2014 mid] 사용 후기 [내부링크]

맥북 프로를 구매한 시기는 2015년 여름입니다. 처음에는 Mac에 대한 호기심으로 맥북 에어를 구매해서 사용하게 되었습니다. 지금도 여전하지만 당시 주위의 개발자들이나 여러 프로그래밍 관련 콘퍼런스 혹은 인터넷 강의에서 맥북을 사용하는 모습이 꽤 멋져 보였고, 무엇 때문에 일반 노트북에 가격대가 높은 애플의 제품을 사용하는지 궁금했습니다. 그 당시 처음 구매해서 사용한 맥북 에어는 하나부터 열까지 많은 감탄을 자아내게 했습니다. 그때 맛 본 달콤함은 CTO 버전의 맥북 프로를 구매하게 했고, 지금도 그 편리함을 만끽하는 중입니다. 조금은 늦었지만 6년 만에 뒤늦은 맥북 프로 2014 mid 후기를 남겨봅니다. 후기는 매우 긍정적으로 주관적입니다. 맥북을 사용하면서 느낀 불편한 점은 거의 없습니다. 그렇..

2021.05.30 주간회고 [내부링크]

금주 주간 목표 1일 1회 글쓰기 [완료] 책 읽기 - 한 권으로 끝내는 비트코인 혁명 [완료] 구글 애널리틱스 사용법 정리 [달성 못함] - 1일 1회 글쓰기 이번 주 1일 1회 글쓰기 목표는 달성했다. 이제는 약간 쉬어갈 때가 되었나?라는 생각이 든다. 이런 생각을 하는 가장 큰 이유는 내가 원하는 글의 내용을 쓰려면 시간이 너무 오래 걸린다. 그렇다고 시간을 줄일 수도 없고, 매번 기술적인 내용만 쓰는 것도 마음에 안 들고.. 뭘 이렇게까지 하나 싶기도 한 게 지금 내 심정이다.. 다음 주도해야 할지 고민이 된다. - 책 읽기 [한 권으로 끝내는 비트코인 혁명] 일주일에 책 한 권 읽기 [한 권으로 끝내는 비트코인 혁명]도 목표를 달성했다. 가상 화폐라는 단어가 자주 보이기도 하고 가상 화폐에 항상..

Javascript - call by value와 call by reference의 정의 [내부링크]

call by value와 call by reference는 프로그래밍을 배우게 되면 꼭 알아야 하는 필수 개념 중 하나입니다. 만약 call by value, call by reference 개념을 잘 이해하지 않고 코드를 작성하면, 의도하지 않은 곳에서 생각지 못한 오류를 만날 확률이 높아집니다. 코드는 논리를 기반으로 동작하기 때문에 정확한 논리가 없다면 의도하지 않은 결과를 내놓기 때문입니다. 처음 프로그래밍을 배우신다면 call by value와 call by reference는 어려울 수 있지만 꼭 알아야 하는 부분입니다. c# 혹은 자바, 하물며 c++ 까지도 이 개념을 사용하고 있다는 점을 잊지 말아 주세요. 만약 아직 자바스크립트에서 이야기하는 변수에 대해서 잘 모르신다면 이전에 발행한 ..

SI 회사에 취업하면 어떤 점이 좋고 나쁠까? [내부링크]

SI에 관한 이야기를 하기 위해서는 조금은 사전 지식이 필요하다고 생각해서, 먼저 SI 회사란 어떤 곳인지를 이야기해보도록 하겠습니다. SI 회사는 소프트웨어 용역을 하는 회사입니다. 약간 이 말이 바로 이해 가기가 어려울 수가 있을 것 같아 설명을 덧붙이자면, 지금은 소프트웨어가 많은 분야에 도입이 되고 활성화되면서 소프트웨어가 일상생활 전반에 자리매김하고 있습니다. 그렇지만 이렇게 소프트웨어가 일상에 있다고 해도 일반적으로 소프트웨어는 도구의 하나로 사용됩니다. 예를 들어 excel과 같은 소프트웨어가 있기 전에도, 우리는 수기로 문서를 작성하고 결제를 받는 등 문서와 관련된 일련의 행위들을 할 수 있었습니다. 다만 excel이나 power point 같은 문서 편집 기능을 가진 소프트웨어를 도입함으..

Javascript - 배열을 잘 사용하는 3가지 방법 [map, filter, reduce] [내부링크]

자바스크립트에서 제공하는 기본 자료 구조(Struct) 중에 가장 많이 쓰이고 잘 사용하면 좋은 녀석은 배열(Array)입니다. 배열의 기능 중 꼭 알아야 할 몇 가지 기능이 있는데, 바로 map(), filter(), reduce()입니다. 이미 이전에 map(), filter(), reduce()의 정의와 활용 방법에 대해 글을 올렸지만, 다시 한번 더 정리해보려고 합니다. 자바스크립트의 발전이 있기 이전에 배열을 잘 사용하기 위해서는 lodash, underscore와 같은 라이브러리를 사용했습니다. map(), filter(), reduce()와 같은 기능을 포함해 자료 구조를 편리하게 사용하는 기능들을 제공해주었기 때문입니다. 지금의 모던한 자바스크립트는 인기 있는 여러 가지의 라이브러리의 장점..

티스토리 블로그 코드 블럭 오류 - 블로그를 옮겨야 할까? [내부링크]

이틀 전인 5월 26일(수) 오후 제 블로그를 돌아다니다가 우연히 이상한 페이지를 발견했습니다. 변경하지 않았던 블로그의 배경색이 적용되어 있고, 화면에 보여야 할 예제 코드 내용이 보이지 않는 글을 확인하게 되었습니다. 뭐지?라는 생각도 잠시 불안한 예감이 들어 급히 다른 글들도 확인해보았습니다. 확인해본 결과 티스토리 코드 블럭 기능을 통해 코드를 삽입한 글들이 문제가 있다는 것을 알게 되었고 난감했습니다. 여태까지 이런 문제도 모르고 글을 썼나 싶기도 하고, 어떻게 해야 할지 해결책도 보이질 않았습니다. 코드 블럭 기능 오류 블로그의 글들을 전체적으로 확인해본 결과, 처음에 내렸던 판단과 동일한 결과가 나왔습니다. 코드 블럭 기능을 통해 삽입한 코드들이 실제 글이 보이는 화면에서 동작을 하고 있었습..

javascript - 함수(Function)란 무엇일까? [내부링크]

함수란 무엇일까요? 일반적으로 프로그래밍에서 함수는 특정 목적을 달성하기 위해 설계된 동작 혹은 코드라고 말할 수 있습니다. 예를 들어 안녕하세요 라는 메시지를 출력하는 프로그램을 만들어야 한다고 하면 이렇게 작성해 볼 수 있습니다. // "안녕하세요!" 메시지를 출력하는 함수를 정의한다. function sayHello() { console.log('안녕하세요!'); } // 함수를 실행시킨다. sayHello(); 어떻게 보면 함수는 프로그래밍의 본질이라고도 말할 수 있습니다. 특히 자바스크립트에서의 함수가 가진 역할은 C#이나 Java와 같은 언어에서 예기하는 함수와는 본질적으로 다른 부분이 많습니다. 객체지향 언어들이 몇 년 전부터 함수형 프로그래밍의 패러다임을 도입하고는 있지만 프로그램 언어가 ..

Javascript - 배열의 요소를 무작위로 섞는 방법 [array, shuffle] [내부링크]

자바스크립트는 자바의 Connections.shuffle()와 같은 배열의 요소를 랜덤 한 방법으로 바꾸는 기능을 제공하지 않습니다. 그렇기 때문에 자바스크립트에서는 배열의 요소를 무작위로 섞기 위해서는 기능을 구현해서 사용해야 합니다. 자바스크립트로 배열의 요소를 무작위로 섞기 자바스크립트에서 배열 요소를 무작위로 섞기 위해서는 Array.sort()와 Math.random()를 사용하면 됩니다. 그럼 예제를 통해서 정확히 어떻게 사용하는지 알아보겠습니다. function shuffle(array) { array.sort(() => Math.random() - 0.5); } const numbers = [1, 2, 3]; shuffle(numbers); shuffle라는 이름을 가진 함수는 배열(arr..

CSS - 이미지 스프라이트(Sprite)의 정의와 사용하는 2가지 방법 [내부링크]

이미지 스프라이트의 정의 스프라이트(Sprite)라는 용어는 컴퓨터 그래픽스에서 2차원의 비트맵 이미지나 애니메이션을 합성하는 기술을 말합니다. 웹 기술에서는 여러 개의 이미지를 하나의 이미지로 만들어 놓은 것을 의미합니다. 이미지 스프라이트(Image Sprite)를 사용하면 생기는 장점은 크게 2가지를 이야기할 수 있습니다. 1. 요청을 단 한번 만한다. 브라우저는 화면을 그릴 때 필요한 모든 자원(이미지, CSS, JS 등)을 서버에 요청하고 가져와 사용합니다. 서버에 요청하고 가져오는 작업은 일괄적으로 한 번에 이루어지지 않습니다. 서버에 자원을 요청하는 구문이 사용된 횟수만큼 서버에 자원을 요청합니다. // 서로 다른 아이콘 이미지 3개를 선언하고 사용하는 코드 예를 들어 위와 같은 예제는 서버..

Javascript - 키보드 이벤트를 활용한 움직이는 이미지 만들기 [내부링크]

오늘은 키보드 이벤트의 key를 알아보려고 합니다. 지금 인터넷에 올라와있는 키보드 이벤트를 설명하는 글들은 예전 사양(keycode)을 기준으로 만들어져 있어, 모처럼 새로운 사양을 기준으로 키보드 이벤트를 설명해보려고 합니다. KeyboardEvent만 가지고 설명하면 재미가 없을 것 같아 키보드 이벤트를 활용해 상, 하, 좌, 우 키보드를 누르면 움직이는 이미지를 만들어보았습니다. 생각했던 그림은 게임처럼 좌우를 누르면 자연스럽게 움직이는 그림이었는데 결과는 생각과는 달라서 슬프네요. 자연스러운 움직임을 만들려면 setInterval()을 사용하면 될 것 같기는 한데 이번에는 키보드 이벤트를 알아보기 위해 작성한 글이니 나중에 setInterval()을 통해 기능을 업데이트해보겠습니다. Keyboa..

블로그의 구글 검색의 유입량을 높이는 2가지 방법 [내부링크]

티스토리와 같은 블로그를 운영할 때 가장 신경 쓰는 부분은 검색 유입량입니다. 검색의 관점에서는 철저히 폐쇄적인 네이버 블로그가 아닌 이상에야 웹 사이트는 필연적으로 검색 최적화(SEO)를 하기 위해 부단히 애를 씁니다. 하지만 블로그를 처음 접하시거나 IT 용어가 생소하신 분들은 이런 개념을 이해하고 사용하기나 무척이나 버겁고 어렵습니다. 그래서 이번에는 다른 검색 엔진은 제외하고 오로지 구글의, 구글을 위한, 구글에 의한 검색 엔진 최적화 방법을 말해보려고 합니다. 글 제목에서는 2가지 방법이라고 단정적으로 글의 목표를 한정지 었지만, 구글의 검색 유입량을 높이는 방법은 여러 가지가 있습니다. 여기서 이야기하려는 구글 서치 콘솔, 구글 애널리틱스 아니면 지금은 아니지만 나중에 이야기할 백링크나 키워드..

2021.05.23 주간회고 [내부링크]

금주 주간 목표 1일 1회 글쓰기 [완료] 책 읽기 - 트렌드 코리아 2021 [완료] 구글 애널리틱스 사용법 정리 [완료] - 1일 1회 글쓰기 이번 주도 1일 1회 글쓰기 목표는 달성했다. 어떻게든 이 목표를 달성하고 있는 나 자신이 뿌듯한 반면, 무엇을 위해 이렇게까지 하나 싶기도 한 한주였다. 처음 이런 목표를 세운 이유로 첫 번째는 글을 잘 쓰는 능력을 기르고 싶어서고, 두 번째는 프로그래밍 기술을 높이고 싶어서였는데, 효과가 없는 것은 아니지만 이렇게까지? 할 정도로 라는 생각이 들었다. 그렇다고 포기하겠다는 이야기는 아니지만, 그런 생각이 들었다는 이야기다. 조금은 남들과 달리 재미있게 글을 쓰고 싶고, 논리 정연하게 머릿속 생각을 정리하고 싶은데 얼마의 시간이 더 지나고 어떤 고민을 더 한..

GA 사용기 - 웹 사이트에 구글 애널리틱스를 설정하는 방법 [내부링크]

구글 애널리틱스(Google Analytics)를 이미 적용해서 사용하고 계신가요? 그렇다면 이 글은 보지 않으셔도 됩니다. 이 글은 아직 구글 애널리틱스를 사용하지 않는 분들을 위해 연재하는 GA(Google Analytics) 사용기 이야기입니다. 지금 웹사이트 혹은 블로그를 운영 중이신가요? 그렇다면 자신이 운영하고 있는 사이트에 방문한 사람이 어떤 글을 보고, 얼마 동안 체류하고, 무엇을 하는지 얼마만큼 알고 계신가요? 잘 모르시겠다면 구글 애널리틱스를 사용해보세요. 전문적인 지식이 있다면 더 좋겠지만 간단한 설정만으로도 웹 사이트 잘 운영하기 위한 사용자의 데이터를 분석할 수 있게 도와줍니다. 이전에 2021.05.14 - [IT 지식] - 웹 로그(Web Log)란 무엇이고 어떻게 사용하는가라..

TDD, Clean Code With Java 수강 후기 [내부링크]

2021년 중반이 되어서야 작년에 수강한 TDD, Clean Code 강의 후기를 작성하고 있습니다. 원래는 진작부터 쓰고 싶었던 이야기입니다. 글 솜씨가 부족하고 하고 싶은 이야기가 있어도 잘 정리가 되지 않아 미루고 미루었습니다. 하지만 더 늦어진다면 왠지 쓰지 못할 이야기가 될 것 같아 지금에서야 쓰게 되었습니다. 강의를 수강하게 된 이유 그리고 결론 작년에 했던 일들 중에 기억에 남는 일이 있다면 그것은 박재성님의 TDD(TDD, Clean Code)를 수강했던 것이 아닐까라고 생각합니다. 비전공자가 국비 지원 학원을 통해 막연히 시작하게 된 개발 일은 쉽지 않았습니다. 처음에도 어려웠지만 시간이 어느 정도 지난 지금도 개발은 어렵습니다. 사실은 시간이 흐를수록 프로그래밍을 하는 것이 더 어렵게 ..

React - 의미없는 div 대신 Fragment를 사용하자 [내부링크]

리액트를 기반으로 개발된 프로젝트들을 보면 가끔 의미 없이 루트 요소를 를 정의한 코드들을 확인할 수 있습니다. 사용되지 않는 를 쓰는 이유는 리액트에서 정의한 render() 함수는 반환 값의 루트 요소는 하나만 정의되어야 하기 때문입니다. const Example = () => { return ( Hello World ); }; 예제 코드를 사용한 결과물은 아래와 같습니다. 실제로 사용하지는 않지만 JSX 규칙에 의해 와 같이 감싸는 요소를 정의하면 HTML의 DOM 구조에도 는 적용됩니다. Fragment를 사용하자 import React, { Fragment } from 'react'; const Example = () => { return ( Hello World ); }; 앞서 작성한 예제 코..

Javascript - 실무에서 활용하는 console.log() 사용 방법 [내부링크]

실무에서는 console.log()를 어떻게 하면 잘 사용할까요? 이전 글(console.log() 사용하는 팁)에 이어 console.log()를 활용하는 방법에 대해 더 구체적으로 알아보겠습니다. 기본 출력문 - log, info, debug, warn, error console.log('기본'); console.info('정보'); console.debug('디버그'); console.warn('경고'); console.error('에러'); console로 출력할 수 있는 출력문은 level(중요도)로 분류해서 사용할 수 있습니다. log4j처럼 말이죠. 만약 console.debug()로 출력한 내용이 나오지 않으면 콘솔에 출력 옵션을 확인해보시면 됩니다. 크롬 같은 경우 console 출력 설..

HTML - 부트스트랩으로 회원가입 양식(Form) 화면 만들기 [내부링크]

이번에는 간단한 회원가입 양식(Form) 화면을 만들어 보려고 합니다. 단순히 HTML만 사용하지 않고, UI 라이브러리인 Bootstrap도 이용해서 조금 더 유려하고, 유효성 검사까지 포함한 회원가입 폼을 만들어보겠습니다. 시작하기 회원가입 화면은 프로젝트를 시작하면 필수적으로 개발하는 화면 중에 하나 입니다. 가장 기본적인 화면이지만 입력 값의 유효성 검사부터 데이터를 서버로 전송하는 일까지 처리하기 때문에 많은 기능을 요구하는 화면 입니다. 이 글에서는 HTML의 기초적인 부분을 다루며, 서버와 통신하는 부분까지는 이야기 하지 않습니다. 화면을 개발하는 도구로는 HTML, CSS 만을 사용하며, CSS의 경우 Boostrap의 스타일을 활용합니다. Boostrap은 twitter에서 만든 UI 라..

Javascript - 기본 대화상자 사용법 [alert(), confirm(), prompt()] [내부링크]

웹 브라우저는 사용자와 상호작용이 가능한 기능들을 몇 가지 제공합니다. 오늘은 그중 대표적인 alert(), confrim(), prompt()를 알아보려고 합니다. 흔히 사용자에 알림을 표시할 때는 Modal을 사용합니다. alert(), confrim(), prompt()는 바로 그 Modal의 기본 개념을 가지고 있는 기능입니다. 이 3가지 기능은 쓰임새가 좋고 사용하기도 편리하니 한 번 알아두시면 좋습니다. 알림창을 띄우는 alert() alert() 기능은 사용자에게 메시지를 전달할 수 있는 알림창을 띄웁니다. 다른 행동을 필요로 하지 않고 오로지 사용자에게 메시지를 전달하기 위한 알림 용도로 사용됩니다. 문법 window.alert([message]); 매개변수 message(옵션) : 알림창..

갑자기 크롬에서 웹 사이트가 동작을 안해요 [자바스크립트가 차단됨] [내부링크]

크롬 브라우저를 업데이트한 후 갑자기 웹 사이트가 동작을 안 합니다. 컴퓨터 문제가 있는 건지 사이트에 문제가 있는 건지 알 수 없지만 일단 컴퓨터를 재부팅해봅니다. 여전히 웹 사이트를 정상적으로 볼 수 없습니다. 크롬 브라우저 버전을 업데이트 후 웹 페이지가 동작하지 않습니다. 이번에 최신으로 릴리즈 된 크롬 버전 90.0.4430.212로 업데이트를 한 후 네이버 웹 사이트가 정상적으로 보이지 않는 현상이 발생했습니다. 처음에는 컴퓨터에 문제가 있나 싶어 재부팅을 해보았지만 여전히 웹 사이트는 제대로 동작하지 않습니다. 알고 보니 크롬에서 보안 설정 중 하나인 자바스크립트 자동으로 차단(JavaScript blocked) 기능이 활성화되면서 생긴 문제였습니다. 크롬은 파이어 폭스보다는 보안적인 측면이..

온프레미스(On-premise)와 클라우드(Cloud) 차이점 [내부링크]

온프레미스(On-premise)와 클라우드(Cloud) 시스템의 장단점을 말하기에 앞서 두 시스템의 정의를 먼저 이야기해볼까 합니다. 두 시스템의 정의를 알면 장단점을 조금 더 쉽게 이해할 수 있습니다. 기본적으로 두 시스템은 모두 서비스(게임, 웹 애플리케이션, 쇼핑몰, 실시간 채팅, 기타 등)를 만들 때 필요한 재료(자원)들을 구성하는 방법에 대한 이야기입니다. 온프레미스는 집을 짓는다고 할 때 집을 짓기 위한 자제 구매부터 건물 도면 그리는 작업, 시공, 건축, 그리고 인테리어까지 모든 과정을 누구의 도움 없이 집을 필요로 하는 사람이 혼자서 다 처리하는 방법입니다. 처음 집을 집는 사람뿐만 아니라 여러 번 집을 지어본 사람도 혼자서는 쉽게 할 수 있는 일이 아닙니다. 클라우드 시스템도 온프레미스처..

2021.05.16 주간회고 [내부링크]

금주 목표 1일 1회 글쓰기 [완료] 책 읽기 - 트렌드 코리아 2021 [실패] 구글 애널리틱스 사용법 정리 [완료] - 1일 1회 글쓰기 이번 주 1일 1회 글쓰기 목포는 어떻게든 달성했다. 그런데 만족스럽지 못하다. 기술을 주제로 한 글의 개수가 3개로 50%가 되지 않는다. 흐음.. 뭔가 아직 잘 정리가 되지 않기도 하고 이제는 글을 쓰려면 이전보다 시간이 많이 필요해서 난감하다. 읽는 사람한테 조금이라도 도움이 되려고 하다 보니 내용을 조금은 더 상세하게 작성해야 돼서 글 쓰는 시간이 늘어나고 있다. 지금 생활 패턴으로는 감당이 조금씩 안되고 있어서 힘들다. 그래도 일단은 계속해봐야지 - 책 읽기 [트렌드 코리아 2021] 책 내용이 재미있다.. 가십거리 정도의 책으로 생각하고 가볍게 빌린 책인..

구글 서치 콘솔을 이용해 티스토리 블로그 검색이 잘 되게하는 방법 [내부링크]

블로그를 운영할 때 중요하게 생각하는 부분 중 하나가 검색을 통해 블로그에 유입되는 수입니다. 검색으로 블로그에 유입이 되는 수를 늘리려면 중요하다고 여기는 부분은 두 가지라고 생각합니다. 1. 작성한 글을 많은 사람들에게 알려야 한다. 2. 글을 통해 독자를 잘 설득할 수 있어야 한다. 거창한 이야기를 하는 것처럼 들릴 수 있지만, 블로그를 운영함에 있어서 이 두 가지만큼 중요한 사실은 없지 않을까요? 오늘은 이 두 가지 주제 중 구글 서치 콘솔을 사용해 티스토리 블로그를 마케팅하는 방법을 알아보려고 합니다. 마케팅이라는 단어가 약간 어렵게 느껴지실 수 있지만 마케팅은 "홍보"입니다. 홍보를 유식한 척해보려고 "마케팅"이라는 단어를 사용해보았습니다. 자 그런데 구글 서치 콘솔을 통해 티스토리 블로그를 ..

XML 사이트 맵 정의와 만드는 방법 - sitemap.xml [내부링크]

웹 사이트에서 XML 사이트 맵은 어떤 의미를 가지고 있는 걸까요? 웹 사이트를 만들거나 블로그를 운영하면 한 번씩 보이는 sitemap.xml이 무슨 의미로 만들어지고 사용되는지 알아보겠습니다. XML Sitemap의 정의 XML Sitemap 공식 사이트에서는 XML 사이트 맵을 다음과 같이 정의하고 있습니다. Sitemap은 웹마스터가 크롤링에 사용할 수 있는 사이트의 페이지에 대한 정보를 검색 엔진에 알리는 손쉬운 방법입니다. Sitemap의 가장 간단한 형식은 검색 엔진에서 사이트를 보다 지능적으로 크롤링할 수 있도록 각 URL에 대한 추가 메타데이터(마지막 업데이트된 날짜, 변경 빈도, 사이트의 다른 URL에 상대적인 중요도)와 함께 사이트에 대한 URL을 나열하는 XML 파일입니다. XML ..

웹 로그(Web Log)란 무엇이고 어떻게 사용하는가 [내부링크]

웹 로그(Web Log)란? 일반적으로 웹 로그(Web Log)는 웹 서버가 가지고 있는 기록(Log)을 말합니다. 웹 로그는 서버에서 이루어지는 모든 일들을 구체적으로 기록해서 보관한 데이터입니다. 웹 로그는 상황에 따라 어떤 기록을 어떻게 보관할지 정의할 수 있습니다. 즉 사용자가 웹 사이트를 방문하고 떠나기 전까지의 일련의 과정이나 서버가 제공하는 서비스 기능 처리 내역까지 서버에서 일어난 모든 일은 기록(Log) 될 수 있고 필요에 따라 수집하고 사용할 수 있습니다. 구체적으로 예를 들면 A라는 사용자가 저녁 6시 10분에 회원 가입 페이지에 방문해서, 10분 뒤 회원 가입 완료 페이지로 이동했다면 다음과 같은 데이터를 수집할 수 있습니다. 순서 사용자 시간 내용 1 A 오후 6시 10분 회원 가..

jQuery - $(document).ready() 대신 $()를 사용하자 [내부링크]

jQuery를 사용하게 되면 바로 학습하게 되는 Event가 바로 $(document). ready()입니다. 왜 jQuery 배우게 되면 이 Event를 알게 되는 걸까요? 오늘은 jQuery의 대표 기능 중 하나인 $(document). ready() Event를 알아보도록 하겠습니다. 문법 .ready(handler) .ready()는 DOM(Document Object Model)이 완전히 불러와지면 실행되는 Event입니다. 일반적으로 브라우저가 HTML을 보여주기 위해서는 먼저 문서 구조를 만들고 만들어진 문서 구조 위에 디자인을 입히는 형식을 취합니다. 이 과정에서 디자인이 입혀지지 않은 상태로 문서 구조가 만들어진 시점에 실행되는 Event가 바로. ready()입니다. 대부분의 브라우저에..

Javascript - 브라우저 창 혹은 탭 닫기 [window.close()] [내부링크]

자바스크립트를 통해 브라우저 창이나 탭을 닫는 방법은 간단합니다. window.close()는 함수를 호출하면 됩니다. 단 window.close() 함수를 사용할 때는 한 가지를 주의해야 합니다. 바로 스크립트나 Link를 기준으로 열린 창만 닫힌다는 부분입니다. 자 그럼 브라우저 창을 닫는 window.close()는 어떻게 써야 잘 사용할 수 있는지 알아보도록 하죠. 문법 window.close(); 웹 페이지를 닫는 방법은 window.close() 함수를 호출하면 됩니다. 하지만 window.close() 함수가 문제없이 동작하려면 window.open() 함수를 통해서 열린 웹 페이지여야 한다는 조건이 있습니다. Link를 통해 열린 웹 페이지도 window.open() 함수를 통해 열린 웹 ..

유비쿼터스의 정의는 무엇인가? [IoT] [내부링크]

유비쿼터스의 정의 유비쿼터스란 "Ubiquitous"([신은] 어디에나 널리 존재한다)라는 단어에 컴퓨팅을 결합해서 만든 것으로 '언제, 어디서나 어떠한 통신 단말기를 가지고, 어느 정보통신망(네트워크)을 통해서든, 원하는 정보통신 서비스를 받을 수 있는 것'을 말합니다. 1988년 제록스의 팰로앨토 연구소의 마크 와이저가 ‘유비쿼터스 컴퓨팅이란 컴퓨터 패러다임의 제3의 물결로서 네트워크 기반의 확장형 컴퓨팅 환경을 뜻하며, 머지않아 수 백 대의 컴퓨터가 한 명의 사람을 위해서 존재하는 유비쿼터스 시대 즉, 언제 어디서나 컴퓨터에 접속할 수 있는 세계가 도래할 것’이라고 말하였고 이때를 기점으로 실질적인 연구가 시작되었습니다. 마크 와이저는 '보이지 않는 컴퓨팅' (invisible computing),..

RSS(Really Simple Syndication)는 무엇인가요? [내부링크]

RSS는 Really Simple Syndication라는 말로, 뉴스나 블로그의 콘텐츠를 표현하는 방식입니다. RSS는 웹 사이트에 새로운 콘텐츠가 발행되면 사용자가 직접 방문하지 않고도 알 수 있게 제안된 방법입니다. 웹 버전의 유튜브 구독 기능이라고 생각하시면 이해하기 쉽습니다. 즉 RSS를 사용하면 사용자는 자신이 좋아하는 여러 웹 사이트를 돌아다니지 않고 신규로 만들어진 콘텐츠를 편하게 즐길 수 있습니다. RSS를 사용하면 좋은 점 - 정보를 바로 편리하게 제공 : 새로 만들어진 콘텐츠를 확인하기 위해 지속적으로 방문하지 않아도 쉽고 편리하게 확인하고 볼 수 있습니다. - 개인형 맞춤 정보 배달 : 관심 있는 뉴스 및 새로운 정보를 해당 웹 페이지에 접속하지 않아도 실시간 직접 제공받는 맞춤 정..

CSS - :where()와 :is()를 사용해보자 [Selectors Level 4] [내부링크]

오늘은 아직은 초안(Working Draft)이지만 알아두면 좋은 가상 클래스(pseudo-class)인 :where()와 :is()에 대해서 알아볼까 합니다. :where(), :is()는 CSS Selectors Level 4에 포함된 가상 클래스입니다. :where() 반복 선택을 줄이자 article h2, article h3, article p { color: blue; } CSS Selector를 사용해 article 요소의 h2, h3, p 문자 색을 바꾸는 예제 코드입니다. 이 예제는 article 요소 선택자를 중복으로 선언해서 사용해야 하는 불편함이 있습니다. article :where(h2, h3, p) { color: blue; } 앞서 작성한 예제 코드를 :where()를 사용해서..

2021.05.09 주간회고 [내부링크]

금주 목표 1일 1회 글쓰기 [완료] 책 다시 읽기 - 마케터의 문장 [완료] 구글 애널리틱스 사용법 정리 [실패] - 1일 1회 글쓰기 1일 1회 글쓰기는 달성했다. 2주 정도 주말을 포함해서 1일 1회 글 작성하기를 하고 있다. 시간이 지날수록 더 글이 가지는 정보의 질을 높이기 위해 노력하다 보니 글을 작성하는 시간이 줄기는커녕 늘어나기만 한다. 다른 목표에도 영향을 끼치고 있어 어떻게 해야 할지 고민이 된다. 아무래도 기술과 관련된 이야기다 보니 정리할 부분도 많고 말도 풀어서 쓰려고 하다 보니 더 어렵다. 날이 갈수록 고민은 풀리지 않고 쌓여만 가서 걱정이다. - 책 다시 읽기 [마케터의 문장] 마케터의 문장 책은 지난주 완독 후 이번 주에 한번 더 완독을 했다. 결론적으로 나쁘지 않은 선택이라..

Javascript - typeof 연산자 사용법을 알아보자 [내부링크]

자바스크립트는 변수 타입을 문자로 반환하는 함수인 typeof 연산자를 제공합니다. typeof 연산자는 undefined, null, boolean, number, string, symbol, object, function의 자바스크립트가 가진 7가지 변수 타입을 구분하는 용도로 사용합니다. 문법 typeof operand typeof(operand) typeof 연산자는 타입을 확인해야 하는 피연산자 앞에 위치합니다. typeof는 연산자이므로 함수처럼 괄호[()]를 사용할 필요가 없습니다. 즉 피연산자의 타입을 확인할 때는 typeof(operand)가 아니라 typeof operand를 사용하는 것이 맞습니다. typeof(operand)도 사용 가능한 문법이지만, 불필요한 괄호[()]를 넣은 사..

Javascript - DocumentFragment를 사용해보자 [성능 최적화] [내부링크]

Javascript는 브라우저가 정의하고 사용하는 DOM(Document Object Model)을 다룰 수 있습니다. DOM을 처음 접하시거나 아직은 잘 모르겠다고 생각하시는 분은 DOM을 HTML의 구조적인 정의를 다루는 요소라고 생각하시면 됩니다. HTML과 DOM을 구체적으로 정의 내리면 다음과 같습니다. HTML은 웹 페이지의 문서 구조를 생성하는 태그 시스템이고 DOM은 HTML이 가지는 문서 구조를 다룰 수 있는 인터페이스입니다. DOM은 HTML의 구조를 계층형 트리 형태로 정의합니다. 그리고 브라우저는 HTML이 가진 구조를 Style Sheet인 CSS를 사용해 화면을 그려 사용자가 쉽게 웹 페이지를 이용할 수 있도록 합니다. DOM은 원래 XML 문서를 정의하기 위한 인터페이스였지만,..

CSS - 깜빡이는 효과 [Blink Effect] [내부링크]

CSS의 애니메이션을 사용해서 HTML의 blink 태그처럼 깜빡이는 효과를 만드는 방법을 알아보겠습니다. HTML의 blink 태그는 더 이상 지원을 하지 않는 방법이니 혹시라도 사용하고 계시거나 사용할 예정이라면 CSS의 애니메이션을 사용하시는 게 더 좋은 방법입니다. 커서처럼 깜빡이는 효과 만들기 - Blink Effect @keyframes blink-effect { 50% { opacity: 0; } } .blink { animation: blink-effect 1s step-end infinite; /* animation-name: blink-effect; animation-duration: 1s; animation-iteration-count:infinite; animation-timing-..

클라우드 컴퓨팅과 클라우드 서비스 [SaaS, PaaS, IaaS] [내부링크]

클라우드 컴퓨팅은 무슨 말일까요? 요즘은 IT 기술들을 사람들이 대중적으로 접할 수 있다 보니 클라우드 혹은 클라우드 컴퓨터와 같은 단어를 간혹 접하게 되는데요. 클라우드 컴퓨팅은 알아두면 유식해 보일 수 있는 IT 기술입니다. 비슷한 개념으로 유비쿼터스라는 개념이 있는데요. 얼핏 개념을 들으면 클라우드 컴퓨팅과 유비쿼터스는 매우 유사해 보이지만 실체는 엄연히 다른 개념을 가지고 있는 기술들입니다. 오늘은 클라우드 컴퓨팅이 어떤 개념인지 알아보도록 하겠습니다. 클라우드 컴퓨팅 개념 및 정의 클라우드 컴퓨팅의 사전적인 의미는 인터넷 상의 서버를 통하여 데이터 저장, 네트워크, 콘텐츠 사용 등 IT 관련 서비스를 한 번에 사용할 수 있는 컴퓨팅 환경입니다. 즉 네트워크를 이용해 사용이 가능한 컴퓨터로 존재하..

Javascript - XMLHttpRequest 사용하기 [내부링크]

웹 페이지에서 데이터를 보여주기 위해서는 서버와 통신을 해야 합니다. 통신을 하는 일련의 과정으로는 서버에 데이터를 달라고 요청을 보내고 결과를 받아와야 하는데요. 이때 서버와 주고받는 데이터를 쉽게 다룰 수 있는 방법이 XMLHttpRequest를 사용하는 방법입니다. 웹 개발 방법 중 하나인 AJAX(Asynchronous Javascript And Xml)를 이야기할 때 사용하는 통신 객체이기도 합니다. 문법 const xhr = new XMLHttpRequest(); const method = "GET"; const url = "https://7942yongdae.tistory.com/"; // 요청을 초기화 합니다. xhr.open(method, url); // onreadystatechange..

Javascript - 브라우저 닫기 혹은 새로고침 감지하기 [내부링크]

HTML의 이벤트 중 beforeunload를 이용하면 브라우저 닫기나 새로고침을 감지할 수 있습니다. 일반적으로 화면에서 저장하지 않은 데이터가 있거나, 사용자의 실수로 인해 페이지를 나가려고 할 때 알림을 주는 용도로 사용됩니다. 예시로는 블로그에 글을 작성하다가 도중에 페이지를 나가려는 경우 사용자에게 알림 창을 보여 줄 수 있습니다. beforeunload 이벤트를 사용하면 사용자가 페이지를 떠날 때, 페이지를 떠날 것인지 여부를 묻는 대화 상자를 표시할 수 있습니다. 사용자가 확인을 누르면 페이지는 닫히며, 취소를 누르면 페이지를 떠나지 않고 현재 페이지에 머무릅니다. 문법 beforeunload 이벤트를 사용해서 사용자가 페이지를 떠나는 것을 확인하는 방법은 다음과 같습니다. window.ad..

Javascript - 디바이스 구분하기 [Mobile, PC] [내부링크]

이번에는 Javascript를 통해 디바이스를 확인하는 방법을 알아보겠습니다. 일반적으로 디바이스를 구분하기 위해서는 브라우저가 가지고 있는 navigator.userAgent를 사용합니다. 여기서 에이전트라는 의미는 사용자를 대신해서 웹 페이지를 보여주는 디바이스를 말하는데요. 바로 웹 페이지를 보실 때 사용하고 계신 도구를 말한다고 생각하시면 됩니다. PC를 이용해 웹 페이지를 보고 있다면 PC가 에이전트이고, 핸드폰을 통해 웹 페이지를 보고 계신다면 핸드폰이 에이전트가 됩니다. Navigator.userAgent 브라우저의 콘솔 기능을 이용해 navigagor.userAgent를 출력한 내용입니다. userAgent는 브라우저 이름, 브라우저 버전, 렌더링 엔진, 렌더링 엔진 버전, OS 등 현재 ..

티스토리 블로그 첫 달 애드센스 수익 인증하기! [내부링크]

오늘은 구글 애드센스 승인 후 애드센스 첫 달 수익에 대해 이야기해보려고 합니다. 애드센스 승인 메일을 받은 지 약 한 달 정도가 지났습니다. 블로그 운영을 시작한 지 약 2개월이 되어가는 시점에서 블로그의 처음 모습과 지금 모습은 여러 가지 측면에서 많이 달라졌습니다. 4월 방문 통계 블로그를 시작한 첫 달인 3월은 방문자가 390명이었는데요. 4월 기준으로 방문자가 2,888명이네요. 아직은 블로그가 만들어진 시점이 얼마 되지 않고, 등록된 글의 숫자가 적다 보니 검색을 통해 유입이 되는 수가 적습니다. 검색을 통해서 유입이 된 비율은 19%, SNS는 7%, 기타가 74%로 기타가 압도적으로 높은 비율을 차지하네요. 포럼을 통해서 지속적으로 블로그를 홍보했고, 여러 블로그를 구독하고 소통을 하다 보..

객체지향 생활 체조 - 규칙 6: 모든 엔티티를 작게 유지 [내부링크]

모든 엔티티를 작게 유지한다. 이 규칙이 가지는 의미 이 말은 50줄 이상 되는 클래스와 10개 파일 이상 되는 패키지는 없어야 한다는 뜻이다. 이 규칙을 책에서는 위와 같이 설명했다. 이 말은 어느 정도 공감하지만 실제로 만들어지는 응용 소프트웨어에서도 가능한가?라고 했을 때의 답은 잘 모르겠다. 하다못해 어떤 객체에 기능이 5줄짜리인 메서드가 10개만 있어도 이 객체에는 더 이상 기능을 추가하기 어렵다. 말이 10개의 메서드이지 객체를 만들다 보면 10개의 기능은 금방 추가된다. 여기서 공감할 수 있는 부분은 객체가 가진 코드 줄의 수가 100줄만 이상만 돼도 그 객체가 무슨 행동을 하는지 파악하기가 어려운 것은 사실이다. 또한 패키지도 객체처럼 응집력이 있고 단일한 목표가 있어야 한다고 말한다. 이..

Javascript - ES6의 let과 const 그리고 var의 차이 [내부링크]

ES6에서는 let, const라는 새로운 키워드가 도입이 되었습니다. const는 한번 값이 정해지면 변경이 불가능한 값을 담을 때 사용하고, let은 동적으로 바뀌는 값을 담을 때 사용하는 변수 타입입니다. 자바스크립트의 변수에 대한 설명은 이전에 발행한 글을 확인해주세요. 오늘은 ES6이전에 주로 사용하던 var와 ES6에서 새롭게 추가된 let, const의 차이점을 통해 var, let, const에 대해 학습해보도록 하겠습니다. var, let, const의 사용법에 대한 결론을 먼저 내린다면 var의 사용을 지양해주세요. let과 const를 사용해 코드를 작성하세요. 1. var의 scope는 함수 단위이고 let, const의 scope는 블록 단위입니다. var 타입은 스코프가 함수 단..

2021.05.02 주간회고 [내부링크]

금주 목표 1일 1회 글쓰기 책 한 권 읽기 - 마케터의 문장 애드센스 자료 정리 1개 - 1일 1회 글쓰기 이번 주 1일 1회 글쓰기 목표는 달성했다. 이번 주는 여태까지와는 조금 다르게 코드를 위주로 글을 작성하기보다는 생각을 정리한 글을 많이 작성한 것 같다. 지난주 계획을 할 때는 구체적인 조건을 정의하고 글을 쓰기로 했는데, 그 부분은 실패했다. 구체적인 조건은 딱 한 가지만 정했다. 제한 시간을 정하고 그 시간 안에 글을 쓰자라고.. 정말 어렵다. 글의 내용은 완전히 산으로 가고.. 어떻게 해야 할지는 모르겠고.. 이번 주 한주도 이번 주와 똑같은 조건으로 한번 더 해보려고 하는데 어떻게 될지 잘 모르겠다. 이번 주 1일 1회 글쓰기를 하면서 느낀 점은 이전보다 분명 글을 쓰는 속도는 빨라지고..

블로그 주제를 잘 선정해야하는 3가지 이유 [내부링크]

이번에는 블로그 주제 선정의 중요성을 이야기해보려고 합니다. 블로그를 운영할 때 주제가 중요하다고 이야기합니다. 블로그 주제는 왜 중요한 걸까요? 단순히 수익하고 관련이 되어 있어서 그렇게 이야기하는 걸까요? 열심히 책도 보고 블로그 운영 자료도 보면서 블로그 주제를 잘 선정해야 하는 이유를 추론해보았습니다. 완전히 맞는 결론이라고 생각하지는 않지만 큰 그림에서의 기준은 바뀌지 않을 것 같다는 생각이 드네요. 1. 블로그 주제는 앞으로 쓸 글의 가짓수를 결정한다. 블로그의 주제는 블로그에 포스팅 할 수 있는 글의 개수를 정한다고 이야기할 수 있습니다. 주제에 대해 얼마나 잘 아느냐 모르느냐는 크게 중요하지 않습니다. 자신이 잘 아는 분야를 바탕으로 글을 쓸면 전문적인 지식을 조금 더 가지고 쓸 수 있을 ..

네카라쿠배당토 - 개발자 이야기 [내부링크]

네카라쿠배당토는 무슨 말인가요? 네카라쿠배당토는 개발자 취업 준비를 하는 사람들이 가고 싶어 하는, 인기 있는 IT 기업들의 이름 앞글자를 따서 부르는 말로 네이버, 카카오, 라인, 쿠팡, 배달의 민족(우아한 형제들), 당근 마켓, 토스를 말합니다. "네카라"로 시작해서 "네카라쿠배", "네카라쿠배당토" 그리고 최근에는 직방과 야놀자가 추가되어 "네카라쿠배당토직야"라고도 합니다. 최근 IT 기업들은 채용을 늘리고 있습니다. IT는 비대면 사업들과 밀접한 관계를 가지기도 하고, 실제로 규모가 점점 커지다 보니 자연스러운 현상입니다. 장기화된 코로나 19로 인해 경제 상황이 좋지 않아, 채용을 줄이는 일반적인 회사와는 다른 행보를 걷고 있습니다. 그렇다 보니 IT로 취업을 하려는 사람들은 많아지고, 취업하고..

블로그 글을 잘 쓰는 방법 - 퇴고하기 [내부링크]

요즘 블로그를 운영하면서 글을 쓴다는 것은 무척이나 어렵다는 것을 느낍니다. 물론 연습도 없이 처음부터 좋은 글을 쓰는 것은 쉬운 일은 아니겠죠. 하지만 가벼운 주제라고 생각하고 써 내려가던 글이 어느 순간 막혀서 기약 없이 시간을 보내거나, 글 쓰기가 어려워 처음부터 아무것도 못하고 멍한 상태인 경우가 다반사네요. 글을 쓰는 게 어렵다는 이야기는 둘째로 치고, 어떻게든 완성한 글이 마음에 안 드는 이유는 왜일까요? 어떻게 해야 만족스러운 글을 아니, 문장을 쓸 수 있는 걸까요? 글을 잘 쓰는 사람들이 쓴 글 잘 쓰기 방법에 관련된 책들을 보면 공통적으로 이야기하는 내용이 한 가지 있습니다. 바로 '퇴고'를 해라입니다. 문장의 질은 '퇴고'를 통해서 높아지고, 결국 문장의 질은 글의 품격을 높여준다고 말..

Javascript - 변수와 상수 그리고 리터럴 [내부링크]

이번에는 자바스크립트로 프로그래밍을 할 때 꼭 알아야 할 변수와 상수 그리고 리터럴에 대해 알아보도록 하겠습니다. 조금은 다른 이야기지만 프로그래밍에 있어 용어가 가지는 개념은 중요합니다. 예를 들어 변수와 리터럴과 같은 용어들이 정확히 무슨 의미를 어떻게 가지는지 잘 모른다면 개발자들끼리 소통을 할 때 사소하지만 이해 포인트가 다르거나 오해를 하능 경우가 생깁니다. 프로그래밍에서 사용되는 용어들은 자바스크립트뿐만 아니라 컴퓨터 과학 전반에서 사용하기 때문에 용어를 잘 알고 기억해둔다면 다른 언어를 가지고 프로그래밍을 할 때도 도움이 됩니다. 변수와 상수의 정의 그리고 사용법 일반적으로 변수의 정의는 값을 가지고 있고 이 값은 언제든 바뀔 수 있으며 사용할 수 있다고 설명합니다. 간단히 말해 변수란 '값..

웹 개발자는 어떤 일을 하나요? [풀스택, 프론트엔드, 백엔드, 퍼블리셔] [내부링크]

웹 개발자는 회사에 출근하면 어떤 일을 할까요. IT 직군과 접점을 가지고 있는 사람이라면 모를까 일반적으로 사람들이 접하는 IT라는 개념은 핸드폰으로 사용하는 애플리케이션이나 컴퓨터를 통해 이용하는 엑셀, 한컴 같은 프로그램 같은 프로그래밍의 산출물이다 보니 개발자가 일하는 모습을 이미지로 떠올리기가 쉽지 않습니다. 만약 아니라면 영화나 드라마에서 나오는 단 몇 초만에 해킹에 성공하는 만능 해커나 뚝딱 페이스북 같은 프로그램을 만드는 천재 프로그래머의 모습을 떠올리시나요? 웹 개발자의 정의 식상할 수도 있지만 웹 개발자가 어떤 일을 하는지 알아보기 전에 웹 개발자에 대한 정의를 먼저 내려보려고 합니다. Wiki에는 "HTTP 프로토콜을 커뮤니케이션 매체로 사용하는 웹 페이지, 웹 사이트 등 WWW 기반..

Javascript - 문자열 자르기 [split, substring, substr] [내부링크]

자바스크립트에서는 문자열을 자르는 방법으로 split, substring, substr 함수를 제공합니다. 단순히 문자 값을 자르는 데에 왜 이렇게 많은 split(), substring(), substr() 함수들이 제공되고 있는 걸까요? 오늘은 split(), substring(), substr() 각 각의 함수들이 가지는 정의와 사용법에 대해 알아보도록 하겠습니다. split 정의와 사용법 str.split([separator[, limit]]) 반환 : split은 문자열을 separator를 기준으로 limit 만큼의 크기를 가진 새로운 문자 배열을 반환합니다. separator [옵션] : 구분자는 문자열을 나눌 때 기준이 되는 값으로 문자(character)이나 정규표현식을 사용할 수 있습니..

macOS Big Sur 11.3 정식 버전 릴리즈 [내부링크]

오늘 macOS Big Sur 11.3 정식 버전이 릴리즈 되었습니다. 이번 배포는 지난 2021년 4월 21일 발표한 AirTag 지원을 포함하고 있습니다. 아직 한국에서는 공식적으로 판매되는 제품이 아니라 AirTag의 기능을 사용해볼 수 없겠네요. Air Tag 외에도 M1 칩을 탑재한 제품을 위한 지원 및 수정사항도 있으니 M1 계열의 제품을 사용하시는 사용자라면 이번 업데이트를 통해 활용도를 높여보세요. macOS Big Sur 11.3 패치 내용 요약 정리 AirTag 지원 이제는 AirTag를 사용해 중요한 물품을 등록하고 쉽게 찾을 수 있습니다. 정식으로 배포된 OS를 통해 AirTag를 손쉽게 사용해보세요! HomePod 스테레오 지원 이전에 배포된 macOS에서는 HomePod의 재생을..

Javascript - 새로 고침 [reload] [내부링크]

이번에는 자바스크립트를 사용해 페이지를 새로 고침 하는 방법에 대해 알아보려고 합니다. 화면 개발을 하다 보면 페이지 전체를 다시 불러와야 하거나 특정 영역을 갱신해야 하는 경우가 발생하는데 이런 경우 일반적으로는 location을 사용합니다. 특정 부분을 갱신해야 할 필요가 있다면 iframe을 사용하거나 jQuery의 load를 사용해야 하는데 이번 글에서 다루기에는 내용이 많아 이 부분까지는 다루지 않고 전체 페이지 새로 고침에 대해서만 이야기해보도록 하겠습니다. location.reload() 인터넷 자료를 찾아보면 자바스크립트를 통해 페이지를 새로 고침을 하는 방법은 일반적으로 location과 history를 사용합니다. // location을 사용하는 방법 location.reload(); ..

Javascript - Array reduce, reduceRight 사용법 [내부링크]

이번에는 Javascript의 array가 가진 filter 함수의 정의와 사용법 더불어 활용법에 대해 이야기해보려고 합니다. array의 함수 중 map, filter만큼 잘 쓰이는 함수는 아니지만 함수 결과를 체이닝 형식으로 사용하기 때문에 합산과 같은 연속적인 일들의 결과를 만들어 낼 때 자주 사용됩니다. reduce 정의 Array.prototype.reduce ( callbackfn [ , initialValue ] ) reduce는 단어 의미 그대로 해석하면 줄이다는 표현인데, 함수로 정의된 내용은 배열의 값을 하나씩 줄여가면서 모든 배열을 순회할 때까지 결과를 callbackfn에 전달합니다. 주로 그룹 지어진 데이터의 결과를 도출할 때 사용하는 편입니다. 예를 든다면 덧셈이나 곱셈 같은 합..

2021.04.25 주간회고 [내부링크]

금주 목표 1일 1회 글쓰기 책 한 권 읽기 - 1만 시간의 재발견 애드센스 자료 정리 1개 - 1일 1회 글쓰기 이번 주에도 1일 1회 글쓰기 목표는 달성했다. 매주 회고할 때마다 다음 주는 못해, 안 해를 반복하면서도 어떻게든 목표로 정해놓고 하다 보니 아슬아슬할 때도 있지만 달성은 하고 있다. 주로 이번 주는 Javascript 위주로 글을 작성했다. 프로그래밍 내용이다 보니 글을 보는 사람이 코드를 읽기 쉽게 하기 위해 Codepen과 에디터의 코드 블록 기능을 번갈아 사용하면서 어떻게 더 좋을지 실험해보고 있다. 현재는 코드 블록이 더 좋다고 판단하고 있는데 확실한 결정은 한 달 내지 두 달 정도의 시간이 흐르면 자연스레 확정이 될 것 같다. 그리고 이번 주부터는 글을 작성할 때 글을 작성하는 ..

블로그 구글 애드센스 승인 후 해야 할 일 [내부링크]

블로그 구글 애드센스 승인이 끝일까? 운이 좋게도 구글 애드센스 승인을 어렵지 않게 받았습니다. 승인 메일을 받았을 때는 제가 쓰고 있는 글이 가치를 인정받을 수 있다는 사실이 기쁘기도 했지만 한편으로는 아무것도 준비를 해놓지 않은 상황이라 난감하기도 했습니다. 낯설다고 해야 하나? 말로만 구글 애드센스라는 것을 듣고 막연히 신청했던 거라 어디서부터 무엇을 준비해서 어떻게 하고 적용해야 하는지 어렵기도 하고요. 지금도 어렵지 않다는 말은 아니지만 구글 애드센스와의 첫 만남은 모든 게 생소하고 신기하기만 했습니다. 그래서 블로그를 운영하시는 다른 분들도 저와 마찬가지지 않을까라는 생각에 이 글을 작성하게 되었습니다. 구글 애드센스 승인은 시작이다. 구글 애드센스는 블로그 운영을 통해 광고 수익을 얻을 수 ..

Javascript - Array filter 사용법 [내부링크]

이번에는 Javascript의 array가 가진 filter 함수의 정의와 사용법 더불어 활용법에 대해 이야기해보려고 합니다. array의 함수 중 가장 많이 쓰이는 함수 중 3 대장이라고 할 수 있는 것이 map, filter, reduce인데요. 그중 filter는 활용도가 높은 편이라 어디라고 정해진 곳 없이 사용되는 편입니다. 자 본격적으로 array의 filter 함수를 알아보러 가시죠. filter 정의 Array.prototype.filter ( callbackfn [ , thisArg ] ) filter는 해석 그대로 걸러주는 역할을 하는 함수입니다. 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하는 편입니다. SQL로 치면 where절에서 하는 행위를 하는 함수입니다. EC..

Javascript - Array map 사용법 [내부링크]

오늘은 Javascript의 Array가 가지고 있는 map의 정의와 사용법 그리고 활용 방법에 대해 이야기해보려고 합니다. 일단 Array가 가진 map 함수가 어떤 함수인 지부터 살펴보도록 하죠. map 정의 Array.prototype.map ( callbackfn [ , thisArg ] ) 주로 주어진 배열의 값을 재정의 할 때 사용하는 방법으로 ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 정의되어있습니다. 예제 코드를 통해 map의 사용법을 살펴보겠습니다. const numbers = [1, 2, 3, 4, 5]; const result = numbers.map(number => number * num..

Javascript - replace, replaceAll [문자 치환하기] [내부링크]

자바스크립트에서 특정 문자를 찾아 원하는 문자로 치환할 수 있는 replace()라는 API를 제공합니다. 오늘은 replace() 함수를 통해 문자 치환하는 기능을 다루어보겠습니다. replaceAll() replace()를 알아보기에 앞서 replaceAll() 함수에 대해 먼저 알아보겠습니다. 일단 Javascript의 내장 기능 중 replaceAll()은 없다고 생각하시는 게 좋습니다. ECMA-262 12th(2021) 스펙을 기준으로 replaceAll() 기능이 추가되었기 때문에 최신을 바탕으로 하는 개발 환경이 아니라면 replaceAll()은 사용하기가 어렵습니다. See the Pen repalceAll by yongdae (@yongdae) on CodePen. replace() 본..

Javascript - null과 undefined의 차이 그리고 확인 및 처리 [내부링크]

null과 undefined은 존재하지 않는 것을 나타내는 자바스크립트가 가진 특별한 타입입니다. null은 Java 나 c# 같은 다른 언어에서도 사용되는 리터럴이기 때문에 사용하는 게 어렵지 않지만 undefined라는 타입은 기존에 null을 사용하던 프로그래머와 처음 자바스크립트를 마주한 사람에게는 혼란을 야기시키는 내용 중 하나입니다. null과 undefined의 차이는 무엇이고 어떻게 사용하는 게 좋은 걸까요? null과 undefined 알아보기 결론적으로 null과 undefined의 의미는 둘다 값의 존재 유무를 표현하는 타입입니다. 자바스크립트에서는 세밀한 부분의 의미는 달라도 문맥적 의미로는 같은 의미를 가진 가진 타입을 2개로 분리해서 정의하다보니 프로그래머 입장에서는 애매모호함을..

Javascript - Date 시계 만들기 [내부링크]

이번 글에서는 이전에 학습한 Javascript의 Date() 객체를 활용해서 문자 시계(Text Clock)를 만들어 보겠습니다. 자바스크립트의 내장 객체인 Date와 타이머 함수인 setInterval()을 사용하면 년, 월, 일, 시간을 보여주는 시계를 만들 수 있습니다. 문자 시계(Text Clock) 만들기 화면에 날짜와 시간을 표시하기 위해서는 Date객체의 날짜 및 시간 데이터 값을 가져오는 함수가 필요하고 일정 시간을 주기로 화면에 보이는 값을 갱신하기 위해서는 setInterval() 함수를 사용합니다. 이렇게 Date 객체의 날짜 및 시간 제공 함수와 특정 주기 반복 실행 함수를 가지고 쉽게 문자 시계(Text Clock)를 만들 수 있습니다. : . . 예제로 작성한 코드는 첨부파일로..

Javascript - Date 날짜 계산 [날짜 비교, 날짜 차이] [내부링크]

이번 글에서는 Javascript의 Date 객체를 이용해 서로 다른 날짜를 비교하는 방법에 대해 알아보려고 합니다. 날짜를 비교하는 방법은 이전에 학습한 날짜 형식 맞추기나 날짜 설정하는 것에 비해 비교적 간단합니다. 기본적으로 비교 연산자를 사용해 서로 다른 날짜의 차이를 알 수 있습니다. 날짜 차이 또는 날짜 비교 혹은 날짜 계산 const january = new Date(2021, 0, 1); const february = new Date(2021, 1, 1); // true console.log(january < february); // false console.log(january > february); Date 객체는 비교 연산자를 이용해 값의 차이를 비교할 수 있고, 이를 통해 이전 날짜..

Javascript - Date 날짜 형식 [yyyy-MM-dd] [내부링크]

이번에는 Javascript의 Date 객체가 가진 format 형식 지정과 toString에 대해 이야기해보려고 합니다. Javascript의 Date 객체는 날짜의 형식과 관련해 편리함 없이 불편한 기능들을 제공합니다. 기본적으로 7가지의 형식을 정의하고 있으며, 앞서 말했듯 이 기능들은 편의성이 떨어져 잘 사용되지 않습니다. Date 기본 날짜 형식 지정 및 출력 Date 객체는 기본적으로 7가지의 형식 출력을 제공합니다. const today = new Date(); today.toString(); // Mon Apr 19 2021 23:02:18 GMT+0900 (Korean Standard Time) today.toDateString(); // Mon Apr 19 2021 today.toLoc..

Javascript - Date 날짜 계산 [더하기, 빼기, 설정] [내부링크]

오늘은 Date 객체가 가진 get, set 함수를 통해 날짜 및 시간 데이터를 가져오고 설정하는 방법에 대해서 이야기하려고 합니다. Date 객체를 사용하는 기초적인 부분을 아직 잘 모르시거나 조금 더 알고 배워보고 싶으신 분은 먼저 이전에 작성한 글을 통해 학습 후 이 글을 통해 조금은 더 능숙하게 Date 객체를 다뤄보시기를 추천드립니다. Javascript - Date 기초 배우기 [new Date()] 맨 처음 자바스크립트를 통해 만난 Date는 생각보다 사용하기도 어렵고 어?라고 할 정도로 모호하고 쓰기 불편한 점이 많습니다. Java의 Date, Calendar 만큼 개발을 하는데에 편의성이나 활용도가 떨 7942yongdae.tistory.com 날짜 설정하기 const nextYear =..

2021.04.18 주간회고 [내부링크]

금주 목표 1일 1회 글쓰기 (완료) 책 한 권 읽기 - 1만 시간의 재발견 (미완료) 애드센스 자료 정리 (진행 중) - 1일 1회 글쓰기 이번 주에도 하루에 한 개의 포스팅을 하는 목표는 달성을 완료했다. 한 3주 정도 쓰면 어느 정도 익숙해지고 쉬워질 줄 알았는데 되려 시간이 지날수록 어려워지는 느낌이 더 강하다. 조금 더 글에 채우는 정보를 좋은 주제들로 채우고 유익한 내용으로 문장을 적고 싶다고 생각하다 보니 익숙해지는 것은 머나먼 훗날의 일이 될 거라는 예감이 든다. 지금까지는 작성하는 글의 주제를 어떻게 잡아야 할지 갈피를 잡지 못하고 있었는데 이번 주에 읽은 구글 애드센스로 돈 벌기, 구글 애드센스 마케팅, 개발자의 글쓰기라는 책을 읽으면서 조금이나마 가야 할 방향을 잡을 수 있었다. 블로..

내가 쓴 글을 구글이 싫어할지 모른다 - 검색에 노출이 되지 않을 때 [내부링크]

노출이 잘 되고 잘 되지 않는 글(데이터)은 무슨 차이가 있나 만약에 구글과 같은 검색 사이트나 다음, 네이버 같은 대형 포털 사이트가 내가 작성한 글을 좋아하지 않는다면 어떻게 되는 걸까? 아니 좋아하는 것은 둘째치고 싫어한다면 어떻게 되는 거지? 아니 도대체 좋아하고 싫어하고 근거나 기준이 있기는 한 거야?라는 생각이 문득 들었습니다. 왜인지 열심히 작성하고 있는 글이 나 혼자만 알고 남들이 모른다면 보람도 재미도 없을뿐더러 글의 가치가 낮게 평가받고 있는 부분이니 글을 잘 써서 가치를 인정받고 싶은 마음이 생기는 것은 비단 저만 가진 생각은 아니라고 생각합니다. 그렇다면 정말로 지금 쓰고 있는 이 글이나 동시에 무수히 만들어지고 인터넷에 올라오는 글(데이터)은 어떻게 판단되고 측정되고 있는 걸까요?..

Javascript - Date 사용법 알아보기 [내부링크]

맨 처음 자바스크립트를 통해 만난 Date는 생각보다 사용하기도 어렵고 어?라고 할 정도로 모호하고 쓰기 불편한 점이 많습니다. Java의 Date, Calendar 만큼 개발을 하는데에 편의성이나 활용도가 떨어집니다. 그래서 Javascript 같은 경우 내장하고 있는 Date보다는 Moment와 Date-fns와 같은 별도의 라이브러리를 통해 Date(날짜 및 시간)를 사용합니다. 오늘은 어렵지만 알아두면 좋은 Javascript의 Date를 전반에 걸쳐 살펴보도록 하겠습니다. Date의 Timezone 자바스크립트 Date는 2개의 시간대를 고려하고 만들어졌습니다. - Local time: 현재 실행되고 있는 환경을 기반으로 한 시간대입니다. - UTC(Coordinated Universal Tim..

객체지향 생활 체조 - 규칙 5: 축약 금지 [내부링크]

줄여쓰지 않는다. (축약 금지) 이 규칙이 가지는 의미 int numCnt = 4; for(int i = 0; i < list.size(); i++) { ... } String btnText = "hello world"; 프로그래밍을 하다 보면 자주 보게 되는 변수명들이 있는데 생각이 나는 대로 적어보면 다음과 같다. 코드를 작성하다 보면 클래스명이나 메서드명 아니면 변수 명의 이름을 줄여서 쓰고 싶은 욕구를 느끼게 된다. 그 이유는 주로 이곳저곳에서 값들을 가져와서 사용하다 보면 구분을 짓기 위해 접두사를 사용하게 되는데 그 접두사를 이어 붙이다 보면 이름의 길이가 길어져서 한글 자라도 줄이고자 count는 cnt, index는 i, button은 btn 같이 이름을 함축적으로 줄여 쓰게 된다. 또한 ..

Error - Port 8080 was already in use [내부링크]

Port 8080 was already in use 에러와 원인과 해결 방법 메시지 *************************** APPLICATION FAILED TO START *************************** Description: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that's listening on port 8080 or configure this application to listen on another port. Process finished with exit code 1 원인 이 에러가 발생하는 경우는 서버를 구동하려고 할 때 서버가 사..

티스토리 포스트 주소 설정 장단점 알아보기 - 검색 노출 순위 높이기 [내부링크]

시작하기 일반적인 웹사이트 개발은 내부적으로만 사용하는 대외비적인 성격이 강해서 외부의 검색과 무관하게 진행됩니다. 그렇다 보니 개발자임에도 검색 그리고 특히 SEO(Search Engine Optimization)과 같은 기술을 공부하거나 관심을 가지지 않았습니다. 그렇지만 일반 사용자를 대상으로 하는 플랫폼을 개발을 하게 되면서 이전과 다른 학습이 필요했는데 그 부분 중 일부가 검색과 SEO 기술이었습니다. 검색에 대한 지식을 처음 접하시는 분을 위해 SEO에 대해 간략히 이야기드리면 티스토리 글(데이터)이나 네이버 블로그 글(데이터) 아니면 어떤 웹 사이트에서 생산되는 글(데이터)을 인터넷에서 잘 검색이 될 수 있도록 해주는 기술 사양의 일부입니다. 즉 지금 작성하고 있는 이 글과 같은 일종의 데이..

웹 크롤러(web crawler)? 웹 스파이더(web spider)? 도대체 뭘까요? [내부링크]

시작하기 웹 크롤러(web crawler) 아니면 웹 스파이더(web spider)라고 불리는 것은 통칭 엔진 봇이라고 말하는 프로그램입니다. 일명 방대한 네트워크를 말하는 WWW(World Wide Web), 즉 웹을 돌아다니면서 데이터를 수집하고 색인하는 임무를 수행합니다. 웹 크롤러와 관련된 내용을 검색해보면 크롤링, 스크래핑이라는 단어도 연관되어서 나오는데 크롤링은 앞서 말한 웹 클롤러가 하는 임무를 정의하는 말이지만 스크래핑은 다른 성격을 지는 내용입니다. 크롤링(crawling)은 정해진 규칙을 지키면서 웹 문서를 수집하고 색인하는 작업이고 스크래핑(scraping)은 웹 공간에 있는 특정 목적을 가지고 취득해 사용하는 방법을 말합니다. 분명히 크롤링과 스크래핑은 엄연히 목적을 지니고 다른 작..

웹 개발자 취업 준비하기 - 프론트엔드 인터뷰 [내부링크]

시작하기 개발자로 회사에 취업을 하기 위해 면접을 보거나 채용을 위해 인터뷰를 하게 되면 의외로 기초적인 부분을 많이 놓치고 있다는 것을 느낍니다. 개인적으로는 제대로 기술을 가르쳐주지 않고 학원에서 찍어내듯이 양성되는 개발자들과 급박한 일정에 맞추어 배움과 이해 없이 개발만 하는 환경적인 요소가 그런 상황을 만들게 아닐까 가끔 생각하곤 합니다. Github의 몇 개의 Repoistory를 통해 프론트엔드 개발자라면 알아야 할 내용에 대해 정리하였습니다. 프론트엔드 개발자를 준비하시는 예비 개발자 분들에게는 취업에 도움이 되었으면 좋겠습니다. 1. 프론트엔드 인터뷰 핸드북 [front-end-interview-handbook] 웹 화면을 개발하기 위해 필수적으로 알아야 할 HTML, CSS, Javasc..

2021.04.11 주간 회고 [내부링크]

금주 목표 1일 1회 글쓰기 책 한 권 읽기 - 1만 시간의 재발견 (추가) 애드센스 반영하기 - 1일 1회 글쓰기 이번 주는 하루에 한 개씩 개발을 주제로 해서 포스팅하는 목표는 달성할 수 있었다. 글을 써놓고 보니 보완할 내용도 많고 전달하려고 했던 의도를 분명히 하지 못한 이야기도 있어 아쉬움이 많은 글들이 유난히 많은 것 같다. 생각지 못하게 구글 애드센스를 달면서 금전에 대한 욕망이 생겨났다. 애드센스를 달기 위해 블로그를 수정을 여러 가지 시도하다 보니 원래 목표로 한 글 쓰는 기는 잘했지만 양적으로나 질적으로 너무 미완인 게 아닌가 싶다. - 책 한 권 읽기 [1만 시간의 재발견] 베스트셀러로 한 때 서점가를 누볐던 책이다. 이전에도 기회가 있어 한 번 읽어 본 적이 있었는데 당시에 일이 있..

객체지향 생활 체조 - 규칙 4: 한 줄에 한 점만 사용 [내부링크]

Photo by Xiaofen P on Unsplash 한 줄에 점 하나만 찍는다. "한 줄에 한 점만 사용"이라는 규칙은 코드를 작성할 때 한 줄(Line)에 "." 하나만 사용하자는 이야기입니다. 단순하게 코드 한 라인에 "." 하나를 사용하는 규칙을 적용하면 코드의 가독성이 좋아집니다. 간단하게 예를 들면 자바에서 람다식을 무자비하게 사용한 코드들에 "한 줄에 한 점만 사용" 이 규칙을 적용하면 코드를 이해하기 쉬워집니다. 하지만 "한 줄에 한 점만 사용" 규칙은 디미터의 법칙이 말하는 "Don't talk to stranger"(낯선 사람과 대화하지 마라), 바꿔 말하면 친구 하고만 말을 하라는 의미도 가지고 있습니다. 일반적으로 한 줄에서 "."이 하나 이상인 경우에는 한 가지 이상의 일을 하고..

Java - 변수 타입 - 기본형(Primitive type) [내부링크]

시작하기 자바에서는 모든 변수에 타입을 정의하고 있으며, 변수가 가지는 타입에 따라 담을 수 있는 값의 종류가 달라집니다. 바꿔 말하면 사용하려는 값의 종류에 따라 변수 타입을 결정합니다. 변수의 타입과 값의 상관관계를 이미지화해보면 아래의 그림과 같습니다. 변수에 저장하는 형과 값이 맞지 않는 경우 변수는 값을 가질 수 없고 값도 변수에게 전달 될 수 없습니다. 그렇기 때문에 변수 타입과 값은 서로에게 상호보완적인 요소로 사용됩니다. 위의 그림처럼 알맞은 형에 값을 전달해야지만 값을 저장 할 수 있습니다. 따라서 변수 타입은 값의 특성에 따라 정의되고 사용됩니다. 변수 타입은 크게 기본형(Primitive type)과 참조형(Reference type)으로 구분할 수 있습니다. 이번 글에서는 2가지 타..

객체지향 생활 체조 - 규칙 3: 원시값과 문자열의 포장 [내부링크]

Photo by Viktor Forgacs on Unsplash 모든 원시값과 문자열을 포장(Wrap)한다. 이 규칙이 가지는 의미 "int 값 하나 자체는 그냥 아무 의미 없는 스칼라 값일 뿐이다" 책에서는 이 문장을 시작으로 규칙을 설명합니다. 일반적으로 프로그래밍에서 쓰이는 원시값들은 값(리터럴)의 정의만 가질 뿐 별 다른 의미를 지니지 못합니다. 값이 값 이상의 의미를 가진다는 것은 어쩌면 이상한 이야기 일지 모릅니다. 다만 원시적인 값을 포장(Wrap)을 통해 이름을 가질 수 있게 하면 어떨까요? 이름을 가진다는 것은 사소할지 모르지만 프로그래머에게는 의미를 전달합니다. 즉 프로그래밍에서 객체가 이름을 가진다는 것은 어떤 것을 표현하는지 왜 쓰이고 있는지에 대한 정보를 말한다고 이야기할 수 있습..

초보 블로거의 블로그 구글 애드센스 신청과 승인 받기 [내부링크]

구글 애드센스 승인을 받다 예상보다 빨리 구글 애드센스 승인 글을 작성하게 되었습니다. 구글 애드센스는 신청하면 바로 승인이 되는 줄 알고 블로그를 개설하는 동시에 바로 신청하였습니다. 물론 결과는 콘텐츠 불충분으로 인한 승인 거절이었습니다. 구글 애드센스를 에드 고시라고 부른다는 것도 승인 거절 이후 검색을 통해 알게 되었고 에드 고시, 애드센스 승인 무한 대기, 애드센스 무한 검토, 애드센스 무한 루프 등 연관된 검색어를 통해 애드센스 승인은 쉽지 않다는 걸 알 수 있었습니다. 그래서 한 10번 정도 신청하면 승인 나려나?라는 막연한 10개 정도의 글을 작성한 시점인 지난주 월요일(2021/03/29)에 다시 구글 애드센스 심사를 요청하였습니다. 그리고 신청한 지 9일이 지난 시점인 어제 수요일(20..

Java - 변수 선언(Variable declare)과 초기화(Initialize) [내부링크]

값(데이터)을 사용하려면 변수를 선언(Declare) 하자 자바에서 변수를 사용하기 위해서는 변수를 선언해야 합니다. 변수를 선언하는 이유는 값을 저장하는 공간을 확보하겠다는 이야기입니다. 정확히는 컴퓨터가 가진 메모리를 사용하겠다고 미리 컴퓨터에게 말하는 것입니다. 컴퓨터에 메모리가 부족하다고 프로그램이 실행이 안 되는 이유는 이렇게도 설명이 가능합니다. 변수를 선언하는 것은 미리 자원을 확보하는 동시에 사용한다는 의미를 가지고 있기 때문에 변수를 선언하지 않는다면 프로그램은 값(데이터)을 담아둘 공간이 없어 값을 사용할 수 없습니다. 변수를 선언하는 방법은 다음과 같습니다. String message; 변수를 선언하는 방법은 변수 타입과 변수명을 함께 작성하는 것입니다. 위의 예제는 String(문자..

가지 않은 길 - 로버트 프로스트 [내부링크]

Photo by JOHN TOWNER on Unsplash Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair, And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the..

개발자가 말하는 IT 웹 개발자 되기 - 기초편 [내부링크]

시작하기 이 글은 이전에 작성한 IT 개발자 국비지원 어떤가요?이라는 글을 쓰다가 웹 개발자가 되는 방법에 대해서도 작성해놓으면 좋을 것 같다고 생각해 작성하게 된 글입니다. 간혹 들리는 학원에서 가르쳐주는 웹 개발자 과정은 제가 처음 프로그래밍을 배울 때와 기술 수준이 거의 똑같아서 당황스럽습니다. 여전히 SVN을 가르쳐주고 그마저도 커밋과 체크아웃만 사용하다는 이야기에는 헛웃음이 나왔습니다. 그걸 가르쳐주는 사람에게 따져서 물어보고 싶을 정도로요. 혹시 지금 그런 학원에서 프로그래밍을 배우고 계신다면 다른 학원을 다시 알아보시는 게 좋을 수 있습니다. 이런저런 이유로 간단하게라도 웹 개발자가 실무 개발에서 어떤 기술들을 필요로 하는지 조금이라도 알고 계시면 학원이든 어디에서든 웹 개발을 배우는데 도움..

Javascript - console.log 사용하는 팁 [내부링크]

자바스크립트를 개발하게 되면 가장 많이 만나는 기능이 console.log 기능입니다. 코드 문제를 해결하거나 데이터 흐름을 추적할 때 요긴하게 사용하는 기능입니다. console.log 대신 debug와 같은 출력 라이브러리를 활용해서 하는 방법도 있지만 아무런 설치 없이 손쉽게 사용할 수 있다 보니 console.log를 애용하는 것은 어찌 보면 당연한 것일지도 모릅니다. 그럼 오늘은 자주 사용하는 console.log의 기능 중 자주 활용하거나 알아두면 좋을 부분에 대해 이야기하겠습니다. console.log()를 사용하는 방법 기초 사용법 기본적인 사용방법은 아래와 같이 간단합니다. const name = "YD"; const message = "Hello world!"; const message..

2021.04.04 주간 회고 [내부링크]

시작하기 평상시에 머릿속에 있는 생각을 글로 옮겨 적거나 표현하는 데 있어서 예상과는 다른 결과를 초래하는 일들이 간혹 벌어지곤 했다. 나름 고민하고 신경을 써서 한다고 했음에도 결과물은 영 신통치 않은 면이 많았다. 그런 이유를 핑계 삼아 글 쓰는 연습도 하고 가지고 있는 지식이나 생각도 정리하기 위해 블로그를 개설하고 글을 쓰는 연습을 하기로 했다. 어떻게 해야 부지런히 글공부도 생각도 정리할 수 있을까 하는 고민 끝에 주간별로 목표를 계획하고 실천하기로 했다. 처음 이런 방향성을 가지고 접근한 것은 2주 정도 전이지만 막연히 생각하고 바로 시작했던 작업이라 정리한다는 생각도 하지 못했다. 생각해보니 단순히 목표를 설정하고 실천하는 것도 중요하지만 중간마다 정산을 해보면 나쁘지 않겠다는 생각도 들고 ..

IT 개발자 국비 지원 어떤가요? - 웹 개발자 / 풀스택 / 프론트엔드 / 백엔드 [내부링크]

시작하기 요즘은 IT 개발 직군이 여러모로 이슈가 많습니다. 취업이 어려운 시기에 인터넷이나 뉴스에서 연일 보도되는 기사를 보면 IT 개발자는 연봉도 높은 편인 것 같고 네이버 같은 인터넷, IT를 다루는 회사에서는 개발자 구하기가 어렵다고 하니 많은 분들이 개발자에 대해서 궁금해하는 것 같습니다. 실제로 네이버나 다음 메인 페이지에서는 개발자 모시기라는 주제로 된 인터넷 뉴스도 자주 보입니다. 그래서인지 개발자가 어떻게 될 수 있는 것인지와 정확히 어떤 일을 하는지 많이 궁금해하시는 것 같다고 생각합니다. 오늘 다루는 이야기는 앞서 이야기한 내용 중 개발자가 될 수 있는 방법 중 하나인 국비 지원에 관해서입니다. 실제로 제가 개발 일을 시작하게 된 시점에는 컴퓨터와 관련이 없는 전공을 졸업한 비전공자였..

Java - JVM(Java Virtual Machine) 간단히 알아보기 [내부링크]

시작하기 Java라는 프로그래밍 언어를 배우게 되면 흔하게 접하는 내용 중 하나가 JVM입니다. JVM은 Java Virtual Machine의 줄임말로 번역하면 자바 가상 기계입니다. Java Virtual Machine(자바 가상 머신)의 역할을 조금 더 구체적으로 설명하면 Java로 만들어진 프로그램을 운영체제에 종속되지 않고 실행되게 해주는 가상 머신이라고 말 할 수 있습니다. 개인적으로는 JVM은 통역사라고 설명하는 게 의미적으로 가장 이해하기 좋다고 생각합니다. JVM이 하는 일을 더 자세히 알아보면 JVM은 정말 멋진 통역사입니다. 지난해에 이슈가 되었던 봉준호 감독님의 통역사처럼 말이죠. 이미지로 보는 JVM이 하는 일 by 통역 일반적인 프로그램이 동작하는 원리를 그려보았습니다. 그림과 ..

Java - 변수(Variable) [내부링크]

변수는 어떤 의미일까? 일반적으로 프로그래밍을 처음 접하게 되면 가장 먼저 접하게 되는 내용 중에 하나가 바로 변수입니다. 변수가 어떤 내용을 가지고 있기에 프로그래밍을 배우면 입문부터 배우게 되는 걸까요? 그 이유는 바로 프로그램의 근간이라고 말할 수 있는 데이터(값)를 프로그래밍에서는 변수라고 부르고 사용하기 때문입니다. 다르게 말하면 변수는 프로그래밍에서 없으면 안 되는 필수 요소입니다. 이해를 돕기 위해서 설명은 데이터와 변수가 같다고 이야기드렸지만 의미적으로 같게 사용하고 있을 뿐 완전히 똑같은 형태를 가지고 있지는 않습니다. 정확한 내용은 아래에서 설명할 변수의 선언과 할당을 보시면 됩니다. 그럼 현실과 빗대어 실제 프로그램에서 사용되는 변수의 역할을 설명해보겠습니다. 지금 쇼핑을 하러 가서 ..

Java - 구구단 만들기 (2 ~ 9단) [내부링크]

Photo by Gayatri Malhotra on Unsplash 시작하기 구구단 만들기는 개발자로 취업하기 이전 Java 학원을 다닐 때 배웠던 문제입니다. 갑자기 지금 실력으로는 어떻게 코드를 만들 수 있을지 궁금해서 작성한 글이니 심심풀이로 봐주시면 좋겠습니다. 요구사항 2 ~ 9까지 곱셈하여 출력한다. 곱셈은 1 ~ 9까지 수를 제한한다. 샘플 코드 - 간단한 버전 public class MultiplicationTable { public static void main(String[] args) { int minNumber = 2; int maxNumber = 9; int startMultiplyValue = 1; int endMultiplyValue = 9; for (int number = m..

jQuery - 제이쿼리란? [내부링크]

시작하기 jQuery는 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리입니다. 지금은 Angular, React, Vue 같은 화면을 다루는 여러 가지 기술들이 있어 화면 개발을 보다 쉽게 할 수 있지만, 화면과 관련된 기술이 발전하기 전에는 jQuery 만큼 화면 개발을 쉽게 해 주는 라이브러리는 존재하지 않았습니다. 또한 화면 개발에 있어 프로그래머들이 가장 다루기 힘들어하는 크로스 브라우징을 jQuery는 강력히 지원하였고 많은 프로그래머들은 열광했습니다. 현재는 v3.6.0 버전까지 릴리즈 되었습니다. Write less, do more - jQuery가 가진 철학 jQuery가 기본적으로 가진 철학은 "write less, do mo..

Java - 자바란? [내부링크]

Java는 무엇인가? Java는 썬 마이크로 시스템즈(Sun Microsystems)에서 개발한 프로그래밍 언어로 1999년 1월에 공식적으로 발표한 객체지향 프로그래밍 언어입니다. Java의 중요한 특징은 운영체제(Operating System) 즉 플랫폼(Platform)에 독립적이라는 것입니다. 그 이유는 Java가 "Write Once Run Anywhere"라는 목표를 가지고 만들어졌기 때문입니다. 그렇기 때문에 Java로 만들어진 프로그램은 JVM이 존재하는 운영체제라면 프로그램을 전혀 변경하지 않고도 실행이 가능합니다. 이러한 장점으로 인해 Java는 다양한 운영체제와 호환성을 가진 언어로써 컴퓨터의 발전과 함께 많은 사용자들을 확보할 수 있었습니다. 또한 기존의 프로그래밍(절차 지향) 언어..

객체지향 생활 체조 - 규칙 2: else 예약어 금지 [내부링크]

else 예약어(keyword)를 쓰지 않는다. 이 규칙이 가지는 의미 일반적으로 개발자라면 if/else 구문을 쉽게 이해할 수 있습니다. 구문 자체가 조건을 나타내는 동시에 간단하기 때문입니다. 그렇다 보니 개발자는 쉽게 Callback hell처럼 보이는 반복되는 중첩 조건문이나 무수히 많은 switch/case 구문을 마주하게 됩니다. 신규 기능이 추가되거나 수정사항이 발생하면 기존의 코드를 리팩터링 하기보다는 분기하는 조건문을 넣는 게 쉽기 때문입니다. 결국 if/else, switch/case와 같은 분기 구문은 안 좋은 코드를 양산하기 쉬워집니다. "else 예약어 금지" 규칙은 단순히 if/else 만 사용하지 않는 것이 아니라 switch/case 구문을 포함한 분기 구문을 사용하지 않게..

객체지향 생활 체조 - 규칙 1: 메서드당 들여쓰기 한 번 [내부링크]

Photo by Nick Fewings on Unsplash 한 메서드에 오직 한 단계의 들여쓰기만 한다. 이 규칙이 가지는 의미 이 규칙은 언뜻 보기에는 들여쓰기(indent)에 초점을 두고 있는 것처럼 보입니다. 실제로 내용 자체도 "들여쓰기"의 단계를 제한한다고 정의하고 있습니다. 그렇지만 이 규칙을 적용하다 보면 자연스럽게 만나는 핵심은 "하나의 단락(block)이 한 가지의 일"을 하려고 노력했느냐입니다. 반대로 말하면 들여쓰기가 한번 이상 적용된 단락 즉 중첩된 제어 구조가 있다면 이 단락은 한 가지 이상의 일을 하고 있음을 증명하는 셈이 되어 버립니다. 그렇기 때문에 "메서드당 들여쓰기 한 번"이라는 규칙은 메서드가 가지는 구문 중 한 단락에서는 한 가지의 일만 수행하게 만듦으로써 메서드의 ..

React - create-react-app 로 React 시작하기 [CRA] [내부링크]

시작에 앞서 React는 Facebook에서 만든 자바스크립트 라이브러리로 Single Page Application를 만들기에 적합한 기술입니다. React는 CDN 방식으로도 사용이 가능하지만 권장되는 방식은 Webpack과 같은 번들러를 통해서 프로젝트를 구성해서 이용하는 방법입니다. Facebook에서는 쉽고 빠르게 React 프로젝트를 구성할 수 있도록 boilerplate를 만들어 사용자에게 배포하고 있는데 이와 같이 React 프로젝트를 정의하고 배포할 수 있는 환경을 만들어주는 기술을 CRA(create-react-app)라고 합니다. 시작하기 npx create-react-app todo-list cd todo-list npm start 위의 명령문을 실행하면 React 프로젝트를 만들고..

소프트웍스 앤솔러지 - 객체지향 생활 체조 학습하기 [내부링크]

객체지향 생활 체조 규칙 알아보기 소프트웍스 앤솔러지 책 내용 중에는 10장 내외로 짧은 내용이지만 따라 하다 보면 자연스럽게 객체지향적인 코드를 작성할 수 있는 좋은 규칙이 있습니다. 책에서는 이 내용을 "객체지향 생활 체조"라는 주제로 다루고 있는데 그 규칙은 총 9가지로 제안하고 있고 나열하면 다음과 같습니다. 한 메서드에 오직 한 단계의 들여 쓰기만 한다. else 예약어(keyword)를 쓰지 않는다. 모든 원시 값과 문자열을 포장(wrap)한다. 한 줄에 점을 하나만 찍는다. 줄여 쓰지 않는다(축약 금지). 모든 엔티티(entity)를 작게 유지한다. 2개 이상의 인스턴스 변수를 가진 클래스를 쓰지 않는다. 제일 클래스(first-class) 컬렉션을 쓴다. 게터getter/세터setter/프..

Git - 커밋 메시지 컨벤션 [내부링크]

Photo by Oskar Yildiz on Unsplash 시작하기 다음은 효과적으로 커밋 메시지를 작성하고 활용하기 위한 규칙을 정리한 내용입니다. 이 부분에 대해서는 사람이나 조직마다 의견이 나뉜다는 사실을 인지하고 참고하면 좋다고 생각되는 Udacity - Git commit message style guide를 참조하여 글을 작성하였습니다. 깃 커밋 메시지란? 조직이나 팀 단위 혹은 혼자서 git을 통해 개발을 하는 경우에 일련의 작업들 하나의 일로 간주할 수 있는데 이 부분을 커밋(commit)이라고 합니다. 커밋을 정의하는 경우 내용을 남길 수 있는데 이를 커밋 메시지(commit message)라고 말하며 내용을 작성할 경우 관례(convention)에 따라 작성하면 개인 혹은 팀의 구성원..

하늘은 지붕 위로 - 폴 베를렌 [내부링크]

Photo by Andrej Lišakov on Unsplash Le ciel est, par-dessus le toit, Si bleu, si calme ! Un arbre, par-dessus le toit, Berce sa palme. La cloche, dans le ciel qu'on voit, doucement tinte. Un oiseau sur l'arbre au'on voit Chante sa plainte. Mon Dieu, mon Dieu, la vie est la, Simple et tranquille. Cette paisible rumeur-la Vient de la ville. Qu'as-tu fait, o toi que voila Pleurant sans cesse, Dis, ..

평온을 비는 기도(Serenity Prayer) - 라인홀드 니버 [내부링크]

Photo by Aaron Burden on Unsplash God grant me the serenity To accept the things I cannot change; Courage to change the things I can; And wisdom to know the difference. Living one day at a time; Enjoying one moment at a time; Accepting hardships as the pathway to peace; Taking, as He did, this sinful world As it is, not as I would have it; Trusting that He will make all things right If I surrend..

React - 리액트 App 기본 실행 포트 변경하기 [내부링크]

Photo by Alex Duffy on Unsplash 시작하기 create-react-app을 통해 만든 React App의 경우 3000번 포트를 사용해서 구동될 수 있도록 설정되어 있습니다. 일반적인 상황에서는 3000번 포트를 이용해 개발하는 것이 문제 되지 않으나 프로젝트 상황이나 개발 환경에 따라서 포트를 변경해서 사용해야 하는 상황이 발생합니다. 예를 들면 이미 3000번 포트를 다른 프로그램이 사용하고 있거나 다중으로 프로젝트를 실행해야 하는 상황인 경우 기본으로 사용하는 포트를 변경해서 사용해야 합니다. 이와 같은 경우 포트를 변경해서 사용하는 대표적인 방법으로는 아래와 같이 3가지 정도로 이야기해 볼 수 있습니다. 1. 명령어로 포트 설정하기 1. React 프로젝트 폴더에서 아래와 ..

CRLF와 CR/LF 그리고 EOL [내부링크]

Photo by Pereanu Sebastian on Unsplash CRLF란 무엇일까? CRLF는 한글로 말하면 새 줄 문자(new line)라는 말로 "개행", "줄 바꿈"과 같은 뜻을 의미합니다. 정확히는 CR와 LF를 합성한 단어로 EOL(end-of-line)을 의미합니다. 여기서 짚고 알고 넘어가면 재미있는 부분은 CR, LF의 개념은 타자기에서 왔다는 점입니다. 타자기를 이용해 문서를 작성할 때 줄 바꿈 할 때 쓰는 방법이 Line Feed, 줄의 시작점으로 가는 방법이 Carriage Return으로 즉 종이를 움직여서 글자를 인쇄하는 방식에서 CR, LF 개념이 만들어졌다는 사실입니다. 그렇다면 CR과 LF는 정확히 무엇을 이야기하는 것일까요? CR 과 LF CR: Carriage Re..