요즘 블로그를 운영하면서 글을 쓴다는 것은 무척이나 어렵다는 것을 느낍니다. 물론 연습도 없이 처음부터 좋은 글을 쓰는 것은 쉬운 일은 아니겠죠. 하지만 가벼운 주제라고 생각하고 써 내려가던 글이 어느 순간 막혀서 기약 없이 시간을 보내거나, 글 쓰기가 어려워 처음부터 아무것도 못하고 멍한 상태인 경우가 다반사네요. 글을 쓰는 게 어렵다는 이야기는 둘째로 치고, 어떻게든 완성한 글이 마음에 안 드는 이유는 왜일까요? 어떻게 해야 만족스러운 글을 아니, 문장을 쓸 수 있는 걸까요? 글을 잘 쓰는 사람들이 쓴 글 잘 쓰기 방법에 관련된 책들을 보면 공통적으로 이야기하는 내용이 한 가지 있습니다. 바로 '퇴고'를 해라입니다. 문장의 질은 '퇴고'를 통해서 높아지고, 결국 문장의 질은 글의 품격을 높여준다고 말..
이번에는 자바스크립트로 프로그래밍을 할 때 꼭 알아야 할 변수와 상수 그리고 리터럴에 대해 알아보도록 하겠습니다. 조금은 다른 이야기지만 프로그래밍에 있어 용어가 가지는 개념은 중요합니다. 예를 들어 변수와 리터럴과 같은 용어들이 정확히 무슨 의미를 어떻게 가지는지 잘 모른다면 개발자들끼리 소통을 할 때 사소하지만 이해 포인트가 다르거나 오해를 하능 경우가 생깁니다. 프로그래밍에서 사용되는 용어들은 자바스크립트뿐만 아니라 컴퓨터 과학 전반에서 사용하기 때문에 용어를 잘 알고 기억해둔다면 다른 언어를 가지고 프로그래밍을 할 때도 도움이 됩니다. 변수와 상수의 정의 그리고 사용법 일반적으로 변수의 정의는 값을 가지고 있고 이 값은 언제든 바뀔 수 있으며 사용할 수 있다고 설명합니다. 간단히 말해 변수란 '값..
웹 개발자는 회사에 출근하면 어떤 일을 할까요. IT 직군과 접점을 가지고 있는 사람이라면 모를까 일반적으로 사람들이 접하는 IT라는 개념은 핸드폰으로 사용하는 애플리케이션이나 컴퓨터를 통해 이용하는 엑셀, 한컴 같은 프로그램 같은 프로그래밍의 산출물이다 보니 개발자가 일하는 모습을 이미지로 떠올리기가 쉽지 않습니다. 만약 아니라면 영화나 드라마에서 나오는 단 몇 초만에 해킹에 성공하는 만능 해커나 뚝딱 페이스북 같은 프로그램을 만드는 천재 프로그래머의 모습을 떠올리시나요? 웹 개발자의 정의 식상할 수도 있지만 웹 개발자가 어떤 일을 하는지 알아보기 전에 웹 개발자에 대한 정의를 먼저 내려보려고 합니다. Wiki에는 "HTTP 프로토콜을 커뮤니케이션 매체로 사용하는 웹 페이지, 웹 사이트 등 WWW 기반..
자바스크립트에서는 문자열을 자르는 방법으로 split, substring, substr 함수를 제공합니다. 단순히 문자 값을 자르는 데에 왜 이렇게 많은 split(), substring(), substr() 함수들이 제공되고 있는 걸까요? 오늘은 split(), substring(), substr() 각 각의 함수들이 가지는 정의와 사용법에 대해 알아보도록 하겠습니다. split 정의와 사용법 str.split([separator[, limit]]) 반환 : split은 문자열을 separator를 기준으로 limit 만큼의 크기를 가진 새로운 문자 배열을 반환합니다. separator [옵션] : 구분자는 문자열을 나눌 때 기준이 되는 값으로 문자(character)이나 정규표현식을 사용할 수 있습니..
오늘 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의 재생을..
이번에는 자바스크립트를 사용해 페이지를 새로 고침 하는 방법에 대해 알아보려고 합니다. 화면 개발을 하다 보면 페이지 전체를 다시 불러와야 하거나 특정 영역을 갱신해야 하는 경우가 발생하는데 이런 경우 일반적으로는 location을 사용합니다. 특정 부분을 갱신해야 할 필요가 있다면 iframe을 사용하거나 jQuery의 load를 사용해야 하는데 이번 글에서 다루기에는 내용이 많아 이 부분까지는 다루지 않고 전체 페이지 새로 고침에 대해서만 이야기해보도록 하겠습니다. location.reload() 인터넷 자료를 찾아보면 자바스크립트를 통해 페이지를 새로 고침을 하는 방법은 일반적으로 location과 history를 사용합니다. // location을 사용하는 방법 location.reload(); ..
이번에는 Javascript의 array가 가진 filter 함수의 정의와 사용법 더불어 활용법에 대해 이야기해보려고 합니다. array의 함수 중 map, filter만큼 잘 쓰이는 함수는 아니지만 함수 결과를 체이닝 형식으로 사용하기 때문에 합산과 같은 연속적인 일들의 결과를 만들어 낼 때 자주 사용됩니다. reduce 정의 Array.prototype.reduce ( callbackfn [ , initialValue ] ) reduce는 단어 의미 그대로 해석하면 줄이다는 표현인데, 함수로 정의된 내용은 배열의 값을 하나씩 줄여가면서 모든 배열을 순회할 때까지 결과를 callbackfn에 전달합니다. 주로 그룹 지어진 데이터의 결과를 도출할 때 사용하는 편입니다. 예를 든다면 덧셈이나 곱셈 같은 합..
금주 목표 1일 1회 글쓰기 책 한 권 읽기 - 1만 시간의 재발견 애드센스 자료 정리 1개 - 1일 1회 글쓰기 이번 주에도 1일 1회 글쓰기 목표는 달성했다. 매주 회고할 때마다 다음 주는 못해, 안 해를 반복하면서도 어떻게든 목표로 정해놓고 하다 보니 아슬아슬할 때도 있지만 달성은 하고 있다. 주로 이번 주는 Javascript 위주로 글을 작성했다. 프로그래밍 내용이다 보니 글을 보는 사람이 코드를 읽기 쉽게 하기 위해 Codepen과 에디터의 코드 블록 기능을 번갈아 사용하면서 어떻게 더 좋을지 실험해보고 있다. 현재는 코드 블록이 더 좋다고 판단하고 있는데 확실한 결정은 한 달 내지 두 달 정도의 시간이 흐르면 자연스레 확정이 될 것 같다. 그리고 이번 주부터는 글을 작성할 때 글을 작성하는 ..
블로그 구글 애드센스 승인이 끝일까? 운이 좋게도 구글 애드센스 승인을 어렵지 않게 받았습니다. 승인 메일을 받았을 때는 제가 쓰고 있는 글이 가치를 인정받을 수 있다는 사실이 기쁘기도 했지만 한편으로는 아무것도 준비를 해놓지 않은 상황이라 난감하기도 했습니다. 낯설다고 해야 하나? 말로만 구글 애드센스라는 것을 듣고 막연히 신청했던 거라 어디서부터 무엇을 준비해서 어떻게 하고 적용해야 하는지 어렵기도 하고요. 지금도 어렵지 않다는 말은 아니지만 구글 애드센스와의 첫 만남은 모든 게 생소하고 신기하기만 했습니다. 그래서 블로그를 운영하시는 다른 분들도 저와 마찬가지지 않을까라는 생각에 이 글을 작성하게 되었습니다. 구글 애드센스 승인은 시작이다. 구글 애드센스는 블로그 운영을 통해 광고 수익을 얻을 수 ..
이번에는 Javascript의 array가 가진 filter 함수의 정의와 사용법 더불어 활용법에 대해 이야기해보려고 합니다. array의 함수 중 가장 많이 쓰이는 함수 중 3 대장이라고 할 수 있는 것이 map, filter, reduce인데요. 그중 filter는 활용도가 높은 편이라 어디라고 정해진 곳 없이 사용되는 편입니다. 자 본격적으로 array의 filter 함수를 알아보러 가시죠. filter 정의 Array.prototype.filter ( callbackfn [ , thisArg ] ) filter는 해석 그대로 걸러주는 역할을 하는 함수입니다. 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하는 편입니다. SQL로 치면 where절에서 하는 행위를 하는 함수입니다. EC..
오늘은 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..
자바스크립트에서 특정 문자를 찾아 원하는 문자로 치환할 수 있는 replace()라는 API를 제공합니다. 오늘은 replace() 함수를 통해 문자 치환하는 기능을 다루어보겠습니다. replaceAll() replace()를 알아보기에 앞서 replaceAll() 함수에 대해 먼저 알아보겠습니다. 일단 Javascript의 내장 기능 중 replaceAll()은 없다고 생각하시는 게 좋습니다. ECMA-262 12th(2021) 스펙을 기준으로 replaceAll() 기능이 추가되었기 때문에 최신을 바탕으로 하는 개발 환경이 아니라면 replaceAll()은 사용하기가 어렵습니다. See the Pen repalceAll by yongdae (@yongdae) on CodePen. replace() 본..