한땀한땀 코딩하기

워낙 좋은 기술이 많은 요즘은 프론트엔드를 공부할 때 바닐라 자바스크립트를 조금 맛본 뒤 바로 리액트, 뷰와 같은 라이브러리나 프레임워크로 넘어가는 것 같습니다. 저 또한 크게 다르지 않았고, 바닐라 자바스크립트로 '상태'라는 걸 굳이 만들어보지 않았던 것으로 기억합니다. 다만, 리액트로 넘어가기 전, 부스트캠프에서 '옵저버 패턴'을 소개한 적이 있는데, 리액트를 무작정 사용하기 전에 어떻게 변화하는 값에 맞춰 화면에 렌더링 되는지를 직접 만들어보며 이해하는 것이 맹점이었습니다. 그때는 리액트도, 리덕스도 경험해보기 전이라 어떤 장점이 있는지도, 어떻게 하는 느낌인지도 파악을 못 해 눈물을 흘리며 넘어갔던 기억이 납니다. 그리고 이래저래 맛보기를 해본 지금, 바닐라 자바스크립트로 todo list를 연습..

요약 1편 '변수'는 여기를 확인하세요. 들어가며 자바스크립트를 공부해보면 클로저가 등장합니다. this와 더불어 처음 접하는 입장에서 정확한 개념을 이해하기가 굉장히 난해한 축에 속한다고 생각합니다. 개념을 대충 알더라도, 또 의식적으로 활용하기가 어렵지 않나 싶습니다 (생각보다 우리는 모듈에서도 그렇고 클로저라고 모르고 사용하는 클로저가 많습니다). 특히 private, public 변수가 기본적으로 명시되지 않은 자바스크립트에선 클로저가 encapsulation을 위해선 필수로 등장합니다. You Don't Know JS Yet 2권은 전반에 걸쳐 클로저에 대한 정의, 흔히 하는 오해, 활용법 등을 설명하고 있는데, 사족을 몇 가지 곁들여가며 요약해보았습니다. 클로저? 외부 함수의 변수를 참조하고,..

Ch01 | this or That? 자바스크립트에서 this는 그 이름 때문에 많은 개발자들이 혼란을 느끼는 요소입니다. 알아보면 동작 자체가 굉장히 복잡하진 않지만, 이름에서 오는 혼동 때문에 많이들 잘못 사용하고 있다고 합니다. Why this? this를 활용하면 이용하여 하나의 함수가 컨텍스트를 특별히 인자로 받지 않아도 call같은 컨텍스트 변경 함수를 이용하여 원하는 결과를 줄 수 있게 됩니다. function identify() { return this.name.toUpperCase(); } var me = { name: "Grace" }; var you = { name: "Reader" }; identify.call( me ); // GRACE identify.call( you ); //..

들어가며 전반적인 introduction에 해당하는 1권 이후 스터디를 진행하며 You Don't Know JS Yet 2권을 읽어보았습니다. 2권은 부제에서 확인할 수 있듯 scope(스코프)와 closure(클로저)에 대한 이야기가 중점인데, 특히 클로저를 설명하기까지 필요한 기본적인 개념과 그 동작 원리를 독자들이 차근차근 이해할 수 있게 구성한 점이 굉장히 좋았습니다. 굉장히 당연시하고 넘어갔던 변수 선언이나 스코프에 대한 것도 JS의 특징과 함께 잘 엮어서 설명해주고 있습니다. 많은 이야기가 오가는 책인만큼, 모든 걸 요약하는 것보다는 제가 인상 깊게 읽은 부분을 가볍게 정리해보고자 합니다. 크게 꼽아보자면 아래와 같습니다. var 와 let (+hoisting) 글로벌 객체 window Clo..

2020년을 보내며 2020년은 정말이지 여러 가지 의미로 제 인생에서 잊기 힘든 해가 될 거 같습니다. 글로벌한 판데믹도 한몫하겠지만, 인생의 큰 변환점이 된 해가 아닌가 싶습니다. 무엇보다도 스스로를 '개발자'로 정의하기 시작한 해라 그러리라 생각합니다. 본격적으로 개발자로 진로 방향을 잡고 달려온 1년이었는데, 사실 시작할 때는 1년이면 뭐든 하겠지!라는 생각이 컸습니다. 지금은 얼마나 오만한(?) 생각이었는지 알게 되었지만요. 끊임없는 학습이 매력적으로 느껴져 개발에 뛰어들었지만 생각보다 배울 것이 많았단 것이 함정이었을까요. 그래도 2020년을 개발자로 살고 나서 퇴사를 한 것이나, 이 길을 선택한 것에 후회가 있느냐면 그건 절대 아니라고 단언할 수 있습니다. 42Seoul 2020년의 시작은 ..

멀쩡한 사각형 가로 길이가 Wcm, 세로 길이가 Hcm인 직사각형 종이가 있습니다. 종이에는 가로, 세로 방향과 평행하게 격자 형태로 선이 그어져 있으며, 모든 격자칸은 1cm x 1cm 크기입니다. 이 종이를 격자 선을 따라 1cm × 1cm의 정사각형으로 잘라 사용할 예정이었는데, 누군가가 이 종이를 대각선 꼭지점 2개를 잇는 방향으로 잘라 놓았습니다. 그러므로 현재 직사각형 종이는 크기가 같은 직각삼각형 2개로 나누어진 상태입니다. 새로운 종이를 구할 수 없는 상태이기 때문에, 이 종이에서 원래 종이의 가로, 세로 방향과 평행하게 1cm × 1cm로 잘라 사용할 수 있는 만큼만 사용하기로 하였습니다. 가로의 길이 W와 세로의 길이 H가 주어질 때, 사용할 수 있는 정사각형의 개수를 구하는 solut..

문제 설명 124 나라가 있습니다. 124 나라에서는 10진법이 아닌 다음과 같은 자신들만의 규칙으로 수를 표현합니다. 124 나라에는 자연수만 존재합니다. 124 나라에는 모든 수를 표현할 때 1, 2, 4만 사용합니다. 예를 들어서 124 나라에서 사용하는 숫자는 다음과 같이 변환됩니다. 10진법124 나라10진법124 나라 1 1 6 14 2 2 7 21 3 4 8 22 4 11 9 24 5 12 10 41 자연수 n이 매개변수로 주어질 때, n을 124 나라에서 사용하는 숫자로 바꾼 값을 return 하도록 solution 함수를 완성해 주세요. 제한사항 n은 500,000,000이하의 자연수 입니다. 입출력 예 nresult 1 1 2 2 3 4 4 11 나의 풀이 패턴을 코드로 옮겨보는 데서 ..

문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 array의 길이는 1 이상 100 이하입니다. a..

부스트캠프란 이 블로그에서 부스트캠프2020 챌린지를 후기글에서도 소개한 바 있듯이, 부스트캠프는 네이버 커넥트 재단에서 2016년부터 진행하고 있는 코딩 교육 프로그램입니다. 한 달간의 챌린지 기간을 거쳐 선발된 인원은 약 4개월의 멤버십 과정을 진행하게 됩니다. 코스는 JavaScript를 기반으로 한 웹, Swift IOS를 기반으로 하는 앱 코스 두 가지이며, 제가 선택한 것은 웹 풀스택 코스입니다. 멤버십은 8월부터 12월 말까지 대략 4개월 정도의 기간 동안 진행되었습니다. 무엇이 바뀌었을까 부스트캠프의 상세한 교육 내용을 적기보다는, 후기 및 회고의 느낌인 만큼 시작할 때의 저와 비교하여 지금의 저는 어떤 것이 바뀌어있는지를 기록해보면 어떨까 싶습니다. 사실 아직 글을 적는 현시점에서는 취업..

Storybook이 뭔가요? Storybook: UI component explorer for frontend developers Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient. storybook.js.org 간단하게 말하면 Storybook은 오픈소스 UI 테스터 툴입니다. 즉, UI 컴포넌트를 제작하면서 바로바로 확인해볼 수 있도록 도와주는 툴입니다. 아마 Storybook을 쓰기 전의 저와 비슷한 생각을 가진 사람이라면, 바로바로 페이지를 만들면서 확인할 수 있는 ..