[24.08.22-23] 개인프로젝트 1,2일차 - 포켓몬 도감 만들기

숙련주차 강의 끝내고 드디어 프로젝트 시작~~원래는.. 화요일에 시작하고 싶었는데 챌린지반 과제 중간중간 들어오고 리덕스 실습에서 에러로 막히고 ㅋㅋㅋ ㅠㅠ 하느라 생각보다 늦어졌다..  이번 목표이번에 해보고싶은 거!1) 지난번 개인과제에서 폴더 구조를 고민해보라는 피드백을 받았다. 컴포넌트 폴더 기능/맥락으로 나눠보고 피드백받기!2) 기능 구현 먼저 빨리하고 스타일 -> 리팩토링 적용하기 아자~~  Button, NavButton 컴포넌트지난번에 Button, Input 같은 태그를 한 겹 감싸는 태그를 만들어보고싶다 했었는데 첫 랜딩페이지부터 버튼이 필요해서 한 번 만들어봤다.이번엔 react-router-dom을 이용하는 것이 미션이어서 페이지 이동이 있는데 과제에서는 페이지 이동이 많이 없지만...

• format_list_bulleted 일지
• · 2024. 8. 24.
• textsms

[React] 컴포넌트에 styled-components 로 스타일 적용하기

개인프로젝트로 열심히 기능 구현을 하고 styled-component를 처음 활용해보려는데.. 시작부터 난관에 막혔다 🥹일반적인 div 태그 등에는 잘 적용이되는데 내가 만든 컴포넌트에는 아무리 시도해도 적용이 안됐다겨우겨우 해결하고 원인을 좀 더 알아봤다 ** 튜터님께 여쭤보니 globalStyle을 제외하고는 따로 분리를 잘 하지 않는다고 한다! jsx 파일에서 필요한 곳에서 styled component 생성해서 사용해주면 된다 기존 코드지금 스타일을 적용하려는 컴포넌트는 NavButton이고 이 컴포넌트는 button을 감싸는 Button에 추가 기능이 적용된 컴포넌트다// Home.styles.jsimport styled from "styled-components";import NavButto..

• format_list_bulleted React
• · 2024. 8. 23.
• textsms

[React] useState, useEffect 동작 만들어보기

오늘은 useState와 useEffect를 간단하게 만들어보는 실습을 진행했다.클로저에대해 대강 이해는 해도 어떨 때 쓰는건지 잘 와닿지 않았는데 오늘 조금은 더 알게된 거 같다! 클로저함수와 그 함수가 선언될 때 렉시컬 환경의 조합함수가 생성될 당시의 외부 변수 상태를 기억하고, 이를 함수 호출시에도 계속 접근할 수 있게 해줌 function outer() { let count = 0; // inner함수가 선언될 때의 환경 return function inner() { count++; console.log(`Count: ${count}`); }}const counter = outer();counter(); // Count: 1counter(); // Count: 2counter();..

• format_list_bulleted 챌린지반
• · 2024. 8. 21.
• textsms

RTK - Redux Toolkit

RTK리덕스를 개량한 것ducks 패턴이 오히려 전체적인 코드의 양을 늘리는 것을 개선하기 위해 만든 모듈 설치yarn add @reduxjs/toolkit Redux -> RTKRedux// action valueconst ADD_TODO = "ADD_TODO";// action creatorexport const addTodo = (payload) => { return { type: ADD_TODO, payload };}; RTKredux 사용을 위해 만들었던 modules라는 폴더는 컨벤션상 잘 쓰이지 않음대신 redux > slices > todoSlice.js 의 형태로 쓰인다 1) initialState 선언 2) createSlice()- 객체를 매개변수로 받음- 객체에는 name, ini..

• format_list_bulleted React
• · 2024. 8. 21.
• textsms

[React] redux, payload, ducks 패턴

Redux: 전역상태 라이브러리 필요성어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보내고자할 때 props를 사용함하지만 prop drilling이 일어나면서 그 state가 필요없는 컴포넌트도 props를 전달받고, 전달해야 함또한 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다 Redux를 사용하면 자식에서 만든 state를 부모에서 사용할 수도 있고, 불필요한 전달이 필요없어진다 Global state 와 Local state1) Local state (지역상태)- 컴포넌트에서 useState를 이용해 생성한 state 2) Global state (전역상태)- 컴포넌트에서 생성되지 않음!- 중앙화된 특별한 곳에서 생성된 state들- 컴포넌트가 어디 위치해있던 상관없이 state를 ..

• format_list_bulleted React
• · 2024. 8. 20.
• textsms

[React + Supabase] 설치, 셋팅, 간단한 사용법

패키지 설치 및 셋팅1. 설치yarn add @supabase/supabase-js 2. 프로젝트 만들기supabase 홈페이지 > start your project > 프로젝트 생성 > Table editor > Create new table 보안설정 테스트용이라 해제하지만 production level에서 사용하려면 반드시 체크! Columns를 만든다 > save 3. 클라이언트 초기화src > supabaseClient.js 생성supabase에서 createClient 임포트해서 프로젝트 URL, 인증키를 넣어줘야 함import { createClient } from "@supabase/supabase-js";// 1) project urlconst SUPABASE_PROJECT_URL = "Y..

• format_list_bulleted React
• · 2024. 8. 20.
• textsms