JNarin Development Story

뷰나, 리액트를 쓰시는 분이라면 스터디나 프로젝트에서 ESLint 세팅에 대해 들어본 경험이 있을 것이다. 개발을 하면서 자주 설치하게 되는 라이브러리로, 실상은 실무에서 활용하기에는 한계가 있다. 그래도 배우면서 활용하기 좋은 것들을 하나씩 정리하고 싶어 이 글을 쓰게 되었다. 1. ESLint란? ESLint란 자바스크립트 코드에서 문제가 되는 패턴을 식별하기 위한 코드 분석 도구이다. 2. 사용방법 2 - 1. 설치 및 활용방법 npm install eslint 설치는 위 명령어를 해도 되지만, 일반적으로 뷰나 리액트를 할 때 일부는 자동으로 설치가 되는 경우도 있다. 그래서 필자는 거의 쓰이는 일은 없었다. 2 - 2. No Console 개발자에게 console이란 매우 유용하게 쓰이는 코드 중..

게시판이라 하면 일반적으로 제목과 내용 이미지 등 최소한의 필요한 것이 있습니다. 그래서 이전에 AWS에 대해서 공부했지만, 아직 이해하지 못하는 과정도 많았고 오류도 있어 그 부분을 이제 겨우 해결을 해서 정리도 할 겸 내용을 쓰게 되었습니다. 일단 필자가 개발에 사용하고 있는 것은 프론트에서는 리액트입니다. 그리고 벡엔드는 노드에서 몽고 디비를 현내 사용 중에 있습니다. 위 구조를 참고로 아래 코드를 참고해주시기 바랍니다. 먼저 이미지 업로드하는 API를 만들기 위해서는 몇가지 라이브러리를 설치해야 합니다. npm i aws-sdk dotenv multer multer-s3 1) aws-sdk 먼저 SDK는 Software Development Kit의 약자로 특정한 소프트웨어나 플랫폼을 이용해서 소..

bcypt(비크립트)는 블로피시 암호에 기반을 둔 암호화 해시 함수다. 암호화는 비밀번호를 노출되지 않도록 해시값으로 변경하여 저장을 하는 것인데, 여기서는 회원가입 시 저장하기 전에 변경을 하는데에 bcrypt 라이브러리를 사용한다. userSchema.pre('save', (next) => {}); userSchema가 호출되는 라우터가 있을 때, 그전에 먼저 pre미들웨어를 실행을 해준다. 그리고 next를 하면 스키마를 호출한 곳으로 돌아간다. const userSchema = mongoose.Schema( ... ); userSchema.pre('save', (next) => { var user = this; }); 여기서 var user = this는 userSchema 자기 자신을 가리킨다...

자주 쓰이고 있지만, 아직까지도 헷갈리는 map함수, 그래서 오늘은 정리를 해보려고 한다. 물론 이 정리를 시작으로 개념정리가 되어도, 얼마든지 까먹을 수 있으니... 수시로 찾아와서 한번씩 점검을 하려 한다. 1. map function? map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다. (여기서 callback function은 다른 함수에 인수로 전달된 함수이며 외부 함수 내부에서 호출되어 일종의 루틴이나 작업을 완료하는 것을 의미한다.) arr.map(callback(currentValue, index, array), thisArg) map함수는 callback, thisArg함수를 가지고 있으며, callback은 currentValue, in..

Mutation(변형)은 무엇인가? 말 그대로 변형을 의미한다. 이 부분은 필자의 절대적인 생각이며, 확신이 아닌 참고용이다. 필자가 생각하는 Mutation은 push, pop, join 이런 것들이지 않을까 하는 조심스러운 발언을 해본다. (그저 필자가 javascript를 해보면서 대략적으로 이러지 않을까 하는 생각이다. mutation을 권장하지 않는 다면 과연 리덕스에서는 무엇을 써야 하는가? 바로 새로운 state(상태)를 return을 하는 것이다. 즉, object를 return 하는 의미라고도 한다. (사실 적으면서도 내가 이해한 부분이 맞는지 의심이 간다...) 상태를 수정하는 것이 아닌, 새로운 것을 return을 해야한다는 의미다. (왜 이게 중요한 것일까? 사실 어떤 의미로 한건 ..

DOM에 대한 이야기는 어디에서나 제일 처음 나오지만 제대로 알아본 적이 없다. 그래서 공부하면서 정리를 해보려고 한다. DOM이란? DOM(Document Object Model)은 문서 객체 모델이라고도 한다. DOM은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스다. 여기서 인터페이스(interface)는 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면이다. 즉, DOM은 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템이라고도 할 수 있다. 이나 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만드는 것을 의미한다. DOM의 종류 W3C의 DOM의 표준은 세가지 모델로 구분된다. - Core DOM :..

리액트 유튜브 2일 차로 어제 비디오 폼을 만들었다면, 비디오를 올려 서버에 저장하는 기능을 만드려 한다. 1. onDrop 함수 만들기 아래는 공식문서 맨 앞에 있는 코드를 가져온 것이다. {({getRootProps, getInputProps}) => ( Drag 'n' drop some files here, or click to select files )} 코드는 공식문서와 거의 비슷하다. onDrop Dropzone의 메소드 중 일부로, 사이즈에 따라 파일이 승인이 되거나 거부가 될 수 있다. 그래서 필자가 처음에 영상을 올리려 했는데 너무 maxsize값을 너무 작게 해 놓아서 올라가지 않았다. multiple 여러 파일을 올리는 것인지를 true OR false로 구분 짓는다. true는 다중..

이제 새롭게 시작하는 스터디는 바로 유튜브 페이지 만들기이다. 이전 학원 수강생이 만든 거 같았는데, 이렇게 혼자 공부하면서 다시 하게 될 거란 걸 상상도 못 했었다. (이렇게 길게 취준생이 될거라 누가 상상했는가...) 이 글은 Infren의 유튜브 사이트 만들기를 모티브로 제작하였습니다. 1. 페이지 만들기 // client > src > components > views > VideoUploadPage > VideoUploadPage.js import React from 'react' function VideoUploadPage() { return ( Wow! ) } export default VideoUploadPage ES7 React/Redux/GraphQL...의 확장자를 설치하게 되면, 단..