분류 전체보기
-
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로 프로퍼티 값에 접근할 수 있..
-
우아한테크캠프 9주차 회고Activity/우아한테크캠프 4기 2021. 9. 5. 15:58
드디어 마지막 최종 데모가 끝났다! 최종 배포버전 링크 이번 3주차는 마지막 주 화요일 까지 진행이 되어 좀 더 길게 느껴졌다. 이번 주 동안 8주차에서 백엔드 작업을 한 부분을 연결하는 작업을 진행했고, 나는 아래와 같은 역할을 주로 수행했다. 디바운스와 스로틀링을 이용한 자동완성 Debounce와 Throttle이란? 스크롤이나 타이핑 처럼 이벤트가 무수히 많이 일어날 때 해당 이벤트와 바인딩 되어있는 핸들러 또한 무수히 많이 불리는 것을 방지하기 위해사용되는 최적화 기술이다. 디바운스는 해당 이벤트가 일시 중단되었을 때, 가장 마지막의(또는 가장 처음의) 이벤트 핸들러를 실행하는 방식이고, 스로틀은 이벤트가 일어나는 동안 특정 주기로 핸들러를 실행하는 방식이다. 이해를 돕기위해 아래 예제를 만들어 ..
-
우아한테크캠프 8주차 회고Activity/우아한테크캠프 4기 2021. 9. 3. 16:39
8주차에는 TypeORM을 사용해서 백엔드 API 서버를 구축하는데 비중을 두었다. 그 중 내가 맡은 파트는 다음과 같았다. JWT방식 로그인 시스템 구현 우리 서비스의 로그인은 JWT 방식을 활용했는데, 우선 다양한 로그인 방식과 그 차이점을 알아보자. 1. Session 인증방식 - 유저가 로그인 했을 때, 세션에 유저의 정보를 저장하고 해당 세션의 ID를 쿠키에 저장하는 방식. - 이후 유저 정보가 필요한 요청을 하면(내가 쓴 리뷰, 구매목록 조회 등) 해당 세션에 담긴 유저의 정보를 갖고 해당 요청을 수행한다. 장점: HTTP 요청 중 쿠키가 탈취당해도, 세션 ID는 의미있는 값이 아니기 때문에 보안상 안전하다고 생각 단점: 세션 저장소를 사용하기 때문에 사용자가 늘어날 경우 서버에 부담이 된다...
-
[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. 일반적으로 많이 사용하는 방법..