Code Playground

< h1 > Code Playground </ h1 >

Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/from-javascript-to-react/react-core-concepts https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components https://nextjs.org/learn/foundations/from-javascript-to-react/displaying-data-with-props https://nextjs.org/learn/foundations/from-javascript-to-react/adding-interactivity-with-state ..

Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/from-javascript-to-react/getting-started-with-react From JavaScript to React (JavaScript에서 React까지) #2 여러분의 프로젝트에 리액트를 사용하기 위해서는 unpkg.com이라고 불리는 외부 웹사이트로부터 두 개의 리액트 스크립트를 로드할 수 있다. react는 리액트 코어 라이브러리이다. react-dom은 리액트를 DOM과 함께 사용할 수 있도록 만들어주는 DOM에 특화된 method를 제공해준다. const app = document.getElementById('app'); 순수 자바..

지난 주부터 회사에서 해결이 안되서 골머리를 앓았던 문제에 대해서 얘기해보려고 한다. 보통의 UI에서 대부분 모달(팝업이라고도 부른다)이 뜨면 모달 뒤에 body 영역을 반투명한 검정색 레이어로 덮어서 모달의 컨텐츠가 더 도드라지게 만든다. 이 반투명한 검정색 영역을 주로 Dim 영역이라고 부른다. 보통 팝업창 내에 컨텐츠가 길어서 스크롤이 있는 경우에는 팝업 내부에만 스크롤이 잘 되게 하기 위해서 Dim 영역 뒤에 있는 body의 scroll은 막는 경우가 많다. 그리고 웹에서는 scroll 막는 것도 쉽게 처리할 수 있다. 바로 팝업이 떴을 때 body 태그에 overflow: hidden을 걸어줘서 scroll을 못하게끔 막아버리는 방법이다. 1. body 태그, overflow: hidden; 코..

이번 주에 회사에서 개발하다가 씨름했던 "비율에 따라 줄어드는 이미지 구현기"를 정리해보려고 한다. 음, 그러니까 주어졌던 요구사항은 이러했다. 우리는 리액트로 개발을 하고 있다. 이미지는 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이나 페이지 스크롤 시 컨텐츠 로딩 무한 스크롤 구현 광고들이 실제로 유저에..

오늘은 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를 사용하는 방식보다 훨..

오늘은 React의 Context에 대해서 공부해보려고 한다. 이 블로그 포스트는 React documents의 Context 챕터를 번역하고 예시를 따라해 본 글이니 굳이 내 블로그 글을 안보고 아래 링크를 봐도 된다. https://reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces reactjs.org Summary Context는 모든 레벨의 컴포넌트 트리에 props를 통하지 않아도 데이터를 전달할 수 있는 방법을 제공해준다. 대부분의 리액트 어플리케이션은 데이터를 위에서부터 아래로 (부모에서 자식까지) props를 통해 전달한다. 그리고 이것을 top-down 방식이라고 부른..

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

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