far

특정 값에 따라서 서로다른 input엘리먼트가 보이는 컴포넌트를 만들던 도중, 한 글자를 입력 할 때 마다 input의 포커싱이 풀리는 현상이 나타났다.대체 왜 그런가 했더니 테스트용으로 외부에 만들어뒀던 Input 컴포넌트가 스코프 내부에 들어있었다.import React, { useState } from 'react';const App = () => { const [inputValue, setInputValue] = useState(''); const InputComponent = () => ( setInputValue(e.target.value)} /> ); return ( input label {/* 이 컴포넌트는 App 컴포넌트가 리렌더링될 때마다..

프로젝트중 websocket을 도입해보자는 말이 나와서 Sock.js와 Stomp.js를 사용해 실시간 채팅을 구현해봤다. Sock.js Sock.js는 클라이언트와 서버간의 연결을 유지하며 양방향 통신을 가능하게 해주는 websocket과 비슷한 기능의 Javascript 라이브러리다. 프로젝트에서 Sock.js를 선택한 이유는 두가지가 있다. 첫째로, Sock.js는 크로스 브라우징을 지원하는 API이며, websocket 프로토콜을 지원하지 않는 브라우저의 경우 자동으로 Streaming, Long-Polling 같은 HTTP 기반의 다른 기술로 전환해 연결해준다. 둘째로, SpringBoot를 사용해 웹소켓을 구현할 경우 Sock.js를 사용하는게 일반적이라는 글을 읽기도 했고, Stomp.js를..

과거에 만들었던 개인 프로젝트를 보다 보니까 내가 사용하면서도 UX가 안좋다는 생각이 들 정도로 불필요한 링크 이동이 있었다. 그래서 조금이라도 UX적으로 좋게 만들기 위해 간단한 정보들은 링크 이동 대신 모달창을 사용해 정보를 보여주기로 했다. 여태까지 모달창은 Bootstrap이나 TailwindCSS에서 등에서 제공하는 걸 사용해 왔는데, 바꾸는 김에 내가 만들어보는 것도 나쁘지 않겠다고 생각해 작업을 해보았다. index.tsx // 설명하는데 불필요한 코드는 전부 생략했다. import Project from '../components/Project'; import Aco from '../components/Aco'; export default function Home() { const [mod..

Checkbox와 API를 연결할 때 첫 클릭시 Boolean이 전환되지 않는 경우가 생겼는데, 생각보다 해결이 안돼서 애를 먹었다. tsx파일 // Checkbox 부분을 제외한 나머지 전부 생략 // props로 todo 데이터를 받아오는 상황 const TodoList = ({ todo }) => { const [isCheck, setIsCheck] = useState(todo.isCompleted); // 서버로부터 boolean값을 받음 const todoCheckbox = useCallback(() => { setIsCheck(!isCheck); }, [isCheck]); useEffect(() => { axios({ // ... 생략 data: { isCompleted: isCheck, },..

꽤 예전에 했던 작업인데, Intersection Observer의 복습도 할 겸 메모를 해두려고 한다. 0. 들어가며 당시에 해외의 프론트엔드 포트폴리오 사이트를 보면 스크롤 위치에 따라 좌우로 움직이는 텍스트가 자주 나오는데 그걸 적용해보고 싶다는 생각이 들었다. 마침 Intersection Observer을 막 알게 되었을 때 였는데 이걸 사용하면 애니메이션을 쉽게 구현할 수 있을것 같았다. 그리고 하는 김에 Intersection Observer를 사용한 Fade in/out도 구현을 해보았다. 1. Intersecton Observer란? 일반적으로 Scroll 애니메이션을 사용하면 짧은 시간에 수 많은 이벤트가 동기적으로 실행되기 때문에 심각한 성능 문제로 이어지기도 한다. 그리고 위치를 계산..

React의 Map을 사용하다가 고유값이 없어서 index를 넣은 경험이 있는데, index를 사용해도 될 때는 언제지? 싶어서 관련 내용을 좀 찾아봤다. 그런데 글들을 읽어보니 내가 생각보다 key의 역할에 대해 잘 알고있던게 아니구나 싶어 이 참에 Key props에 대해 정리를 하려고 한다. Virtual DOM이 DOM에 새 엘리먼트를 추가하는 방식 Pen Cup 변경전 Pen Cup Note 변경후 리액트의 Virtual DOM(가상돔)은 위에서부터 Virtual DOM의 Pen과 DOM의 Pen를 비교 해나간다. 그리고 변경 사항이 없다면 Cup로 넘어가 Virtual DOM과 DOM이 같은지 비교한다. 그러다 DOM에 없는 Note를 만났을 때 DOM에 Note를 추가해준다. Pen Cup ..

메모이제이션이란 자바스크립트의 캐싱 기술중 하나이며 메모리에 특정 정보를 기록해두고 필요할때 마다 정보를 가져와 활용하는 기법이다. 리액트에서는 useCallback과 useMemo라는 훅으로 사용이 가능하며, 불필요한 렌더링을 줄여 퍼포먼스를 최적화 시켜주기에 사용법을 알아두는 편이 좋다. useMemo 전달된 함수가 실행되고 반환된 결과를 캐싱한다. import { useMemo } from 'react'; function TodoList({ todos, tab, theme }) { const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); // ... } useMemo는 두 번째 인자가 바뀌지 않는 한 다시 실행되지 않는다...

쉽게 할 수 있을거라 생각했는데 많이 고생했던 부분이라 기록으로 남긴다. 구조를 짤 때 백엔드단과의 소통 미스로 textarea안에 이미지를 첨부하기 위한 업로드를 짜야하는줄 알고 빙빙 돌아왔기에 더더욱 오래걸렸다. HTML, 기본 Form const PostForm = () => { const imageInput = useRef() as React.RefObject; const onClickImageUpload = useCallback(() => { if (!imageInput.current) { return; } imageInput.current.click(); }, [imageInput.current]); return ( { imageStorageFunction(e) }} /> { imgl.map(..

공부를 위해 여러 블로그를 보며 정리 한 글 라이프 사이클이란 함수형 컴포넌트에서의 생명주기를 말하며, 컴포넌트가 페이지에서 렌더링 되기 전인 준비 과정부터 시작해 페이지에서 사라질 때 끝이 난다. 라이프사이클의 분류 라이프 사이클은 총 9개가 존재하며 크게는 아래와 같이 세 가지 유형으로 나눌 수 있다. 더보기 componentDidMount : 렌더가 처음 실행될 때 실행되며 리렌더링이 일어날 땐 실행되지 않는다. componentDidUpdate : 리렌더링 후에 실행된다. componentWillUnmount : 컴포넌트가 제거되기 직전에 실행된다. 라이프사이클의 실행 리액트의 실행 순서를 정리하면 클래스의 경우 이 순서로 실행이 된다. (자주 안쓰이는 것 제외) 더보기 constructor ->..

웹이나 앱의 규모가 커지게 되면 번들(webpack이나 parcel 같은 것들)의 크기도 커지는데, 번들이 당장 사용하지 않는 컴포넌트 정보를 다 불러오게 된다면 분명 서비스하는데 문제가 생기게 된다. 이 문제를 해결하기 위해 사용하는게 코드 스플리팅이다. 필요하지 않은 코드를 불러오지 않는 것, 번들을 나눠서 성능을 향상시키는 방법이다. 코드 스플리팅을 하나하나 구현 해줄수도 있지만 만약 서버 사이드 렌더링을 할거라면 코드 스플리팅을 적용하기 상당히 까다로워진다. 왜냐하면 첫번째로 서버 사이드 렌더링에서는 리렌더링이란게 없기 때문에 state를 변화를 감지해서 화면을 바꿔주지 않기 때문이고 두 번째로 JavaScript가 로딩 될 때 스플리팅된 코드가 아직 로딩되어있지 않아 null 이 렌더링되면서 기..