React.js

@@@결과 미리보기@@@ 1. 구현  1. 기본 로직 problemsData는 데이터 배열이다! - 현재 페이지 state, 한 페이지에 몇 개의 아이템을 보여줄지, 전체 페이지 수 const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 10; const totalPages = Math.ceil(problemsData.length / itemsPerPage); currentPage를 통해 현재 페이지를 useState로 선언해 주고, 한 페이지에 몇 개의 항목이 들어갈지 itemsPerPage를 통해 지정한다. 이후 전체 페이지 수를 구하기 위해서 (데이터/한 페이지에 몇 개의 항목이 들어갈지)를 올림 하여 계산한 totalP..

@@@결과 미리보기@@@  1. 구현내가 이전에 만든 웹 화면은, 바로 위 gif와 같이 창을 전체화면으로 사용하기보다 한쪽으로 화면을 축소하여 사용하는 일이 많았다. 이에 화면이 반절로 되게 되면, 웹사이트에 불편함을 느껴 반응형을 도입하여 이문제를 해결하고자 하였다.    1. display: grid 기본적으로 display:flex로 구현되어 있는 컨테이너를 반응형을 위해 grid로 변경하였다.왜 grid냐? 현재 나는 왼쪽 사진과 같이 1열로 나란히 있는 요소들을 화면의 width가 줄어들면, 오른쪽과 같이 세로로 배치되기를 원하기 때문이다. display: flex;의 경우 일반 div의 성격인 세로로 쌓이는 것이 아닌, div가 가로로 쌓이게 된다. 이러한 경우 반응형으로 가로 세로 요소의 ..

@@@ 결과 미리보기@@@ 1. 구현 데이터가 많을 때 이를 한 번에 모두 렌더링 하면 성능 저하로 이어질 수 있다. 특히 스크롤을 통해 추가적인 데이터를 보여주는 무한 스크롤 방식은, 성능 최적화를 위해 사용자와의 상호작용에 따라 데이터가 로딩되도록 하는 것이 중요하다.이를 위해 Intersection Observer API와 더보기 버튼을 활용해 특정 위치까지 스크롤이 되면 추가 데이터를 로딩하고, 버튼 클릭 시 모든 데이터를 표시하는 방식으로 컴포넌트를 구현할 수 있다. 이번 글에서는 Intersection Observer와 상태 관리를 통해 효율적으로 데이터를 로딩하고 화면에 표시하는 방법을 설명하도록 하겠다.    1. Intersection Observer 설정 const observer = ..

@@@ 결과 미리보기@@@ 1. 구현방법  1. 타이핑 기본 로직 const [webTitle, setWebTitle] = useState(''); // 웹 페이지 제목을 저장할 상태 초기화 (초기값: 빈 문자열)const [count, setCount] = useState(0); // 현재 타이핑 중인 문자의 인덱스를 저장할 상태 초기화 (초기값: 0)const completionWord = 'Co Labor'; // 완성될 타이핑 문구를 상수로 저장 webTitle이 처음 시작 문자열이고, 완성 됐을 때 문자열은 completionWord이다. 이후 count라는 state를 통해 현재 몇 번째 글자인지 구별한다.  useEffect(() => { const typingInterval = setIn..

@@@ 결과 미리보기 @@@  1. 원페이지 스크롤 구현  원페이지 스크롤은 화면 1개에서 스크롤을 할 때, 아래 페이지로 넘어가듯이 스크롤하게 되는 효과를 말한다.원페이지 스크롤은 React에서 제공하는 라이브러리로 react-full-page가 존재하는데, 매우 구리기(?) 때문에 직접 구현하려고 한다. 세련됨(?)을 느끼기에 괜찮아서 블로그에 남겨두려 한다.  전체 적인 구조는 Wrap이라는 height가 큰 컴포넌트가 존재하고, 안에는 각 페이지에 해당하는 container가 존재한다.스크롤을 내리거나 올릴 때마다 화면에는 container가 바뀌면서 보여진다.  즉 Wrap이라는 아주 긴 페이지를 스크롤에 맞게 한 container부분만 보여주는 구조이다.     1. 기본 로직 구현  con..

1. 결과 화면   2. 구글 페이지 번역   1. 구글 페이지 번역 구현 구글에서 특정 텍스트에 대한 번역은 api호출을 통한 번역이 가능하다. 페이지 번역의 경우 찾아보다 보니, Google Translate Website Translator로 가능하다는 것을 알게 되었다. 심지어 이놈은 api key를 발급받아 사용량에 따라 가격이 책정되는 방식이 아니라, 그저 script를 불러와 번역을 할 수 있는 기능을 가지고 있는 굉장한 녀석이었다. script로 불러온 기능을 원하는 부분만 번역도 가능한 것 같지만, 필자가 원하는 기능은 페이지 전체의 번역이기 때문에, root 또는 body와 같은 요소에 해당 script를 넣으면, 페이지 전체 번역이 가능하다. '공짜'에 '전체 페이지 번역'이라고???..

1. 문제 상황 vite.config.js에서 proxy를 설정하는 과정에서 그대로 URL를 작성하는 경우에 env처리를 하지 않다면, 그대로 서버 주소가 노출될 수 있다. env환경을 사용하면서, .env파일을 통해VITE_SERVER_URL="*****"VITE_NAVER_MAP_API_KEY="*****"위처럼 사용만 해봤었지만, 이번엔 vite.config.js파일과 .env파일을 모두 사용해보려고 한다.그렇기에 env환경변수를 사용하여  import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';export default defineConfig({ plugins: [react()], server: { prox..

1. env를 사용해야만 하는 이유env를 사용하지 않은 채, 배포가 되어있는 서버 url을 그대로 적어서 백과 통신하게 된다면, 서버에 직접접근이 매우 쉬워 아무나 서버로 요청을 날릴 수 있다. 그 말은 즉슨? 배포를 aws와 같은 클라우드를 통해 배포되었다면, 인생 망할 수 있다 ~ 라는 뜻이다. 프론트에서 보안적으로 서버 URL을 가릴 방법은 env를 사용하는 것이다.  하지만 React에서 env환경을 사용할 때에는 Vite환경이나 CRA환경이냐에 따라 사용법이 미세하게 다르다. Vite환경과 CRA환경의 env의 차이는  생성할 때에는 VITE_ 와   REACT_ 가 다르고, 불러올 때에는 import.meta와 process가 다르다.팀 프로젝트를 진행하면서 Vite환경과 CRA환경을 왔다 ..

1. 간단하게 모달 창 구현하기( + 배경 블러 처리) 이런 Home화면에서 도움말 버튼을 클릭했을 때, 모달창이 떠서 정보를 확인하고 싶은데 어떻게 할 수 있을까?  나는 리액트를 처음 접하게 되었을 때, 굉장히 막막하게 느껴졌던 기억이 있어 쉽게 정리를 해보고자 한다.Modal 기능 구현에는 단 State 1개 함수 2개로 구현이 가능하다.  const [isOpen, setIsOpen] = useState(false); const modalOpen = () => { setIsOpen(true); }; const modalClose = () => { setIsOpen(false); }; Home화면에 위의 코드에 해당하는 모달창이 열려있는지 닫혀 있는지에 대한 상태인 isOpen ..

프로젝트 진행 도중 왼쪽 화면을 구현해야 했었다. React.js로 styled-components방식을 사용하여 구현하였으며, 해당 페이지를 구현하면서 checkbox  css가 적용이 안되었던 문제와, 클릭했을 때 가운데에 원이 생기는 css를 간단하게 구현하는 것에 대해 말해보고자 한다.          input checkbox css   1. CSS속성이 구현되지 않는 이유? 처음 checkbox의 css를 완성했을 때의 코드는 아래 더보기를 누르면 확인할 수 있다.더보기 const CheckBoxStyled = styled.input` width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d0d5dd; position: ..