JNarin Development Story

리액트를 개발하다 보면, 모바일이나 태블릿 등에서 확인을 해야 할 때도 있다. 바로 반응형이 잘 되는지에 대한 체크인데, 확인하는 방법은 매우 간단하였다. 우선 필자의 운영체제가 윈도우 기준으로 설명을 해보려고 한다. 먼저, widow + R 을 눌러 실행창에 cmd라고 검색한다. 혹은 시작 버튼에서 명령 프롬프트 OR cmd로 검색한다. 그리고 거기에 명령어 ipconfig를 검색을 한다. 그럼 아래처럼 뭔가 촤르륵 나오는데 여기서 봐야 할 것은 단 한 가지다. IPv4 주소에서 000.000.00.00이라는 숫자가 있다. 그럼 아래처럼 입력을 하면 된다. IPv4 주소 : 123.456.78.90 123.456.78.90:3000 만약 IPv4 주소가 123.456.78.90이라 하였을 때, 내 핸드..

리액트를 하다 보면서 HTML과 다른 점이 몇 가지가 있다. '이상하다... HTML에서는 됬는데 왜 리액트에서는 에러가 발생하지?' 라는 의문점, 리액트를 하시면서 몇개를 느낀 것들이 있을 것 같다. 그래서 오늘은 그 몇가지 다른 점을 여기다 정리를 해보려고 한다. 1. class html에서 직접 style값을 작성할 때 쓰이는 옵션으로, 원래 html에서는 class="name"으로 태그 안에 넣는다. 하지만 리액트에서는 className을 넣어 클래스를 사용한다. 이렇게 쓰이는 이뉴는 리액트에서는 클래스 함수, 화살표 함수 이런 두 가지 방식으로 코드를 작성을 하게 된다. 그렇기 때문에 class가 아닌 className이라는 명칭을 사용하는 것 같다. 2. label for html에서는 lab..

오늘은 삭제기능을 추가하는 방법을 공부하려 한다. 먼저 우리는 저번에 추가한 추가하는 것을 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..

회원가입 로직을 하다 보면 정규식에 대해 쓰이는 경우가 종종 있다. 근데 막상 찾다 보면 내가 원하는 데로의 정규식 찾는데 다소 시간이 걸려 그 부분을 해소하고자 정규식 관련 자료를 모아보았다. 이메일 유효성 검사 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. 페이지의 링크를 위해 라우터를 생성한다. 3. 만든 페이지의 템플릿을 생성한다. (즉, CSS를 입히다.) 4. 내가 구독한 유저의 비디오만을 골라오는 API를 생성한다. 5. 서버에서 만든 데이터들을 화면에 출력하도록 한다. 이렇게 5단계에 순서에 맞게 실행하면 된다. 1. 페이지 생성 해당하는 위치에 혹은 원하는 위치에 폴더 및 파일을 생성한다. 필자의 설치 경로는 다음과 같다. client > src > co..

안녕하세요. 제이나린 입니다. 오늘은 우측에 있는 사이드 비디오를 만드는 과정을 적어보려고 합니다. 1. SideoVideo 템플릿 만들기 먼저 SideVideo 템플릿을 만들기 위해서는 다음과 같은 경로가 필요하다. VideoDetailPage 폴더 안에 Sections라는 폴더를 만든 후 그 안에 SideVideo.js를 만든다. // src > components > views > VideoDetailPage > Sections > SideVideo.js import React from "react"; function SideVideo() { return ( {/* 이미지 */} {/* 이미지에 대한 정보 */} videoTitle videoWriterName videoViews Time ); } ..

SPA Single Page Application 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션을 의미한다. SPA단점 앱의 규모가 커지면서 자바스크립트 파일이 너무 커지는 것이다. 페이지 로딩시 사용자가 실제로 방문하지 않을 수 도 있는 페이지의 스크립트도 불러오는데 그로인한 개선방법을 스플리팅(code splitting)을 트래픽과 로딩 속도를 개선할 수 있다. Router 다른 조수에 다른 화면을 보여주는 것으로 자체에 기능이 내장되어 있지는 않다. 그 대신 브라우저의 API를 직접 사용하여 관리하거나 라이브러리를 사용하여 쉽게 구현할 수 있다. 설치하는 방법은 다음과 같이 작성하면 된다. $ yarn add react-router-dom 이 명령어를..

오늘은 서버에 비디오를 업로드하는 공부를 하려 한다. 1. 비디오 Collection 만들기 먼저 서버에 Video.js 모델 기본 세팅을 해준다. 그런 후 필요한 collection을 설정한다. // server > models > Video.js const mongoose = require('mongoose'); const Schema = mongoose.Schema; const videoShema = mongoose.Schema({ writer: { type: Schema.Types.ObjectId, ref: 'User' }, title : { type: String, maxlength: 50 }, description : { type: String }, privacy: { type: Number ..