본문 바로가기

분류 전체보기123

220509 - 220513 주간 공부 메모 정리 📌 220509 인사이드 자바스크립트 책 리뷰 Chapter01 [ 자바스크립트 기본 개요 ] 📌 220510 인사이드 자바스크립트 책 리뷰 Chapter03 [ 자바스크립트 데이터 타입과 연산자 ] 📌 220511 인사이드 자바스크립트 책 리뷰 [ 함수와 프로토타입 체이닝 ] 📌 220512 WebStorm 개발 초기 설정, Webpack 🤬 nodeJS, nvm, npm 설정 다 까먹었다는 사실을 알게 됌 nodeJS 환경 조성 순서 바로잡기 1. nvm 설치 후 nvm 명령어로 node 설치 2. npm 설치 후 각종 모듈 이용 😝 어려울줄만 알았던 webpack 설정, 공식문서보고 따라하니 재밌어 .. webpack 초기 설정 📌 220513 package.json 파일 설정, WebStorm 익.. 2022. 5. 12.
오늘 배운것들 정리 💡 0부터 원하는 숫자까지 모든 수를 요소로 갖는 배열 만들기 // Array.from()으로 길이가 10, 값이 (0~9)인 배열 생성 const arr = Array.from({length: 10}, (val, idx) => idx); console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(arr.length); // 10 불러온 데이터의 인덱스를 가진 배열을 한번에 생성 or 삭제해야하는 이벤트가 있었는데 이 때 이 방법을 유용하게 썼다. 더 좋은 방법이 있을 수도 ..?!! 💡 checkbox 타입의 input 태그는 'checked' 속성을 갖는다 체크 X 체크 O 리액트에서 useRef 훅으로 체크박스를 관리해야하나 .. 고민했었는데 .. 2022. 4. 18.
Imported JSX component must be in PascalCase or SCREAMING_SNAKE_CASE (styled-components & React 에러) 📍 오늘의 에러 Imported JSX component must be in PascalCase or SCREAMING_SNAKE_CASE 노트북에서는 잡히지 않던 에러가 데스크탑에서는 잡힌다 ..! (CPU 용량 부족인가..) 화면 렌더할 때는 문제생기지 않지만 파일을 컴파일할때는 문제가 생긴다 ㅎㅎ JSX 문법은 파스칼 케이스나 스네이크 케이스로 꼭 써주자 😊 2022. 4. 17.
검색 Debounce 직접 구현하기 (feat. 재할당 & 비동기) 👀 검색창 자동완성 기능 만들 때 서버에 너무 많은 요청을 보내게 되는 문제 발생 ❗ lodash의 debounce 함수를 이용할 수도 있지만 직접 구현할 수도 있다 ㅎㅎ 😊 그런데 구현하다가 아차 싶었던, 내가 실수했던 부분이 있어서 기록에 남긴다. const handleSearchBar = (event: React.ChangeEvent) => { // 내부 let timer: any = 0; const searchValue = event.target.value; if (timer) { console.log('clear time'); clearTimeout(timer); } timer = setTimeout(() => { axios({ method: 'get', url: '서버 URL' }) .then.. 2022. 4. 12.
커링 Currying 과 클로저 📍 클로저 간단 복습 클로저는, 현재의 유효범위를 넘어 스코프 체인으로 연결된 객체나 변수를 참조할 수 있게 해준다. 간단하게는 "함수와 함수가 선언된 어휘적 환경의 조합" 으로 정의된다. ✔ 장점 • 함수 내에 있는 변수를 재활용할 수 있다. • 참조하고 있는 변수를 외부에 노출시키지 않을 수 있다. 은닉 가능 ✔ 단점 • 클로저 함수를 남발하면 메모리 누수가 발생한다. 📌 커링을 공부하게 된 계기 코드를 작성하면서 은연중에 클로저를 사용하고 있다는 건 안다. 하지만 효과적으로 사용하고 있냐는 질문에는 자신있게 대답을 못하겠더라 .. ㅎ 그래서 실제 클로저 예시를 찾아보게 되었다 !-! 📌 커링 Currying 커링은 f(a, b, c) 처럼 단일 호출로 처리하는 함수를 f(a)(b)(c) 와 같이 각.. 2022. 4. 11.
22.03.10 [읽기 좋은 코드가 좋은 코드다] - 더스틴 보즈웰, 트레버 파우커 📍 책을 읽게 된 계기 팀 프로젝트 진행에 앞서 팀 규칙을 정하게 된다. 이때 변수명, 파일명 등 얕은 코드 스타일을 통일시켜놓고 시작할 수 있는데, 어떤 걸 기준으로 정해야되는지 모르겠더라. 읽기 편하다는 기준도 엉망이고 ..!! 팀 단위 작업을 할때 적어도 좋은 규칙을 제안할 수는 있어야겠다는 생각에 읽게 되었다. 💡 목차 1. 표면적 수준에서의 개선 ✔ 이름에 정보 담기 ✔ 오해할 수 없는 이름들 ✔ 미학 ✔ 주석에 담아야 하는 대상 ✔ 명확하고 간결한 주석 달기 2. 루프와 논리를 단순화하기 ✔ 읽기 쉽게 흐름제어 만들기 ✔ 거대한 표현을 잘게 쪼개기 ✔ 변수와 가독성 3. 코드 재작성하기 ✔ 상관없는 하위 문제 추출하기 ✔ 한 번에 하나씩 ✔ 생각을 코드로 만들기 ✔ 코드 분량 줄이기 4. 선택.. 2022. 4. 10.
22.04.09 타입스크립트와 함수 📍 책을 읽게 된 계기 4주 프로젝트를 타입스크립트로 진행했다. 타입스크입트를 도입한 이유는, 프로그램이 복잡해질 것을 우려해서다. 앱의 상당 부분에서 문자열, 숫자, 배열 등 다양한 자료형이 값으로 존재하는 객체를 data로 다뤘기때문이다. 객체 내의 값을 조작하면서 발생하는 다양한 오류들을 타입스크립트가 잡아줄거라 생각했다. 자바스크립트는 프로그램을 실행해야만 오류를 발견하지만 타입스크립트는 컴파일 단계에서 오류를 발견할 수 있기 때문에 프로그래밍에 더 효과적일거라 판단했다. 시작은 좋았으나 ! 언어를 충분히 숙지할 시간 없이 프로젝트를 진행했더니 하는 내내 찜찜했다. 내가 아는 아주 기본적인 타입 범위 안에서만 맴돌고 있다는 생각이 들었다. 타입스크립트의 장점을 백분 활용하지 못한 느낌이 들었고, .. 2022. 4. 9.
MAU, DAU, MCU, ACU 지표성 언어 정리 ✍🏻 왜 ? IT 기술 뉴스레터를 읽다보니 내가 모르는 약자들이 너무 많이 보이더라. 😂 한번 정리해두면 좋을 것 같아 기록하게 되었다. +그리고 그렇게 어렵지도 않음 !! 📍 MAU [ Monthly Activity User ] 월별 사용자 실제 활동하는 사람의 수를 추적하기 때문에 월별 회원수와는 다른 개념임. 📍 DAU [ Daily Activity User ] 일별 사용자 하루 단위, 실제 사용자 수. 📍 MCU [ Maximum Current User ] 순간 동시 접속자 단순한, 순간의 추이. 📍 ACU [ Average Current User ] 순간 동시 접속자의 평균 순간적으로 접속하는 유저의 평균값. 📍 PV [ Page View ] 페이지 내에서 사용자의 요청 수 한 사이트 내에서 사.. 2022. 4. 7.
Bundler 번들러란 ...? create-react-app 생각없이 사용하던 나를 반성하며, Bundler 개념이 나왔을 때 고개 갸우뚱했던 나를 반성하며 ... 공부 !-! 📌 Bundler ? 여러개의 파일을 하나로 묶어주는 역할 ex. Webpack, Parcell, Rollup, Browserify ✔ 번들러는 왜 탄생했는가 ? ✔ 왜 굳이 여러개의 파일을 하나로 묶어줘야 하는가 ? 2022. 4. 5.