console.log(“JongHoon”)

설치한 패키지- RTK / redux- react-router-dom- reset-css- tailwind- uuid v4- eslint , pretier 충돌 방지- supabase          회의를 진행하면서, 팀원분들이 와이어프레임 작성해주시는 동안 팀 노션, 프로젝트 셋업을 진행했는데supabase 연결 확인 중 데이터는 올바르게 불러온 것 같았으나 빈 배열이 반환되었다 //연결 테스트 코드function Home() { useEffect(() => { const fetchData = async () => { const { data, error } = await supabase.from('POSTS').select('*'); if (error) { con..

{ "trailingComma": "es5", "tabWidth": 2, "semi": true, "singleQuote": true, "arrowParens": "always", "printWidth": 120}

BaaS(backend as a servise) : 서비스형 백엔드 웹, 앱개발을 쉽고 빠르게 할  수 있게 도와주는 "클라우드 기반의 백엔드 서비스"    인기 있는 BaaS 플랫폼 - Firebase : 구글 운영 플랫폼. 실시간 데이터베이스, 사용자 인증, *애널리틱스 등을 쉽게 이용할 수 있다- Parse : 자유도가 높은 오픈 BaaS. 커스터마이징이 가능하다는 장점- AWS Amplify : 강력한 *AWS 기반으로, 복잡한 백엔드 작업을 쉽게 할 수 있게 도와준다  * 애널리틱스 : 데이터 수집부터 실용적인 인사이트 도출에 이르는 "데이터 분석의 모든 기능"을 일컫는 말.애널리틱스 툴을 사용하면 데이터를 더 쉽게 해석하고, 다양하게 활용하여 마케팅 캠페인 성과를 개선할 수 있다.* AWS(아..

memoization , custom hook 가 없어도 기능은 잘 되어야한다.최적화가 없이 작동이 안 된다면, 잘못 작성한 코드일 가능성이 높다-최적화는 마지막에 진행  memoization 불필요한 리렌더링 막기 *캐싱 : 자주 사용하는 데이터를 저장해두고, 필요할때 빠르게 접근할 수 있게 하기 위해 사용  웹개발에서의 사용 예 : - 첫 렌더링 시 불러온 데이터를 브라우저에 캐싱해두고, 필요할 때 재사용( 브라우저 캐싱)- 캐싱은 자주 사용하는 데이터를 더 빠르게 접근할 수 있는 위치에 저장한다  react 공식 문서 - useContexthttps://react-ko.dev/reference/react/useContext useContext – ReactThe library for web and ..

기존 자바스크립트와 동일하게, page 설정해주기(main)   main 으로 저장 후 잠시 기다리면, https://깃허브id.github.io/리포지토리명 의 형태로 호스팅 주소가 설정된다     1. git remote -v 로 레파지토리 연동 확인 후, vite.config.js 파일 수정  defineConfig 내부에base: "/레파지토리 이름/" 추가  2. 패키지 설치, package.json 파일 수정 //터미널yarn buildyarn add gh-pages  이렇게 패키지를 설치해주면 dist 폴더가 생성된다 //package.json 내부 "scipts" "build": "vite build", "predeploy": "yarn build", "deploy": "gh-p..

(완성 코드)//textSlice.js//완성 코드import { createSlice } from "@reduxjs/toolkit";const textSlice = createSlice({ name: "texts", initialState: () => (localStorage.getItem("texts") ? JSON.parse(localStorage.getItem("texts")) : []), reducers: { addText: (state, action) => { return [action.payload, ...state]; }, },});export const { addText } = textSlice.actions;export default textSlice.redu..

RTK(Redux Tool Kit)  redux를 사용하기 위해 작성했던 ducks 패턴 요소들이 전체적인 코드 양을 늘린다는 불만이 늘어나면서, 이를 redux 팀에서 수용하여 코드는 더 적게, redux를 더 편하게 쓰기 위한 기능들은 흡수해서 만든 것이 redux tool kit이다 (줄여서 RTK라고도 부른다) - redux tool kit은 새로운 것이 아니라, 이 전에 학습한 redux의 구조와 패러다임(이론적 체계)이 동일. - 일일히 생성해야했던 ducks 패턴이 어느정도 자동화 되어있다- 컴포넌트에서 useSelector를 사용해야 하는 것은 동일- 모듈 파일 부분이 다르다  툴킷 설치 후, 어느 부분이 달라졌는지 한번 살펴보자   rtk 설치yarn add @reduxjs/toolkit..

5/20~5/26   5/20. 월  알고리즘 강의: 풀이 접근 방식 재 학습타임어택 진행 : 계산기(구현실패-재학습완료), 투두리스트(구현성공)   5/21 화 과제 제출했던 것들 피드백 반영하여 수정 - 투두리스트 : 불필요한 주석 제거, 조건식의 true false 비교부분 직접 입력하지 않아도 되는 부분 제거, readme작석https://github.com/jonghoon7431/todo_assignment GitHub - jonghoon7431/todo_assignmentContribute to jonghoon7431/todo_assignment development by creating an account on GitHub.github.com- 영화 검색 사이트 : 호이스팅 발생으로 인한 가..

기존 redux의 개념을 정리해보고싶어서 작성. RTK를 사용해야한다.original redux는 더이상 유지보수되지않고, 리덕스 팀에서도 RTK 사용을 권장   redux(1)[https://taro156.tistory.com/76] Redux(1)개념,기본 설정redux : "중앙 state 관리소"의 사용을 가능하게 해주는 전역 상태 라이브러리(패키지)   redux가 필요한 이유 1. useState 의 불편함- state를 다른 컴포넌트로 보내주어야할 때 , props를 사용하여 한 단taro156.tistory.com에서 조회 기능까지 확인한 counter 앱을 활성화하기 위해, store의 값을 수정하는 함수가 필요하다.이를 위해 redux의 사이클에대해 먼저 살펴보자   도식화 1. vie..

기존 redux의 개념을 정리해보고싶어서 작성. RTK를 사용해야한다.original redux는 더이상 유지보수되지않고, 리덕스 팀에서도 RTK 사용을 권장   redux : "중앙 state 관리소"의 사용을 가능하게 해주는 전역 상태 라이브러리(패키지)   redux가 필요한 이유 1. useState 의 불편함- state를 다른 컴포넌트로 보내주어야할 때 , props를 사용하여 한 단계씩 자식 컴포넌트에게 내려주어야한다(전역적으로 사용해야 할 state의 경우 props drilling 발생)- 자식 컴포넌트에서 부모 컴포넌트로는 값을 보낼 수 없다(단방향. 위>아래)  이 불편함을 해소할 수 있는 redux의 장점- state를 공유하고자 할 때 중간에 의미 없는 컴포넌트 거침 단계가 필요 ..