분류 전체보기 (49) 썸네일형 리스트형 예제로 알아보는 Redux 사용법 (1) Redux toolkit 기존의 리덕스는 왜 안쓰고 Redux toolkit을 사용하는 걸까요???? 왜 리덕스 툴킷을 사용할까요? 리덕스 대신에 리덕스 툴킷을 사용하는 이유는 무엇일까요 ? 저는 이 이유를 리덕스 툴킷 공식문서에 가져왔습니다. 저 또한 리덕스를 사용하면서 react-redux , redux 패키지를 설치해야되고 , 리덕스에서 액션 변수와 같은 상용구도 지금은 2개인데 10개 , 100개 , 1000개되면 상용구 코드가 많이 필요하게 되어서 간편화된 리덕스 툴킷이 좋습니다. 1. 리덕스 툴킷으로 만든 전역 상태관리 저장소 combineReducer >>> createStore 의 과정이 간소화해졌습니다. import { configureStore } from "@reduxjs/t.. 예제로 알아보는 Redux 사용법 (1) Redux 오늘 예제는 모달 열기와 닫기입니다.이번 모달은 한 페이지 뿐만 아니라 다른 페이지에서도 사용될수 있다고 가정합니다. [1] 다음 모달 열기 버튼이 있습니다. 저는 위에서 모달버튼의 현재 상태를 한 페이지 뿐만 아니라 다른 페이지에서도 쓰이기에 전역상태로 관리합니다. [2] 프로젝트에서 리덕스 폴더 구조를 세팅합니다. 1. store 폴더를 만듭니다.2. config 폴더를 만듭니다. 전역 상태관리 저장소인 store 파일을 보관합니다. 3. modules 폴더를 만듭니다. 리덕스 모듈을 보관할 파일을 보관합니다. [3] 전역 상태 관리 저장소를 만듭니다. >>> 액션 변수 , 액션 함수 , 리듀서가 담겨있는 파일을 만듭니다. >>> 루트 컴포넌트에 전역 상태관리 저장소를 Provider.. <React.StrictMode> 는 뭘까 React.StrictMode에 대해서 쓸모를 못느끼고 지우는 사람도 있다. 나는 리액트에 React.StrictMode는 왜 있는가가궁금해서 살펴보게 되었습니다. [1] React.StrictMode는 왜 있는 것일까 ? 리액트 공식문서에서는 다음과 같이 설명을 하였습니다. StrictMode 는 개발 초기에 발생할 수 있는 버그들을 찾아줍니다. 라고 나왔습니다. [2] StrictMode는 리액트 코드에서는 어떤 모습일까요 index,js 에서 App 컴포넌트를 감싸고 있습니다. 그러면 여기에서만 쓰이는 것일까요? 아니요, 리액트 공식문에서는 어플리케이션의 다른 부분에서도 사용이 가능하다고 말합니다. function App() { const teams = [ { .. tailwindCSS로 파일 업로드 버튼 스타일링 tailwindCSS로 파일 선택부분을 스타일링하고 싶었습니다. 그래서 tailwindCSS file upload Button 이라는 검색어로 입력을 해보니 스택오버플로우에서 다음과 같이 나왔습니다.How to style HTML file input using Tailwind CSS? - Stack Overflow How to style HTML file input using Tailwind CSS?When I encountered this issue it took me about 20 minutes to find the answer in an article here: https://www.kindacode.com/snippet/how-to-style-file-inputs-with-tailwind-css.. < 정리 > 웹에 대해서 인터넷 전 세계적으로 컴퓨터와 기기들이 통신하여 정보를 주고받을 수 있는 거대한 네트워크를 의미합니다. 인터넷이 있음으로써 할수 있는 일 1. 이메일을 보내고 받기 2. 웹사이트 방문후 온라인 정보 찾기 웹 인터넷을 통해 컴퓨터 네트워크에서 정보공유하는 시스템 1. 웹사이트 = 특정 주제나 목적을 가진 여러 웹페이지 모음 , html(hyper text markup language) 라는 언어로 웹 페이지가 만들어져 있습니다. - 웹 사이트는 다음을 의미합니다.예시) 게시판 -> 게시글 목록 페이지... 게시글 상세 페이지... - html에서 ht(hyper text)는 무엇을 의미하나요 예시 .. 오늘 내가 진행한 것 깃에서 나의 브랜치를 바꾸고 싶다면.... branch -m 명령어를 이용해봅시다. > git branch -m 프로젝트 계획을 다음과 같이 잡았습니다. https://fresh-border-4d5.notion.site/Todo-Calender-789e797d0bcf4c959975795cfd5dafd0 Todo Calender | Notion 어디서 감명 받았나? fresh-border-4d5.notion.site json-server 시작 명령어 간편화 & 실행 점검 제가 블로그에 작성했던 글을 참고하였습니다. [1] 다음과 같이 등록한 이유는 json-server 실행 명령어를 일일이 타이핑하는 것을 방지하기 위해서 다음 명령어를 사용했습니다. 그리고 db.json를 안하면 안됩니다. 그러면 다음과 .. Github Projects 를 이용해서 이슈 생성하기 / 리뷰 받기 들어가기전 Github Projects를 사용하는 이유 깃허브 프로젝트의 현재 진행 상태를 시각화하여 , 프로젝트를 직관적으로 관리할수 있다는 점이 좋습니다. 어떻게 생겼는가? 이슈를 어떻게 생성하는가 ? 만약에 팀프로젝트라면 팀원분들의 초대가 있어야 됩니다. 개인이서 만든다면 그럴필요가 없겠지요 이것은 연습용으로 저희 프로젝트 팀에서 만든 깃허브 프로젝트입니다. [ 1 ] 일단은 이슈를 생성할 레포를 다음과 같이 # 하고 CTRL + ENTER 해주시고 선택해주세요 그러면 다음은 이슈생성할 레포 선택후 화면입니다. [ 2 ] 다음과 같이 repo:issue_project 후에 마우스를 가져다 클릭하면 다음과 같이 Create new issue 가 나오는데 클릭해줍시다. [ 3 ] 다음과 같이 새 이슈를.. Nextjs + Supabase와 연결하기 / 데이터 뿌려주기 Supabase 프로젝트가 생성되었다고 하고 Nextjs 에서 Supabase 데이터를 불러오시죠 들어가기전에 Supabase에 대해서 알아보시죠 [ 1 ] Supabase 란? 수파베이스는 PostgreSQL 데이터베이스를 기반으로 하며 데이터베이스, 인증, 파일 스토리지, 서버리스 기능 등을 제공 f하는 오픈 소스 플랫폼입니다. [ 2 ] Supabase 설정하기 ( 1 ) VsCode 프로젝트를 세팅 / supabase 가입 하고 프로젝트 생성해주세요 ( 참고 를 기반으로 해주세요 ) [ 3 ] env.local 생성 프로젝트 루트 디렉토리에 생성해주셔야 합니다. 그리고 .gitignore에 다음과 같이 등록해주세요 env.local 파일 만들어주고 , 서버 URL 과 API 키를 작성해주세요 다음.. 오늘의 정리 nextjs 설치 중 다음과 같은 에러 PS C:\Users\andan\Desktop\today> npx create-next-app@latest Need to install the following packages: create-next-app@14.1.4 Ok to proceed? (y) y √ What is your project named? ... my-app The directory my-app contains files that could conflict: .prettierrc db.json node_modules/ package-lock.json package.json public/ README.md src/ Either try using a new directory name, or remo.. TIL : RTK 이용하기 RTK는 왜 나왔을까? RTK 공식 문서에 따르면 "Configuring a Redux store is too complicated" 리덕스에서 세팅하는데 복잡하다. "I have to add a lot of packages to get Redux to do anything useful" 리덕스에서 사용하려면 많은 패키지가 필요합니다. "Redux requires too much boilerplate code" 리덕스는 많은 보일러플레이트 코드를 요구합니다. 3가지 이유 덕분에 세상에 나오게 되었습니다. 그리고 또한 리덕스를 좀 더 간편하게 사용하는데 도움을 주는 도구모음이라는 것도 알게 되었습니다. 리덕스 툴킷 들어가기 ( 0 ) 설치하기 $ npm install @reduxjs/toolkit (1) .. 이전 1 2 3 4 5 다음
