리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴은 주로 화면에 UI를 보여주는 프레젠테이셔널 컴포넌트와 리덕스와 연동하여 state를 받아오거나 리덕스 스토어에 액션을 디스패치하는 역할을 하는 컨테이너 컴포넌트로 분리하는 것이다. 실습할 내용 Counter 컴포넌트에는 number 변수와 onIncrease, onDecrease 함수가 props로 전달된다. Todos 컴포넌트의 TodoItem에는 todo 객체와 onToggle, onRemove 함수가 props로 전달된다. Todos에는 인풋에 입력되는 텍스트인 input, todos 객체, onChangeInput, onInsert, onToggle, onRemove 함수가 props로 전달된다. 17. 리덕스를 사용하여 리액트 애..
액션 타입과 액션 생성함수 액션 타입: 프로젝트의 상태에 변화를 일으키는 것이며 이름은 고유해야하며 대문자 문자열로 작성한다. const TOGGLE = 'TOGGLE' const ADD = 'ADD' const DELETE = 'DELETE' 액션 생성함수 : 액션 이름을 사용하여 액션 객체를 만드는 함수, 액션 객체는 type을 반드시 갖고 있어야 하며 추후 상태 업데이트 시에 참고하고 싶은 값은 마음대로 해도 상관없다. const toggle = () => ({ type: TOGGLE }); const add = difference => ({ type: ADD, difference }); const delete = () => ({ type: DELETE }); 리듀서 함수 정의 리듀서는 변화를 일으..
구글 리캡챠를 사용하여 문의 메일을 보내는 사용자 중 봇을 감지하여 스팸문자를 방지하도록 할 것이다. 구글 리캡챠는 구글에서 제공하는 봇, 스팸 방지 API이다. "나는 로봇이 아닙니다. " 혹은 "~이 있는 타일을 모두 선택하세요" 같은 그림 맞추기 라고 하면 아~ 하고 떠오르는 그게 구글 리캡챠이다. 이번에 회사에서 홈페이지 리뉴얼을 진행하면서 이따금씩 해외에서 보내지는 스팸메일들을 방지하기 위해 구글 리캡챠 기능을 사용하기로 했다. 굉장히 간단하게 생각했다가 며칠을 고생했다..😢 버전선택 구글 리캡챠는 2022년 2월 현재 v2, v3 가 있다. (v1은 예전에 서비스가 종료되었다.) v2 는 checkbox 와 invisible 2가지 종류가 있는데 checkbox는 "로봇이 아닙니다." 체크 박..
회사에서 홈페이지 리뉴얼을 진행하면서 카카오맵을 사용해야 했다. 카카오 Maps API 공식문서를 보고 구현하고자 했는데, 공식문서의 내용을 현재 개발환경에 맞게 적절하게 코드를 변환하지 못해 어려움을 겪었다. 추후에 추가로 포스팅할 예정이지만 구글 리캡챠 역시 비슷한 문제를 겪었기에 관련 내용을 정리하며 공식문서의 코드들을 이해하고 개발환경에 적합하게 변화시킬 수 있는 실력을 함양하고자 내용을 포스팅하려 한다. 사용 기술스택 - React (Next.js) - TypeScript 공식문서 가이드 우선 공식문서 가이드에 따라 작성된 코드는 아래와 같다. // 1. 지도를 담을 div 생성 // 2. 지도를 그려줄 Javascript API 불러오기 // 3. 지도를 띄우는 코드 작성 내가 구현한 코드 아..
작업환경 - nextjs - typescript - airbnb styleguide 에러 발생 상황 부모 컴포넌트로부터 props로 num 을 받아오는 자식 컴포넌트인 item 컴포넌트에서 props 값에 따른 각기 다른 css 스타일 적용을 위해 삼항연산자를 사용하였는데, do not nest ternary expression 라는 에러가 발생하였다. 아마도 airbnb 스타일 가이드 때문에 발생한 에러가 아닌가 싶다. 첫번째 시도 삼항연산자를 switch 문으로 대체 하였으나 string 값 자체가 클래스명으로 적용되어서 module.css 가 적용되지 않았다. let types = 'styles.typeOne'; switch (num) { case '01': types = 'styles.typeOn..
동적 라우팅 1가지 경로에 대해서만 페이지 이동이 가능한 정적 라우팅과 달리 동적 라우팅은 id 값에 따라 수많은 url 파생시켜주는 기능이다. 동적인 경로에 대한 라우팅을 통해 한가지 레이아웃에 수 십, 수백 가지의 다른 데이터들이 들어가 다른 정보를 보여주는 페이지들을 쉽게 만들 수 있게한다. (예를 들면 커머스 사이트에 일정한 틀을 가진 상품 상세페이지에 id 따라 각기 다른 상품들의 데이터를 보여주는 것과 같은 기능) 동적 라우팅의 방법에는 아래 2가지 방법이 존재한다. Path Parameter // Bad "/users/1" => "/users/2" => "/users/3" => "/users/4" => "/users/5" => // Good "/users/:id" => // this.prop..
🍣 props - Component 속성을 설정할 때 사용하는 요소 - 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 사용가능 1️⃣ 컴포넌트를 사용할 때 pros 값 지정하기 부모 컴포넌트인 App 컴포넌트에서 MyComponent의 props 값을 지정, MyComponenet에서 props 사용 2️⃣ 비구조화 할당 문법을 통해 props 내부 값 추출하기 객체에서 값을 추출하는 문법 === 비구조화 할당(destructuring assignment) === 구조 분해 문법 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용할 수 있다. # 객체에서 값을 추출하는 비구조화 할당 const MyComponent = (props) => { const { name, title } = props..
🏫 오늘의 미션 React의 state와 event 기능을 사용하여 전에 js로 구현했던 로그인 버튼 활성화 기능을 React로 변환해 보겠다. #Routes.js import LoginSejun from './pages/sejun/Login/Login'; class Routes extends React.Component { constructor(props) { super(props); this.state = { id: 0, pw: 0, }; } render() { return ( . . . #Login.js import React from 'react'; import { Link } from 'react-router-dom'; import './Login.scss'; class Login extends..
Create React App (CRA) 과 가장 인기있는 routing solution인 react-router 를 조합하여 routing 로직을 구현할 것 1. React 개발환경 세팅 1️⃣ npm 설치 2️⃣ CRA 설치 3️⃣ 프로젝트 내에서 CRA 실행 4️⃣ npm start 2. Routes Component & Scss 1️⃣ react-router 설치 2️⃣ Routes 컴포넌트 구현 ( / this.props.history.push()) 3️⃣ scss 설치 1. react-router 설치 npm install react-router-dom --save 2. Routes 컴포넌트 구현하기 import React from 'react'; import { BrowserRouter as..
SPA (Single Page Application) Westagram-fontend: longin.html, main.html 등 - 페이지 수 만큼 html 파일이 존재한다. 리액트 프로젝트에서 .html 파일의 개수는? 1개 ==> SPA 한 개의 웹페이지(html) 안에서 여러개의 페이지를 보여주는 방법? => Routing Routing 어떤 특정한 경로가 들어왔을 때 그 경로에 맞는 화면을 보여주는 것. 다시 말해 각각의 경로(url 주소)에 따라 다른 View(화면)을 보여주는 것이다. 리액트 자치에는 이러한 기능이 내장되어 있지 않다. ==> React Router : 리액트에서 라우팅 기능을 구현하기 위한 third-party 라이브러리 `npm install react-router-do..
