[Javascript ES6] 기초 문법 5. Spread Operator

Spread Operator 배열이나 문자열, 오브젝트 앞에 ... 을 붙여, 배열의 괄호를 제거해 줄 수 있다. 주로 배열을 합치거나 복사할 때 사용한다. 중괄호, 대괄호, 소괄호 안에서만 사용할 수 있는 것이 큰 특징이다. 오브젝트에 사용할 경우, 만일 값의 중복이 일어나면 '나중에 정해진 값이 저장' 된다. 함수의 파라미터 인자로 배열을 넣고 싶을 때도 사용할 수 있다.

• format_list_bulleted JavaScript/JavaScript 기초
• · 2022. 12. 20.
• textsms

[Javascript ES6] 기초 문법 4. Template Literals, Tagged Literals

Template Literals, Backtick 백틱기호 ` 를 이용한 문자 표현법을 Template Literals이라고 한다. 문자 중간에 변수의 값을 넣고싶은 경우, ${변수} 를 삽입해주면 된다. let 변수 = '이름' let 문자 = `문자 중간에 ${변수} 와 같이 변수를 넣을 수 있습니다.` Tagged Literals 1. ${ } 양 옆의 문자들을 배열화 해 준다. 2. 첫번째 파라미터는 문자들을, 두 번째 파라미터부터는 중간에 삽입된 변수를 뜻한다. 만일 변수가 여러개 사용되었을 경우 변수 파라미터를 여러개 넣어주어야 한다. 이를 이용해 문자열을 편하게 다룰 수 있다.

• format_list_bulleted JavaScript/JavaScript 기초
• · 2022. 12. 20.
• textsms

4. [React + Express] 풀스택 보일러 플레이트 ( 회원가입, 로그인, 로그아웃, 회원 정보 수정, 게시글 CRUD )

무비 API 이용 풀스택 웹 프로젝트 소요 기간 : 12일 겪었던 문제들 : 에러 하나, 에러 둘, 에러 셋, 에러 넷, 에러 다섯 Github : https://github.com/chalinuna/Boiler 실제 사용 데모 영상 사용 언어와 기술, 라이브러리 및 DB Frontend - React (useState, useEffect, useNavigate, useLocation, useParams, useSelector, useDispatch, Axios, Proxy(Http-proxy-middleware), Route, ReduxToolkit, redux-persist, react-quill, ArrayBuffer, Uint8Array, Blop, FormData, 등... ) Backend -..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2022. 12. 18.
• textsms

4-8. [React + Node.js Express] 게시판 - 게시글 리스트, 상세보기, 수정, 삭제 ( React-Quill ) CRUD

풀스택 CRUD 포트폴리오의 마지막 단계, 게시글 리스트 불러오기와 상세보기, 수정 및 삭제 단계이다. 간단해 보여도 은근히 처리해야 할 부분들이 자잘하게 많다. 글을 작성한 작성자만 자신의 글을 수정 및 삭제할 수 있도록 버튼 노출 여부를 설정해 주어야 하고, 데이터가 렌더링 된 이후에 컴포넌트가 그려지도록 해야 한다. 또 ref를 이용해 저장했던 정보는 어떻게 참조해야 하는지도 알아보자. Frontend 먼저 게시글 리스트를 보여주는 페이지를 만든다. 각 제목을 클릭하면, 포스트의 _id를 백엔드로 보내 게시글 상세보기 페이지로 진입시킬 것이다. 하단의 페이지네이션은 아래 코드를 사용했다. 별도의 컴포넌트로 만들고 props를 이용해 값을 전달한 뒤, 게시글의 수에 맞는 만큼만 수를 증가시킨다. 온전..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2022. 12. 15.
• textsms

You should call navigate() in a React.useEffect(), not when your component is first rendered.

문제 상황 isAuth를 사용해, 유저가 로그인하지 않은 경우에는 게시물 작성란에 들어가지 못하도록 막으려다 아래 경고를 만났다. You should call navigate() in a React.useEffect(), not when your component is first rendered. 해결 방법 useEffect안에 선언해주라는 뜻이다. 이렇게 해 주면 된다. useEffect(()=>{ if (!isAuth) { navigate('/') } })

• format_list_bulleted 바보일기
• · 2022. 12. 14.
• textsms

4-7. [React + Node.js Express] 게시판 - 게시글 작성, 이미지 업로드 ( React-Quill )

티스토리나 네이버 블로그처럼, 어떤 글을 작성할 때는 글작성 전용 에디터가 필요하다. 에디터를 직접 만들어도 좋겠지만 그랬다가는 마음에 불화가 일어날 것 같아서 라이브러리를 사용하기로 했다. 누구나가 사용하는 위지윅 에디터를 사용했다면 속편했을텐데 Quill을 사용하겠다는 객기를 부려서 강제로 js실력이 업그레이드 되었다. (속터짐은 덤) Quill은 에디터에 이미지를 삽입하면 base64로 이미지에 src를 저장한다. 그러나 base64는 1000자가 넘는 문자열이므로 그대로 db에 저장하기에는 너무나 거대하다. 그렇다고 일반적인 방식으로 handles: { image: imageHandler } 를 커스텀하여 사용하면, 이미지를 업로드 할 때마다 서버에 업로드하게 된다. 이럴 경우 에디터에서 필요없는..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2022. 12. 14.
• textsms