front-end

Yarn.lock 파일의 Version 관리에 대한 이해

yarn.lock 파일은 Yarn 패키지 매니저가 JavaScript 프로젝트의 의존성을 관리할 때 생성하는 중요한 파일이다. 이 글에서는 yarn.lock 파일 내에서의 버전 관리에 대해 자세히 알아보자. 이를 통해 어떻게 의존성의 일관성을 유지하고, 프로젝트를 안정적으로 유지할 수 있는지 이해할 수 있다.1. Yarn.lock 파일의 기본 구조yarn.lock 파일은 프로젝트의 모든 패키지와 그에 따른 의존성의 고유 버전을 저장하는 역할을 한다. 이 파일은 각 패키지의 정확한 버전과 다운로드해야 할 URL을 포함하여, 동일한 의존성 트리를 보장한다.예시:lodash@^4.17.15: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/..

2024. 8. 13. 19:36

front-end

[react] vite에서 .env 값 불러오기

vite로 react를 사용하는 경우 .env 파일 내용을 불러오는 방법이다.예를 들면 .env 파일에 아래 내용이 있다.# .envSERVER_URL=http://127.0.0.1:8080이를 react 코드에서 사용하기 위해서 vite.config.ts 정보를 수정해야 한다. 아래와 같이 define을 추가하자.[변경 전]export default defineConfig({ plugins: [react()]});[변경 후]export default ({ mode }: { mode: string }) => { const env = loadEnv(mode, process.cwd(), ''); return defineConfig({ plugins: [react()], define: { ..

2024. 5. 16. 11:04

front-end

vite에서 외부에서 접속할 수 있도록 하려면

기본적으로 vite으로 생성한 react 프로젝트는 localhost에서만 접속이 가능하다.외부에서 접속할 수 있도록 하려면 vite.config.ts를 수정해야 한다.server.host서버가 수신할 IP 주소를 지정한다. 모든 주소를 수신하려면 0.0.0.0 또는 true로 설정하면 된다.export default defineConfig({ plugins: [react()], server: { host: '0.0.0.0' },});또는export default defineConfig({ plugins: [react()], server: { host: true },});server.port서버 포트를 지정한다. 기본값은 5173이다. 포트를 다른 포트로 변경하려면 server.po..

2024. 5. 3. 08:40

front-end

[pwa] 유용한 기능

PWA에서 유용하게 사용할 수 있는 여러가지 기능의 사용법을 모아둔 것이다.설치 버튼 추가웹 앱 매니페스트 파일을 만든다. (manifest.json){ "short_name": "Demo App", "name": "Demo App", "icons": [ { "src": "logo.png", "type": "image/png", "sizes": "192x192" } ], "start_url": ".", "display": "standalone", "orientation": "portrait-primary", "theme_color": "#000000", "background_color": "#ffffff", "description": "Demo Ap..

2024. 4. 30. 16:42

front-end

Prettier 사용법

Prettier는 코드를 자동으로 포맷팅해주는 도구이다. 다양한 언어를 지원하며 특히 html, css, javascript에는 기본으로 사용하는듯 하다. 코드는 저장 시 자동으로 포맷팅되며 대부분의 에디터에서 플러그인이 존재한다. 1. Prettier 설치 여기서는 intellij 플러그인을 통해 설치해보자. Settings > Plugins에서 Prettier를 검색하고 install을 하면 된다. 2. 설정 Settings > Languages & Frameworks > Javascript > Prettier를 선택하자. (또는 Settings에서 검색을 해도 된다) Automatic Prettier configuration을 선택하고 Run on save를 체크하자. 3. 적용 해당 프로젝트 폴더..

2024. 4. 3. 20:16

front-end

React의 input 값을 vanilla javascript로 변경하기

최근에 react로 되어 있는 웹페이지를 chrome extension으로 이벤트를 처리할 일이 생겼다. chrome extension은 react가 아닌 pure javascript 코드로 되어 있다. 그래서 pure javascript로 react의 input에 값을 세팅하고 이벤트를 발생시키는 방법을 찾다가 정리하게 된 글이다. 예를 들어 다음과 같은 React form이 있다고 하자. 소스코드는 아래와 같이 간단하게 구성할 수 있다. export default function Login() { const [email, setEmail] = useState(""); function handleEmailChange(event) { console.log("email change"); setEmail(e..

2024. 3. 14. 13:34

front-end

[react] form을 다루는 5가지 방법

react에서 form을 다루는 방법은 여러가지가 있고 어떤식으로 사용할 수 있는지 한번 알아보자. 다음와 같은 로그인 form이 있다. 아주 간단한 양식이지만 react에서는 여러가지 방식으로 form을 사용할 수 있다. 위 화면에는 Email과 password 필드가 있고 전송 버튼을 클릭할 때 일반적으로 해당 값으로 ajax를 통해 서버를 호출한다. 여기서는 서버로 요청하기 전에 해당 필드의 값을 어떻게 얻어낼 수 있는지에 대한 방법을 알아본다. 사용가능한 방법은 아래와 같다. State와 Handler 사용하는 방법 Ref를 사용하는 방법 FormData와 브라우저 API 사용 Custom Hook 사용하기 React Forms Library 사용하기 1. State와 Handler 사용하는 방법..

2024. 3. 12. 07:34

front-end

[react] DOM 업데이트, DevTools, memo, useCallback(), useMemo

이 내용은 아래 강좌의 일부 강의를 정리한 내용이다. [React 완벽 가이드 with Redux, Next.js, TypeScript] https://www.udemy.com/course/best-react 1. 리액트 컴포넌트 트리 생성 리액트에서 DOM 업데이트는 어떻게 실행되는가? 컴포넌트 함수가 어떻게 실행되는지를 알아보자. 다음 예제 앱을 통해 자세한 내용을 알아보자. 이 앱에는 여러 가지 컴포넌트가 있다. 숫자를 입력하고 Set 버튼을 클릭하면 initialValue 값이 세팅이 되며 + Increment, -Decrement 버튼을 통해 숫자를 변경할 수 있는 기능을 한다. 이 앱의 소스 내용을 확인해보자. [App.js] function App() { log(' rendered&#..

2024. 3. 7. 07:20

front-end

[react] vite 사용하기

react에서 Vite를 사용하는 방법을 알아보자. 자세한 내용은 공식 사이트의 내용을 참고하면 된다. 영문] https://vitejs.dev/guide/ 한글] https://ko.vitejs.dev/guide/ Vite는 프랑스어로 빠른(quick)이라는 뜻이다. 읽을 때 바이트가 아니라 빝(/vit/)으로 발음해야 한다. Vite는 기존 webpack보다 빠른 환경을 제공하기 위해서 만들어졌다. 빠른 Hot Module Replacement (HMR) 등의 ES 모듈에서의 기능 강화와 번들링할 때의 최적화 작업을 한다고 한다. Create React App 대신에 Vite를 사용하는 이유 지금까지 리액트 개발 시 CRA를 사용했었다. 하지만 Vite가 나온 이유가 뭘까? 기본적으로 개발 시 필요한..

2024. 3. 3. 20:17

front-end

[react] 타입스크립트에서 이벤트 핸들러 사용하기

이번에는 이벤트에 관한 내용이다. 아래와 같이 간단한 컴포넌트를 만들었다. const EventComponents: React.FC = () => { return ( console.log(e)} /> ); }; 위의 예제에서 onChange에 대한 콜백 함수를 인라인 함수로 만들었기 때문에 아무 오류가 발생하지 않는다. 하지만 함수를 정의해서 사용해보자. 이 경우는 아래와 같이 e가 any 타입을 가지고 있다고 오류를 나타낸다. 이 오류는 왜 나는 것일까? 타입 스크립트는 사용하는 타입이 다른 경우는 항상 알려준다. input에 있는 onChange에 마우스 오버를 해보면 onChange props가 무엇인지 알 수 있다. 우리는 이 값을 props으로 넘겨야 한다. onChange에는 React.Cha..

2024. 3. 1. 20:25

front-end

[react] 타입스크립트에서 ref 사용하기

이번에는 ref에 타입스크립트를 적용하는 방법을 알아보자. 다음 컴포넌트를 한번 보자. input 요소에 ref가 참조가 걸려있다. const UserSearch: React.FC = () => { const inputRef = useRef(); const [name, setName] = useState(""); const [user, setUser] = useState(); const onClick = () => { const foundUser = users.find((user) => { return user.name === name; }); setUser(foundUser); }; return ( User Search setName(e.target.value)} /> Find User {user &&..

2024. 3. 1. 20:24

front-end

[react] 타입스크립트에서 state 사용하기

이번에는 타입 스크립트와 State에 대해 알아보자. 아래 예제를 한번 보자. const GuestList: React.FC = () => { const [name, setName] = useState(""); const [guests, setGuests] = useState([]); const onClick = () => { setName(""); setGuests([...guests, name]); }; return ( Guest List setName(e.target.value)} /> Add Guest ); }; 이 컴포넌트는 name과 guests를 state로 가지며 Add Guest 버튼을 클릭하면 guests에 추가하는 기능을 하는 컴포넌트이다. (여기서 Guest 출력 기능은 포함되지 않..

2024. 3. 1. 20:23

front-end

[react] 타입스크립트에서 Children annotation 사용하기

Child props 내에서 추가적인 정보를 받는 방법을 알아보자. 예를 들면 함수나 children 속성 등 Child 컴포넌트에서 클릭 이벤트를 추가할 때 부모 컴포넌트에게 이 사실을 알려줘야 한다. 우선 Child에 클릭 이벤트를 추가해보자. export const Child: React.FC = ({ color, onClick }) => { return {color} Click me ; }; onClick 함수를 추가하고 나면 Child 컴포넌트에 아래와 같이 타입스크립트 오류가 발생한다. TS2339: Property onClick does not exist on type ChildProps 이것은 ChildProps에 onClick이 정의가 되어 있지 않다는 것을 나타낸다. ChildProps..

2024. 3. 1. 20:21

front-end

[react] 타입스크립트에서 컴포넌트 annotation 사용하기

리액트에서 타입 스크립트를 사용할 때 문제점을 한번 알아보자. export const Child = ( { color }: ChildProps) => { return {color}; } 여기서 타입스크립트는 Child 컴포넌트가 ChildProps의 타입을 인수로 받을 것으로 알려주는 것이다. 하지만 타입스크립트 입장에서는 이 컴포넌트가 리액트 컴포넌트인지 다른 종류의 컴포넌트인지 전혀 알지 못한다. 위의 코드에서 ChildProps를 받고 리턴으로 JSX를 리턴한다는 것만 알 수 있다. 함수에는 다른 자바스크립트 라이브러리가 올 수도 있다. 그래서 JSX를 리턴을 하고 있지만 타입스크립트는 리액트에서 사용될 JSX를 리턴한다는 사실은 모른다. 모든 리액트 컴포넌트는 _propTypes, displayN..

2024. 3. 1. 20:19

front-end

[react] 타입스크립트에서 props 사용하기

리액트에서 타입스크립트를 사용하여 props를 만들 때 타입스크립트 없이 만들 때와 가장 다른 점은 Child 컴포넌트 내부에서 어떤 props를 받을지 결정해야 한다는 것이다. 타입을 정하기 위해 컴포넌트(Child) 파일 내부에 인터페이스를 정의한다. 그 인터페이스는 Child 컴포넌트가 받아야 하는 props를 정의하는 것이다. 예를 들어 아래와 같은 두 개의 컴포넌트가 있고 Child 컴포넌트의 props와 그 값은 각 Parent의 props를 통해 전달되어야 한다. 이렇게 인터페이스에 추가함으로써 타입스크립트로 하여금 두 가지를 체크하게 하는 것이다. Parent에서 볼 때 Child로 올바른 props를 전달하고 있는가? Child에서 정확한 이름과 타입(type)을 사용하고 있는가? 예제 ..

2024. 3. 1. 20:17