Woowa Techcourse/Missions23 React 앱에 Next.js 끼얹기 + EC2 배포하기 들어가기 전에.. 이번 접근성 미션을 하면서 React로 구현해놓은 페이지를 Next.js를 이용해 Migrate하고, EC2로 배포하라는 미션을 받았다! 본격적으로 들어가기 전에, Next.js와 우리가 배포할 AWS EC2가 도데체 뭔지 한 번 짚고 넘어가보자. ✔️ Next.js가 뭘까? The React Framework for Production Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No .. 2021. 10. 6. 정적인 페이지를 AWS S3 + Cloudfront로 배포하기 들어가기 전에.. ✔️ 정적인 웹 페이지(Static Web Page)가 뭘까? 언제 접속해도 같은 응답을 보내주는 페이지라고 생각하면 쉽다. 말 그대로 정적! 움직이지 않는! 클라이언트가 요청을 보내면, 웹 서버에 업로드된 파일이 추가적인 처리과정 없이 그대로 전달(응답)되는 페이지를 정적인 웹 페이지라고 한다. 예를 들면, 개인이나 회사의 소개 페이지 정도가 있겠다. 앞으로 진행될 내용은 이런 정적인 웹 페이지를 배포할 때 사용할 수 있다. 우리는 제목에 나와있듯이 AWS S3을 통해 배포할 것이다. 사실 정적인 웹 페이지를 배포하는 방법은 굉장히 다양하다. Github 유저라면 한번 쯤 시도해봤을 Github pages, 혁신적인 Netlify와 Vercel, 지금 소개할 AWS S3 .. 등등 ... 2021. 10. 5. 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. 이전 1 2 3 다음
