개발 공부

이메일 인증이나 비밀번호 찾기 같은 기능에서 사용할 타이머를 만들었다. 특정 시간 내에 동작해야 하는 기능을 구현하기 위해 타이머 제어 코드가 필요했고, 이를 정리해둔다. useTimer 훅 만들기 전체 코드 사실 처음에는 RequestAnimationFrame이 아니라 setInterval을 통해서 일정 시간마다 업데이트를 했었는데, 0초에서 interval 시간 만큼 늦을때가 있어서 방식을 변경한 것이다.

개발을 하다가, candlestick을 화면에 표시를 해야 했었고, 그때 사용한 코드를 정리 scale: 가격을 픽셀 단위로 변환하는 비율 예제 bodyHeight: 몸통의 높이 예제 bodyY: 몸통의 시작 위치 예제 (상승) 예제 (하락) 정리 캔들스틱 차트가 내포하는 의미: https://steemit.com/kr/@phuzion7/candlestick-patterns

외부에서 가져온 SVG 아이콘이나 컴포넌트 기반의 아이콘 라이브러리를 사용할 때, 프로젝트에서 미리 정의한 CSS 변수를 적용하는 것이 쉽지 않을 때가 있다. 예를 들어, className=”bg-primary”처럼 배경색을 적용하는 것은 가능하지만, fill이나 stroke 같은 SVG 속성에는 동일한 방식이 적용되지 않는다. 그리고 테마가 존재할 수 있다. 이 경우에 어떻게 변화를 감지하고, 어떻게 가져올 것인지 정리한다. 예시 CSS 코드 CSS … Read more

보통 사이트를 만들면 헤더와 푸터는 어떤 페이지를 가든 비슷한 경우가 많다. 그 말은 헤더와 푸터는 사이트 전반적으로 사용되는 레이아웃 요소라는 것이다. 이 글에서는 헤더와 푸터를 만들고 어떻게 적용하는지 작성한다. 헤더와 푸터에는 어떤 정보들을 가져오는 것이 좋을까? 일단은 관리자 페이지에서 설정한 사이트 정보들이 있을 것이고, 당연히 사이트마다 다르겠지만, 공통적으로 가져오는 데이터들이 있을 것이다. 헤더에 포함하면 좋은 … Read more

웹앱을 개발할 때, 항상 존재하는 메인 페이지를 두고, 그 위에 서브 페이지를 보이게 하라는 요청이 있었습니다. 하지만 이 경우에는 뒤로가기시 스크롤의 위치가 정확하게 동작하지 않았습니다. 이에 대한 해결 방법을 찾아보면서 알아낸 방법을 정리합니다. 전체 코드 main.jsx app.jsx sub-page.jsx scroll-restore.jsx 문제점 로딩이 오래걸리면 스크롤은 콘텐츠가 다 생성되지 않아서 기억하고 있는 스크롤 값이 height값을 넘어가는 경우가 있다. … Read more

VS Code를 사용하여 프로젝트를 진행하다 보면 대부분의 파일은 정상적으로 인식되지만, 일부 파일 형식(JPG, PNG 등)은 인식되지 않는 경우가 있다. 특히 TypeScript를 사용할 때 이미지 파일을 직접 import하면 오류가 발생할 수 있다. 이러한 문제를 해결하기 위해 TypeScript 타입 정의 파일(.d.ts)을 프로젝트 내에 생성하여 파일을 명시적으로 인식하도록 설정할 수 있다. 아래 코드를 추가해주면 잘 인식되어 자동완성이 잘 … Read more

워드프레스 블로그를 운영하는 사람으로서 유용한 사이트를 정리해보려고 글을 작성했습니다. 계속 추가할 예정입니다. 1) 공식 문서 및 개발자 자료 2) 뉴스 및 최신 정보 사이트 3) 테마 및 플러그인 마켓 4) 성능 최적화 및 SEO 관련 자료 다른 사람이 정리한 링크

내가 작성한 React UI 관련 글에는 구현된 리액트 코드가 있는데, 워드프레스 포스팅에서도 JSX를 추가할 수 있다. 바벨을 사용하면 가능하다. 앞으로도 많이 사용할 거 같아서 글로 정리를 한다. 위 코드를 사용자 정의 HTML에 추가해 보겠다.