티스토리

genieDocs

검색하기

블로그 홈

genieDocs

geniee.tistory.com/m

gitHub 💻 https://github.com/realhee

구독자: 6

방명록 방문하기

주요 글 목록

테크 리더들이 생각하는 "개발자 원칙" 필자는 학습 루틴이 느슨해지거나, 나태해질 때 쯤 우아한 테크 Youtube 채널을 들어가 신입 개발자 분들의 10분 테코톡을 보면서 요새 궁금해하는 키워드들이 무엇인지 탐색해보곤 한다. (이와 동시에 공부하기도 한다.) 그 중에서도 주기적으로 진행하는 컨텐츠, 우아한 테크 세미나는 현업 개발자 분들의 스피치 및 인터뷰로 짧은 시간 안에 양질의 테크 트렌드와 이직 시장 분위기를 파악할 수 있어 애청하는 편이다. 지난 3월, 우아한 형제들에서 진행하는 우아한 테크 세미나 라이브 스트리밍을 시청한 적이 있는데 요즘의 무기력한 자신을 돌이켜 보며 당시 메모했던 내용을 복기하며 포스팅을 올려본다. 특히 자주 접하던 네임드 개발자 분들의 질의응답 인터뷰가 인상적이었는데, 7개월이 지난 지금 내용을 곱씹어 보니 그.. 공감수 1 댓글수 1 2023. 11. 27.
Emotion으로 React 컴포넌트 디자인하기 Emotion? HTML 요소 혹은 React 컴포넌트에 CSS를 적용하기 위한 라이브러리 CSS-in-JS 라이브러리 중에서는 Styled Component 라이브러리가 가장 대두 되었으나, MUI(Material UI)가 스타일링 엔진을 Emotion으로 채택하면서 이목이 집중되고 있음 (Emotion에서도 styled component의 장점을 차용해서 활용하려는 흔적이 돋보임) css() 함수를 통해 간편한 React 컴포넌트 스타일링이 가능 공식 문서가 굉장히 친절하므로 Getting Started 항목을 읽어보는 것이 가장 명시적 패키지 설치 (react) vanilla 환경은 @emotion/css 패키지로 설치 $ yarn add @emotion/react emotion에서도 styled .. 공감수 0 댓글수 0 2022. 10. 6.
React 공식문서 톺아보기 (feat.코어 자바스크립트) 리액트 개발자들은 공부를 시작한 순간, 심화 기술에 대한 레퍼런스 참고 시, 새로운 버전이 출시되면 어김없이 공식문서를 찾게 된다. 수 많은 테크 블로그들의 정보와 비교해 가장 심플하고 가장 직관적이며 가장 정확한 정보를 가지고 있기에 뗄레야 뗄 수 없다. 필자는 최근 한 동안 코어 자바스크립트 공부에 빠져 실행 컨텍스트, 스코프, 비동기에 대한 기본기를 다졌다. (이에 대한 내용은 느낀 바가 많아 정리 후 포스팅 할 예정이다) 자바스크립트 엔진이 동작하는 방식을 이해하고 다시 읽는 공식문서는 좀 색달랐다. 예전에는 그저 페이스북이 정한 법칙대로. 로마에 왔으면 로마의 법을 따르라는 것 마냥 "그냥 그렇게 써야 돼"로 문서를 받아들였다면, 지금은 "로컬 state를 적용하기 위해서 왜 function 컴.. 공감수 0 댓글수 0 2022. 6. 26.
구글 스프린트 7기 FTOOS, 뒤늦은 회고 프롤로그 지난 3월, 한창 VanillaJS로 lotto 프로젝트의 코드 리뷰를 진행하던 시점에 있던 일이다. 처음에 function으로 구현되어 있던 객체들을 class형으로 리팩토링 해보면서 ES6부터 class 개념이 도입되고, 이로 인해 절차 지향형 언어 JavaScript가 OOP 패러다임을 따르고 있는 것이 기존 스크립트 언어의 정체성을 반하는 행위가 아닐까 싶은 의문이 들었다. function 객체와 class 객체의 차이점이 궁금해지면서 관련 기술 포스팅을 서치하던 중 우연히 현 카카오 엔터프라이즈에서 시니어 프론트엔드 개발자로 일하고 있는 teo의 글 객체지향 프로그래밍과 javascript (약간의 역사를 곁들인...) 을 접하게 됐다. 팩트만 나열한 기술 포스팅이 아닌 인사이트를 경험.. 공감수 5 댓글수 0 2022. 6. 11.
2022 GDG Korea 이력서 멘토링 후기 대다수의 직장인에게 이력서란 단순히 이직을 위한 "수단"이 아니게 됐다. 이력서를 주기적으로 갱신하고, 커리어를 회고하는 일은 다양화된 커리어의 방향성을 정립할 수 있는 주춧돌이 된다.이를 토대로 원하는 분야의 기업에서 오퍼를 받거나 JD를 검토해보면서 현 IT 시장에서 공통적으로 요구하는 역량이 무엇인지 파악할 수도 있다. 이처럼 이력서 관리는 소프트웨어 엔지니어에게 빠질 수 없는 필수 역량(?) 중 하나가 되었다. 지난 4월 23일, GDG Korea WebTech에서 진행한 이력서 멘토링 관련 세션을 참여했다. 단순 호기심에 신청한 행사였는데 굉장히 만족스러웠기에 뒤늦게나마 후기를 적어본다. 페스타를 통해 신청했고 개발자 이력서 키워드로 구글링하면 최 상단에 위치한 이력서 작성법 포스팅으로 유명한 .. 공감수 2 댓글수 0 2022. 6. 10.
ResizeObserver로 반응형 구현하기 (feat. 첫 PM 체험기) 지난 4월, 고객사 측에서 대규모 프로젝트 통합에 앞서 반응형 동작에 대한 요구사항이 생겨 갑작스럽게 데드라인성 프로젝트를 진행하게 되었다. 성능 최적화를 위해 절대 좌표로 구현되어 있는 내부 컴포넌트 구조에서 특정 모바일 브라우저의 인앱 기능을 통해 글꼴 크기 비율(%)을 변경하면 컨텐츠가 잘리지 않고 반응형처럼 동작해야 하는 요구사항이었다. 실제로 브라우저에서 글꼴 크기를 변경했을 때 computed style의 font size는 변경해주지만 notify event를 따로 내어주지 않기 때문에 내부 프레임워크의 event flow를 태울 수 없기에 적절한 대안이 필요했다. 애초에 컴포넌트가 상대 좌표로 구현되어 있었다면 간단히 flex 를 통해 반응형 레이아웃을 구축할 수 있었겠지만 기존 제품의 구.. 공감수 0 댓글수 0 2022. 6. 9.
3월 회고, 코드 리뷰 스터디와 멘탈 케어의 흔적들 어느덧 3월이 끝나간다. 오미크론 확진으로 3월 첫 주는 회복에만 힘쓰느라 일주일을 약에 취해 살았다.. (누가 경미한 감기 증세라 했나요.. 목에 칼춤을 추는 기분이였다..!) 그렇게 일상에 복귀한 지 보름 째. 그동안 커밋 잔디를 심지못해 부채감을 느끼며 VanillaJS 코드 리뷰 스터디와 Next.js 프로젝트 등 계획했던 일정들이 부메랑처럼 돌아와 매우 바쁜 일상을 보내게 되었다. 맘 같아서는 일주일에 한 번씩 회고록을 작성하려 했으나.. 😂 각 잡고 포스팅을 쓸 여유가 나지 않아 개인 notion에만 조금씩 정리했던 내용들과 개인적인 멘탈이 흔들렸을 때 극복했던 방법들을 톺아보고자 한다. 🖍 3월에 진행한 것들 1. 출근 전 10분 TIL 저널 작성 2. React 공식문서 정독 3. Vani.. 공감수 2 댓글수 0 2022. 3. 28.
React #4. Lifecycle Hook vs useEffect React의 Lifecycle이란? 리액트는 컴포넌트 기반으로 설계된 라이브러리이다. 리액트에서 우리가 만드는 컴포넌트는 React에서 각각의 컴포넌트는 생명주기(Lifecycle)를 가진다. 즉, 컴포넌트도 인생이 있다는 것이다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다. Lifecycle은 크게 세 가지 유형으로 나눌 수 있는데, 특히 업데이트가 되는 시점에 props, state를 통한 상태 관리가 필요하므로 주목하길 바란다. - 생성(mount) DOM이 생성되고 웹 브라우저 상에서 나타날 때 - 업데이트(update) props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제 렌.. 공감수 0 댓글수 0 2022. 3. 14.
ES6+ 함수와 자바스크립트 OOP의 원리 코드스피츠 강의를 듣고 복습하기 위해 포스팅을 정리해보았다. 사실 자바스크립트 엔진과 OOP는 다소 궁합이 안 맞는다. 그래서 개발자가 더욱 신경을 써야 하는 영역이다. 객체 지향적인 설계는 프로젝트 확장성에 큰 기여를 하기 때문에 초반 설계에 많은 시간을 들여야 하는 고된 작업이다. 코드 스피츠 수업은 두번째 수강인데 기초적인 개념을 넘어서 실무에 적용할 수 있을만한 견문을 넓힐 수 있는 좋은 강의였다. 1회차 sub routine flow는 상대주의적 관점을 가진다 메인 플로우, 서브루틴 중 누구를 기준으로 보냐에 따라 달라진다 메인 플로우는 서브루틴이 시작하고 돌아와야 할 point 위치를 가진다 서브루틴이 중첩될수록 중첩된 서브루틴들의 point를 메모리에 모두 keep 한다 = call stac.. 공감수 0 댓글수 0 2022. 2. 23.
컴파일러는 두 번 공격한다 #호이스팅 4. 호이스팅 4.1 컴파일러는 두 번 공격한다 한 스코프 안에서 선언된 변수는 바로 그 스코프에 속한다. 자바스크립트 프로그램은 1장의 컴파일러 이론에 따라 실행된다. 자바스크립트 엔진이 코드를 인터프리팅 하기 전에 컴파일한다. 컴파일레이션 단계 중에는 모든 선언문을 찾아 적절한 스코프에 연결해주는 과정이 있었다. 이게 바로 2장 렉시컬 스코프의 핵심이다. 변수와 함수 선언문은 모두 코드가 실제 실행되기 전에 먼저 처리된다고 보면 된다. “var a = 2;”는 하나의 구문이라 생각할 수 있지만 자바스크립트는 두 개의 구문으로 본다. var a; // 선언문 (컴파일레이션 단계) a = 2; // 대입문 (실행 단계) 이 과정에서 변수와 함수 선언문은 선언된 위치에서 코드의 꼭대기로 끌어올려진다. 이렇.. 공감수 0 댓글수 0 2022. 2. 22.
변수를 찾기 위해 정의된 규칙 #스코프 1. 스코프란 무엇인가 프로그래밍 언어는 변수에 값을 저장하고 → 저장된 값을 가져다 쓰고 → 수정하는 패러다임을 가진다. 이 기능은 프로그램에서 상태(state)를 나타낼 수 있게 해준다. 그렇다면 ✔️ 변수는 어디에 저장되는가? ✔️ 필요할 때 프로그램은 어떻게 변수를 찾는가? 특정 장소에 변수를 저장하고 그 변수를 찾는 데는 잘 정의된 규칙이 필요한데 이를 스코프라고 부른다. 그렇다면 스코프 규칙은 어디서 어떻게 정의되는걸까? 스코프 규칙에 대한 컴파일러 이론을 확인해 보자. 1.1. 컴파일러 이론 보통 자바스크립트는 ‘동적' 또는 ‘인터프리터'언어로 분류하나 사실은 ‘컴파일러 언어'다. 어떤 자바스크립트 조각이라도 실행되려면 먼저(보통 바로 직전에) ‘컴파일’되어야한다. 자바스크립트 컴파일러는 프.. 공감수 0 댓글수 0 2022. 2. 21.
값 할당 !== 선언 #타입 0. 개요 YOU DON'T KNOW JS의 주요 내용을 정리한다. 프로젝트 진행 중 막히는 개념이 있으면 챕터 별로 찾아서 읽는 것을 목적으로 한다. 예시 코드들은 ES6 기반으로 테스트하며 학습하며 정리 내용은 블로그에 에러노트와 함께 포스팅하며 복기한다. 220215_localStorage, 상태관리 목적으로 this 접근이 어려워서 this / 타입 / 스코프 부분을 공부했다. PART 1. 타입과 문법 1. 타입 1.2. 내장 타입 자바스크립트의 7가지 내장 타입 null → 얘네도 타입이다! undefined → 얘네도 타입이다! boolean number object → 유일한 참조타입. 나머지는 원시(primitives) 타입 symbol (ES6 new!) typeof 연산자로 확인한 값.. 공감수 0 댓글수 0 2022. 2. 20.
VanillaJS 스터디, 2주차의 회고록 1주차 🧊 팀 만들기와 아이스 브레이킹을 진행하면서 본격적인 1주차 미션이 시작됐다. 나는 사실 블랙커피 코드리뷰 스터디는 처음이 아니다. 약 1년 전에 5기에 참여했었는데 그때도 좋았지만 지금은 유데미 강의와 온라인 세션의 퀄리티가 비교 불가정도로 좋아지며 만족스러운 코드리뷰와 인사이트가 가능해 진 것 같다. 스마트한 스터디의 완성본같다고 할까? 특히 메타버스와 notion을 통한 세션 진행 방식은 정말 색달랐다. 우리 팀은 2주차 온라인 세션이 시작되기 전 자체 코드 리팩토링을 진행하기로 했다. 이를 위해 Github Organization을 따로 만들어 PR을 진행했다. 스터디 저장소에서 fork로 가져와 이를 기반으로 commit log를 유지하며 2가지 remote repo에 동시 반영이 가능할.. 공감수 0 댓글수 0 2022. 2. 18.
JavaScript로 코딩테스트 준비하기 (초보자 편) case 1. 입력값 정제가 최우선! 가장 먼저 문제에서 나온 input 입력을 잘 정제하고, 로직을 짜기 위한 적절한 형태로 parsing하기 출력값 full string은 키워드(”\n”)로 split()을 한다던가 / +변수 또는 Number()로 숫자로 형변환 해준다던가 / map()을 써서 array 변환하기라던가.. 기본적인 연산 API에 익숙해질 때까지 연습하기 블로그들을 참고하면 고수들의 심플한 코드가 많은데, 초보들은 너무 어려울 것이다.. 추천하는 방법은 입력 받자마자 console.log() 찍어보는 것. 더 명시적으로 문제 힌트를 얻을 수 있다. 그럼 이 값에 난 뭘 해줘야할까? 그다음엔? → 차근차근 값을 직접 console.log()로 값을 확인해보면서 푼다. case 1-1 처.. 공감수 0 댓글수 0 2022. 2. 15.
자료구조 & 알고리즘 공부를 시작하기 전 Key Point 자료구조 서비스나 어플리케이션에서 필요한 데이터를 메모리에 어떻게 구조적으로 잘 정리해서 담아두고 관리하고 최종적으로 가장 효율적인 방식으로 필요한 데이터에 빠르게 접근하고 필한 수정 삽입 삭제할 수 있도록 도와준다 서비스에서 클라이언트에게 데이터를 제공하거나 어플리케이션에서 사용자에게 필요한 데이터를 보여주거나 수정할 때 효율적으로 일을 처리하기 위해서는 기능에 적합한 알맞는 자료구조를 쓰는 것이 정말 중요하다. 어떤 자료구조를 쓰냐에 따라 사용자가 원하는 기능을 수행하는데 천차만별 차이가 나게 된다. 종류 배열 단일 연결 리스트 이중 연결 리스트 스택 해쉬테이블 자료구조 공부 시 Key Point 데이터들의 순서 보장 여부? 중복 데이터 가능 여부? 검색할 때 효율적인 정도? 원하는 기능에 따라 수정.. 공감수 0 댓글수 0 2022. 2. 14.
JavaScript에서의 OOP (Object Oriented Programming) 객체(Object) 란? 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 고유 속성을 가지고 다른 것과 식별 가능한 것 따라서 소프트웨어에서 객체를 만든다는 것은 물리적 존재나, 추상적 생각의 구현물들을 속성과 메소드로 정의하는 과정이라고 볼 수 있다. 객체의 구성 객체 = 속성 + 메소드 자바스크립트에서의 Object JS의 객체 자료형 원시 자료형 (null, undefined, "string", 10, true, false ...) --> 객체처럼 다루지 않으면 객체의 특성을 가지지 않음 객체 자바스크립트는 데이터 저장을 위해 원시 자료형과 객체 이 2가지 종류의 자료형을 사용한다. 숫자나 문자열 같은 단일한 데이터를 저장하는 원시 자료형은 자바스크립트 안에서 사용하는 기본적인 데이터 저.. 공감수 1 댓글수 0 2022. 2. 13.
ES6_템플릿 리터럴 (Template Literals) Front-End 프론트엔드에서는 HTML 을 데이터와 결합해 DOM을 다시 그리는 일이 빈번한데, 템플릿을 쉽게 편집하고 작성하기 위해 추가된 기능이다. (JavaScript 자체적으로 지원하기 전에도 라이브러리로 존재해왔다.) 템플릿 리터럴? ES2015 사양명세서에선 template strings 라고 불렸으며 내장된 표현식을 허용하는 문자열 리터럴을 뜻한다. - 표현식/문자열 삽입 - 여러 줄 문자열 - 문자열 형식화 - 문자열 태깅 Syntax 템플릿 리터럴은 작은따옴표(')나 큰따옴표(")대신 백틱(`) (grave accent)로 감싸준다. 플레이스 홀더 (${}) 를 사용하며 내부값은 함수로 전달된다. 여러 줄의 멀티 라인을 허용한다. 표현식 삽입법 (Expression interpolat.. 공감수 0 댓글수 0 2022. 2. 12.
이벤트(Event) 흐름 제어하는 법 Event란? 웹을 탐색하는 동안 브라우저는 여러 종류의 이벤트를 등록한다. 브라우저에서의 event란 사용자가 클릭했을 '때', 스크롤을 했을 '때', 텍스트를 입력했을 '때'와 같은 것을 의미한다. Event를 알아야하는 이유 input 창에 값을 입력하고, 엔터를 쳤을 때 리스트를 추가하려고 할 때 삭제 버튼으로 리스트를 삭제하고 싶을 때 인터랙티브 한 사용자 경험(UX)을 만들고 싶을 때 동적인 웹은 사용자와 상호작용이 잘 되어야 한다. 그리고 그 상호작용은 어떤 이벤트에 의해 발생하며 이를 유연하게 다룰 줄 알아야 interactive 한 웹 앱 구현이 가능하다. 프론트엔드에서 많은 인터렉션은 모두 Event(사건)를 처리하는 것과 깊은 관련이 있다. Event의 종류 사용자 인터페이스(UI)이.. 공감수 1 댓글수 0 2022. 2. 11.
프론트 엔드의 상태(state) 관리 최근 React로 개인 프로젝트를 구현하다가 JS 기초 개념이 부족한 것 같아 VanilaJS를 통한 새 협업 프로젝트를 하고 있다. React를 활용하면 Redux, Context를 통해 심플하게 state 관리가 가능한데 VanilaJS에서는 React의 최대 장점인 useState기능이 없어진 탓에 부모, 자식 객체 간의 깔끔한 상태 관리에 대해 다시금 깨닫고 있다.. 이를 VanilaJS로, 그것도 clean code 형태로 구현하자니 어떻게 변수를 만들어 재사용할지, 또 어떤 로직이 효율적인 방법인지 떠올리기가 생각보다 쉽지가 않았다. 프로젝트 설계 전 전체적인 상태 구조를 짜지 않고 시작하게 되면 프로젝트가 복잡해질수록 유지보수가 더 힘겨워진다. 이번 포스팅은 프런트엔드 개발자가 갖춰야 할 상.. 공감수 2 댓글수 1 2022. 2. 10.
BOM (Browser Object Model) 완벽 정복하기 BOM이란? BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다. 대부분의 브라우저에서 구현은 되어있지만, 정의된 표준이 없어 브라우저 제작사 마다 세부사항이 다르고 다소 한정적이라는 특징이 있다. BOM의 역할은 웹 브라우저의 버튼, URL 주소 입력 창, 타이틀 바 등 웹브라우저 윈도우 및 웹페이지의 일부분을 제어할수 있게끔 하는 것이다. BOM을 이해하기 위해서는 Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것이라고 해도 과언이 아닐 것이다. BOM의 공부와 동시에 Window 객체의 사용법을 알아야 한다. 대표적인 BO.. 공감수 1 댓글수 0 2022. 2. 9.
DOM (Document object Model) 완벽 정복하기 Front-End 개발자라면 반드시 거쳐가는 단어 DOM. DOM이란 정확히 무엇일까? DOM이라는 단어가 눈과 귀에 익숙함에도 막상 DOM이 무엇이냐고 물어봤을 때 "브라우저 개발자 툴에서 Element 객체 말할 때 그거~ 노드 말할 때 그거~" 라고 얼렁뚱땅 대답하진 않는지...? 나중에 DOM이 뭐냐는 질문을 들었을 때 마치 이 순간만을 기다렸다는 듯 간결하고 단호하게 대답하는 내 모습을 상상해보며 포스팅을 시작해본다. DOM이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할.. 공감수 3 댓글수 0 2022. 2. 8.
Next.js의 역할과 써야 하는 이유 제로초님의 노드 버드(트위터 클론 코딩) 강의를 듣고 주요 내용을 요약하여 정리해보고자 한다. 사실 2020년 리뉴얼된 시점에 FE 부분까지 수강하다가 일정이 바빠져 중단했던 내용인데 포트폴리오 보강을 위해 복습을 위해 다시 시작..! 그래도 기존에 공부하면서 기록해뒀던 내용들을 다시 읽으면서 보충하다 보니 기억이 새록새록 나는 것이 묘한 쾌감이 든다.. 역시 복습을 위해서는 기록이 필수.. ☄️ 중급자를 위해 준비한 [풀 스택, 웹 개발] 강의입니다. 리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다. 리뉴얼된 사항 (2020) next@9, styled-components@5, next-red.. 공감수 1 댓글수 0 2022. 2. 3.
#01_부의 인문학-우석(브라운스톤) 부의 인문학 우석(브라운 스톤) 네이버 카페 '부동산 스터디'에서 부동산 전망이나 투자 조언이 여러 번 맞아떨어지면서 수많은 팬들이 생겨나 성지순례가 잇따르게 된 한 금융업 종사자의 책. 아무도 예측할 수 없고 또 감히 판단할 수 없는 금융에 대해 인문학적으로 해석한 이 책은 내게 어떤 시각을 가져다 줄 지 기대감을 가진 채로 읽어보았다. 읽으면서 밑줄을 그어 되새김질하고 싶었던 구절들을 정리해보며 깨우침 => 행동으로 실천할 수 있도록 포스팅을 시작해본다. p.19 인생을 살아가는 데 열심히만 한다고 모두가 잘되는 건 아니다. 엉뚱한 곳에서는 열심히 삽질을 해도 얻을 수 있는 게 없다. 무작정 노력하기 전에 전략적으로 사고하는 법을 배워야 인생이 편하다. p.20 원래 가맹점은 통제권이 없는 비즈니스다.. 공감수 0 댓글수 0 2022. 2. 2.
JSDoc을 통해 JavaScript API 문서 만들기 최근 사내 신규 개발 작업이 끝난 뒤 배포를 앞두고 산출물을 검토하는 중, 400여 개의 Interface 함수를 설명하는 API 매뉴얼 페이지를 작성하는 업무가 주어졌다. 각 Interface를 엑셀로 정리하기 위해 테이블을 추가하고, 수 천 라인의 소스 코드를 들여다보며 열심히 API 정보를 하나하나 입력해야지..!라고 떠올렸다면 허튼짓을 시작하기 전 문서화 도구를 사용하는 것을 강력하게 추천한다. (필자는 이미 뻘짓을 신나게 끝낸 뒤 깨달았다..😱) 문서화 도구(Documentation Generator)란, 소스 파일에 작성된 주석을 파싱하여 클래스, 메서드 등 API 정보를 HTML 문서로 생성해주는 도구를 지칭한다. 개발 중인 코드에 주석이 잘 작성되어 있다면, 문서화 도구가 제공하는 명령어 .. 공감수 7 댓글수 0 2020. 12. 7.
11월 중순에 기록하는 2020년 회고록 ✍🏻 2020년 2월, 티스토리를 개설한 뒤 1일 1 포스팅을 시작했고, 프론트엔드 기술 트렌드 파악의 중요성과 공부해야 할 기술이 많다는 것을 체감했다. 취업 이후 수동적이고 안일했던 내 모습을 후회하면서, 내게 부족한 점이 무엇인지, 나아가야 할 방향에 대해서 구체적으로 파악할 수 있는 계기가 되었다. 구글 애드센스 승인에 도전하였으나 아직도 이해하지 못한 이유 때문에 실패했다... 4월 무렵 개인적인 사정으로 의욕이 급감한 뒤 약 8개월의 시간이 흘렀고, 추석 연휴 동안 갑자기 나타난 인생 선배의 조언을 듣고 머리를 띵 하고 맞은듯한 자극을 받아 10월이 되어서야 포스팅을 재개했다. ✍🏻 2020년 10월, 조언의 내용은 다음과 같았다. 1. 막막할수록 action을 취해야 후련해진다. --> 즉각.. 공감수 2 댓글수 0 2020. 11. 19.
클로져 (Closure) 클로져는 함수와 함수에 의해 생성되는 scope 객체를 함께 지칭하는 용어입니다. - MDN 'JavaScript 재입문하기 (JS 튜토리얼) 클로져는 JavaScript를 공부한다면 한 번쯤 골머리를 썩게 하는 알 듯 말듯한(?) 개념이다. scope와 closure 개념을 이론적으로 이해가 되었더라도 막상 코드를 작성하다 보면 이해가 가지 않는 상황이 와 버린다.. (모든 개발 언어가 그렇겠지만 항상 새롭다..^^) 최근 여러 강의들을 들으면서 접한 클로저에 대한 내용을 복기하고자 포스팅을 적어본다. function makeAdder(a) { return function(b) { return a + b; }; } var add5 = makeAdder(5); var add20 = makeAdder(20.. 공감수 0 댓글수 0 2020. 10. 27.
[코드스피츠 87, 88] 위임된 속성 & async await ✔️코드스피츠 87 - JS의 위임된 속성 (Delegated Property) *Property 은닉과 캡슐화되어있는 것 *Property to Object --> delegate ✔️코드스피츠 88 - async await #1/2 *Sync Flow 메모리에 적재된 명령이 순차적으로 실행됨 *Sync Flow Control Goto를 통해 명령의 위치를 이동함 *Sub Flow 함수 등을 통해 별도의 명령 셋을 여러 번 실행함 (예제) function : 반복 사용할 수 있다. (sub flow에 속함) promise : 한번 사용되면 파기되고 다시 만들어야 함 (sub flow가 아님) *Blocking Sync Flow가 실행되는 동안 ㅏ른 일을 할 수 없는 현상 멀티태스킹 불가능 (노이만 머신.. 공감수 0 댓글수 0 2020. 10. 26.
[코드스피츠 78] ES6+함수와 OOP ✔️코드스피츠 78 - ES6+함수와 OOP 1회차 *Sub Routine Flow 메인 플로우가 아니라 서브루틴을 중심으로 보고 함수가 아니라 루틴의 관점에서 본다. -ES6에서는 function을 절대 쓰지 않는다. 왜? Class의 method에 정의하기 때문 this(function)는 의미가 없어진다. -Arrow Function 사용 -method는 class 구문으로 대체 *value vs reference 서브루틴에서 return 하는 게 ref 값이면 메인 플로우 안에 있는 원본 데이터를 변경시킬 가능성이 있다. 따라서, 되도록 서브루틴의 리턴 값은 1. readonly로 반환한다. 2. 또는 새 객체로 만들어 반환한다. *Structured Design(구조적 설계) by 래리 콘스탄틴.. 공감수 0 댓글수 0 2020. 10. 25.
[코드스피츠 77] ES6+ 기초 편 ✔️코드스피츠 77 - Es6+ 기초 편 1회차 *개발 시 생각해야 하는 요인들 철학 : 합리주의와 상대주의 가치 : 의사소통, 단순함, 유연함 원칙 : 지역화, 중복제거, 대칭성(get, set) 패턴 : 개발론, 설계론, 각종 적용 패턴 동기 : 돈, 시간 *Program & Timing -Compile Program language code (lint time) Machine Language (compile time) file Load* Run (run time) Terminate (context error) -Script Program language code (lint time) file Load* Machine Language Run (run time) Terminate *Runtime -cp.. 공감수 0 댓글수 0 2020. 10. 24.
코드스피츠 ES6 객체지향 JavaScript 강의를 듣고 든 생각들 ✔️코드스피츠 77, 78, 88 강의를 듣고... 본격적으로 ES6 VanillaJS 공부를 시작한 지 어느덧 2주가 넘었다. 그 간 노마드코더의 TodoApp ChromeApp 클론 코딩을 진행했는데 강의 텀이 짧은만큼 내용이 간결화되어있어 수강하기 간편한 만큼 내가 제대로 이해한 것인지 확신하기 어려웠다. 그러던 중 현재 소속되어있는 react 관련 오픈 카톡방에서 새로운 유튜브 무료 강의를 추천받았다. 이름은 코드 스피츠. 구글이던 책이던 초보 JavaScript 입문자를 위한 강의는 굉장히 많다. 조금 더 JS 언어 근본적인 구조와 프로세스를 이해하기 좋다고 무작정 ES6 JS OOP 관련 강의를 재생했다. 결과는 신세계 -! ✨ 그저 암기처럼 느껴지던 클로저 개념과 컨텍스트 등 실무 중 와 닿.. 공감수 0 댓글수 0 2020. 10. 23.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.