웹 프론트엔드 개발자로서 단순히 개발하는 것에 그치지 않고 사용자 경험과 동료들과의 협업을 고려해 더 나은 코드를 작성하는 방법을 항상 고민하게 된다. 그러던 중 이 책을 알게 되었고,'라이프사이클부터 웹사이트 구축까지' 라는 문구가 표지에 있어 전반적인 내용을 포괄적으로 다룰 것 같아 꼭 읽어보고 싶었다. 「더 나은 웹개발을 위한 가이드」라는 이름처럼 이 책은 HTML, CSS, JavaScript, TypeScript 뿐만 아니라 최신 개발 경향, 다양한 디바이스별 개발 방법까지 폭넓은 주제를 다루고 있어 유익했다. 특정 기술에 깊게 집중하는 대신, 웹 개발의 흐름을 넓은 시각에서 이해할 수 있었다. 특히 요새 개인적으로 많이 사용하는 중인 CSS Grid에 대한 구체적이고 실용적인 설명이 포..
캔버스의 개념캔버스의 개념 HTML5에 새롭게 등장한 요소인 캔버스. 캔버스는 이름처럼 코드를 이용해 그림을 그릴 수 있는 공간을 제공한다. 코드에 단순히 라는 태그만 작성하게 되면 화면에 무언가 나타나거나 하지는 않는다. 캔버스라는 영역 위에 자바스크립트를 이용해 하나하나 그림을 그려가야 원하는 결과물을 볼 수 있다. 이런 기능을 활용해 애니메이션, 데이터 시각화 등의 다양한 그래픽 작업에 사용된다. 캔버스의 장점 이러한 캔버스 태그를 사용해 그래픽 작업을 하게 되면, 아래와 같은 장점이 있다.브라우저 안에서 직접 렌더링하기 때문에 그래픽 성능이 뛰어나다.또, 요즘의 모던 브라우저는 캔버스 태그를 지원하기 때문에 파이어폭스, 크롬, 엣지 가리지 않고 호환성에 유리하다.그리고 다양한 그래픽 요소를 사..
지금이 그때인 것 같다. 초심자의 행운 이후 잔인한 시험에 든 시간이. 부트캠프 수료 후 취업 했을 땐 개발을 모르던 내가 여기까지 해냈다는 성취감이 컸다. 하지만 만 1년 차가 된 지금은 내가 잘하고 있는 건지, 또 잘하는 개발자들에 비해 내가 너무 모자란 건 아닌지 많은 생각이 든다. 요새 마음을 다잡으려 제일 좋아하는 책인 「연금술사」를 다시 읽고 있는데, '무언가를 찾아 떠나는 여정은 항상 초심자의 행운으로 시작해서 잔인한 시험으로 끝난다.'라는 문장이 지금 내 상황과 너무 잘 맞는다고 생각했다. 그럼 난 이 시험을 어떻게 이겨낼 수 있을까. 그간의 나를 돌아보고, 앞으로의 여정을 다잡기 위해 회고글을 작성해 본다. 회사에서의 나는?잘한 점1. 뷰에 대해 알게 되었다.리액트만 알고 뷰는 하나도 몰..
브라우저 기반의 개발을 하는 프론트엔드 개발자더라도, 개발을 하다보면 결국 CS를 공부해야 한다고 느끼게 된다. 프로그래밍 언어는 결국 컴퓨터를 기반으로 하기 때문이다. 어떻게 공부하면 좋을까 고민을 하던 찰나, 컴퓨터 구조와 운영체제 기초를 다질 수 있는 이 책을 알게 되었다. 컴퓨터 구조와 운영체제 핵심 노트는 컴퓨터 구조를 왜 알아야 하는지부터 차근차근 시작해서 운영체제와 알고리즘까지 전반적인 개념을 폭넓게 배워볼 수 있는 목차로 구성되어 있다. 기본기를 다지는 책답게 단순히 글자로만 설명되어있는게 아니라, 그림이나 도표를 이용해 설명해주는 부분도 좋았다. 특히나 알고리즘은 그 순서가 어떻게 되는지 직접 써보면서 이해하곤 했는데 책에 이미 깔끔하게 정리가 되어있어 그 흐름대로 짚고 넘어갈..
업무를 하면서 객체 내부에서도 get, set을 쓸 수 있다는 것을 배웠다. 객체 내부에서 굳이 get, set을 사용하는지 궁금했는데, 이번 기회에 정리해보게 되었다. 객체의 getter, setterconst person = { firstName: 'Olivia', lastName: 'Kim', get fullName() { return `${this.firstName} ${this.lastName}`; }, set fullName(name) { [this.firstName, this.lastName] = name.split(' '); }};console.log(person.fullName); // Olivia Kimperson.fullNam..
객체의 프로퍼티에 접근하는 두 가지 방법 객체의 프로퍼티(key-value)에 접근할 수 있는 방법으로는 점 표기법(마침표 표기법)과 대괄호 표기법 두 가지 방법이 있다. const name = { firstName: 'olivia', lastName: 'kim'} 위와 같은 name 객체에서 firstName값에 접근하려면 아래와 같이 표기할 수 있다.점 표기법: name.firstName대괄호 표기법: name['firstName'] 점 표기법과 대괄호 표기법으로 프로퍼티에 접근하기 대괄호 표기법의 경우 키의 이름은 반드시 따옴표로 감싼 문자열이어야 한다. 키의 이름을 따옴표로 감싸지 않으면 ReferenceError가 발생한다. 프로퍼티의 키가 숫자인 경우 다만, 프로퍼티 키가 숫자일 ..
요소가 한국어인 배열을 sort()로 정렬하기 설정한 조건에 따라 배열 안의 요소를 정렬해주는 sort() 메서드는 배열 안의 모든 요소를 '문자형'으로 변환한 후, 유니코드 단위의 값을 비교한 뒤 재정렬한다. 이때 배열 안의 요소 값이 '한국어'일 때 sort()를 사용하게 되면 설정한대로 오름차순, 내림차순으로 정렬이 이루어질까? const kors = ['대한민국', '호주', '독일', '가나'];const nums = ['100', '1', '3', '0', '000', '99'];// 일반적인 sortconsole.log(kors.sort((a, b) => a - b)); // [ '대한민국', '호주', '독일', '가나' ]console.log(nums.sort((a, b) => a -..
요새 공부 중인 Nuxt.js의 서버가 익스프레스로 돌아가는 걸 보고 노드에도 관심을 가지던 중 Do it! 시리즈로 유명한 이지스퍼블리싱에서 Node.js 입문 도서가 나왔다는 소식을 들었다. Do it 시리즈는 프로그래밍 입문용 서적으로 많이 추천되는데, 최근 Vue.js를 공부할 때도 「Do it! Vue.js 입문」 책을 완독 하며 기초 개념을 쌓는데 큰 도움이 되었기에 기대가 됐다. 프론트엔드를 공부했던 터라 노드는 자바스크립트를 이용해 서버를 구성한다는 것 외에는 깊은 지식이 없었다. 책을 읽기 전에는 서버 쪽 책이라서 어려우면 어떡하지? 하는 생각이 들었는데 입문 도서답게 노드를 설치하는 방법부터 차근차근 목차가 구성되어 있었다. 또한 Do it 시리즈에서 내가 제일 좋아하는 N일 완독 플랜..
지난 2주간 스스로 공부하거나 배운 것들! 하나씩 정리할 시간은 없고, 잊지 않기 위해 간단하게 기록해 둔다. 리액트는 왜 모든 요청이 비동기일까? 에서 시작된 궁금증싱글스레드와 이벤트 루프의 상관관계자바스크립트는 싱글 스레드여서 원래 동기적으로 작동하는데, 이벤트 루프를 활용해서 비동기적으로 여러 작업을 수행할 수 있다.자바스크립트에서 비동기 작업은 콜백함수, Promise, async-awiat 등을 통해 구현되며, 비동기 패턴을 통해 이벤트 루프를 조절할 수 있다. 이벤트 루프자바스크립트와 간은 단일 스레드 환경에서 비동기 작업을 관리하고 실행하는 핵심 메커니즘 중 하나코드 실행을 순차적으로 진행하면서 비동기 작업을 계획하고 처리하는 작업을 한다.즉, 브라우저 동작 타이밍을 제어하는 관리자이다. 프..
