JNarin Development Story

오늘은 삭제기능을 추가하는 방법을 공부하려 한다. 먼저 우리는 저번에 추가한 추가하는 것을 function으로 분리를 할 수 있다. // src > index.js // 중략 const addToDo = (text) => { store.dispatch({ type: ADD_TODO, text }); }; const onSubmit = (e) => { e.preventDefault(); const toDo = input.value; input.value = ""; addToDo(); }; // 중략 store.dispatch를 원래는 onSubmit에 넣었는데 이 문구가 더 많은 일을 할 경우에는 분리를 하는 것이 좋다. 그렇기 때문에 그런 편리성을 위해서 function addToDo를 만들어서 onSu..

오늘은 저번 시간에 이어서 몇 가지를 더 공부하려고 한다. 이 글은 노마드 코더에 '초보자를 위한 리덕스 101'이라는 강의를 중심으로 정리가 된 것이다. 리덕스를 사용하게 되면 많이 쓰이는 문법이 있다. 바로 switch문이다. 기본적으로 switch문은 다음과 같다. switch () { case "String1": return result1; case "String2": return result2; case "String3": return result3; ... default: return default; }; 만약 switch를 쓰지 않고 if문을 할 경우에 다음과 같은 코드로 작성해야 한다. if (String1) { return result1; } else if (String2) { retur..

프론트 개발자라면 명세서 api에 대해서 많이 듣고 참고를 하고 있을 듯하다. 현재의 나도 그걸 참고로 하여 서버와 통신을 하여 개발을 하게 되는데 여기서 몇 가지 문제점이 있어서 삽질이 진행이 되었다. 일반적으로 axios의 통신은 이러하다. import axios from 'axios'; Axios.post('url', data, header) .then(response => { console.log(response); }) .catch(error => { console.log(error); }) 일반적인 구조로 하게 될 경우 이렇지만, 만약 기존의 통신과 다르거나, 세팅한 통신과 다를 경우 새로이 입력을 하는 경우가 발생한다. import axios from 'axios'; // headers가 다..

회원가입 로직을 하다 보면 정규식에 대해 쓰이는 경우가 종종 있다. 근데 막상 찾다 보면 내가 원하는 데로의 정규식 찾는데 다소 시간이 걸려 그 부분을 해소하고자 정규식 관련 자료를 모아보았다. 이메일 유효성 검사 const regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; 위 코드는 이메일 형식으로 되어 반드시 @와. 이 들어간 완성된 이메일 형식으로 되어야 한다. ex) test@te_st.com (O) ex) test_34@te3st.com (O) ex) test.to@te2st.com (O) ex) test.coj (X) 번호 유효성 검사 번호 유효성 검사는 크게 핸드폰과 일반..

1. 컴포넌트 생성 너무 많은 내용을 다룰 수 있기 때문에 컴포넌트를 새로 생성을 해준다. 2. 템플릿 생성 // client > src > components > views > VideoDetailPage > Sections > Comment.js import React, { useState } from "react"; import Axios from "axios"; import { useSelector } from "react-redux"; function Comment(props) { return ( Replies {/* Comment Lists */} {/* Root Comment Form */} Submit ); } export default Comment; 기본적으로 HTML, CSS를 먼저 ..

유튜브를 사용해보신 분들은 아시겠지만, 유튜브는 각자의 채널의 고유 페이지가 있습니다. 오늘은 그러한 페이지를 만들려고 하는데요. 시작해보려고 합니다. 순서가 많이 헷갈릴 수 있기에 순서를 먼저 표시를 해보도록 하겠습니다. 1. 먼저 구독한 페이지를 볼 수 있는 파일을 먼저 생성을 한다. 2. 페이지의 링크를 위해 라우터를 생성한다. 3. 만든 페이지의 템플릿을 생성한다. (즉, CSS를 입히다.) 4. 내가 구독한 유저의 비디오만을 골라오는 API를 생성한다. 5. 서버에서 만든 데이터들을 화면에 출력하도록 한다. 이렇게 5단계에 순서에 맞게 실행하면 된다. 1. 페이지 생성 해당하는 위치에 혹은 원하는 위치에 폴더 및 파일을 생성한다. 필자의 설치 경로는 다음과 같다. client > src > co..

유튜브에서 구독하는 기능을 만들어 보려고 한다. Subscriber Model 만들기 다음 링크에서 확인하기 Subscribe Button UI 만들기 // client > src > components > views > VideoDetailPage > VideoDetailPage.js // 중략 import Subscribe from "./Sections/Subscribe"; function VideoDetailPage(props) { // 중략 if (VideoDetail.writer) { return ( // 중략 //중략 ) } else { return ...Loading; } } export default VideoDetailPage; UI 디자인 및 코드를 작성하기엔 너무 길기 때문에 Subs..

공부를 시작하고 다 올렸지만 필자가 다시 찾아보는데 어려움이 있어 편하게 공부 및 검색을 위해 이 페이지가 제작이 되었음을 밝힙니다. 중요하다고 하는 포인트 혹은 태그를 위주로 정리를 하였습니다. Front 1. react-router-dom jnarin-development-story.tistory.com/98 2. axios, CORS, proxy, ShareArrayBuffer jnarin-development-story.tistory.com/99 3. redux, Redux Extension jnarin-development-story.tistory.com/101 4. class VS function Components, hook jnarin-development-story.tistory.com/..