React-Redux 패키지와 Hooks 사용 React-Redux 패키지 설치 Provider 컴포넌트 사용 (내용 추가 필요) React-Redux에서 제공하는 Provider 컴포넌트를 리액트의 최상위 컴포넌트로 정의한다. index.js /redux/index.js useSelector state 값만 인수로 받는다. → Store의 상태에 접근해서 데이터를 가져온다. 리덕스의 Store를 subscribe하고 액션이 dispatch 될 떄마다 selector를 실행한다. 그리고 useSelector()는 기본적으로 형변환 비교(==)가 아닌 엄격한 비교(===)를 사용한다. useDispatch 컴포넌트 내에서 dispatch를 사용할 수 있게 해준다. 이 dispatch를 이용해 action을 발생시킨다. 참고

Redux 란? 리덕스는 간단하게 말해서 자바스크립트를 위한 상태 관리 프레임워크이다. Action이라 불리는 이벤트를 통해 프로젝트의 상태를 관리하고 업데이트하는 패턴 및 라이브러리 상태를 예측할 수 있는 방법으로만 업데이트를 할 수 있도록 규칙을 정해 전체에서 사용하는 중앙 집중식 상태 저장소 📚 Redux를 사용하는 이유 → Redux로 상태를 관리하기 위해서 나의 경우에는 React 프로젝트를 진행하며 각 컴포넌트 간에 값을 props로 전달을 하고 있던 중 하위에 전달해야하는 컴포넌트 deps가 증가하게 되면서 Redux를 접하게되었다. 리덕스를 사용할 경우 Store라는 외부에 값이 저장되어 상태가 관리되기 때문에 프로젝트의 많은 부분에서 사용되는 전역 상태를 관리하는데 도움이 된다. Redux 사용 장점 Redux 주요 개념 단방향 데이터 흐름 Action이 Dispatcher를 통해 Store에 전달되는 흐름 Action , 속성으로 구성되고 상태값은 오직 해당 객…

블로그 포스팅을 하면서 마크다운 문법을 사용하는데 문법 공부할 겸 항상 여러 사이트에 찾아보기 번거로워서 정리를 해보기로 했다. 줄바꿈 스페이스바 2번 + Enter 중첩된 구조 중첩된 구조를 표현할 때 스페이스바를 2번씩 추가를 하면 된다. 첫번째 두번째 (스페이스바 2번) 세번째 (스페이스바 4번) Header h1 h2 h3 h4 h5 h6 h1과 h2는 아래와 같이 표현할 수도 있다. 텍스트 강조 강조된 텍스트 취소선 취소된 텍스트 밑줄 밑줄 있는 텍스트 글자 색 하늘색 글씨 코드 블록 inline 코드 블록 이것은 입니다 코드 블록 링크 링크만 있는 inline 링크 https://hwajin-blog.netlify.app/ 설명 있는 inline 링크 나의 개발 블로그 동일 파일 내에서의 문단(헤더) 이동 링크 설명 있는 inline 링크 문단(헤더) 링크 복사 헤더 제목 문자열을 복사해서 에 복사한다. 특수 문자를 제거한다. 공백을 로 변경한다. 대문자는 소문자로 변…

USEEFFECT 2.0 Introduction to useEffect componentWillUnmount, componentDidMount, componentWillUpdate와 비슷 이 모든 것이 같은 function. react hooks로 작업할 때 이 function이 중요하다. useEffect는 2개의 인자를 받는데 첫번째는 function으로서의 effect. componentDidUpdate와 기능이 비슷하다. useEffect는 componentDidMount 역할을 해서 새로고침 시 sayHello()가 실행된다. 그렇지만 componentDidUpdate 역할도 해서 클릭 시 sayHello() 실행 두번째 인자는 dependency의 deps. 만약 deps가 있다면 effect는 (deps) 리스트에 있는 값일 때만 값이 변하도록 활성화 될 것이다. useEffect()가 deps 리스트에 있는 값이 변할때만 실행되게 한다. componentWillUpd…

USESTATE 1.0 Introduction to useState Hooks는 리액트의 state machine에 연결하는 기본적인 방법 Hooks가 생기기 전에는 class component를 사용했는데 이는 this와 같은 문장 규칙과 render와 같은 사용 방법을 고려해야 했다. 1.1 useInput useInput은 react component가 아닌 완전히 다른 function이다. 우리는 이런 이벤트를 분리된 파일, 다른 entity에 연결해서 처리할 수 있다. 1.2 useInput part2 1.1에서 작성한 코드를 좀 더 보완 initialValue를 사용하는 대신 유효성을 검증하는 기능을 포함 (validate function) maxLen 부분을 수정하여 검증할 유효성 조건을 변경할 수 있다. 1.3 useTabs

실전형 리액트 Hooks (추후 내용 정리 예정) 리액트 공부를 시작하면서 여러 강의를 찾아보다가 노마드 코더를 알게되었다. 그중 [실전형 리액트 Hooks 10개]를 수강하며 알게된 것들을 정리해 보기로 했다. #0 INTRODUCTION https://www.npmjs.com/ 이 사이트는 사람들이 각자 만든 Hook을 공유할 수 있는 사이트다. 이 강의에서는 자주 사용되는 hooks에 대해 배우고 생성한 hooks를 npm에 등록할 수 있도록 해본다. Requirements React에 대한 이해 React와 node.js 설치 Workflow hook을 생성하며 바로바로 적용되는 것을 확인하기 위해 codesandbox를 사용하여 작업 CodeSandbox 생성하기 ‘Create Sandbox’ 클릭 후 Templates로 React를 선택한다. React Hooks 리액트 Hooks 참고 영상 functional component 에서 state를 가질 수 있게 해준다. …

이번에는 Netlify로 Gatsby 블로그를 자동 배포할 것이다. github 로그인과 Repository 설정, 빌드 커맨드 추가만으로 쉽게 배포를 진행할 수 있다. Netlify 홈페이지 1. git에서 import 좌측에 있는 녹색 버튼을 클릭한다. 연동 할 Git provider()를 선택한다. > 블로그 Repository를 선택하고 한다. 2. Site settings Branch to deploy, Build command, Publish directory를 설정한다. Branch to deploy : master Build command : npm run build Publish directory : public 설정을 다하고 를 누르면 build > deploy를 진행한다. 3. Domain settings 빌드 후 블로그 사이트의 대시보드가 생성된다. 생성 직후 이미지와 같이 이름이 임의로 정의된다. 그렇기 때문에 내가 원하는 이름으로 변경해주도…

기존에 jekyll 블로그를 사용하다가 마음에 드는 템플릿을 발견하여 Gatsby 블로그로 옮기게 되었다. 그리고 이번에는 댓글 기능도 추가하기로 했다. Repository 생성 및 Utterances 적용 1. public Repository 생성 블로그를 올리는 Repostoriy와 별개로 댓글만을 관리하는 Repository를 생성한다. 2. Utterances 앱 설치 🦄 utterances 앱 설치는 링크를 참고해주세요! 우측에 녹색 설치 버튼을 클릭하고, 항목을 선택해서 생성한 댓글 Repository를 설정한다. 3. 스크립트 추가 Utterances 에서 repo 및 Blog Post & Issue Mapping을 입력하면 설치 스크립트가 자동 생성된다. 자동으로 생성된 스크립트를 참고해서 에 내용을 추가해 준다. 4. 결과 화면 Reference https://sungchul-p.github.io/gatsby-utterances

👋 소개 블로그를 직접 운영하면서 조금씩 그려봤던 이상적인 개발 블로그 테마를 Gatsby를 통해 만들어보게 되었습니다. 이 테마가 블로그를 운영하고자 하시는 분들에게 자신의 이야기를 잘 담을 수 있는 공간이 되었으면 좋겠습니다.🙌 블로그 테마가 맘에 드셨다면 아래 과정을 통해 자신의 블로그를 만들어보시길 바랍니다! 혹시 만드시는 과정에서 궁금하신 점이나 어려움이 있으시다면 이슈를 통해 문의 남겨주세요! 스타는 블로그 테마를 지속적으로 발전시키는데 큰 힘이 됩니다!⭐️ 🚀 시작하기 Github Page나 Netlify 중 원하시는 배포 환경에 따라 다음 과정을 진행하시면 빠르게 블로그를 만드실 수 있습니다. 🦖 GitHub Page로 만들기 깃헙 페이지를 통해 블로그를 만드시다면 아래 글을 참고해주세요! Gatsby 테마로 GitHub Blog 만들기 🔧 Netlify로 만들기 아래 버튼을 활용하면 개인 계정에 를 사용하고 있는 Repository 생성과 Netlify에 배포를 동시…