본문 바로가기
  • 삽질하는 자의 블로그
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.
기타. 마크다운에 simple icon으로, 멋진 뱃지를 만들어보자! 필요한것 1. simple icons 페이지에서, 색상 https://simpleicons.org/ Simple Icons 2419 Free SVG icons for popular brands simpleicons.org 2. 사용 방법 코드 전부 예시 첫째로 변경할 것은 역시나 기술스택 이름, 그리고 logoColor = black 에서 "black" 과 "white", "green" 등 색을 결정한다. 그렇다면 최종적으로 예시를 보여준다. 3. 확인 방법 마크다운으로 써서, 내가 잘 썻는지 모르겠다면, 마크다운 변환기를 이용하자. https://www.ttmkt.com/kr/tools/markdown-to-html/ 마크다운 -> HTML 간편 변환 서비스 (Markdown to HTML Conver.. 2023. 1. 4.
2. 텍스트에 그라데이션 만들기 텍스트에, 그라데이션만들기 .header_menu li:hover { background: linear-gradient(// 백그라운드에 그라데이션을 입히고 to left, rgb(0, 204, 255), rgb(0, 26, 255), rgb(212, 9, 227) ); -webkit-background-clip: text;// 옵션을 통해, text에만 적용시킨다. background-clip: text;// 옵션을 통해, text에만 적용시킨다. color: rgba(255, 255, 255, 0);// 이때, Text 의 컬러를 완전투명 하게 만들어서, 색이 잘 보이게한다. } 2023. 1. 4.
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.

티스토리툴바