DOM(Docuemnt Object Model)은 document 내의 노드(Node) 탐색을 위해 몇 가지 편의 기능을 제공합니다. 오늘은 그중에서 다른 노드에 대 참조를 사용하는 부분에 대해 알아보려고 합니다. 여기서 중요한 점은 참조를 기반한 DOM의 탐색은 element 뿐만 아니라 text와 comment를 포함한다는 사실입니다. 오해하기 쉬운 DOM 노드 탐색의 사실과 불편하지 않게 노드 탐색을 할 수 있는 방법에 대해 알아보겠습니다. 불편한 DOM의 노드 탐색 결과 오해까지는 아니지만 처음 DOM의 노드 탐색을 사용하는 경우에 이상하게 여길 수 있는 부분이 있습니다. 바로 참조값을 이용한 접근인데요. 참조를 사용한 대표적으로는 parentNode, firstChild, lastChild, n..
불안이 우릴 일 하게하지. 불안과 걱정, 쓸데없는 잡생각... 물론 일에 대한 확신과 희망 같은 것으로도 기차는 움직이지만, 그것만으로는 평지를 겨우 달릴 수 있을 뿐이야. 언덕을 만나면 그것만으로는 어렵지. 그때는 불안과 걱정 같은 걸 넣어서 함께 태워야지. 불안과 걱정, 우울이 한밤에 일어나 불을 켜게 만들고, 이불을 걷어차게 만들고, 기어이 책상 앞에 앉게 하지. 불안이 이미 끝낸 일을 다시 펼치게 만들고, 불안이 지나쳐버린 실수를 찾아내고, 불안과 긴장이 일이 끝날 때까지 쓰러지지 않게 등과 다리에 힘을 주지. 불안이야말로 일의 주적이자, 최고의 동맹이야. 진눈깨비소년 - 205화 불안이 하는 일 중에서
순수 함수(Pure Function)란 무엇일까요? 순수 함수에 대한 정의를 내리자면 동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수(코드 블록)입니다. 함수라면 당연한 거 아니냐 라고 생각하실 수 있지만 가장 기초적이면서 지키기 어려운 개발이 순수 함수를 만들고 그 함수들을 조합해 확장성, 재사용성을 높이는 코드를 작성하는 것입니다. 오늘은 자바스크립트를 통해 함수형 프로그래밍을 하는데에 있어 쉽지만 지키기는 순수 함수에 대해 이야기해볼까 합니다. 막상 내일 책상 앞에서는 일정에 쫓겨 잊겠지만, 적어도 오늘보다는 멋진 프로그래밍을 할 수 있기를 바라보면서 말이죠 순수 함수의 정의 - Pure Function 순수 함수의 정의는 서문에서 말한 것과 같이 동일한 매개변수가 주어지면 항상 동일한 결..
처음으로 구글 에드센스 수익이 100$를 넘어 드디어 통장으로 첫 수익이 입금되었습니다. 애드센스를 통해 수익을 얻고 이렇게 인증받는 글을 쓸 수 있다니 기분이 매우 좋네요. 블로그에 글을 처음 올린 게 2021년 3월 말쯤이었는데 지금이 11월이니 처음으로 애드센스 수익을 얻는데 약 7개월 정도가 걸렸습니다. 길다면 길고 짧다면 짧은 기간이네요. 그럼 이제 처음으로 애드센스 수익을 인증하는 글을 써볼까요? 구글 애드센스 인증 블로그를 운영하면서 돈을 벌어본 적이 없어 이번 기회를 통해 구글 애드센스가 광고 수익금을 지급하는 방법을 알 수 있었습니다. 간략하게 내용을 설명하면 애드센스 수익은 블로그의 광고를 통해 수익이 발생한 뒤 애드센스에 설정되어 있는 지급 기준 금액(기본: 100$) 이 초과하면 지..
아이폰의 iOS를 2021년 9월 21일에 정식으로 배포된 iOS 15 버전으로 업데이트하면서 생긴 이슈 중에 하나가 바로 통화 연결음 문제입니다. 버전 업데이트를 하면서 이전에 사용하던 통화 연결음 대신 한국 사람들에게는 익숙하지 않은 ETSI 표준의 통화 연결음으로 변경이 되어 생긴 이슈입니다. 처음 ETSI 표준 통화 연결음을 듣는 사람은 상대방과 전화가 연결된 것처럼 착각할 수 있는 소리입니다. 아이폰 통화 연결음을 복구하는 방법 다시 업데이트를 하자! 변경된 아이폰 통화 연결음을 이전으로 돌리는 방법은 바로 업데이트를 하는 것입니다. 정확히는 오늘(2021년 10월 26일) 배포된 iOS 15.1 버전으로 아이폰을 버전을 업데이트하면 이전에 사용하던 통화 연결음으로 변경이 됩니다. 이전의 통화 ..
이번 글에서는 스프링 부트에서 제공하는 화이트라벨(Whitelabel) 대신 사용자가 정의한 오류 페이지를 사용하는 방법에 대해 이야기해볼까 합니다. 스프링 부트의 오류 처리 방법은 스프링에서 정의한 화이트라벨(Whitelabel)이 기본값으로 사용됩니다. 토이 프로젝트에서 사용하기는 문제가 없지만 멋진 웹 프로젝트를 만들기 위해서는 사용자 정의 에러 페이지를 쓰는 것이 좋습니다. Spring Boot에서 정의하는 오류 처리 방법 - feat. Whitelabel Spring Boot Features - Error Handling에서는 스프링 부트 오류 처리 방법에 대해 아래와 같이 정의합니다. By default, Spring Boot provides an /error mapping that handl..
올해 애플이 세계 개발자 회의(WWDC 2021)에서 차세대 macOS인 몬터레이(Monterey)를 발표했습니다. 오랫동안 지원을 해주었던 2014년도 MacBook Pro 라인도 이번에는 지원 대상에서 제외되었습니다. 개인적으로 MacBook Pro 2014 mid를 사용하고 있어서 몬터레이(Monterey) 지원 대상에 포함되기를 조금은 기대했던 부분이 있는데 아쉽기도 하네요. 올해 새롭게 출시될 거라고 예상되고 있는 신형 맥북을 노려야 할 것 같습니다. 몬터레이(Monterey)를 지원하는 Mac 제품 목록 확인하기 애플 공식 홈페이지에서는 몬터레이(Monterey)가 지원하는 하드웨어 목록을 다음과 같이 공개했습니다. - iMac (2015년 후반 이후 모델) - Mac Pro (2013년 후반..
Promise를 한 마디로 정의한다면 비동기 작업을 나타내는 객체입니다. 조금 더 풀어서 설명하면 비동기 작업을 쉽게 사용할 수 있도록 적의 된 객체입니다. Promise는 ES6(ES2015)에 표준으로 등록된 사양이고, 모던한 Javascript에서는 가진 역할과 책임이 더 중요해졌습니다. 그럼 이번 글에서는 콜백 지옥(Callback hell)을 벗어나는 방법을 통해 Promise가 가진 장점을 알아보도록 하겠습니다. Promise를 사용하는 방법 먼저 콜백 지옥을 벗어나는 방법을 알아보기 전에 Promise의 사용 방식을 알아보려고 합니다. Promise의 사용 방식은 생각보다 중요한데요. 그 이유는 바로 Promise는 비동기에 Callback을 전달하지 않고 첨부하기 때문입니다. 말로는 이해하..
일반적으로 Javascript의 배열의 요소에 접근하는 경우 index를 사용합니다. 예를 들면 array.length를 사용해서 말이죠. 하지만 at()라는 함수를 사용하면 조금 더 멋진 방법으로 배열(Array)의 요소를 다룰 수 있습니다. 이번에는 at()을 이용해 index 없이 배열을 사용하는 방법에 대해 알아보겠습니다. index를 이용한 배열 요소 접근 방법 배열의 요소에 접근하는 방법으로 주로 사용되는 방법은 바로 index를 사용하는 방법입니다. index는 위치를 기준으로 정의된 값입니다. 배열에서의 index는 배열 시작으로부터 몇 번째에 위치하느냐를 가리키는 위치 값입니다. 그렇기 때문에 배열의 첫 번째 요소를 가리키는 경우 index의 값으로 0을 사용합니다. const numbe..
이 글에서는 실무에서 사용할 수 있는 React + SpingBoot 프로젝트 구조를 만드는 과정을 알아보겠습니다. 이전에 Vue + SpringBoot 프로젝트를 만드는 방법을 알아보았는데요. 이 방법은 전문가처럼 React나 Vue 같은 Javascript 프레임워크를 사용할 수 있는 구조가 아니기 때문에 토이 프로젝트 혹은 간단한 팀 프로젝트에서 이용할 수 있는 구조이지 실무에서는 사용하기 부적합한 구조입니다. 이번 글에서는 프론트엔드 전문가처럼은 아니지만 그에 준하는 수준으로 React를 사용할 수 있는 SpringBoot 프로젝트를 만들어보겠습니다. 스프링 부트 프로젝트 만들기 먼저 프로젝트의 중심이 되는 스프링 부트 프로젝트를 만들어보겠습니다. Gradle이나 Maven과 같은 빌드 도구를 이..
이번 글에서는 프론트엔드를 Vue.js를 Spring boot를 백엔드를 사용하는 간단한 프로젝트를 만들어보겠습니다. Spring boot만으로도 웹 개발의 생산성을 높일 수 있지만 프론트엔드에서 사용되는 자바스크립트 프레임워크인 Vue.js를 사용한다면 더 빠르고 쉽게 웹 개발을 할 수 있습니다. 물론 Vue.js 외에도 React.js나 Angular.js를 이용해도 좋습니다. 스프링 부트 프로젝트 만들기 먼저 백엔드에 해당하는 스프링 부트 프로젝트를 만들어보겠습니다. 빌드 도구를 이용할 수도 있지만 조금 더 손쉽게 만들어보기 위해 스프링 부트 프로젝트를 Spring Boot initializr를 이용해보겠습니다. 아직은 프로젝트를 구성하시는 게 어려우시다면 위에 설정한 내용을 참고해서 스프링 부트 ..
왜 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에 해당하는 모듈들을 일부 포함하게 되..