본문 바로가기

React

 (115)
[React] 이미지 파일은 public폴더 vs src폴더 어디에 넣을까 이미지를 어떤 폴더에 넣을 지 궁금해서 찾아봤다. 아래 출처 블로그 내용) 📁 public : 앱이 컴파일될 때 사용하지 않는 모든 것 앱을 컴파일하는 데 필요하지 않은 요소들. 절대경로 사용이 가능해진다! import 해올 일이 있을 때, ../../이렇게 상대경로로 써주지 않아도 되고, 그냥 파일명 써주면 가능하다! 정적파일을 담는 곳. 사용자가 직접 웹브라우저상으로 볼 수 있는 index.html같은 파일들, image 파일들이 담긴다. 경로를 동적으로 참조해야 할 때 퍼블릭 폴더를 쓴다 (You have thousands of images and need to dynamically reference their paths. 상대경로로 쓰면 경로가 하나 바뀔 때마다 다 수정되기 때문에인가?) 📁 sr..
[React] npm run start vs npm start 차이 실행명령어 npm run start 와 npm start의 차이가 있는지 궁금해서 정리해본 글이다. script 실행 명령어 중 start와 test 스크립트의 경우, 자주 사용되기 때문에 npm run에서 run을 생략해도 무방하다. 즉, 아래 두 커맨드는 동일한 효력을 낸다. 참고사이트 $ npm run start $ npm start 아래 두 커맨드도 마찬가지 이다. $ npm run test $ npm test 개발자들은 대부분 짧은 명령어를 선호하기 때문에 run을 생략하고 많이 사용하는 것 같다. script가 정의되어 있는 경우, npm run start과 npm start는 동일하게 작동된다. 두 명령 모두 package.json 파일 내의 scripts 항목에서 설정된 start 스크립트..
[React] 비밀번호 일치 Form 유효성검사 중 오류 해결(useEffect) 비밀번호 input과 비밀번호 재확인 input 2개의 비밀번호 일치여부 판단 코드를 작성 중 오류가 났다. helperText는 useState로 값이 변경되며 이러한 값이 변하는 조건은 다른 파일에서 props를 사용해 받아온 상황이다. 만약 아래와 같이 코드를 작성해서 helperText값이 변경되도록 하면 한단계 늦게 작동되는 오류가 났다. ▼ 오류 코드 {helperText} 하지만 이렇게 작성할 경우는 바로 변경된 useState값이 적용되었다. ▼ 정상작동 코드 {confirm ? '' : '비밀번호가 일치하지 않습니다.'} 하드코딩으로 한 경우만 바로 적용되어 텍스트를 나타낼 수 있었다. {helperText}가 한박자 늦게 반영되는 이유는 상태(state) 업데이트가 비동기로 이루어지기 ..
[React] 카카오 채널 추가 버튼 구현하기 (feat.TypeScript) kakao 채널추가 방법 2가지 1: 카카오에서 버튼 생성해주는 방법(알아서 이미지를 넣어주고 onClick안하고 처음 호출되어 작동됨) /kakao.Channel.createAddChannelButton 2: 직접 버튼 만들어서 onClick으로 적용 /kakao.Channel.addChannel *SDK는 불러온 상태 import { useEffect } from 'react'; export default function KakaoChannelBtn() { /* kakao 채널추가 방법 2가지 1: 카카오에서 버튼 생성해주는 방법(알아서 이미지를 넣어주고 onClick안하고 처음 호출되어 작동됨) /kakao.Channel.createAddChannelButton 2: 직접 버튼 만들어서 onClic..
[React] 자바스크립트 <script> 태그를 동적으로 불러오기 public폴더 의 index.html 파일의 바디태그 안의 하단에 를 추가해주면 해당 라이브러리를 적용할 수 있다. 하지만 이 방법을 사용할 경우, 자바스크립트를 항상 불러오기 때문에 필요한 컴포넌트에서만 선택적으로 불러올 수 없어 비효율이 발생한다. 따라서 React에서는 useEffect를 사용하여 동적으로 불러오는 방법을 사용할 수 있다. 아래 블로그 내용 중 전체코드 import { useEffect, useState } from "react"; function useScript(src) { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { let scrip..
[React] SNS 공유하기 구현 (feat.TypeScript) 링크를 상대방에게 SNS로 공유하는 기능을 구현하고 싶었다. 페이스북, 카카오, 네이버 공유하기 기능을 구현하려 한다. * 참고로 카카오톡은 개발자에서 허용한 도메인만 링크연결이 가능하며, 페이스북과 네이버는 localhost로 접근이 안돼서 (실제사이트가 아니기때문) naver링크로 연결해두었다. 페이스북 공유하기 예시로 작성한 링크는 아래와 같다. const link = 'https://www.naver.com/'; { window.open( `https://www.facebook.com/sharer/sharer.php?u=${link}`, '페이스북 공유하기', 'width=600,height=800,location=no,status=no,scrollbars=yes' //새창 뜨는 것 조절 (없어도..
[React] StoryBook 배포하는 방법 제작한 컴포넌트를 팀원들과 공유하기 위해 배포는 필수 https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ Storybook Tutorials Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community. storybook.js.org 준비해야 할 것 미리 작성한 컴포넌트 스토리 GitHub 연동 (로컬파일 깃허브와 연동해놓았는지) 배포 Tool Chromatic 1. 크로마틱(Chro..
[React] Story Book 사용법 파일구조 Button.tsx export interface ButtonProps { label?: string; size?: 'sm' | 'md' | 'lg'; backgroundColor?: string; color?: string; handleClick?: () => void; } export default function Button({ label, backgroundColor, size, color, handleClick, }: ButtonProps) { let scale = 1; if (size === 'sm') scale = 0.75; if (size === 'lg') scale = 1.5; const style = { backgroundColor, padding: `${scale * 0.5}..

티스토리툴바