Code Playground

< h1 > Code Playground </ h1 >

이번 주에 회사에서 개발하다가 씨름했던 "비율에 따라 줄어드는 이미지 구현기"를 정리해보려고 한다. 음, 그러니까 주어졌던 요구사항은 이러했다. 우리는 리액트로 개발을 하고 있다. 이미지는 SVG로 주어지며 되도록이면 .svg 파일이 아닌 SVG를 리턴하는 React 컴포넌트로 처리되었으면 한다. 예를 들어서 이미지의 사이즈가 300 * 200이고 이미지를 감싸는 컨테이너 사이즈가 400 * 200이라고 해보자. 이 경우에 이미지의 높이가 200보다 작아진다면 이미지 사이즈는 400 * 200의 비율대로 줄어들어야 한다. 반대로 이미지의 높이가 200보다 커진다면 이미지는 커지면 안되고 양쪽 여백만 늘어나야 한다. 특정 비율대로 줄어들고 늘어나는 이미지를 구현하는 일은 약간의 CSS 트릭을 쓴다면 그렇게..

https://medium.com/swlh/optimizing-react-performance-with-memo-usememo-and-usecallback-11fb34f4a3fa Optimizing React performance with memo, useMemo, and useCallback Optimizing component performance through memoization is one of the most underused techniques in React. Memoization is a somewhat advanced… medium.com - 아래 글은 위 글을 번역한 글입니다. - memoization을 통한 컴포넌트 성능 최적화는 React에서 가장 잘 안쓰이는 기술 중에 하나이다...

Intersection Observer API는 "상위 레벨 Document의 Viewport 또는 부모 요소"와 "타겟 요소" 간 교차 지점의 변화를 비동기적으로 관찰할 수 있는 방법을 제공한다. Intersection Observer가 등장하기 전에는 어떤 요소가 화면에 보여지는지 감지하는 것은 매우 복잡한 일이었다. 따라서 요소의 visibility를 감지하고 이벤트를 주는 것은 사용자가 접근하는 여러 브라우저와 웹 사이트들을 느리게 만드는 원인 중 하나였다. 그러나 웹 기술이 발전하면서 요소 visibility 감지의 필요성이 점점 높아졌고, Intersection 정보들이 필요하게 되었다. 이미지의 Lazy Loading이나 페이지 스크롤 시 컨텐츠 로딩 무한 스크롤 구현 광고들이 실제로 유저에..

요즘 회사에서 예전 레거시 코드를 리팩토링하는 과정에서 Redux/toolkit과 redux-saga를 처음으로 도입해보았다. 프로젝트 규모가 그리 크지 않아서 과연 복잡한 초기 세팅과 러닝 커브를 모두 극복할만큼 redux의 효과가 클 것인가에 대해서 계속 논의했고, 더 큰 프로젝트를 하기 전에 지금 규모의 프로젝트에서 한 번 도입을 해보고 괜찮다고 생각이 되면 앞으로도 계속 사용하자는 결론이 나왔다. 그리하여 도입한 redux-toolkit과 redux-saga는 생각보다 더더욱 만족스러운 결과를 만들어주었다. 일단 redux-saga를 도입하고 나서 좋아진 것으로는 아래와 같은 것들이 있다. 테스트 코드 쓰기 매우 편해졌다. 비동기 로직 흐름을 이해하기가 쉬워졌다. prop drilling이 줄었다..

프로젝트의 크기가 커지고 복잡해질수록 상대 경로로 module을 import하기 힘들어진다. 여기 저기 왔다 갔다 하면서 나한테 필요한 파일들을 찾아내야하는데 여간 귀찮은 일이 아닐 수 없다. import React from 'react'; import Button from '../button'; import { exampleConfig } from '../../interface'; import { utilFunction } from '../../utils/api'; import someImage from '../../assets/img/image.png'; 게다가 이렇게 상대 경로로 import 하다보면 어디에 있는 어떤 파일을 가져오는건지 명확하게 눈에 안들어온다. 그런데 절대 경로로 바꾸면 다음과 ..

오늘은 Typescript, Redux hooks를 사용하여 간단한 React Todo List를 만들어보려고 한다. 예전에 connect라는 Redux 라이브러리의 Higher order component를 사용해 Redux 프로젝트를 몇 번 만들어봤었다. 그 때는 connect로 연결된 container component에서 비즈니스 로직 정의를 하고 presentational component에서 container로부터 전달받은 state를 렌더해주는 구조였다. 그러다보니 매 번 connect로 container와 component를 연결해주는 과정이 약간 번거로웠다. 게다가 action과 reducer를 매번 생성하는 것도 아주 귀찮은 일이었다. 그래서 오늘은 connect를 사용하는 방식보다 훨..

대화 상대방이 텍스트를 입력 중일 경우 상대방 화면에 표시해주는 기능을 처음으로 구현해보았는데 별거 아닌 기능이지만 막상 만들려니까 어떻게 해야될지 감이 안잡혀서 고생했다ㅋㅋ 일단 구현하는 로직은 이렇다. 1. 사용자가 input박스에 텍스트를 칠 때마다 서버에 startTyping 이벤트를 보내는데, startTyping이벤트를 거는 동시에 setTimeout()으로 일정시간 뒤에 stopTyping이벤트가 실행되도록 한다. 2. 그런데 input의 onChange 이벤트가 계속된다면 clearTimeout()을 이용하여 setTimeout으로 걸어놓은 stopTyping 이벤트들을 계속해서 clear시켜준다. 3. 그러다가 input에 change 이벤트가 더 이상 일어나지 않으면 그 때서야 비로소 ..

정말 오랜만에 블로그 글을 작성하는 것 같다. 바닐라코딩에서 서버쪽 공부를 시작하면서 할 것도 엄청 많고 과제에 허덕이다보니 도저히 블로그 글을 쓸 여유가 안생겼었다. 이번에 웹소켓을 이용해서 랜덤 채팅을 구현했는데 처음에 이런 저런 버그들로 엄청 고생했어서 만들고 나니까 너무 뿌듯하다ㅜㅜ 실시간으로 소통하는 채팅을 만들기 위해 웹 소켓(WebSocket)을 사용하여 구현하였다. MDN 문서를 보면 웹 소켓은 클라이언트(브라우저)와 서버 사이에서 상호 작용 가능한 통신 세션을 설정할 수 있게 하는 기술이라고 되어있다. 그래서 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능하다고 되어있다. 여기서 폴링(Poling)이란 ..

지난 번에 Express와 MongoDB로 간단하게 백엔드 서버를 만들었으니 이제 그걸 이용해서 프론트엔드 구현을 마저 해보려고 한다. client/src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App'; import * as serviceWorker from './serviceWorker'; import { BrowserRouter as Router } from 'react-router-dom'; import { CookiesProvider } from 'react-cookie'; ReactDOM.render( , docume..

이번주부터 바닐라코딩에서 백엔드 공부를 시작했다. Node.js와 MongoDB를 이용하여 여러 가지 과제를 해보는 중인데 처음 접하는거라 어렵긴하지만 프론트에서 api 요청을 보내서 데이터 받아오는 것만 해보다가 직접 백엔드에서 DB에 데이터를 집어넣고 가져오는 작업들을 해보니까 너무 신기하다. 오늘은 Node.js 사용자들이 많이 사용하는 프레임워크인 Express로 백엔드를 구성하고 Create-react-app으로 프론트단을 구성하는 아주 간단한 방법에 대해 포스팅해보려고 한다. 이 포스팅은 아래 블로그 글을 참고하여 작성했다. https://daveceddia.com/create-react-app-express-backend/ Create React App with an Express Backe..