본문 바로가기

main

[React | Next.js] TOAST UI Editor 사용하기 설치 및 적용 TOAST UI :: Make Your Web Delicious! The TOAST UI Is Free Open-source JavaScript UI Libraries Maintained By NHN. ui.toast.com 간단한 오픈소스 글쓰기 에디터를 찾아보다가 현재 TUI를 사용하고 있다. Docs에 나와있는대로 잘 설치하고 따라해보면 기본 에디터가 잘 나오는 걸 볼 수 있음. ​ 기본 Editor를 import 한 후 위와 같이 사용하고 있다. 하지만 왜인지 plugins는 문서에서 하란대로 적용하는데 계속 알 수 없는 에러가 떠서 적용하지 못하고 있다.ㅠ_ㅠ 아래는 구글링 하다 찾은 같은 에러... 하지만 해답은 아직 찾지 못했다 Use the plugin'@toast-ui/ed.. 더보기
[Next.js] 기존 React 프로젝트 Next.js로 바꾸기 - 3 (TS, Styled-Component, SVG) ✏ TypeScript 적용하기 Next.js를 프로젝트를 시작할 때 TS를 적용한다. npm i next react react-dom npm i -D typescript @types/react @types/node 타입스크립트는 빌드 과정에서 자바스크립트로 변환되기 때문에 실제 배포될 결과물에는 포함되지 않는다. 따라서 -D 또는 --save-dev를 붙여 devDependencies에 추가하여 빌드 시에 모듈이 추가되지 않도록 한다. @types/로 시작하는 라이브러리는, 라이브러리의 타입을 나타낸다. 타입이 내장되어 있는 모듈도 있지만, 그렇지 않은 경우에는 추가적으로 설치해주어야 한다. ✏ TypeScript 사용하기 예제에서 만드는 투두리스트로 TS를 사용하는 방법을 알아본다. d.ts는 타입스.. 더보기
[Next.js] 기존 React 프로젝트 Next.js로 바꾸기 - 2 (공통 페이지) Next.js의 구동방식을 알아보며 _app과 _document에 대해 알아보겠다. _app / _document 위 두 파일은 없어도 Next의 실행에는 문제가 없다. 커스터마이징이 필요할 때 사용하게 되는 파일이다. Server Only File으로, Next Client에서 사용하는 로직(eventlistener 등의 window/DOM 로직)을 사용하면 안된다. window is not defined 라는 에러를 보게 된다면 해당 사항을 체크해봐야 한다. (!!이 에러가 나는게 그래서였군..) 최초로 실행되는 것은 _app.js이다. 요청한 페이지를 먼저 Component에서 띄우게 된다. 그 다음 _document.js가 실행된다. _app.js에서 구성한 HTML이 어떤 형태로 들어갈지 구성하.. 더보기
[Next.js] 기존 React 프로젝트 Next.js로 바꾸기 - 1 (라우팅) React의 가장 큰 장점이자 단점인 SPA(Single Page Application) 때문에, 페이지의 SEO에 문제가 있어 여러 해결 방안을 찾아보았지만 결국 Next.js로 변경하는 것이 좋겠다고 결론지었다. Next.js를 어떻게 시작해야 하나 고민하던 차에 이 책을 발견하게 됐다. 클론 코딩으로 시작하는 Next.js - 교보문고 Next.js와 타입스크립트로 숙박 공유 플랫폼 만들기 | 넥스트(Next.js)는 리액트(React.js) 기반의 웹 프레임워크입니다. 대부분의 사람들은 넥스트를 그저 리액트를 사용할 때 서버 사이드 렌더링(Serve www.kyobobook.co.kr 일단 이 책 보고 따라해볼까.. 하며 시작했고 조금 감을 잡아나가며 내 프로젝트도 변경하는 중! 그래서 지금부터 .. 더보기
eslint 관련 내용 코드 짜면서 보는 애들 중 기록할만한 건 계속 추가해나갈 예정. array-callback-return 내가 자주 실수하는.. 중괄호를 열고 엔터치는 일이 많다보니, map의 결과로 jsx를 리턴할 때는 ()를 써야 하는데 습관적으로 {}를 써서 자주 에러를 보곤 한다 ㅎㅎ 근데 이 부분을 eslint가 바로 잡아줌! 쩐당 좋다! control-has-associated-label 스택오버플로우 서치해보니 버튼에 타이틀 혹은 라벨이 없을 때 에러를 발생시키는 듯 했다. aria-label을 추가해주면 에러가 사라진다. 추가하기 이 친구는 aria-label을 추가해주지 않아도 문제가 없다! no-case-declarations unexpected lexical declaration in case bloc.. 더보기
eslint: command not found 에러 | .eslintrc.js bash: eslint: command not found 책을 보고 따라하고 있었는데 명령어 eslint --init 에서 만난 에러 eslint는 자주 사용되니 -g 를 붙여 글로벌로 설치하라고 해서 했는데, 뭐 경로 문제인지 eslint를 찾지 못하는 거 같음? 공식문서를 보니 그냥 -g 없이 설치하길래 했더니 별 문제 없이 잘 되었다.. 그래서 일단 쓰는 중 $ npm install eslint --save-dev $ ./node_modules/.bin/eslint --init eslint An AST-based pattern checker for JavaScript. www.npmjs.com .eslintrc.js eslint --init하면 만들어준다. module.exports = { env:.. 더보기
[MySQL | Javascript] query return값 받아서 저장하고 사용하는 방법 const getArchive = (req, callback) => { connection.query(selectQuery, function (selectErr, userRows) { if (userRows.length > 0) { return callback(JSON.parse(JSON.stringify(userRows[0]))); } else { return callback(false); } }) } connection.query를 통해 userRows에 어떤 결과를 받아 온다. 하지만 그 결과값을 return했을 때 console.log()를 찍어 보면, 데이터가 return되지 않고 undefined를 출력한다. 근데 위 코드처럼 callback을 리턴하면 이 값을 받아낼 수 있다. JSON.함수.. 더보기
[React] Context API, 전역 상태 관리하기, 두 개 이상의 Context 사용하기 유저의 정보나 헤더 등 전체 페이지에서 상탯값을 사용해야하는 요소들을 관리하기 위해 ContextAPI를 사용해보았다. 먼저 폴더구조는 다음과 같다. 1. createContext 먼저 context를 만든다. Header.context.js에 헤더의 context를 만듦 import { createContext } from "react"; // 관리할 state 정의 const HeaderContext = createContext({ view: false }); export default HeaderContext; 2. Provider state를 모아두는 provider를 만든다. state와 setState 동작을 정의한다. createContext를 받아와서 Provider로 return한다. p.. 더보기

티스토리툴바