전체 글(106)
-
[Revisited JS] 빌트인 객체에 대해 이해해보자
21.1 자바스크립트 객체의 분류 표준 빌트인 객체, 호스트 객체(web API, Node.js API), 사용자 정의 객체 21.2 표준 빌트인 객체 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects Standard built-in objects - JavaScript | MDN This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties. developer.mozilla.org Math, Reflect, JSON 빼고 다 생성자 함수 객체 표준 빌트인 객체가 생성한 인스턴스..
2023.09.19 -
항상 알겠는데 모르겠는 번들러를 이해해보자
https://www.youtube.com/watch?v=9b89f21Sizs&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC 모듈은 코드 조각 혹은 common js 노드 js 많은 모듈을 불러와야한다. 모듈 번들어가 필요함 https://www.youtube.com/watch?v=xLziDinqBj0&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC 브라우저 외의 환경에서 동작하기 위해 커먼 JS가 만들어졌다. https://www.youtube.com/watch?v=Mah0QakFaJk&ab_channel=%ED%94%84%EB%A1%B1%ED%8A%B8 이게 리얼 설명 잘 되어있음 커먼 JS는..
2023.09.19 -
[리팩토링] scss 공통 변수 묶어주기
스타일 파일을 이렇게 구성했는데 scss를 전체를 바꿔주기엔 너무 범위가 커지는 것 같아 내가 담당한 페이지에 한해서 공통 속성에 대해 변수로 처리하기로 하였다. 만약 바꿔줄 수 있다면 공통으로 처리할 수 있는 것들은 변수로 미리 처리한 다음 각 페이지에서 사용하는 것이 좋다고 생각했다. 지금은 폰트하나를 변수 처리하더라도 일일히 페이지를 다 확인하기에 그건 조금 무리인 듯 싶었다. 일단 base대신 pages로 폴더링 후 폰트 색깔부터 처리해보려한다. 어렵지 않은 일이라 금방하지만 하면서 든 생각은 프로젝트 기간이 매우 짧다보니 이런 설계 측면에서 고민할 시간이 거의 없었다는게 가장 아쉽다. 그리고 또 든 생각은 프로젝트 규모가 작다보니 많은 부분을 공통화 작업을 할 이유가 없었다. 그렇게 겹치는 게 ..
2023.09.19 -
[오늘의 이슈] 물준 날 미설정 시 undefined 값에 초기값 주기
리액트를 하다보면 undefined는 언제나 고민거리이다. 처음에는 || 0 을 통해 undefined를 막았지만 그럼 값을 설정하지 않았을 때 date 값이 1970년으로 나와 UX 상 좋지 않다. 이런 모습을 유저가 본다면 앱이 성의없다고 느낄 것이다. {secondsToDate(plantDetail?.wateredDays?.at(-1)?.seconds)} 아래는 유틸 함수로 빼주었는데 이렇게 했더니 원하는 결과를 얻었지만 export const secondsToDate = (seconds: number) => { if (seconds) { const date = new Date(seconds * 1000); const formattedDate = format(date, 'yyyy-MM-dd'); r..
2023.09.18 -
[오늘의 이슈] 삭제 기능 버그 픽스
삭제 로직에 문제가 생겼다. 삭제 자체는 잘 되지만 메인 식물이 삭제 될 때 다음으로 메인 식물을 지정해주지 않는 문제가 발생하였다. const deletePlant = async () => { if (docId) { await deletePlantDataByDocId(docId); } navigate('/myplant'); }; 파이어베이스 함수를 바깥으로 빼주었기에 이 함수를 살펴보면 export const deletePlantDataByDocId = async (docId: string) => { if (!docId) return; const docRef = doc(db, 'plant', docId); const plantData = await findPlantDataByDocId(docId); c..
2023.09.18 -
[알고리즘] 이진 탐색에 대해 잠깐 알아보자
시작점과 끝점이 있고 중간을 찾는다. 인덱스 값을 비교해서 가까운 쪽으로 범위를 재설정해 먼쪽은 버린다. 로그 복잡도를 가지고 각 단계 마다 탐색 범위를 2로 나누는 것으로 이해할 수 있다. 매우 넓은 억 단위 이상 탐색 범위에서 최적의 해를 찾아야 하는 경우 데이터를 정렬 // 이진 탐색 소스코드 구현(재귀 함수) function binarySearch(arr, target, start, end) { if (start > end) return -1; let mid = parseInt((start + end) / 2); if (arr[mid] == target) return mid; else if (arr[mid] > target) return binarySearch(arr, target, start, ..
2023.09.16