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..

리액트를 많이 사용하고 협업을 하게 된다면 가장 중요한 것 중 하나이다. 하지만 초반에 설정하고 나면, 쉽게 잊혀가는 기능 중 하나이다. 오늘은 이에 대한 내용을 정리하였다. Prettier이란? prettier은 VS Code Extension 중에 코드를 정렬해주는 Formatter이다. - 독보적인 코드 포멧터다. - 다양한 언어를 지원한다. - 대부분의 편집자와 통합을 할 수 있다. - 옵션이 거의 없다. 왜 Prettier을 왜 쓰는가? - 저장을 누르면 코드가 포맷이 된다. - 코드 리뷰에서 스타일을 논의할 필요가 없다. - 시간과 에너지를 절약할 수 있다. Prettier을 어떻게 쓰는 것인가? 1) Extension 설치 Visual Studio Code에서는 Extension에 prett..

회사 코드를 하다가 npm과 yarn을 중복으로 사용한 것 같아서 이것을 통합하고자 node_modules를 삭제후 재설치를 진행하였다. 하지만 다음과 같은 에러가 발생하였고 이에 대한 해결책을 기록으로 남기고자 이 글을 쓰게 되었다. 패키지 통합을 위해 yarn을 지우고 npm으로 다시 설치하는 과정에서 다음과 같은 에러가 발생하였다. node_modules 디렉토리를 확인해보니 node-sass 패키지는 제대로 설치가 되어있지만, .../node-sass/vendor 디렉토리가 존재하지 않았다. 원인은 패키지 설치 이후 node-sass의 scripts/install.js를 실행하지 않아서 라고 한다. 해결방법은 수동으로 스크립트를 설치하거나, node-sass패키지를 리빌드하는 것이다. node n..

프론트 개발자라면 명세서 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가 다..

1. SingleComment.js 생성 아래의 이미지처럼 해당하는 위치에 SingleComment.js파일을 생성한다. 2. Single Comment를 위한 Template 생성 만든 파일에 아래와 같은 템플릿을 작성한다. // client > src > components > views > VideoDetailPage > Sections > SingleComment.js import React from "react"; import { Comment, Avatar, Button, Input } from "antd"; const { TextArea } = Input; function SingleComment() { return ( Submit ); } export default SingleComment..

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..