리액트 : 심화 프로젝트 기획

1. Code convention 컴포넌트 페이지 컴포넌트 끝에 Page붙이기 ex) HomePage.jsx , LoginPage.jsx 확장자명 .jsx 사용 작성한 styled-component는 컴포넌트 최하단에 위치시키기! styled-component 스타일 컴포넌트 이름 맨앞 글자 Sc로 시작 필요한 경우에만 이름에 기능포함시킨다. ex) => 자바스크립트 파일 카멜케이스로 작성 ex) common.js configStore.js 함수 모든 함수의 이름은 동사형으로 사용하기 ex) addComponent , checkIsDone 함수는 화살표 함수로 통일하기 카멜케이스로 작성 변수 카멜케이스로 작성 상수는 모든 대문자로 사용, 단어 구분이 필요하면 언더바로 작성 ex)const MAX_VALU..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 26.
• textsms

Recoil : 리액트 전역상태관리 라이브러리

*상미튜터님 리코일 강의* 1. Atoms (데이터 변수 하나 만들어 놓기 => 다른 곳에서 사용 하기) 2.Selectors (atoms 값을 변형해서 사용 가능) * 리덕스와 차이점 1) 리덕스 : 보일러 플레이트 코드를 많이 작성해야함 2) 리코일 : 직관적이고 간단한 구조 (React의 useState 훅과 유사) 1. 설치 yarn add recoil 2. 설정 프로파이더 같은 recoilRoot로 감싸주기 -> 최상위 루트 컴포넌트를 ( App.jsx : Router 설정하는 구간에) function App(){ return 3. 전역관리를 위한 변수 atom - userId라는 이름을 다른 곳에서 쓸 건데, 여러 변수 중에 구분값은 키(key)야, default는 처음 초기값 느낌이야 4. ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 21.
• textsms

타입스크립트 :이쁜 alert 모달창 sweetalert 사용하기

SweetAlert2 SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 1. VS code 패키지 설치 yarn add sweetalert 2. import 하기 import swal from 'sweetalert'; 3. 삭제 확인 창 const removeHandler = async (e: React.MouseEvent, id: string) => { try { swal({ title: '삭제하시겠습니까?', text: '삭제된 데이터는 복구할 수 없습니다.', icon: 'warning', butto..

• format_list_bulleted TypeScript
• · 2023. 12. 18.
• textsms

리액트 : 파이어베이스 데이터 저장 후 홈 화면 리랜더링하기

새 글을 추가시, 파이어베이스에 데이터는 저장되는데 홈 화면에서 새로고침을 해야 데이터가 보이는 상황 1) WriteNewFix.jsx - dispatch(add(newData)); 새글 작성시 데이터 추가하는 부분에서 dispatch를 사용해서 리덕스로 상태값 변경요청 2) fixList.js import {createSlice} from '@reduxjs/toolkit'; const initialState = []; const listSlice = createSlice({ name: 'fixList', initialState, reducers: { setList: (state, action) => { return action.payload; }, addList: (state, action) => { ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 11.
• textsms

리액트 : 카카오 지도 Web API 사용하기

https://apis.map.kakao.com/web/ 1. 토큰발급 후 : Guide > 지도를 띄우는 코드 작성 > 전체 코드 확인 ( 필요에 맞게 수정해서 사용) 1) sript태그는 index.html 부분에 추가하였음 const {kakao} = window; 2) kakao 객체를 사용하기 위해, window 객체로부터 스크립트에서 로드한 kakao api를 가져와야하기에 상단에 작성 useEffect(() => { const container = document.getElementById('map'); const option = { center: new kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new kakao...

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 8.
• textsms

리액트 : useState + onChange 중복 줄이기

1. 변경 전 코드 const [title, setTitle] = useState(''); const [content, setContent] = useState(''); const [selectedFile, setSelectedFile] = useState(''); const [previewFile, setPreviewFile] = useState(''); return ( setTitle(event.target.value)} placeholder="제목을 입력해주세요." maxLength={30} > { setContent(event.currentTarget.value); }} > : (selectedFile + previewFile은 동일해서 생략) ▶ useState + onChange 중복과 사용이..

• format_list_bulleted JavaScript
• · 2023. 12. 6.
• textsms