프엔모에 ✨

2021년 1월에서 3월까지 컴퓨터 과학계에서 유명한 SICP를 그룹 스터디를 통해 공부하게 되었습니다. 1장까지 같이 공부를 했었고 이후에는 개인적으로 2장과 3장의 연습문제를 풀면서 학습했습니다. 저는 공부를 시작하기 전에 아래와 같은 소개글과 영상으로 미리 SICP에 대한 정보를 간접적으로 알게 되었습니다. SICP 끝낸 기념으로 첫글 올려봅니다. - C<>DE & T4LK5 MIT가 SICP 강의를 중단한 이유 - 아샬 책을 3장까지 공부해보니 1~2 장까지의 내용은 프로그램을 개발하면서 충분히 고민해볼 만한 내용으로 소프트웨어 공학과 관련한 추상화, 재사용 등의 이야기를 다루고 있었습니다. ...

선택자의 우선순위를 나타내는 특이도Specificity와 부모에서 기본 스타일을 받아오는 상속inheritance 개념은 CSS를 다뤄보며 항상 마주치는 요소지만, 두 용어의 상위 개념인 Cascade가 정확히 무엇인지 좀처럼 파악할 기회가 잘 없었다. 마침 최근 읽고 있는 CSS In Depth라는 책에 해당 내용이 첫 챕터에 소개되어 있었다. 이 포스트에서 다루는 내용은 CSS In Depth 1장 Cascade, specificity, and inheritance으로 무료 열람할 수 있다. 왜 이름이 ‘Cascading’ Style Sheet 인가? CSS의 첫 글자 ‘C’는 Cascading 를 나타내는데 사전에 나온 정의를 찾아보니 대부분 공통으로 폭포수와 계단식 구조를 의미했다. ...

계기 원래 프로그래밍을 업으로 삼는 것에 대한 고민은 학부 4학년으로 미뤄두고 싶었다. 그러다가 2학년 즈음에 병역에 대해 고민하면서 산업기능요원 복무 제도로 내 전문성을 향상하는 것이 의미 있다고 판단했다. 구직을 시작하려니 실제로 일해본 경험이 없어 3~4번 정도 서류와 면접 단계에서 쓴맛을 봤다. 아무래도 허들이 높다고 생각해서 중단하고 인턴 프로그램을 찾아봤다. 플라네타리움 인턴십은 포트폴리오로 사용 가능한 프로젝트 단위로 진행되어 채용 과정에서 레퍼런스로 삼을 수 있도록 최대한 도우며, 추후 현업에서 필요한 지식을 멘토와 함께 습득할 수 있도록 합니다. — 엔지니어링 인턴 — 플라네타리움 인재 영입 ...

읽기 편한 코드 VS 이해하는데 시간이 걸리지만 빠른 코드 나는 제 3자가 읽어도 개념적 구조를 무리 없이 이해할 수 있게 “무엇을 넣고, 어떤 것이 기대하는지” 신경을 쓰며 코드를 작성한다. 그러나 백준 온라인 저지의 문제를 매일 최소 한문제씩 풀고, 23시에 회고를 하는 “데일리 백준” 모임에 참여하게 되면서 이런 취향에서 어느 정도까지 타협을 해야 될지 고민하고 있다. 제 3자가 무리 없이 개념적 구조를 이해할 수 있는가? ‘무리 없이’라는 것은 코드 자체가 컴퓨터에서 느릴 수 있지만, 사람에게 ‘구문’으로서 쉽게 이해할 수 있다는 나의 주관적인 가치이다. 그렇지만 무리가 좀 있어도 구현체가 충분히 빠르고, 테스트 또는 문서의 도움으로 개념적 구조를 이해할 수 있으면 클린 코드라 부를 자격이 있어 보인다고 최근의 경험을 통해 생각이 바뀌였다. ...

Lexical this 화살표 함수는 function의 키워드의 줄임말로 흔히 언급된다. 하지만 완전히 다른 점으로는 this가 지칭하는 동적 스코프 규칙 대신에 자신과 가장 가까운 함수의 스코프에서 this 값을 받아온다. const person = { weight: 100, getWeight: () => this.weight, }; console.log(person.getWeight()); 출력 값은 undefined이다. 왜냐하면 위 경우는 멤버 함수 getWeight 를 둘러싼 함수 스코프가 존재하지 않아서 this가 빈 객체{}를 갖게 되기 때문이다. const person = { weight: 100, getWeight: function() { return this.weight }, }; console.log(person.getWeight()); function 키워드로 멤버 함수 getWeight 를 선언했으면 this는 person 인스턴스를 제대로 가리켜서 100을 정상적으로 출력 했을 것이다. ...

문제 설명 n개의 음이 아닌 정수가 있습니다. 이 수를 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+1 = 3 +1+1-1+1+1 = 3 +1+1+1-1+1 = 3 +1+1+1+1-1 = 3 사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요. ...

어제 React로 사고하기 – React 문서를 단위 테스트를 작성하며 실습해보았다. 레이아웃 스팩도 테스트에 기술했지만 아래에서 설명할 이유로 한 두 커밋 이후 지워버렸다. Remove unnecessary Test suit · mu-hun/thinking-in-react@b004b87 · GitHub 테스트는 어느 정도까지 작성해야 될까 고정된 <td/>의 문자 확인 props에 따라 스타일이 변화되는지 체크 onChange 이벤트가 제대로 발생하는가 3개 다 아니다. 위 세가지 테스트 수트는 리엑트를 믿지 못한다는 의미라고 생각한다. 그러면 무엇을 테스트해야 되나? Props 와 state 의 조합에 따라 기대하는 뷰가 나오는지 확인 ...

유저 스크립트 소개 유저 스크립트는 모던 브라우저 확장browser extension과 비슷한 기능을 갖춘 자바스크립트 코드 스니펫snippet입니다. 브라우저 확장이 광고 차단이나, 다크모드 프로그램 처럼 특정 웹 서비스의 UI를 수정하는 소프트웨어라면, 유저스크립트는 이보다 작은 규모로 1~2줄 정도의 복잡하지 않은 가벼운 수정을 위해 주로 쓰입니다. 본 글은 유저스크립트 사용에 대해서 실제 사례와 함께 예시 코드를 소개합니다. 유저 스크립트를 사용하려면 유저 스크립트 매니저라는 브라우저 확장의 도움이 필요합니다. 하지만 브라우저마다 다른 설치와 사용 방법에 대해서는 약간 주제에 벗어난 내용으로 자세히 다루지 않습니다. ...

FormEvent는 입력 요소의 상태를 직접 관리하지 않으면서 입력 요소의 값을 얻는 편리한 방법이지만, 처음 TS를 React와 함께 사용할 때 폼 이벤트의 타입을 어떻게 확장할 것인가 고민했다. 타이핑이 안되어 있는 경우 제너릭으로 flag라는 상태의 타입을 명시하는 것처럼, 폼 요소로 감싸진 입력 요소의 타입을 정의하는 법을 알고 싶었다. 타이핑 된 경우 굳이 HTMLFormElement를 두 번 써야 되나..? 라고 의문이 들지만 FormTarget.target이 덮어 씌워지는 상황이다. “그러면 FormEvent<HTMLFormElement>는 필요 없지 않는가요?” 무척이나 엄격한 TS의 타입 규칙 때문에 FormEvent는 HTMLFormElement를 제너릭 타입으로 갖고 있어야 하고, 그 하위의 개체인 target은 HTMLFormElement를 상속받으면서 그 아래 입력 요소 타입을 가져야 되어야 하는 상황입니다. 아마 상호적으로 타입을 참조하면서 생기는 문제로 보입니다. ...

나는 소프트웨어 디자인 분야에서 “바퀴를 재 발명하라, 혹은 하지 말라” 라는 말을 종종 들어봤다. 코드를 적절하게 재 사용하는 것이 중요하다는 교훈이다. 반면에 내가 부딛히고 있는 웹 프런트 엔드 분야에선 매번 다시 만드는 경우가 꽤 자주 보인다. 그렇다면 바퀴를 재사용하지 않는다는 이야기로 오해받을 수 있다. 반은 사실이고, 나머지는 거짓인 것 같다. 첫번째, 웹 프론트 엔드 분야는 전례 없는 성장 곡선을 나타내고 있다. 다른 분야보다 더 빠르고 꾸준히 변하는 이유인데, 나는 환경적인 면에서 그 이유가 있다고 생각한다. 스마트폰의 보급화로 IE 브라우저의 점유율이 급감한 이유가 여태동안 정제되어 있던 웹 생태계가 발전하게 된 바탕이 되었다고 본다. ...