전체 글58 사이드 프로젝트 톺아보기[1] - 나만의 만다라트 만들기 들어가기 오랜만에 예전에 했던 사이드 프로젝트들을 살펴보기로 했다. 리액트로 만든 나의 첫 사이드 프로젝트! 만다라트부터 이야기를 해보려고 한다. tmi가 정말 많을 예정이다. 그냥 tmi 그자체 . 케케케 대학시절 친구의 추천으로 알게 된 만다라트 기법! 하나의 큰 목표를 가지고 그를 실행하기 위한 목표를 9x9 Table에 차근차근 세워나가는 기법이다. 일본의 야구선수 오타니 쇼헤이가 작성했다고 해 한 때 인기를 끌었다고 한다. 나도 한 때 열심히 만들긴 했었지 ^^;;; 당시에 반짝 재밌게 목표를 세웠었지만 세월이 지남에 따라 기억 속에서 잊혀져 있었는데, 우아한 테크코스를 하면서 한 코치분께서 만다라트를 소개해주시면서 다시 생각이 났다. 추억,,,,, (포코 감사해요 푸힝) 웹 개발자라는 새로운 .. 2021. 9. 18. React에서 Browser Notification (푸시 알림) 구현하기 들어가기 Babble 프로젝트에서 WebSocket을 활용해 채팅 기능을 구현한 바 있다. 그런데, 유저 입장에서는 내가 들어간 방에 채팅이 새로 올라온지, 올라오지 않은지 확인할 길이 없었다. 무조건 다시 채팅이 있는 Tab으로 들어가 확인하는 수밖에 없었는데.. 그래서 이런 불편함을 해결하기 위해 브라우저 푸시 알림 기능을 활용하기로 했다. 그런데 사실 나는 이런 브라우저 푸시 알림 기능을 귀찮아한다. 쓸데없는 알림인 경우가 대다수고, 너무 알림이 자주 오면 브라우저를 이용하는 데 방해되기 때문이다. 게다가 우리가 구현하는 기능은 채팅 알림인만큼 어떤 누군가가 채팅을 많이 치게되면 알림이 끊임없이 올 것이고, 이는 사용자 경험을 매우 떨어뜨릴 것이 분명했다. 팀원의 대다수가 이런 알림에 대해 부정적인.. 2021. 9. 10. 프론트엔드 성능 최적화 ❐ 들어가기 이번 우아한 테크코스 4단계 첫 번째 미션은 주어진 웹사이트의 성능을 최적화하는 것이다. 사실 이번 미션을 처음 받았을 때 되게 감이 잡히지 않았다. 😞따흐흑! 뭔가 눈에 보이는 것을 구현하라는 미션이 아니어서 어떻게 해야지! 라는 생각이 바로 떠오르지 않아서였을까? 성능 최적화라니, 데모데이 준비하면서 휘몰아치듯 알아보긴 했지만 아직 잘.. 모르는 영역같다. 헤헿 불행(?) 중 다행인건, 성능 최적화 작업에 대해 구체적으로 요구사항을 주셔서 이 내용을 발판삼아 성능 최적화를 진행할 수 있다는 것이다. 이 사이트가 유저에게 제공하려는 인사이트를 바탕으로 요구사항을 하나씩 만족해나가려고 한다. 이번 미션을 통해 성능 최적화에 대한 감을 익히고, 나중에 성능 최적화 작업이 필요할 때 쉽게 접근할.. 2021. 9. 2. React에서 setInterval 현명하게 사용하기(feat. useInterval) 들어가기 Babble의 방 목록 페이지에 들어가면 유저가 생성한 방들이 쭉 나열되어 있는 것을 볼 수 있다. (안타깝게도 유저가 없으면 방도 없다ㅜㅜ) 그리고 이 방들은 5초마다 서버에 요청을 보내 새로이 갱신되는데, 어떤 유저가 새로 방을 만들면 다른 유저들에게도 그 방이 생겼다는 것을 보여줘야 하기 때문이다. 현재는 유저가 많이 없기도 하고 또 실시간성을 보여주기 위해 이 방법을 사용하고는 있지만, 서버에 많은 요청이 가는 방법이기 때문에 추후에 새로고침 버튼 등을 이용해 개선하려고 생각중이다. 처음에는 개인적으로 '그래도 유저의 편리함이 우선시 되어야하지 않을까?' 라고 잠깐 생각하기도 했지만 유저가 많아지면 부하가 정말 심해질 것 같아서 이렇게 서버에 짧은 간격으로 요청을 계속 보내는 것은 좋지 .. 2021. 8. 26. React에서의 setState React에서 Functional Component를 사용하면 useState hook을 정~말 많이 사용하게 된다. 그 중, 프로젝트를 하면서 setState를 사용하면서 들었던 두 가지 의문점과, 이를 해결해나가는 과정 그리고 그에 관한 생각들을 기술해보려고 한다. 🌱 첫 번째 의문 - setState는 어떻게 동작할까? 사실 지금까지 이미 만들어져있는 hook들을 사용하면서, 이 hook들의 세부 동작에 대해서는 크게 고민하지 않고 사용했다. 몇 번 궁금해서 찾아보기는 했으나, 항상 적당한 수준의 이해만 하고 넘어가기를 반복해서 잘 이해했다고 보기는 어려웠다. setState는 비동기로 동작한다. 왜냐하면 React에서 state가 변경될 때마다 매번 바로바로 DOM을 리렌더링하게되면 퍼포먼스 효율.. 2021. 8. 26. npm에 babble만의 라이브러리 올리기 Babble 페이지는 초기 유저들의 접근성을 높이기 위해 로그인 없이도 Babble의 모든 기능을 사용할 수 있게 만들어 놓았다. 하지만 Babble의 메인 기능인 채팅을 서비스하려면, 이 유저가 어떤 유저인지 식별할 수 있는 최소한의 장치를 만들어놓아야 했다. 적어도 지금 내가 대화하는 상대방이 '익명의 유저 1'인지, '익명의 유저2'인지 나는 다른 사람들에게 어떤 유저로 보여지는지 알아야 대화를 이어나갈 수 있으니까 말이다. 먼저 우리가 생각해 낸 아이디어는 아래와 같다. 1. 사용자가 채팅 방에 들어가기 전에 직접 닉네임을 설정하고 들어가기 (닉네임 설정을 하지 않으면 채팅방 입장이 불가) 2. 익명#{랜덤한 8자리 숫자} 3. 직접 랜덤 한글 닉네임 생성기 만들기 ... 만약 이렇게 생성한 닉네.. 2021. 8. 26. 브라우저 렌더링 과정을 알아보자! 들어가기 Babble 페이지를 제작하면서, 프론트엔드 팀은 페이지 곳곳에 여러가지 애니메이션을 넣어 유저에게 재미를 주고자 했다. 우리 사이트에서 제공하는 페이지나 기능이 여타의 사이트들에 비해 많은 편이 아니었기에, 제공하는 디테일에 신경쓰고 싶었다. 어떻게 보면 정신없어 보이기도 하지만, 유저가 페이지를 단순히 이용한다기보다는 페이지와 티키타카 한다는 느낌을 받을 수 있으면 좋겠다는 생각이었다. 트위치와 같은 게임 관련 사이트들에서도 둘러보다보면 유저에게 재미를 주는 애니메이션을 곳곳에서 발견할 수 있었다. 그렇게 여러 사이트들을 둘러보다보니, 궁금한 점이 생겼다. 트위치만 해도 영상을 메인으로 하는 사이트이기 때문에 일단 사이트의 로딩에 대한 최적화가 필요할텐데, 어떻게 애니메이션과 자동재생 영상들.. 2021. 8. 26. React에서의 querySelector, 잘 쓰고 있는 걸까?(feat. Ref) 들어가기 Vanilla JS를 사용하면서, DOM을 조작하기 위해 정말 많은 DOM Selector들을 쓰곤 했다(querySelector, getElementById, getElementByClassName 등). 하지만 React를 사용하게 되면서 querySelector를 쓰는 일은 거의 사라졌다. React에서 제공하는 Virtual DOM을 사용하게되면서 굳이 Real DOM에 직접 접근할 상황이 필요하지 않았기 때문이다. 하지만 이런 상황이 아예 오지 않는 것은 아니다. 리액트를 사용하는 프로젝트에서도 Real DOM을 직접 선택해야하는 상황이 종종 발생하곤 한다. input에 focus를 주거나, 특정 DOM의 크기, 스크롤 위치 등을 설정해야 할 때 등이 있다. React에서는 Real D.. 2021. 8. 26. Frontend를 위한, Socket과 WebSocket 들어가기 Web Socket.. 많이 들어봤지만, 들을 때마다 친구들의 곡소리가 끊이지 않던 친구였다. 그래서인지 괜히 '웹소켓'이라는 말을 들으면 지레 겁부터 먹었었다. 한 번 공부해보고 싶은 주제였지만, 지금껏 딱히 사용할 기회가 없었기도 해서(변명변명).. 웹소켓은 점점 더 멀어져갔다. 그런데! 이번에 레벨3 팀 프로젝트 중, 피터가 제안한 '태그 기반의 게임 팀 매칭 서비스'에서 채팅을 메인으로 다룬다고 했다. 서비스 자체도 재미있을 것 같았고, 웹소켓에 대한 알 수 없는 도전정신이 나를 지배해 이 팀에 지원하게 되었다. 지원한 결과, 감사하게도 뽑기 신께서 도움을 주셔서 Babble 팀에 합류할 수 있게 되었다. 후헹헹ㅎㅎ 이제 Babble 프론트엔드 팀이 채팅을 구현하면서 WebSocket에 .. 2021. 8. 26. 이전 1 2 3 4 5 ··· 7 다음
