전체 글
-
[책: 내 코드가 그렇게 이상한가요?] 1장. 잘못된 구조의 문제 깨닫기자기계발 2023. 10. 26. 00:48
1장. 잘못된 구조의 문제 깨닫기 의미를 알 수 없는 이름 특히 일련번호로 이름을 지으면 안된다. 이해하기 어려운 if문 중첩 데이터와 로직이 분산되어 있을 경우(응집도가 낮은 구조) 발생할 수 있는 문제 코드 중복: 관련된 것 끼리 묶어서 파악이 힘듬 수정 누락: 코드 중복이 많으면 중복된 코드를 모두 고쳐야 해서 누락이 발생하기 쉬움 가독성 저하 한 줄 감상 글을 잘 쓰는 개발자가 왜 중요한가? 에 대한 이유를 깨달았다. 코드도 결국 글이고 읽기 쉽게 글을 잘 쓰는 것이 중요!
-
scrollHeight, clientHeight, offsetHeightconcept/HTML, CSS, DOM 2022. 11. 10. 23:45
웹페이지와 요소의 높이값을 얻는 속성은 대표적으로 scrollHeight, clientHeight, offsetHeight 가 있다. 각 속성의 의미는 scrollHeight는 요소에 들어있는 컨텐츠 자체의 전체 높이이다. 패딩과 보더 포함, 마진 제외 clientHeight는 요소의 내부 높이이다. 패딩 포함, 스크롤바, 보더, 마진 제외 offsetHeight는 요소의 높이이다. 패딩, 스크롤바, 보더 포함. 마진 제외
-
location.search 파라미터로 받아온 한글 쿼리의 깨짐 현상error handling/Simple tips 2022. 11. 10. 23:17
파라미터로 받아온 검색어를 input value에 바로 설정할 경우 깨지는 현상이 발생했다. 이럴 때 필요한 함수는 decodeURIComponent(): URI(Uniform Resource Identifier)로 변환된 문자를 정상적인 문자열로 디코딩하는 함수 const queryString = decodeURI(location.search.slice(3)); 이렇게 설정함으로서 해결!
-
객체를 배열로 담아서 데이터 꺼내오기error handling 2022. 9. 9. 22:59
Firebase Real time Database에는 데이터가 객체 형태로 저장된다. 그래서 데이터들을 받아와서 반복문으로 map을 돌릴 수 없는 상황이 발생! 객체를 배열로 변경해서 꺼내오는 코드를 작성 const getAllPosts = async () => { const response = await getAllPostsData(); // async 함수 내 빈 배열 생성 const allPostArray = []; // for...in 문을 통해 새로운 객체로 담고, for (const key in response) { const postObject = { id: key, ...response[key] }; // 빈 배열에 push allPostArray.push(postObject); } let..
-
React에서 DOM에 직접 접근보다 useRef 쓰는 이유concept/React, Redux, RN 2022. 9. 9. 22:55
React에서 DOM에 직접 접근하는 것은 React way가 아니라고 한다. 그 이유가 뭔지 궁금해서 조금 찾아봤다. 직접적인 let 변수나, 객체를 선언해서 컴포넌트 내부 변수를 사용하는 것이 아니고 useRef를 사용하는 이유는, 직접적인 내부 변수를 선언할 경우 리렌더링 시에 변수 값이 초기화되기 때문이다. 반면, useRef의 경우 일반적인 자바스크립트 객체로서 메모리 heap에 저장되므로, 항상 같은 메모리 주소를 참조하여 컴포넌트가 아무리 리렌더링 되더라도 이미 저장된 값 자체는 삭제되지 않고 전역변수처럼 남아있게 된다. 참고자료 https://dev-note-97.tistory.com/314 https://dev.to/dylanju/useref-3j37?fbclid=IwAR0fl7xMjn_..
-
redux-persist로 로그인 유지 구현concept/React, Redux, RN 2022. 9. 9. 12:13
새로고침 했을 시 로그인이 풀리는 현상을 방지하기 위해서 Localstorage에 로그인 정보를 저장할 필요성이 생겼다. 마침 상태 관리를 위해서 redux를 사용하고 있는 중이었고 redux-persist를 이용하면 로컬스토리지를 활용한 로그인 유지를 간편하게 구현할 수 있다는 사실을 알게 되었으니 바로 도입! 하기 전에, Web Storage에 대한 개념부터 이해하고 도입을 해야 겠쥬? Web Storage는 키/값의 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴으로, 영구저장소 LocalStorage와 임시저장소 SessionStorage를 가지고 있다. 쿠키와 비슷하지만 개수와 용량의 제한이 없고,쿠키처럼 매번 서버로 전송하지 않아 네트워크 트래픽 비용을 줄여준다. 조금 더 상세하..
-
firestore 경로 설정error handling/Simple tips 2022. 9. 7. 12:27
파이어베이스 공식 문서가 최신화되어 있지 않은 건지 그대로 해도 안되는 경우가 많아서 삽질을 많이 했다 파이어베이스 관련 블로그 포스팅도 안드로이드가 대부분 ㅠㅠ 웹 자바스크립트를 하시는 누군가에게는 도움이 되기를 바라며 기록해 놓기 기존 공식문서 상 코드 import 'firebase/firestore'; export const firestore = firebase.firestore(); 에러로그 imageStorage.js:18 Uncaught TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.firestore is not a function at Module../src/firebase/imageStorage.js (imageSt..
-
React로 만든 앱에 PWA 적용하기concept/React, Redux, RN 2022. 9. 6. 12:04
PWA란? 프로그레시브 웹 앱 (Progressive Web App)의 약자. HTML, CSS, JavaScript와 같은 웹 기술로 만드는 앱 네이티브 앱을 개발하는 것보다 훨씬 빠르게 개발할 수 있고, 푸시 알림, 오프라인 지원같은 네이티브 앱의 특징도 제공 PWA로 만든 앱 트위터 스타벅스 핀터레스트 우버 React with PWA 만드는 방법 npx create-react-app my-app --template cra-template-pwa 이렇게 리액트 앱을 제작하기 앞서서 PWA를 함께 적용하는 create app 명령을 내릴 수 있다. 하지만 나는 이미 다 만들어진 react 앱을 PWA로 만들고 싶었기 때문에 수동으로 설정을 해 주었다. manifest.json React 프로젝트의 pu..