Under the Sign of Saturn

함수 생성자(Constructor Functions)란? 함수 생성자는 여러 프로그래밍 언어에서는 '클래스'와 동의어다. 어떤 경우 사람들은 참조 타입(Reference Types), 클래스(Classes), 데이터 타입, 아니면 간단하게 생성자라고 부른다. 클래스에 아직 익숙하지 않다면, 어떤 속성(properties)과 행동(functions)을 정의하도록 해주고, 그 속성과 행동을 통해 여러 객체가 생성될 수 있도록 해주는 생성자라고 이해하면 된다. 클래스는 객체로서 집을 짓기 위한 청사진이라는 비유를 많이 한다. 여러 집이 단 하나의 청사진으로부터 시작하는 것처럼, 여러 객체도 단 하나의 클래스로부터 생성될 수 있다. function Person(name, position) { this.name ..

자바스크립트에서 당연히 의심 없이 사용하던 비동기 함수 실행 과정을 들여다볼 기회가 생겼다. 싱글 스레드 언어인 자바스크립트는 한 줄 한 줄 순서대로 동기적으로 실행되어야 하며, 두 가지 이상의 태스크를 병렬적으로 수행할 수 없어야 하는데, setTimeout이나 웹 API, ES6의 promise 같은 비동기 콜백은 어떻게 실행되고 있는 것일까? 우선 자바스크립트의 두 가지 이상의 statements가 병렬적으로 실행되지 못하는 것은 맞다. 실행은 항상 동기적이다. 자바스크립트 엔진 V8은 프로그램 내 모든 변수의 메모리 할당이 일어나는 Memory Heap과 스택 프레임이 쌓이는 콜 스택으로 이루어져 있고 이 콜 스택(호출 스택)이 하나이므로 싱글 스레드이다. 하지만, 자바스크립트가 실행되는 브라우저..

3월 중순부터 일을 시작했고 7월 초면 계약이 끝난다. 주니어 프론트엔드 개발자로 Full-time으로 일하고 있는데, 재택 근무는 아직 없었다. 현업은 재택이 많은 직군이어서 사무실이 떠들썩하지는 않은데, 출퇴근 시간이 약 1시간 30분 정도 걸려서 도합 3시간을 길바닥에 버리는 것을 생각하면 재택이 너무 하고 싶다... 주중에는 프론트엔드 개발 지식을 좀 더 익히고 싶어서 다른 프론트엔드 job을 준비 중인 개발자 분과 스터디를 하고, 토요일에는 Nativeness를 지향하는 영어를 배우고 싶어서 이것도 두 달째 한 시간 반씩 수업을 듣고 있다. 대체로 일주일에 세 번은 삼십분 이상 운동하려고 노력하고 있다. 어린이날에는 모처럼 휴일이어서 집안일도 하고, 화분갈이도 해주고 기타 등등 잡무를 처리했다...

엄격 모드는 ES5에 도입된 문법이다. 자바스크립트 최상단에 use strict 문구를 넣어 실행한다. 또는 함수 내에서도 작성 가능하다. 엄격 모드를 실행하기 전에는 관용적으로 느슨하게 허용되는 '오류를 유발할 가능성 있는 문법' 때문에 디버깅이 어려운 요인이 되곤 했다. strict mode를 실행해주면 미리 해당 에러를 출력해서 바로잡을 수 있도록 도와준다. 업데이트 될 새로운 명세의 자바스크립트에 대응하기도 편하고, 최적화 이슈에도 도움이 되어서 use strict를 사용이 권고된다. 리액트, 뷰 같은 프레임워크를 사용할 때는 자동으로 엄격 모드를 사용할 수 있게 해줘서 크게 신경쓰지 않았지만, 바닐라 자바스크립트 프로젝트를 할 때는 추가해주는 습관이 좋겠다. 보통 npx로 CRA을 하고 나면 아..

자바스크립트에서는 함수도 객체로 다뤄진다. call(), apply(), bind()는 모두 함수 실행을 제어하기 위해 사용되는 메소드이다. call()과 apply()는 ES5에 도입된 문법이고 bind()는 그후 ES5에 도입되었다. 함수를 즉시 실행하고자 할 때는 call()과 apply()를 사용하고, bind()는 나중에 bound된 함수를 리턴 받아 사용하므로 이후에 실행될 함수를 생각하며 써야 한다. const user = { name: 'Hannah' } const profile = function (location, language) { return `${this.name} is a ${language} programmer, who lives in ${location}`; } consol..

기존에도 너무너무 티스토리 기본 코드 신택스 하이라이터가 너무 못생겨서 플러그인도 깔아봤지만, 별 소용이 없었다. 한동안은 Github Gist의 에디터가 예뻐서 썼지만, 일일이 스크립트 태그를 추가해주어야 해서 효율이 떨어졌다. uiyoji-journal.tistory.com/48 [GitHub Gist] 블로그에 간단한 Code Snippet 공유하기 블로그에 글을 발행하기 전 포스트의 초안을 작성하거나, 강의를 듣는 과정에서 노트 필기를 하거나 할 때는 노션을 자주 사용한다. 쓴 노트가 많아질수록 엄청 무거워지지만 무겁고 느린 반응 uiyoji-journal.tistory.com 시간 내서 오늘에야 드디어 highlight.js를 적용해줬다. 하는 김에 inline code block에도 CSS를 ..

CSS 속성 중 fixed와 sticky 활용을 잘 못하는 것 같아서, 다시 한 번 점검용으로 또 면접 준비용으로 기록을 남겨보려고 한다. 우선 CSS의 position property에는 static, relative, absolute, fixed, sticky 다섯 종류가 있다. CSS의 각 속성은 top, right, left, bottom의 속성에 값을 넣어 최종적으로 문서 내 요소가 의도대로 배치될 수 있도록 도와준다. 단, static의 경우에는 해당 속성들은 물론, z-index 같은 속성의 도움을 받을 수 없다. 문서의 원래 흐름에 자연스럽게 위치되기 때문이다. relative 해당 속성을 가지는 요소는 원래의 문서 흐름을 배제하지 않지만, 자기 자신을 기준 삼아 top, bottom, r..

DOCTYPE 유규한 역사를 가진 HTML은 시간이 지나며 그때 그때 필요한 기능을 표준으로 하는 버전들을 계속 업데이트해왔다. 당연히 여러 버전이 존재할 수밖에 없고, 이들은 각각의 이름도 가지고 있다. 가까운 순으로 HTML5, XHTML 1.1, HTML 4 등을 들어볼 수 있는데, 버전 별로 지원하는 태그나 속성이 조금씩 다르다. 물론 deprecated된 기능도 있다. 그러다보니 웹 문서가 어떤 HTML 버전을 사용하는지 브라우저에게 알려줄 DTD(Document Type Declaration)이라 하는 문서 형식 지시자를 와 같이 HTML 문서 최상단에 작성하게 된다. 그러면 브라우저는 이를 읽고 선언된 버전에 맞는 문서를 렌더링해서 보여줄 수 있게 되는 것이다. deprecated 되는 몇 ..

이번 프로젝트에서는 Github의 프로젝트 기능을 정말 잘 활용하고 있다. Pull Request와 Issue 트랙킹, 칸반 보드로 스케쥴링 등등 코드와 직접적 관련이 있는 사항은 이곳에 잘 기록해두고, 일정 관리에 대한 부분은 노션에 의존하고 있다. Git에 대해서도 새롭게 많이 배우는 게 있다. 가령, 현재까지는 팀원별로 하는 일이 겹치지 않아서 각자의 브랜치를 따서 작업했다면, 이제 겹치는 코드가 많아져서 기능별로 브랜치를 따서 작업하고 그때그때 병합하고 삭제하는 식이다. 관습대로 feature/[기능]으로 브랜치 이름을 적어준다. 오늘은 register 시 Formik와 Yup 라이브러리를 사용한 Validation을 테스트해볼 일이 있어서 가이드 페이지를 만드느라 feature/register라..

'20210430' 같은 날짜 문자열을 Date 객체로 만들 때, 바로 사용할 수 없어서 '2020-04-30' 형태로 만들어주고자 했다. 정규식을 이용하면 간단하게 가공할 수 있다. 전화번호를 하이픈으로 구분지을 때도 사용 가능하다.

시작하며 Nomad Coder 강의 중 useTab 커스텀 훅 만드는 과정에서 제목에 써둔 것처럼 Re-rendering Issue와 Objects are not valid as a React 이슈를 만났다. 흔한 이슈이므로 작성하면서 이런 에러가 왜 발생했는지 써두고자 한다. 코드 Re-rendering Issue 정상적으로 작동할 때의 코드는 위 모습과 같다. 여기서 2번 주석 표시에서 실수를 하거나 아래 return 되는 리액트 컴포넌트의 onClick 부분을 잘못 적을 경우 Re-Rendering이 계속 발생할 수 있다. useTabs 훅은 객체 하나를 return 해주고, App() 함수형 컴포넌트에서는 이를 사용할 수 있게 한다. 맨 처음 UseTabs는 useState를 통해 currentI..

최근에 강의 노트나 튜토리얼 관련한 주석을 좀 더 두드러지게 잘 나타나게 쓰고 싶어서 github에 소스 코드를 올린 후에도 comment 부분을 열심히 활용하고 또 만족스러워했는데, 티스토리 블로그에도 그런 역할을 할 수 있게 덧글창을 관리하면 어떨까 하는 생각이 들었다. 기술 블로그를 사용하기 전에는 다른 주제의 블로그를 운영할 때도 있었지만 때맞춰 알림 받기가 어려웠던 기억도 있었다. 어차피 기술 블로그 전용으로 만들어둔 계정이니 덧글 플랫폼이 티스토리 기본 덧글에 한정될 필요는 없겠다는 생각도 들었다. disqus 도입을 고려하다가 이 링크 글을 발견했고, disqus보다 훨씬 나은 대안이라는 판단에 후다닥 도입해봤다. 포트폴리오 전용으로 만든 다른 깃헙 블로그에서 더 빛을 발할 것 같은 utte..

시작하며 PWA 연습을 위해서 간단한 프로젝트를 구성했다. 192, 512px 사이즈의 두 로고와 src 폴더에는 index.html, index.js, master.css, manifest.json 이렇게 파일을 두고 있다. lighthouse를 통해 pwa 리포트를 출력하는데 https 부분을 해결해야 할 것 같아서, Live Server 설정을 손보기로 했다. 문제 상황 Live Server extension에 들어가 설명을 보니 다행히 https를 지원한다. 공용 사이트가 아닌 테스트를 위함이니 자체 서명을 통해서 간단하게 Open SSL을 이용하기로 했다. Open SSL은 네트워크를 통한 데이터 통신에 쓰이는 두 프로토콜 TLS, SSL의 오픈 소스 버전이며, 이 링크에서 다운로드 받을 수 있..

gh-pages로 리액트 앱을 배포할 때 URL 설정을 package.json에 homepages로 추가하는 것만으로는 안 돼서 검색하다가 나중에 또 잊을까봐 기록으로 남겨둔다 ..^^ package.json gh-pages를 install한 뒤 script에 predeploy와 deploy 명령어를 넣어준 뒤 "homepage"에 내 깃헙 아이디 + github.io + 현재 저장소 이름을 넣어준 것까지는 다른 튜토리얼에 나와 있는 내용과 동일하게 진행했다. 그런데 자꾸 빌드된 파일에 번들된 css나 js 파일을 참조하는 경로가 /github.io...로 시작하고 있었다. 즉, github io를 넣은 완전한 URL을 찾지 못하고 있었다. React-router 라이브러리를 사용할 때도 비슷한 문제가 ..

문제 상황 Firebase의 Auth 기능을 이용해 유저의 프로필 정보를 받아서 DisplayName을 업데이트하려고 했다. 첫 번째 업데이트는 제대로 됐지만, 두 번째부터는 아래 같은 에러를 냈다. 문제 해결 최상위 App.js 파일에서 refreshuser라는 메소드를 두고, 프로필 정보를 업데이트할 때마다 이를 바로 반영할 수 있게 firebase.auth로부터 currentUser를 받아오고 있었다. 여기까지는 문제가 없었지만, 이를 Object.assign({}, user))로 복사한 객체를 받아오는 과정에서 enumerable 속성인 메소드 updateProfile을 복사해오지 못했던 것이다. 그래서 유저가 프로필 이름을 변경한 첫 번째 시점에서는 제대로 작동했지만, refreshuser 메소..

문제 상황 useEffect를 쓰면서 자주 만나는 에러 핸들링을 해보자. 문제 원인 및 해결 useEffect는 클래스 컴포넌트에서 componentDidMount()와 componentDidUpdate() 라이프 사이클 메소드 두 개를 합친 역할을 한다고 배웠다. 따라서, useEffect 함수의 두 번째 인자에 빈 배열을 넣거나, 업데이트 하고자 하는 state를 넣어주어 렌더링의 횟수를 제한해주어야 하는데, 위 에러는 해당 state가 빠졌거나, 잘못 들어갔거나 해서 나오는 에러이다. 문제의 원인이 된 코드는 App.js와 Snackbar.js 컴포넌트에서였다. App.js에서는 Redux를 통해 반응형 컴포넌트 빌딩을 위해 size를 store에 등록해주기 위해 리팩토링을 하다가 생겼다. func..

시작하며 1편에서 다루었던 글에서는 redux-actions를 사용하는데, redux와 react-redux 모듈로도 충분하지 않을까 싶었다. 패턴 역시 좀 더 직관적으로 이해할 수 있으면 좋을 것 같아서 즐겨보는 유튜버의 Redux 강의를 한 번 들어봤다. 디렉토리 구성 store └modules └ index.js └ test.js └config.js └index.js 기존에는 위 같은 구성이었다. 이를 간단하게 actions와 reducers로 구분했다. 기본 설정 1 step reducer 생성 reducers 폴더 내에 counter와 로그인 여부를 확인하는 isLoggedIn reducer를 만들어보기로 한다. // src/reducers/counter.js const counterReduce..

시작하며 App이 점점 규모가 커지면서 상태 관리할 필요를 계속 느끼고 있었는데, 이번에야 도입했다. 필요한 모듈을 설치하고, 간단하게 +/- 버튼을 통해 카운트되는 기능을 만들어보면서 Redux에 접근해봤다. 필요 모듈 다운로드 yarn add react-redux redux redux-actions yarn을 통해 위 dependencies를 받았다. 폴더 구성 최종 폴더 구성은 사진처럼 되어 있다. src/store 내 config.js, index.js 파일을 가지며, modules 폴더를 따로 두었다. store 1. config.js 파일 생성 해당 파일은 여러 store를 모아 외부 컴포넌트와 연결하기 위함이다. store는 state를 관리하는 일종의 보관처. // src/config.js..

문제 상황 버튼을 클릭하면 바로 위의 문단이 fade out 되면서 사라져야 하는데, 해당 부분을 드래그하면 draggable 하고, 복사까지 된다. 코드 .fade { animation: fade ease 1s forwards; } @keyframes fade { from { opacity: 1; } to { opacity: 0; } } 해결 방법 위 코드를 아래처럼 바꾼다. @keyframes fade { from { opacity: 1; pointer-events: all; } to { opacity: 0; pointer-events: none; } } 더 이상 Clickable 하지 않다. pointer-events CSS 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 ..

속성을 이용한 CSS 셀렉터는 거의 사용하지 않아서 잊어버렸는데, CSS Diner라는 귀여운 게임을 찾은 김에 Attribute만을 통해 셀렉트하는 방법을 정리해두면 좋을 것 같았다. A[attribute] a[href] input[disabled] input[type='checkbox'] 태그 네임, 클래스 네임, ID 등등 다른 CSS 선택자와 Attribute Selector를 함께 쓰는 방식이다. 위 예시는 href='anything'인 a 태그를 선택하거나 disabled 속성을 가진 input을 선택한다. [Attribute] [value] { .. } value라는 attribute를 가진 요소를 선택한다. ^, $, * [attribute^='value'] .toy[category^='S..