react6 [react, express , socket.io] 채팅방 구현해보기 지난번에 socket.io의 개념에 대해서 알아보았습니다. 2023.06.29 - [CS] - socket.io 딥다이브 - 개념 과 이해 socket.io 딥다이브 - 개념 과 이해 최근 이직을 위해 면접을 보러 다니는 중에 웹소켓에 관한 질문을 받은 적이 있다. socket.io를 이용해서 실시간 채팅 서비스를 만들었고 그 과정에서 웹소켓에 관한 공부를 진행한적이 있는데, 막 hoime.tistory.com 개념을 알고있으면 공식문서에 example이 워낙 잘 되어있어서 구현은 어렵지 않습니다. socket.io 는 채팅에 최적화된 라이브러리로 사용하는 사람들은 대부분 실시간 채팅방을 구현하기위해 사용할 것입니다. 나도 이전에 프로젝트 했을때 여러 채팅방 마다 소켓 연결을 관리해야해서 라이브러리에서 .. 2023. 7. 14. scrollIntoVeiw로 스크롤 항상 아래로 유지하기(+ 키보드 Enter 이벤트) 웹 개발을 하다 보면 스크롤을 제어해야 하는 경우가 있습니다. 졸업 프로젝트로 모바일 웹앱을 만드는 도중에 해쉬태그를 그리드 형식으로 입력받는 ui를 구현하였습니다. 키보드 이벤트를 붙여서 해쉬태그를 입력 받는데 여러개의 해쉬태그를 입력 받다 보면 input 태그가 스크롤 아래로 숨겨지는 현상이 있었습니다. input 창이 내려갈 때마다 유저가 스크롤을 내려 input 창을 화면에 보이게 제어하는 것은 좋지 않은 사용자 경험이라 생각하여 webAPI의 scrollIntoView를 사용하여 input 태그에 스크롤이 따라 내려가게 구현하였습니다. https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView element.scrollIntoVie.. 2022. 6. 30. [React 상태 관리] useReducer 사용해 리팩토링 하기 (+ custom hook) 상태 관리 라이브러리 없이 다른 색깔 찾기 게임을 구현 한적 있습니다! numble에서 간단한 피드백을 주셨고 리액트 상태 관리에 대해 공부하던 중 당시 읽고 넘어 가기만 했던 프로젝트를 개선해 보았습니다. 기존 코드는 다음 글에서 확인할 수 있습니다. https://hoime.tistory.com/38?category=534509 [Numble] 다른 색깔 찾기 게임 넘블에서 진행한 다른 색깔 찾기 게임 챌린지 참여! https://www.numble.it/45cee9d3-49ad-4f67-9d2a-14607c2eeba7 [React] 상태관리 라이브러리를 사용하지 않고 다른 색깔 찾기 게임 제작 시간은 금! 챌린지를.. hoime.tistory.com ✔ 개선 사항 1. 불필요한 상태가 정의 되어있습.. 2022. 3. 30. [React 상태관리]리덕스 이해하기 + todoList 만들기 ✔ 리덕스란? 리액트를 사용하다 보면 상태 관리에 대한 고민을 하게 됩니다. 기본적인 react-app의 경우 컴포넌트 내부에서 상태를 정의 하고 setState() 함수를 사용하여 불변성을 유지하며 상태를 업데이트 합니다. 이때, 다른 컴포넌트에서 특정 state를 사용하거나 update하고 싶다면 어떻게 해야할까요. 저는 보통 하위 컴포넌트로 props를 전달하여 사용하거나 상위 컴포넌트에서 필요한 경우? 는 상위 컴포넌트에서 상태를 정의하여 props로 전달해 줍니다. (기존 react-app은 단방향의 데이터 흐름을 가지고 있기 때문) 이러한 방식의 경우 규모가 커지면 커질 수록 상태 관리가 복잡해 지며 상태를 전달하는 과정에서 불필요한 props를 전달하게 되는 경우도 발생하게 됩니다. 즉, 자.. 2022. 3. 27. [Numble] 다른 색깔 찾기 게임 넘블에서 진행한 다른 색깔 찾기 게임 챌린지 참여! https://www.numble.it/45cee9d3-49ad-4f67-9d2a-14607c2eeba7 [React] 상태관리 라이브러리를 사용하지 않고 다른 색깔 찾기 게임 제작 시간은 금! 챌린지를 딱 4줄로 요약해볼게요 😉 www.numble.it ✔ 구현 요구사항 각 스테이지마다 Math.pow(Math.round((stage + 0.5) / 2) + 1, 2)개의 사각형이 표시됨 한 스테이지의 제한 시간은 15초 스테이지 바뀔 때 마다 random으로 사각형의 색상을 적용, 하나만 다른색깔 적용(정답 사각형) 정답 사각형을 클릭한 경우 다음 스테이지로 넘어가고 Math.pow(stage, 3) * 남은시간 만큼의 점수가 누적, 오답을 클릭하면.. 2022. 1. 27. jpg, png, svg 차이, 리액트에서 svg 다루기 최근 리액트 material ui 라이브러리를 처음 써보면서 icon을 가져와서 사용 한적이 있다. 확인해 보니 svg파일 형태를 가져오는 걸 알게됨 리액트에서 svg파일을 어떻게 사용하는지! 여러 이미지 파일 확장자 들과 차이점이 무엇인지 알아보자! 우선 웹에서 사용하는 이미지는 크게 비트맵과 벡터로 구분됨! 비트맵(Bitmap) 픽셀 단위의 정보의 집합으로 레스터(Raster) 이미지라고도 부릅니다. 일반적으로 사용하는 대부분의 이미지가 비트맵 형식(jpg, png ...) 그림판, 포토샵 같은 툴로 편집 픽셀 단위로 작업하므로 자연스러운 이미지 표현가능(장점) 이미지 확대 / 축소 시 계단현상 발생, 픽셀 수 가 많아질 수록 파일 커지는 단점 벡터(vector) 수학적 함수를 이용하여 도형이나 선을.. 2022. 1. 25. 이전 1 다음
