전체 글89 socket.io 딥다이브 - 개념 과 이해 최근 이직을 위해 면접을 보러 다니는 중에 웹소켓에 관한 질문을 받은 적이 있다. socket.io를 이용해서 실시간 채팅 서비스를 만들었고 그 과정에서 웹소켓에 관한 공부를 진행한적이 있는데, 막상 면접에서 조금 딥하게? 질문이 들어오니 제대로 답변하지 못한 기억이 있어 자세하게 정리해보려고 한다. socket.io 가 웹소켓 이랑 정확히 어떻게 다른지? 대용량 메세지가 들어오면 어떻게 처리할 것인지? 의도치않게 소켓 통신이 끊기면 어떻게 처리할 건지? 이런 질문들에 대해 정확하게 답변을 못했던 것 같다. 아무래도 개념적인 부분을 빠르게 훝고 구현에만 너무 초점만 맞춰서 개발했던 것 같다. 클라이언트와 서버간의 양방향 통신을 위해 소켓은 너무나도 중요한 개념이고 이번기회에 확실히 정리해보려고 한다. 우.. 2023. 6. 29. 즐거운 넘블 프로젝트 후기 넘블에서 진행한 커뮤니티 만들기 챌린지에 프론트엔드 개발자로 참여하였습니다! 프로젝트 회고록을 작성해 보려 합니다. ✔ 지원동기 모집 당시 면접, 코테 준비 때문에 굉장히 스트레스가 많았던 기억이 난다 ㅜ 서류 붙으면 코테 떨어지고, 코테 붙으면 면접 떨어지고,, 면접 한번 보러 서울 갔다 오면 몇 십만원 씩 깨지고,, 사실 프론트 엔드 개발이 하고 싶은건데 취업 준비 때문에 한동안 개발을 하지 못했음 그냥 아무 생각없이 개발 하고 싶다는 생각이 있었는데 마침 프로젝트 모집 중이여서.. 면접도 떨어졌겠다.. 진짜 개발하고 싶어서 지원함 ✔ 프로젝트 소개 우리가 진행한 프로젝트 "소분 소분"은 내 아이디어가 채택 되어서 진행함 ㅎㅎ 동네 위치를 기반으로 같이 장보고 식료품을 나눌 수 있는 서비스! 나는 요.. 2022. 12. 1. Recoil은 쉬운 라이브러리?(Recoil vs Redux) 상태관리(State Management)는 리액트에서 굉장히 중요한 개념입니다. 리액트는 데이터의 흐름이 단방향이기 때문에 프로젝트의 규모가 조금만 커져도 Props를 전달하기 위해선 하위 컴포넌트로 내려줘야하고, 불필요한 Props drilling이 발생하기 때문에 전역적으로 상태를 관리할 수 있는 라이브러리를 사용합니다. 그 중 가장 대표적인 Redux를 공부하고 최근에는 redux-toolkit을 이용해서 프로젝트를 진행하고 있습니다. Client State 와 Server State? 프로젝트를 진행하며 프론트엔드 내에서 상태관리가 필요한 데이터 들이 대부분 api요청을 통해 받아오는 데이터 이기 때문에 api 캐싱과 로딩, 업데이트 등 서버와 관련된 상태 관리 기능을 제공하는 라이브러리(reac.. 2022. 9. 5. CSS-in-JS vs CSS-module vs Post CSS 차이 구분하기 리액트 기반의 프론트엔드를 공부하다 보면 다양한 스타일링 방식을 알게됩니다. 프로젝트를 진행하며 다양한 방식의 스타일링을 사용해보려 했고 CSS-in-JS 방식과 CSS-Module 방식을 주로 사용하게 되었습니다. 최근 프로젝트를 진행하며 자주 사용되는 속성을 변수화 globalstyle에 변수화 하여 사용했습니다. 해당 프로젝트에서는 styled-components를 사용하였는데 저렇게 사용자 지정 속성을 사용해도 되지만 라이브러리에서 제공하는 ThemeProvider를 사용하는 것이 더 적합하다는 걸 뒤늦게 알게되었습니다. https://styled-components.com/docs/advanced styled-components: Advanced Usage Theming, refs, Securi.. 2022. 9. 2. Swiper Navigator(화살표) 바깥으로 빼기 프로젝트 KKu-Woon을 진행하며 유저 리스트를 carousel 형식으로 구현해야 상황이 있었습니다. 프로젝트 기간이 여유롭지 않고, 캐러셀은 라이브러리로 잘 만들어져 있기 때문에 오픈 소스를 사용하여 구현하기로 결정하였습니다. 고려한 라이브러리는 "react-slick" 과 "swiper" 두가지 라이브러리를 고려하였습니다. 그 중 swipe를 사용하여 해당 ui를 구현하였고 구현하면서 발생한 에러와 해결방법을 공유합니다. ✔ Swiper를 사용한 이유? 예전에 강좌를 들으면서 react-slick을 한번 사용해 보았고 새로운 라이브러리 사용 방법을 공부하고 싶었음 react-slick 경우 @types 파일이 있었지만 js 기반으로 구현되어 있고 swiper는 typescript로 구현 되어있음 s.. 2022. 7. 21. scrollIntoVeiw로 스크롤 항상 아래로 유지하기(+ 키보드 Enter 이벤트) 웹 개발을 하다 보면 스크롤을 제어해야 하는 경우가 있습니다. 졸업 프로젝트로 모바일 웹앱을 만드는 도중에 해쉬태그를 그리드 형식으로 입력받는 ui를 구현하였습니다. 키보드 이벤트를 붙여서 해쉬태그를 입력 받는데 여러개의 해쉬태그를 입력 받다 보면 input 태그가 스크롤 아래로 숨겨지는 현상이 있었습니다. input 창이 내려갈 때마다 유저가 스크롤을 내려 input 창을 화면에 보이게 제어하는 것은 좋지 않은 사용자 경험이라 생각하여 webAPI의 scrollIntoView를 사용하여 input 태그에 스크롤이 따라 내려가게 구현하였습니다. https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView element.scrollIntoVie.. 2022. 6. 30. 이전 1 2 3 4 5 ··· 15 다음
