개발 요구사항 중에 config 파일을 입력하면, 메뉴가 자동으로 생성되는 기능이 있었습니다. react router dom의 Router 안에 Link 메뉴가 생성되는 것은 map 메서드를 통해 생성이 가능하지만 Switch 컴포넌트는 수작업을 해주어야 해야합니다. 하지만 컴포넌트 파일이 없을 경우에는 404페이지가 자동으로 뜨게하고 싶어서 찾아보았습니다. 이런 특수한 사항이 아니라면 역시 권장하는 방법은 아닐것 같습니다. const Pages = importAll(require.context("./pages")); function importAll(r) { let files = {}; r.keys().map((item, index) => { files[item.replace("./", "")] = r..
react 컴포넌트에 websocket 적용하기
코드 ver 0.2 import React, { useEffect, useState, useRef } from "react"; const SocketTest = () => { const [socketConnected, setSocketConnected] = useState(false); const [sendMsg, setSendMsg] = useState(false); const [items, setItems] = useState([]); const webSocketUrl = `ws://websocket.com`; let ws = useRef(null); // 소켓 객체 생성 useEffect(() => { if (!ws.current) { ws.current = new WebSocket(webSocke..
한 컴퓨터에서 github 계정 두개 이상 연동하기
# Personal account-userA Host github.com-userA HostName github.com User git IdentityFile ~/.ssh/id_rsa_userA # Personal account-userB Host github.com-userB HostName github.com User git IdentityFile ~/.ssh/id_rsa_userB # Personal account-userA Host github.com-userA HostName github.com User git IdentityFile ~/.ssh/id_rsa_userA # Personal account-userB Host github.com-userB HostName github.com Use..
redux 강의 기본 핵심 튜토리얼 5탄 - redux data 사용하기
단일 게시물 나타내기 Redux 스토어에 새 게시물을 추가 할 수있는 기능이 있으므로 게시물 데이터를 다양한 방식으로 사용하는 몇 가지 기능을 추가 할 수 있습니다. 현재 게시물 항목이 기본 피드 페이지에 표시되고 있지만 텍스트가 너무 길 경우 콘텐츠의 일부만 표시됩니다. 자체 페이지에서 단일 게시물 항목을 볼 수있는 기능이 있으면 도움이 될 것입니다. 단일 게시물 페이지 만들기 먼저 게시물 기능 폴더에 새 SinglePostPage 구성 요소를 추가해야합니다. 페이지 URL이 /posts/123과 같은 경우 React Router를 사용하여이 구성 요소를 표시합니다. 여기서 123 부분은 표시하려는 게시물의 ID 여야합니다. // features/posts/SinglePostPage.js import ..
redux 강의 기본 핵심 튜토리얼 4탄 - redux data flow
이번 파트에서는 createSlice를 사용해서 reducer로직의 slice를 store에 추가하는 방법과 useSelectore, UseDispatch 사용밥법에 대해서 알아보겠습니다. 프로젝트 설정 react와 redux가 설정되어 있고, 기본적인 css와 API 요청을 가능하게하는 fake REST API가 있는 프로젝트 예제입니다. 이를 토대로 배워보도록 하겠습니다. 코드는 CodeSandbox를 통해 확인할 수 있고, fork를 해서 진행 할 수 있습니다. 또는 github 저장소에서 clone을 해도 됩니다. codesandbox.io/s/github/reduxjs/redux-essentials-example-app/tree/master/?from-embed reduxjs/redux-esse..
redux 강의 기본 핵심 튜토리얼 3탄 - redux app 구조
이전 포스트에서 redux의 용어와 개념에 대해서 설명했습니다. 이번 포스트에서는 실제 코드 예제를 살펴보고 어떻게 동작이 되는지 살펴 보겠습니다. 카운터 앱 예제 살펴볼 샘플 프로젝트는 버튼을 클릭 할 때 숫자를 더하거나 뺄 수 있는 작은 카운터 앱입니다. 간단하지만 react + redux 애플리케이션이 어떻게 동작하는지 알 수 있습니다. 이 샘플 프로젝트는 cra의 공식 redux템플릿(github.com/reduxjs/cra-template-redux)을 사용했습니다. redux-toolkit을 사용하여 redux store 및 로직을 만들고 react-redux(react-redux.js.org/)를 사용하여 redux store와 react 컴포넌트를 함께 연결 하는 표준 redux 구조로 구..
VS CODE 확장 기능 2탄 (VS CODE Extensions)
vs code extentions에 대해서 작성한 글에 이어서 현재 제가 사용하고 있는 확장기능에 대해서 작성합니다 1. HTML Snippets 확장기능 이름처럼 html snippet으로 html이나 jsx 파일에서 태그들을 쉽게 작성할 수 있게 해줍니다. 그림처럼 태그를 입력한 후 tab키를 누르면 코드가 작성됩니다. 만약 실수로 창을 껐다면 ctrl + space를 누르면 창이 다시 나타납니다 2. Reactjs code snippets react를 사용할 때 컴포넌트 등을 쉽게 만들 수 있는 스니펫입니다. 저는 주로 rsc 단축어를 많이 사용합니다 3. Path Intellisense Path Intellisense는 path를 가이드해주는 확장기능입니다. 4. Prettier - Code fo..
redux 강의 기본 핵심 튜토리얼 2탄 - redux를 사용하기 위해 알아야하는 용어 및 개념
이번 장에서는 리덕스를 사용하기 위해 알아야하는 용어와 개념에 대해 알아보겠습니다 state 관리 간단한 react counter 컴포넌트를 살벼보겠습니다. 버튼을 누르면 컴포넌트의 state가 증가합니다 function Counter() { // State: a counter value const [counter, setCounter] = useState(0) // Action: code that causes an update to the state when something happens const increment = () => { setCounter(prevCounter => prevCounter + 1) } // View: the UI definition return ( Value: {count..
redux 강의 기본 핵심 튜토리얼 1탄 - redux란 무엇일까?
이 글은 리덕스 docs를 해석, 요약 한 글입니다(ko.redux.js.org/tutorials/essentials/part-1-overview-concepts) 리덕스 docs에서는 redux essentials(리덕스 핵심)을 살펴본 후 튜토리얼로 진행하는 것을 권장합니다 2탄 - 리덕스를 사용하기 위해 알아야하는 용어 및 개념 redux 기본 핵심 튜토리얼 2탄 - redux 용어 및 개념 이번 장에서는 리덕스를 사용하기 위해 알아야하는 용어와 개념에 대해 알아보겠습니다 state 관리 간단한 react counter 컴포넌트를 살벼보겠습니다. 버튼을 누르면 컴포넌트의 state가 증가합니다 f jcon.tistory.com 3탄 - redux app 구조 redux 강의 기본 핵심 튜토리얼 3탄..