본문 바로가기
  • 삽질하는 자의 블로그
18. [기능 업데이트] useSelector 없이, Store 의 값 가져오기 - 달력에서, InitialState 사용하기 달력의 Initial-State 파일인, event-initial.tsx 파일은, 리액트 컴포넌트 파일이 아니었다. 그러므로, useSelector 를 사용할 수 없었고, 초기 데이터를 가져올 수 없어, App.tsx 에서 값을 받아, props 를 통해 달력에 초기 값 없이 새 값을 넣는 코드를 만들었다. 하지만, 생각을 잘못했다. (물론 그렇게 event 를 넣어야, 계속 업데이트 되는 사실은 맞지만...) 이번에 리덕스를 다시 공부하며, 결국 Redux 도 하나의 저장소와 다름 없고, 굳이 훅을 사용하여 값을 가져올 필요는 없다는 결론에 도달하여 검색했다. 그래서, 일반 자바스크립트 파일 안으로, Redux 안의 Store 값을 가져올 수 있다는 사실을 알아냈다. import { EventInput.. 2023. 1. 11.
17. [기능 업데이트] 달력의 delete 기능 업데이트. 마무리는 무슨 ... 들어가기 전에, 이번에 클래스에 대해 배운 것들 총정리 1) 상위컴포넌트(App.tsx) 로 부터 하위 컴포넌트(클래스형) 으로 함수를 넘긴다. 2) 클래스 컴포넌트에서는, interface Props {} 로, 넘겨받을 함수의 타입을 지정한다. 3) 클래스의 interface xxxAppState {} 를 통해, State 로 사용할 타입을 정의한다. 3) 클래스의 메인클래스( export default class Calendar extends ...으로 시작하는) 안의 state: ... = {} 를 통해, state를 초기화한다. 4) 클래스의 this.setState() 를 통해, state 에 값을 넣는다. 이때, render 보단 밖에서, 함수를 정의하고, 함수를 사용하는 형태로 state 를.. 2023. 1. 5.
16. 프로젝트를 마무리하며 이번 프로젝트로 배운 것들이 참 많았다. 0. React 의 여러 기능과, 생명주기를 깊게 이해하고, 훅들의 사용을 다시한번 점검했다. 1. TypeScript 와 React-router, 그리고 Redux-toolkit 을 한번에 다루며, 필요한 타입을 정하고, 사용하는 방법을 익혔다. 2. css 애니메이션과, Animated Css, React-Transition-group, react-animation-on-scroll 을 통해, 애니메이션 효과에 대해, 더욱 깊은 이해를 하게 되었다. 3. Auth 의 과정과 토큰의 활용, react-cookie 를 통한, 쿠키의 사용 을 익혔다. 4. "모듈 형식" 의 컴포넌트에 대해 이해하였다. 5. Redux-toolkit 의 Thunk 에 대해 더 알게되.. 2023. 1. 4.
15. 배포하기. with. Vercel 배포하기 전에 할 일은 이렇다. 1. 코드점검 2. 기능 점검 3. 최적화 1. 코드 점검 console.log() 등의 쓸모없는 코드를 지우고, 혹시 모를 위험한 Key 들 ( 비밀번호라던가, 숨겨져있는 API Key 라던가...) 을 환경변수로 숨긴다. 2. 기능 점검 실제로 기능이 동작하는지, 눌러보며 점검한다. 검사 툴이 있지만, 아직은 쓸 줄 모른다... 3. 최적화 레이지 로딩과 지연 로딩을 사용해, 잘 들어가지 않는 페이지를 사전에 다운로드 받지 않도록 한다. 넘겨받는 값이 변하지 않는 "큰 라우터" 가 있다면, React.memo() 를 활용하여, Re-Render 되지 않게 한다. 이미지 크기를 줄여, 데이터를 낭비하지 않게 한다. 이미지 크기를 줄이는 것 이외에 할 것은 딱히 없었다. .. 2023. 1. 4.
14. 미디어쿼리, 모바일용 레이아웃 헤더 만들기 모바일용 헤더를 만드는 방법은 여러가지가 있다. 해본 것들로는 1. "하나의 레이아웃 헤더 컴포넌트" 안에서, 모바일용과 윈도우용 전부 만들고, 미디어쿼리로, 스타일 내용을 변경하기 2. "따로 컴포넌트를 만들어서" 메인 레이아웃에서 미디어쿼리로, 선택하기 나는 두번째를 선호한다. 가령 이런식이다. import LayoutHeader from "./layout-header"; import LayoutHeaderForM from "./layout-header-for-mobile"; import LayoutFooter from "./layoute-footer"; import styles from "./layout.module.css"; import LayoutHeaderModalFo.. 2023. 1. 4.
13. 달력 라이브러리 [Full-Calendar] - 스타일링 지정하기 반응형 웹을 만들기 위해 media-query 를 사용해야한다. 딱 하나 걸리는 것이 바로 저 캘린더 자식이다. 1. 우선 DOCS 를 본다. https://fullcalendar.io/docs/css-customization CSS Customization - Docs | FullCalendar This article describes the various techniques for customizing the CSS of your calendar. When NOT to use CSS customization Firstly, you should NOT use CSS customization if a setting already exists for what you want to achieve. For e.. 2023. 1. 4.
12. 달력 라이브러리 [Full-Calendar] 를 이용하여, 식단 적는 달력 만들기. [feat. 수많은 시행착오...] 개인별로 식단을 달력에 적고, 그 달력을 확인하는 기능이 필요했다. 여러가지 달력 라이브러리들을 찾아본 결과 Full-Calendar 가 가장 쓰기 좋고, 편해보여 가져와보았다. 1. 달력 라이브러리 : 풀 캘린더 ( Full-Calendar ) 리액트 DOCS https://fullcalendar.io/docs/react React Component - Docs | FullCalendar FullCalendar seamlessly integrates with the React JavaScript framework. It provides a component that exactly matches the functionality of FullCalendar’s standard API. This packag.. 2023. 1. 4.
11. [ 기능 ] FIRE-BASE AUTH 를 사용한, 로그인 작업 시작, with. env 를 사용하여, 중요한 개인정보(API KEY) 숨기기 열심히 React 를 다시하기 위한 프로젝트이다. 서버측 코드를 사용하고 싶으면, 따로 Node 를 만들던가, Nextjs 를 사용하겠지만 React 에 집중하기 위해 파이어 베이스를 사용하여, DB 와 AUTH 를 사용해보았다. 파이어 베이스 AUTH 에서는, 기본 E-mail 기능을 사용했으며 GoogleOAuth 도 시도해 볼 예정이다. 1. 파이어 베이스 AUTH https://firebase.google.com/docs/reference/rest/auth?hl=en&authuser=0#section-create-email-password Firebase 인증 REST API firebase.google.com 2. 환경변수를 사용하여, 파이어베이스의 API KEY 숨기기 환경변수를 사용하기 위해.. 2023. 1. 4.
10. *** [ 기능 ] FireBase DB 에서 데이터 가져오기, with. Thunk 액션생성자 ( 리덕스 툴킷에서 타입스크립트와 함께 Thunk 액션생성자를 사용하는 방법) 들어가기 전에 필수적인 요소 1. 리덕스 툴킷에서, 비동기 함수를 사용하기 위한 Thunk 액션 생성자의 생성 (Slice 의 reducer 는 반드시 순수함수 이므로) 2. Thunk 액션 생성자 를 생성할때, 필요한 Type 지정과 useDispatch 를 사용하는 방법 ( 리덕스 툴킷에서 타입스크립트와 함께 Thunk 액션생성자를 사용하는 방법) 3. Thunk 액션 생성자 를 사용할때, 미리 정의한 AppDispatch 를 이용하여, dispatch 를 진행하는 방법 ** KeyPoint [1. 리덕스 툴킷에서, 비동기 함수를 사용하기 위한, Thunk Action 생성자의 생성 ( Slice 의 Reducer action 은 반드시 순수함수 이므로) ] [2. Thunk Action 생성자를 생.. 2023. 1. 4.
9. [ 기능 ] FireBase DB 를 이용하기 위해, 데이터 마이그레이션 1. 데이터의 틀을 정한다. 1) 운동방법 [how-to-workout Page] -> [8개의 부위 Component 들] -> [각 Item은 DesCard 에 데이터] [DB "exercise"] 운동파트 : chest, back, shoulders, biceps, triceps, abs, legs, glutes 카테고리 : part, name, img, des:[{text}], warn:[{text}] [ {part:chest, name:체스트프레스, img:"...", des : [{text:"..."}, { text:"..."}], warn : [{text:"..."}, { text:"..."}], }, {part:back, name:풀업, img:"...", des : [{text:"...".. 2023. 1. 4.
8. [ 기능 ] 선택한 selected State 를 바탕으로 값 filter하기 const [selected, setSelected] = useState("탄수화물"); const [foodsData, setFoodsData] = useState([ { id: 1, ... price: 1000, }, { id: 2, ... }, ]); const [selectedFoods, setSelectedFoods] = useState([]); // filter 될 FoodData useEffect(() => { // filter 되는 로직 setSelectedFoods(foodsData.filter((food) => food.majorNutri === selected)); }, [selected]); return ( {selectedFoods.map((food) => ( // "selecte.. 2023. 1. 4.
7. 기본 UI 만들기(7) - [ 버튼 누르면, 양옆으로 하이라이트가 부드럽게 움직이는 셀렉터, 만들기] 컴포넌트 const FoodsList = () => { const [selected, setSelected] = useState("탄수화물"); const [foodsData, setFoodsData] = useState([ { id: 1, ... price: 1000, }, { id: 2, ... } ]); let selected_style = styles.selected_hydro; // 초기 하이라이트 백그라운드 조건 let text_highlight_hydro = ""; // 초기 텍스트 조건 let text_highlight_protein = ""; // 초기 텍스트 조건 let text_highlight_fat = ""; // 초기 텍스트 조건 if (selected === "탄수화물") { .. 2022. 12. 30.

티스토리툴바