목록프론트엔드 (23)

IT일상

React에서 터치 스와이프 구현하기 2 (유한 상태 머신으로 리팩토링)

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/58/ https://solo5star.tistory.com/57 React에서 터치 스와이프 구현하기 배경 우테코에서 개발하고 있는 요즘카페 서비스에선 메인 화면의 카페들을 스와이프 형식으로 보여주고 있습니다. 따라서 터치 스와이프 구현이 필요합니다. 이 글에서 JavaScript로 구현한 scroll solo5star.tistory.com 위 글에서 이어지는 내용입니다. 배경 지난 글에서 요즘카페 서비스의 터치 스와이프를 고도화하는 구현을 진행했었습니다. 요구사항 1, 2까지 구현했었는데요, 터치하였을 때 터치에 반응하여 요소가 따라오게 하는 구현이랑, 판정을 통해 이전 혹은 다음 요소로 snap이 일어나게 하게끔 구현해보았..
프론트엔드 2023. 9. 30. 17:26
React에서 터치 스와이프 구현하기

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/57/ 배경 우테코에서 개발하고 있는 요즘카페 서비스에선 메인 화면의 카페들을 스와이프 형식으로 보여주고 있습니다. 따라서 터치 스와이프 구현이 필요합니다. 이 글에서 JavaScript로 구현한 scroll snap의 소스 코드는 https://gist.github.com/solo5star/ca5788e3c2b75c3c8ab017a4fb97c438 에서 확인할 수 있습니다 정말 간단하게 구현하기 (CSS) .container { height: 500px; overflow-y: scroll; scroll-snap-type: y mandatory; } .container > .item { scroll-snap-align: star..
프론트엔드 2023. 9. 24. 03:02
프론트엔드에서 트러블 슈팅하기

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/56/ 트러블 슈팅(Trouble Shooting) 트러블 슈팅이란, 어떠한 문제가 발생했을 때 각종 수법을 활용하여 원인을 찾아내는 것을 뜻합니다. 즉 문제 해결의 일종이라 할 수 있는데요, 우아한테크코스 프론트엔드 과정을 진행하며 있었던 기억에 남는 트러블 슈팅 사례 중 하나를 소개해보고자 합니다. 이 사례는 다른 사람의 문제를 해결해주는 입장이었기 때문에, 문제의 상황에 대한 이해도가 전혀 없는 상태에서 문제를 파악하고 해결해나가는 좀 더 순수한 트러블 슈팅 과정을 보실 수 있을 겁니다! 문제 상황 즐겁게 우테코 미션을 하던 중... 크루 한 분이 저를 찾아와서 도움을 요청했습니다. "인풋 박스에 값을 입력하고 버튼을 누르..
프론트엔드 2023. 9. 15. 16:03
React와 Reactive는 어떻게 다를까요?

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/53/ React와 Reactive? 뭔가 말장난 같습니다. 결론부터 말하자면, React는 Reactive 하지 않습니다. Reactive란 무엇이며 React는 그럼 어떻게 다른 걸까요? 한번 알아봅시다. Reactive Programming Reactive Programming은 무엇일까요? 설명하기 전에, 약간의 배경을 같이 알아봅시다. 바닐라 JS로 웹 사이트를 만들어보신 적이 있을까요? 위의 그림처럼 userCount 값을 1 더했을 때, 그 값이 UI에 반영되지 않을 것입니다. 변경된 값을 UI에 반영해주기 위해 직접 document.getElementById로 DOM 객체를 얻어 UI를 업데이트 해줬을 거에요. 이..
프론트엔드 2023. 8. 28. 05:21
크로스 브라우저 지원을 위한 browserslist + eslint + stylelint 셋업

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/51/ Chrome, Safari, FireFox 등 브라우저의 종류는 굉장히 다양하다. 요즘은 Chrome의 시장 점유율이 높기 때문에 Chrome만 잘 지원해줘도 대부분의 사람들이 사용할 수 있다. 뿐만 아니라 Naver Whale, Microsoft Edge, Samsung Internet 등 다소 큰 파이를 차지하는 브라우저들도 Chromium을 기반으로 하기 때문에, Chrome이 사실상 표준이라고도 할 수 있다. 실제로 주변의 개발자들도 거의 다 Chrome을 기준으로 개발하고 있다. (물론 최근에는 애플 사용자도 많아지면서 Safari의 사용도 늘고 있다) 예전에는 Internet Explorer도 있었고 Chrom..
프론트엔드 2023. 8. 23. 11:03
React SSR (서버 사이드 렌더링) 얕게 시작해보기 (React.hydrateRoot)

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/44/ CSR(Client-Side Rendering) 위는 전통적으로 사용하던 방식인 CSR(Client-Side Rendering) 방식이 동작하는 그림입니다. 1. 껍데기 뿐인 html 파일을 다운로드 2. bundle.js 다운로드 및 실행 (모든 기능이 여기에 있습니다) 3. 추가 데이터(users.json)를 다운로드하여 렌더링 JavaScript가 동적으로 컨텐츠를 그리는 방식이기 때문에, 화면 전체를 새로고침하지 않고 일부만 변경하여 빠르고 끊기지 않는 웹 사이트를 만들 수 있어 사용자에게 좋은 경험을 제공합니다. 하지만 이러한 CSR 방식엔 단점이 있습니다. 1. 로딩 시간이 깁니다. bundle.js 를 다운받..
프론트엔드 2023. 5. 5. 22:46
webpack config 자동완성 되도록 설정하기

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/43/ 아무래도 webpack config를 작성하면서 자동완성이 안되다 보니 오타 없이 제대로 작성한 것인지 의문이 들 때가 많습니다. 그래서 검색해봤는데 webpack config에도 타입을 지정하여 자동완성을 가능케 할 수 있었습니다. /** @type {import('webpack').Configuration} */ module.exports = { mode: "development", resolve: { extensions: [".ts", ".js", ".tsx", ".jsx"], }, module: { rules: [ { test: /\.(ts|tsx|js|jsx)$/, use: "ts-loader", exclude:..
프론트엔드 2023. 5. 5. 16:55
React Context를 쓰면 전체가 리렌더링된다고?

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/42/ const App = () => { const [mousePosition, setMousePosition] = useState([0, 0]); // 마우스 움직임을 감지하여 mousePosition 상태 계속 업데이트 useEffect(() => { document.addEventListener('mousemove', (event) => { setMousePosition([event.clientX, event.clientY]); }); }, []); return ( ); }; 이런 구조의 앱이 있다고 가정해봅시다. MouseMovementContext라는게 있고 마우스가 움직이면 상태를 계속 업데이트합니다. MouseMo..
프론트엔드 2023. 4. 30. 19:34
이전 Prev 1 2 3 Next 다음