본문 바로가기

분류 전체보기

 (133)
(component) React 타이머 시작, 일시정지/재개, 초기화 자바스크립트 내장함수 setInterval과 clearInterval 그리고 react 의 useState와 useRef로 Timer 를 구현해보았습니다. 전체 코드 보기 http://bit.ly/3Q7to69 요구사항 1. seconds를 입력할 때 60초를 넘겨서 입력하면 초과한 초를 제외한 나머지는 분(minutes)으로 합산된 상태로 타이머가 작동되어야 합니다. 2. 일시정지(PAUSE)와 재개(RESUME) 동작 기능이 있습니다. 배경지식 1. setInterval과 clearInterval 활용방법 특정함수를 1초 간격(1000m/s, milliseconds, 밀리세컨즈)으로 반복해서 실행시킬 때 seInterval 함수를 이용합니다. setInterval 함수는 'interval ID'를 리..
(Redux) Cannot add property 0, object is not extensible Redux와 상태 불변성 유지Redux를 이용해 상태 관리를 하다 보면, 특히 불변성을 유지하는 것이 중요합니다. 기존 useState 기반의 컴포넌트 로컬 상태를 Redux를 통해 전역 상태로 관리하려고 할 때, 이 불변성 원칙을 놓치는 경우 오류가 발생할 수 있습니다. 이번 글에서는 전역 상태인 inquiryList를 체크박스의 상태와 연결하고 이를 안전하게 업데이트하는 방법을 설명합니다. 문제 상황: 불변성 원칙 위배inquiryList는 string[] 타입의 전역 상태로, 체크박스 선택 시 이를 업데이트하기 위해 handleCheckItem이라는 함수를 사용하고 있습니다. const handleCheckItem = (value: string, isChecked: boolean) => { let..
(CSS) 카카오톡 브라우저 주소창과 네비게이션 바 고정 카카오톡을 통해 링크에 접속할 경우, 인앱 브라우저가 실행됩니다. 이 때, 화면을 위로 스크롤하면 인앱 브라우저의 주소창과 네비게이션 바가 자동으로 숨겨집니다. 이러한 동작으로 인해 브라우저의 창 크기에 혼동이 생길 수 있습니다. 모바일 버전에서는 문제를 해결하기 위해 메뉴 버튼을 우측 상단에 배치하고, 해당 버튼을 클릭할 때 메뉴가 화면 전체를 채우는 효과를 주었습니다. 하지만 문제는 메뉴가 표시된 상태에서도 화면에 고정되어야 한다는 점입니다. 스크롤 방지 효과를 적용해도 인앱 브라우저의 주소창과 네비게이션 바가 자동으로 숨겨지는 현상이 발생합니다. 이러한 상황에서 주소창과 네비게이션 바를 고정하기 위해서는 CSS 효과를 사용할 수 있습니다. 자세한 기술적인 내용은 다음과 같습니다 html { widh..
(CSS) createGlobalStyle vscode prettier 적용 안됨 Next.js + TS + Styled components를 활용하여 서비스 페이지 제작하는 도중 글로벌 스타일의 필요성을 느껴 createGlobalStyle을 선언하였다. 기존에 html+css로 제작된 홈페이지의 css 코드를 그대로 붙여서 저장하였지만 prettier가 제대로 작동하지 않는다. import { createGlobalStyle } from 'styled-components' import { reset } from 'styled-reset' export const GlobalStyle = createGlobalStyle` ${reset} * { box-sizing: border-box; -moz-box-sizing: border-box; } 대략 위에 처럼 시작한다. stackover..
(JS) ECMA 262 - TC39 new feature 2022.6 version ECMAScript 2022, the 13th edition, introduced top-level await, allowing the keyword to be used at the top level of modules; new class elements: public and private instance fields, public and private static fields, private instance methods and accessors, and private static methods and accessors; static blocks inside classes, to perform per-class evaluation initialization; the #x in obj syntax, to..
(React) Next.js 에서 리액트 포털로 모달 만들기 * 문제점 모달 컴포넌트를 만들 때 우리는 흔히 useState을 잔뜩 사용해서 모달에 입력 받아야 하는 상태값들을 나열해준다. 그리고 모달을 띄울 boolean 값과 모달 엘리먼트의 position을 fixed로 설정하고 표시를 한다. 만일 가입이나 확인 버튼이 있다면 모달의 boolean 값을 true로 하고 background을 클릭할 경우 false로 하는 방법을 흔히 이용한다. 위의 방법은 간단한 방법으로 모달 컴포넌트를 구현하고 작동시켜 준다. 하지만 재사용성의 관점에서는 재활용할 께 딱히 없어 코드 복붙 외에는 좋은 코드라고 할 수 가 없다. * 해결방법 - 리액트 포털 ReactDOM.createPortal(child, container) 포털은 '부모 컴포넌트 DOM 계층 외부에 있는 D..
(Git) CRLF will be replaced by LF 에러 내용과 해결 * 에러 내용 맥(유닉스)과 윈도우 운영 체제를 혼용해서 git 작업을 하며 git add하는 경우 자주 볼 수 있는 whitespace(공백) 관련 에러 메세지이다. CRLF will be replaced by LF 혹은 LF will be replaced by CRLF 맥에서는 한 줄의 끝이 LF(Line Feed)인데 윈도우에서는 줄 하나가 CR(Carriage Return)와 LF(Line Feed), CRLF 이다. 그래서 혼용해서 git에 접근한다면 git 이 혼란 스러워 한다. 맥 os를 쓰고 있는데 윈도우에서 git add를 하면 CRLF will be replaced by LF 에러메세지가 뜨고 윈도우를 쓰고 있는 맥에서 git add를 하면 LF will be replaced by CR..
(Next.js) Next/Image Do not use <img> * 문제점 Next.js에서는 이미지 최적화를 위해 img 태그의 사용을 권장하지 않고 Next/Image 컴포넌트를 사용하도록 하고 있다. Next/Image는 built-in 성능을 최적화하기 위해 태그를 확장한 것으로 크롬 웹 스토어의 'Lighthoust'와 같은 확장 프로그램으로 측정하는 core-web-vitals에서 좋은 점수를 받을 수 있게 해주는 컴포넌트이다. 하지만 컴포넌트는 width와 height 값을 px 단위로 지정을 해야 하는 불편함이 있고, width와 height 값을 생략하기 위해 layout="fil' 속성을 설정하면 position: relative 속성을 가지는 부모 태그로 감싸주어야 하는 번거로움도 있다. NEXT.js core-web-vitals 링크 그런데 위와..

티스토리툴바