목록전체 글 (56)

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
8시간 만에 서비스 만들고 운영까지 (fastify, react)

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/55/ 제목이 좀 자극적이긴 한데... ㅎㅎ 이번에 빠르게 서비스를 만들면서 어떤 고민을 했는지 정리해보고자 쓴 글입니다. 8시간이 정말로 8시간이냐고 물으면, 아닌거 같기도 해요. 지금까지 쌓은 경험이 많은 것을 단축시켜주었으니까요. 지하철을 타고 집에 가면서 서비스와 기술 스택을 구상하였고, 집에 도착한 후 IDE를 켜고 약 6시간동안 구현을 진행하였습니다. 나머지 2시간은 다음 날 배포 직전에 자잘한 오류 및 디테일을 잡는 데 사용하였네요. 배경 저는 우아한테크코스 5기 프론트엔드 과정(이하 우테코)을 진행하고 있습니다. 우테코 교육 과정에는 다양한 미션이 있는데요, 이번에 진행했던 미션이 웹 사이트의 성능을 개선해보는 미..
우아한테크코스 2023. 9. 9. 21:53
우아한테크코스 팀 프로젝트 3차 스프린트 회고

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/54/ 우아한테크코스의 팀 프로젝트는 총 5개의 스프린트로 이루어져 있습니다. 각 차수마다 2주간의 스프린트 기간을 가지고, 구현한 내용을 데모데이 때 발표합니다. GitHub 이슈 라벨링 개선 GitHub 이슈를 분류하여 보기 위해 라벨을 만들고 라벨링을 한다. 크게 프론트, 백엔드 두 개로 분류하고 필터를 걸어 분야 별 이슈를 작업한다. 원래는 위와 같이 라벨을 만들고 관리하였으나 다음과 같은 문제가 있었다. 1. 특정 라벨은 색깔이 눈에 띄지 않는다. 채도가 낮아 흐릿한 것이 원인이라 생각했다. 2. 색깔만으로 어떤 라벨인지 구분이 쉽지 않다. 위의 문제와 비슷한 문제이다. 3. 양 옆에 넣은 이모지때문에 라벨이 길어져 칸..
우아한테크코스 2023. 8. 31. 21:56
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
TeamCity 빌드 알림을 Slack Webhook으로 보내기

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/52/ TeamCity에는 빌드를 시작하거나 완료하는 등 이벤트가 발생하였을 때 webhook으로 받아볼 수 있는 기능이 있습니다. 이를 Slack 메세지로 보내야 하는데, TeamCity에서 송신하는 JSON 형식이랑, Slack 에서 수신받는 JSON 형식이랑 달라서 중간에서 가공을 할 필요가 있습니다. 즉 중간에서 JSON 포맷을 변환해주는 브로커 역할이 필요한거죠. 브로커란? 다양한 컴퓨터나 서비스 간의 통신을 중개하거나 조정하는 역할을 합니다 간단한 입, 출력 정도 다루면 되기 때문에 코드 자체는 ... 파일 한 개를 넘지 않을 것입니다. TeamCity에서 보내는 Webhook JSON 포맷 확인하기 webhook.s..
인프라 2023. 8. 26. 21:25
크로스 브라우저 지원을 위한 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
이전 Prev 1 2 3 4 ··· 7 Next 다음