어제보다 더 나은 오늘

들어가기에 앞서 프로젝트 폴더 구조를 설계하면서 많은 도움을 받았던 아티클을 공유하고자 합니다. Folder Structuring Techniques for Beginner to Advanced React Projects를 번역한 포스팅임을 밝힙니다. 번역에 오류가 있는 경우 댓글로 알려주시면 감사하겠습니다. React는 코드 작성과 구조에 관해서 정해진 통념이 없는 엄청나게 유연한 라이브러리다. 하지만 어떤 규칙도 없기 때문에 React로 프로젝트를 만들 때 이 유연성이라는 특성으로 인해 프로젝트 구조를 설계하는 작업 자체가 도전 과제가 된다. 이 글에서는 모든 규모의 프로젝트에 적용할 수 있는 세 가지 폴더 구조를 다룰 것이다. 가장 간단한 폴더 구조에서 시작해서 가장 복잡한 구조 순서로 소개할 것이..

redux toolkit을 사용해 전역 상태를 관리하고 있는 프로젝트에서 새로고침을 해도 전역 상태가 유지되게 하기 위해 웹 브라우저의 스토리지에 직접 상태를 저장하고 제거하는 로직을 걷어내고, redux persist 패키지를 사용해 리팩토링을 했다. 1. store.ts 파일 Before const store = configureStore({ reducer: { isLogin: isLogin.reducer, userInfo: userInfo.reducer, tokens: tokens.reducer } }); export default store; After const rootReducer = combineReducers({ isLogin: isLogin.reducer, userInfo: userInf..

TMDB API를 통해 영화 데이터를 받아와 무한 스크롤을 구현해 보았다. 먼저 고전적인 스크롤 이벤트를 사용하는 방식으로 구현해 본 후, Intersection Observer API를 사용하는 방식으로 리팩토링했다. - GitHub 레포: https://github.com/Ah-ae/infinite-scroll - 배포 링크: https://infinite-scroll-practice.vercel.app 구현 화면 영상 1. 스크롤 감지 방식 핵심은 다음과 같다. 1) window.scrollY로 스크롤 위치를 기억한 다음, window.scrollTo() 메소드를 사용해 해당 위치로 보내주기 2) 스크롤이 바닥에 닿았는지를 판별해 바닥에 닿았다면 다음 데이터를 fetch하기 3) scroll 이벤트..

1. 음수일 때 Math.floor()는 양수일 때와 마찬가지로 내림을 하는데, parseInt는 올림을 한다. parseInt는 소수점을 버리고 정수를 반환하는 메소드이기 때문이다. 2. 문자열 파싱 parseInt는 문자열을 파싱해서 정수로 변환하는 작업을 수행하기 때문에 일반적으로 Math.floor()보다 느리다. 하지만 대부분의 경우에는 성능 차이가 미미한 정도이다.

Frontend Mentor | Expenses chart component coding challenge In this challenge, you'll create a bar chart component from scratch. We provide a local JSON file, so you can add the chart data dynamically if you choose. www.frontendmentor.io 💡 기능 구현 목표: - Bar 차트를 보고 개별 Bar 위로 마우스를 가져가면 일별 정확한 금액을 볼 수 있습니다. - 오늘 요일의 Bar는 다른 요일의 Bar와 색상이 다릅니다. - 기기의 화면 크기에 따라 콘텐츠에 대한 최적의 레이아웃을 작성합니다. (데스크탑/모바일) - hove..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 💡 접근 방식: 1. 1부터 number까지의 배열을 만들고, 각 숫자의 약수의 개수를 구한다. 2. limit보다 큰 요소가 있는지 체크한 후, 있다면 해당 요소를 power로 갈음한다. 3. reduce로 최종 합계를 구한다. 이 문제의 핵심은 '약수의 개수를 구하기'라고 생각한다. 약수란 모름지기 나눠서 떨어지는 수가 있느냐가 관건이기에 나머지가 0이 되는 수를 찾아야 한다. 모듈로(%) 연산을 쓰면 간단히 해결할 수 있다. 약수를 구하는 3가지 방식이 있다. 첫번째: 1부터 number까지 모든 수를 나눠..

css 코드를 작성할 때 styled-components의 최대 장점은 상태 변수를 그대로 활용할 수 있기 때문에 동적 스타일링이 쉽게 가능하다는 점이라고 생각한다. css 코드를 javascript로 작성하기 때문에 한 파일에 jsx 컴포넌트와 css 컴포넌트를 동시에 작성할 수도 있다는 게 '장점'이라고 하는데, 막상 코드를 작성하다보면 한 파일이 너무 길어지고, 특히 리액트 컴포넌트의 return 문을 볼 때 어느 게 스타일 컴포넌트고, 어느 게 리액트 컴포넌트인지 구분이 안 되어서 불편할 때가 많았다. 그래서 부트캠프에서 메인 프로젝트를 할 때에도 프론트 팀원 분들에게 css 파일 분리를 제안했는데 결론적으로 기각되었다. (하지만 프로젝트 후반에 styled-components 쓰는게 왜 불편한지..

며칠 전 아래의 아티클을 읽었다. 잘못된 css 코드의 몇 가지 유형에 대한 글이었다. css는 정말 어렵다. 맨처음 프론트엔드의 세계에 첫 발을 들여놓았을 때는 자바스크립트의 벽을 느끼지만 시간이 조금만 지나면 오히려 css가 통곡의 벽이라는 걸 느끼게 된다. (통대 입시를 준비할 때는 AB 통역, 즉 모국어를 듣고 외국어로 발화하는 통역이 어렵게 느껴지지만 필드에 나오면 BA 통역이 더 어렵다는 걸 느끼는 것과 똑같다.) [번역] CSS 코드 냄새 원문은 Code smells in CSS다. Code smell은 리팩토링에서 사용하는 단어다. 코드에 이상한 부분이 생기면 냄새가 난다고 표현하는 것이다. 크리스 코이어는 최근 누군가의 질문에 답했다. 질문은 이거 mytory.net 위의 아티클에서 언급..

React docs의 beta 버전이 정식으로 풀렸다. 기존 reactjs.org를 주소창에 입력하면 바로 새 주소인 react.dev로 이동하지만, https://legacy.reactjs.org/ 로 예전 사이트를 여전히 볼 수 있다. 새로운 react 사이트는 아직 다국어 버전을 지원하지 않기에 한국어로 편하게 볼 수 있는 legacy react 사이트를 종종 방문할 일이 있을지도 모르겠다. React The library for web and native user interfaces react.dev 새로운 리액트 사이트를 둘러보다가 새 프로젝트 시작하기 페이지를 보고 깜짝 놀랐다. 리액트에서 소개하는 리액트 프로젝트를 시작하는 터미널 명령어가 다음의 네 가지다. - Next.js : npx cr..

반응형 디자인을 적용해 폰이나 태블릿 사이즈의 화면을 만들고 확인을 할 때 보통 크롬 개발자 도구의 device toolbar를 사용하곤 한다. 아이폰 SE, 아이폰 XR, 아이폰 12 Pro 등의 화면을 보고 만들어도 배포 후 실제 폰에서 화면을 띄워보면 UI가 다른 경우가 태반이다. 하단 주소창과 툴바 때문에 100vh 적용이 안 되는 건 기본이다. 이런 문제 때문에 이제까지 매번 배포 후에만 배포 링크로 접속해서 실제 모바일 뷰를 확인할 수 있었는데 모바일 브라우저에서도 localhost:3000 에 접속할 수 있는 방법이 있었다!  2024년 5월 13일 업데이트 :정확히는 모바일 브라우저에서 localhost:3000의 일종의 프리뷰 화면을 볼 수 있는 방법으로 엄밀히 말해서 localhost에..