Web
-
React 에서 비즈니스 로직 분리하기 (Custom Hooks Pattern)Web/React 2022. 4. 25. 20:56
관심사의 분리 여러분은 내일 A 과목을 시험 칩니다. 벼락치기의 민족답게 우리는 수업 중에 필기했던 내용들을 시험 전 날이 되어서야 한 번 살펴보려고 합니다. 그런데, 여러분의 노트에는 여태 들었던 모든 과목의 강의에 대한 내용이 필기되어 있습니다(꽤 성실하네요). 당장 내일 시험인데, 이렇게 갖가지 과목이 섞여있는 노트에서 A과목에 대한 내용만 뽑아 살펴보자니 눈앞이 깜깜합니다. 몇몇 내용은 A과목에 대한 내용인지 아니면 다른 과목의 설명인지 혼란스럽기까지 합니다. "누가 저런 바보짓을 해?"라고 생각하실 수 있는데 실제로 개발을 할 때 종종 일어나는 일입니다. 하나의 메서드, 혹은 컴포넌트가 굉장히 많은 일을 담당하고 있을 때 우리는 위와 비슷한 상황을 경험합니다. 새로운 기능을 추가해야 하거나 오류..
-
[JavaScript] 배열(Array)과 이터러블(Iterable)Web/JavaScript 2021. 10. 19. 14:47
배열 (Array) 일반적인 자료구조에서의 배열은 '연속된 메모리 공간에 나열된 동일한 타입의 데이터(요소)들의 집합'을 이야기한다. 때문에 배열의 주소만 알고 있다면 해당 배열의 n번째 데이터는 어떤 값인지 O(1)의 속도로 (아주 빠르게) 알 수 있다. 자바스크립트의 배열은 이러한 배열의 특징을 흉내내고 있는 아주 특수한 객체다. const arr = { 0: 100, 1: 123, 2: 129, length: 3 } // arr[0] === 100 // arr[1] === 123 // arr.length === 3 위와 같이 생긴 객체의 프로퍼티에 접근하는 것은 일반적인 배열을 사용법과 똑같다는 것을 알 수 있다. 위와 같이 자바스크립트에서의 배열은 index를 key로 프로퍼티 값에 접근할 수 있..
-
[Git] Git 기본 용어와 Git-flowWeb/etc 2021. 8. 16. 01:35
사실 이 전에는 main 브랜치에서 모든 작업을 진행하고, 단순히 버전을 관리하고 백업을 쌓아두는 용도로만 썼었는데, 이번에 우아한 테크캠프를 하면서 처음으로 Git을 제대로 사용하고있다. 많이 부끄럽지만 지금이라도 알게 된 게 어디야..! 이제 익숙해지기 위해 용어 정리를 먼저 해봤다. fork / clone fork: 다른 사람의 repository에서 내가 어떤 부분을 수정하거나 추가 feature를 넣고 싶을 때, 내 github repository로 그대로 복제하는 기능. fork한 저장소는 원래의 저장소(upstream)와 연결되어 있어 해당 repository에 어떠한 변화가 생기면 fetch나 rebase등을 통해 변경사항을 내가 fork한 저장소로 가져올 수 있다. 반대로 내가 fork받..
-
[JavaScript] Event의 이해Web/JavaScript 2021. 8. 15. 19:23
Event 요? 이벤트라고 하면 말 그대로 브라우저 환경에서 '마우스 클릭'이나 '애니메이션이 끝남' 등 브라우저 위에서 발생하는(일어나는) 상황을 말한다. JavaScript를 이용한 웹 개발은 scroll, click, hover 등 수 많은 event에 의해 기능들이 동작하는 Event-Driven 개발이라고도 한다. 기본적으로 브라우저가 지원하는 이벤트들은 여기를 참고하면 좋겠다. Event 등록 이벤트를 등록 하는 방법은 두 가지가 있다. const $myBTN = document.querySelector(".my-button"); $myBTN.addEventListener("click", () => { console.log("버튼이 클릭되었습니다"); }); 1. 일반적으로 많이 사용하는 방법..
-
[JavaScript] 스코프(Scope)와 클로져(Closure)Web/JavaScript 2021. 5. 25. 14:28
스코프(Scope) 호이스팅을 설명하기 전에 스코프에 대한 설명을 먼저 했어야 했는데, 지금이라도 한번 정리 해 봐야겠다. 자바스크립트에서 스코프라는 단어를 많이 접해봤을 것이다. 스코프란 해당 변수에 접근 할 수 있는 범위를 일컫는 말인데, 자바스크립트에서는 Global(전역)과 Local(지역) 두 종류의 스코프가 있다. var name = 'hov'; function print() { var name = 'lee'; console.log(name); } print(); // 출력: lee console.log(name); // 출력: hov 위에서 보면 알 수 있듯, name이라는 동일한 이름을 가진 변수가 각각 독립적으로 불리는 것을 알 수 있다. print() 함수 안에 있는 변수(name)는 ..
-
[JavaScript] 자바스크립트 this의 모든 것Web/JavaScript 2021. 5. 15. 21:12
this란 무엇인가? C++, JAVA 등 다양한 프로그래밍 언어에서도 this가 존재하는데, 여기서 this는 객체 자신을 나타내는 포인터, 레퍼런스다. 하지만 자바스크립트에서 this는 함수의 호출 맥락(Context)를 의미한다. 즉 함수를 어떻게 호출하냐에 따라 this가 가리키는 대상이 달라질 수 있다는 것이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결 시켜주는 역할을 한다. console.log(this); // window function func1() { console.log(this); } func1(); // window 우선 브라우저의 개발자 도구에서 this를 출력 해보면 전역 객체인 window 객체를 출력한다. (node.js에서는 this를 출력하면..