전체 글

@@@ 결과 미리보기@@@ 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. IAM 사용자를 만드는 이유 AWS에는 루트 계정과 IAM 계정이 존재한다.  ???: root 계정으로 다할 수 있는데 IAM 계정 왜 만듦???? CI/CD 배포를 하기 위해서 githubAction을 사용하는데, githubAction을 연결할 때 IAM 계정을 사용하는 과정이 존재한다.IAM 계정을 만드는 법을 상세하게 정리해 보도록 하겠다.     2. IAM 사용자 생성하기 튜토리얼 AWS에 접속해 준 뒤 우측 위에 있는 서비스 탭을 클릭하여 IAM 탭으로 들어간다. 사용자를 클릭하고, 사용자 생성을 눌러준다.사용자 이름을 입력해 주고, 권한 제공 선택, IAM 사용자를 생성하고 싶음을 클릭한다.(IAM사용자와 Identity Center에서 사용자 지정 두 가지 똑같지만, IAM이 더 ..

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

1. 오류 출력PS C:\Users\useruser\Desktop\code\copy&paste> npm run dev> copy-paste@0.0.0 dev> vite'paste\node_modules\.bin\' is not recognized as an internal or external command,operable program or batch file.node:internal/modules/cjs/loader:1148  throw err;  ^Error: Cannot find module 'C:\Users\ useruser \Desktop\code\vite\bin\vite.js'    at Module._resolveFilename (node:internal/modules/cjs/loader:..

1. requirements.txt 설치 대부분의 인공지능 모델을 가져오게 되면, 이처럼 설치해야 하는 requirements.txt이 존재하게 되는데, 이를 내 컴퓨터의 기본환경인 vscode터미널 또는 cmd로 설치하기에는 부담이 존재한다. 추후에 버전 오류나 라이브러리 설치 관리가 어려워지기 때문이기에 가상환경인 아나콘다를 사용하는 것인데, 그렇다면 아나콘다에서 requirements.txt를 어떻게 설치할 수 있을까?콘다 프롬포트인 Anaconda Prompt를 켜준 이후, Anaconda Prompt 기본명령어콘다 환경 조회 conda env list 콘다 환경 생성 conda create --name $ENVIRONMENT_NAME콘다 환경 활성화 conda activate $ENVIRO..

1. enum타입 enum 타입이란? 열거형 타입이라고도 불리고, 여러 가지 값들에 각각 이름을 부여해 열거해 두고 사용하는 타입을 말한다.javascript에는 존재하지 않고, typescript에서만 제공하는 특별한 타입이다. const user1 = { name: '김도현', role: 0, // 0  이런식으로 숫자로 권한을 부여하는 경우들이 존재하는데, 개발을 쭉 진행하다 보면, 2번이 관리자인가? 와 같이 헷갈리는 경우들이 존재하게 된다. 이럴 때 enum 타입을 사용하면 좋다.enum Role { ADMIN = 0, USER = 1, GUEST = 2,}const user1 = { name: '김도현', role: Role.ADMIN, // Role.ADMIN -> 0};cons..