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 컴포넌트가 리렌더링될 때마다..

이제 블로그의 메인화면을 만들어야 하는데, 그 전에 저번에 만든 Signup과 Login의 디자인을 AppLayout으로 감싸줘야 /login, /signup으로 들어갈 때 네비바가 상단에 보인다. return ( Sign-Up ) Footer도 필요하기 때문에 만들어 준다. // components/footer/footer.styles.tsx import styled from "styled-components"; export const FooterContainer = styled.footer` position: absolute; bottom: 0; left: 0; width: 100%; background-color: #f2f2f2; padding: 1rem; display: flex; justify-..

백엔드와 React를 연결하기 위해 데이터를 fetch 시켜야 한다. 만약 백엔드 작업이 되어 있지 않다면 axios는 건너뛰고 더미 데이터 넣어주면 된다. npm i axios npm i react-query react-query를 선택한 이유는 redux가 redux-toolkit으로 오면서 보일러플레이트가 많이 줄었다고는 하나, 전역 상태를 관리하기 때문에 여전히 코드량이 많았다. 그래서 서버 스테이트를 관리하는 react-query를 사용해보고 싶었다. 아직 조금밖에 사용해보지 않았기에 장단점은 잘 모르겠으나, 확실히 코드는 많이 간결해졌다. // configs/config.ts export const backUrl = 'http://localhost:3065'; configs폴더를 만들고 안에 ..

프로젝트중 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..

Next.js는 태그를 사용해 이미지를 삽입하게 되는데 가끔씩 Image with src has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio. 라는 warning이 뜬다. 문제를 해결하지 않아도 작동은 되지만, 에러가 많이 쌓이면 성능에 문제가 있을수도 있고 console창에 계속 에러가 뜨기 때문에 해결하는 방법을 알고 있으면 좋다. images.tsx const Images = () => { return ( )..

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는 두 번째 인자가 바뀌지 않는 한 다시 실행되지 않는다...