프론트엔드 개발/React

이번에 구현해 볼 것은 한글 타이핑 효과이다. 영어라면 글자 타이핑 효과를 css 애니메이션과 키프레임을 통해 나타낼 수도 있지만... 한글의 경우 타이핑 할 때 자음 모음 이런 게 조합되어서 나오다 보니 조금 부자연스럽다. (다음에는 css와 키프레임을 통해 표현하는 방법도 포스팅해 보겠다..) 그래서 조금 찾아보니 한글 타이핑을 구현한 라이브러리가 있었다. 자바스크립트로 되어있었고, 이걸 리액트에서 사용하기 위해서 useEffect를 활용해 코드를 완성해 보도록 하겠다. 아래의 사이트가 제작자의 사이트이다.https://sduck4.github.io/type-hangul/ type-hangul: ⌨️ 한글 타이핑 효과 라이브러리한글 두벌식 자판에서 한 글자씩 타이핑되는 과정을 보여줄 수 있는 라이브러..

리액트 라이브러리 중 framer motion이라는 라이브러리가 있다. 화면에서 다양한 애니메이션을 만들기 위해서 쌩으로 css와 스크립트를 짜서 구현하려면 복잡하다. 그러나 framer motion만 있다면 간단하게 구현이 가능하다. 이걸로 다양한 애니메이션을 구현할 수 있는데 그 중에서 우선 나는 스크롤을 할때 화면에서 글자가 점점 나타나도록 구현해 보도록 하겠다. 1. 설치하기npm을 통해 먼저 라이브러리를 설치해준다.npm i framer-motion 아래는 공식문서이며 어떻게 사용하는지 볼 수 있다.https://www.framer.com/motion/ Documentation | Framer for DevelopersAn open source, production-ready motion lib..

내가 원하는 지역의 지도를 화면에 표현해주고 싶어 React를 사용해 카카오 API를 연동해 보도록 하겠다. 1. kakaoDeveloper 사용하기먼저 아래의 사이트에 접속하여 로그인이 필요하다.https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com1-1. 프로젝트 생성 및 플랫폼 등록로그인을 한 후 내 애플리케이션에 들어가 프로젝트를 하나 생성 해 준다. 나는 toy-pj라고 미리 생성해두었다. 그런 다음 왼쪽 메뉴에서 플랫폼에 들어가 Web 부분의 플랫폼을 등록해 주면 된다. 여기서 웹플랫폼에 정확..

react + typescript로 D-Day 계산기가 필요해 간단하게 useEffect와 useState를 통해서 계산기 컴포넌트를 만들어 보도록 하겠다. 시간의 차이를 계산하기 위해 자바스크립트 함수를 사용하고, 이것을 통해서 계산된 날짜 차이를 매 1초마다 화면에 갱신해 주는 절차를 진행해 주면 된다.1. 날짜 값 가져오기우선 src 폴더 아래에 Day폴더를 만들어 주고 Day.tsx 파일을 하나 생성해 준다. 그런 다음 아래의 코드를 입력하여 지금 시간부터 2024년 12월 25일 10시까지를 계산해 보도록 하겠다.import { useEffect, useState } from "react";const Day = () => { const countdownday = new Date('2024-..

이전 포스팅에서 갤러리 화면을 띄워보았다. 여기서 더 나아가 이미지를 클릭했을 때 원본 크기로 모달창이 나오도록 구현해 보도록 하겠다. 작업 시작 전 아직 갤러리 화면을 구현하지 않았다면 이전 포스팅을 참고하여 진행하자. 2024.08.08 - [프론트엔드 개발/React] - [React] 간단한 갤러리 화면 구현하기(Typescript) [React] 간단한 갤러리 화면 구현하기(Typescript)갤러리 기능을 구현하여 이미지를 masonry 레이아웃으로 화면에 나타내고 이미지를 클릭했을 때 미리 보기 기능을 구현해 보려고 한다. 이러한 기능을 구현하기에 괜찮은 라이브러리를 찾게 되었goddmk.tistory.com 1. 라이브러리 설치이전에 react-photo-album이라는 라이브러리를 다운 ..

갤러리 기능을 구현하여 이미지를 masonry 레이아웃으로 화면에 나타내고 이미지를 클릭했을 때 미리 보기 기능을 구현해 보려고 한다. 이러한 기능을 구현하기에 괜찮은 라이브러리를 찾게 되었는데 React Photo Album,Yet Another React Lightbox 두 가지 라이브러리를 사용하면 내가 원하는 기능을 구현할 수 있다. 다양한 레이아웃으로 표현할 수 있고, 이미지 미리보기 기능까지 사용할 수 있는 라이브러리다. 해당 라이브러리는 타입 스크립트를 사용하며 공식 문서는 아래 페이지를 참고하면 된다.  React Photo Album   Yet Another React Lightbox  오늘 할 작업은 먼저 이미지를 내가 원하는 형태로 띄워보는 작업을 진행하고 다음으로 미리 보기 기능을 ..

리액트 프로젝트를 시작하기 앞서 디자인을 편하게 하기 위해 CSS 프레임워크를 사용하기로 했다. 그래서 가장 많이 사용하는 tailwind를 선택해서 개발해 보기로 했다.1. Tailwindtailwind는 아래처럼 classname(react의 경우 class가 아닌 className으로 해줘야 한다.)에 스타일을 입력하면 바로 css가 적용되는 녀석이다. 처음에는 tailwind만 적용해서 코드를 짜보려고 했는데 하다보니 classname 길이가 엄청 길어져서 가독성이 많이 떨어졌다. 그래서 찾아보니 리액트는 보통 styled-componets를 이용해서 주로 css를 짠다고 하는데... 지금이라도 바꿔야 하나 생각했지만, 조금 더 찾아보니 twin macro를 사용하면 Tailwind와 styled..

프론트엔드 개발 공부를 위해서 토이 프로젝트를 하나 시작해보려고 한다. 시작하기 전 프레임워크를 선택하려고 하는데 아무래도 가장 대중적인 리액트를 다루어 보려고 한다. 예전에 한번 리액트를 다루어 본 적이 있는데 조금 검색해 보니 요즘은 vite라는 빌드 툴도 함께 쓴다고 해서 이것을 가지고 진행해 보겠다. 그리고 vscode를 통해 윈도우 환경에서 개발을 진행한다.1. Vite 란?먼저 Vite는 Rollup 기반 번들링과 Go로 작성된 Esbuild 를 조합해서 엄청나게 빠른 속도를 자랑하는 빌드 도구이다. 그래서 실제로 vite로 dev-server를 구동시켜 보면 내가 코드를 짜고 저장하면 웹 브라우저에서 새로고침을 안 해도 거의 실시간으로 화면에 내가 수정한 것으로 바뀌게 된다. 그렇게 된다면 ..