티스토리

Binary Journey
검색하기

블로그 홈

Binary Journey

binaryjourney.tistory.com/m

Cruella Dev L's Blog

구독자
13
방명록 방문하기

주요 글 목록

  • [React][CRUD] 게시판 만들기 All in One - (refactoring.1) Extract this nested ternary operation into an independent statement. 목차 돌아가기: https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-.. binaryjourney.tistory.com sonarlint extension을 사용해서 자꾸 빨간 줄이 그어져 있는 게 신경쓰여서 해결하려 한다. 원래 v.. 공감수 0 댓글수 0 2021. 5. 13.
  • [React][CRUD] 게시판 만들기 All in One - (Issue.1) \n 을 <br /> 변경하기 목차 돌아가기: https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-.. binaryjourney.tistory.com textarea 태그에서 줄바꿈이 포함된 글은 \n 을 포함하여 서버에 저장된다. 탭의 경우 \t 로 들어간다. .. 공감수 0 댓글수 0 2021. 5. 13.
  • [React][CRUD] 게시판 만들기 All in One (10). 설정 만들기 (총 복습용), redux, action, redux-saga, redux-toolkit, axios, get, post, put, delete 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-.. binaryjourney.tistory.com 이건 원래 계획에 없었는데 근데 깨끗한 db상태에서 시작하려면 필요할 것 같아 결국 만들었다. 이제껏 해온 saga, redux.. 공감수 0 댓글수 0 2021. 4. 15.
  • [React][CRUD] 게시판 만들기 All in One (9). 글 삭제, axios, delete 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-.. binaryjourney.tistory.com articleSlice.js 에 삭제 액션을 만들어준다. // articleSlice.js deleteArticle: (stat.. 공감수 0 댓글수 0 2021. 4. 14.
  • [React][CRUD] 게시판 만들기 All in One (8). 글 수정, axios, put 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-.. binaryjourney.tistory.com 수정으로 들어가기 전에 Article.js 에 수정 버튼을 만들어준다. // Article.js const history = u.. 공감수 0 댓글수 0 2021. 4. 14.
  • [React][CRUD] 게시판 만들기 All in One (7). 새 글 쓰기, axios, post 목차돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-.. binaryjourney.tistory.com 이제까지 거의 GET방식을 이용한 조회를 해봤다 (조회수 update, 댓글 등록, 댓글삭제 제외) 이번엔 새 글 쓰기를 해보겠다.. 공감수 1 댓글수 0 2021. 4. 14.
  • [React][CRUD] 게시판 만들기 All in One (6). 댓글 리스트 조회, 댓글 달기, 댓글 삭제, axios, redux-saga, redux-toolkit, axios, get, post, delete 목차돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-.. binaryjourney.tistory.com 이번엔 Comment 에서 댓글을 조회하는 걸 만들 것이다. 운과 시간이 된다면 댓글 달기, 더 되면 댓글 삭제까지 해볼참이다. .. 공감수 0 댓글수 6 2021. 4. 14.
  • [React][CRUD] 게시판 만들기 All in One (5). 게시글 내용 조회해오기. 그리고 이제 조회수 view 증가를 곁들인. redux-saga, redux, axios, put 목차돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-.. binaryjourney.tistory.com ArticleList 에서 나오는 게시글 목록 중 하나를 클릭하면 http://localhost:3000/article/2 이렇게.. 공감수 0 댓글수 1 2021. 4. 14.
  • [React][CRUD] 게시판 만들기 All in One (4). 게시판 따라 다른 게시글 목록 불러오기, redux, redux-saga, redux-toolkit, react, axios 목차돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-.. binaryjourney.tistory.com 조회 방식은 지난번 게시판 board 불러오는 것과 거의 비슷하다. 그러나 이번에는 articles 내 데이터 중 원하는 boar.. 공감수 0 댓글수 0 2021. 4. 14.
  • [React][CRUD] 게시판 만들기 All in One (3). 게시판 조회해오기, redux, react-redux, redux-saga, axios, get, REST API 목차돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-.. binaryjourney.tistory.com 들어가기 전에 파일 구조를 맞추고 들어가겠다. Board.js // Board.js import React from 'react'.. 공감수 0 댓글수 0 2021. 4. 14.
  • [React][CRUD] 게시판 만들기 All in One (2). npm install, view, router 생성 목차돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-.. binaryjourney.tistory.com 앱을 키기 전에 일단 모듈을 설치하겠다. npm i이나 yarn add 도 괜춘하다 모듈이 설치될 폴더위치는 ./reat-crea.. 공감수 1 댓글수 27 2021. 4. 14.
  • [React][CRUD] 게시판 만들기 All in One (1). react App 생성, 디렉토리 구조 설정, json-server 설치 및 실행 목차돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-.. binaryjourney.tistory.com 들어가기 전에 10월 말부터 연재(?)한 게시판 crud 시리즈(간단한 게시판 만들기)는 presentation component.. 공감수 1 댓글수 2 2021. 4. 14.
  • [React][Clone] Chess 게임 만들기 - 4. useDrag 궁금증 풀기 2021.02.10 - [React] - [React][Clone] Chess 게임 만들기 - 3. 체스말 움직이기 [React][Clone] Chess 게임 만들기 - 3. 체스말 움직이기 이전글 2021/02/10 - [React] - [React][Clone] Chess 게임 만들기 (single-player) - 2. (2) 체스판 모양 갖추기, require 로 image 파일 가져오기, default 의 필요성 [React][Clone] Chess 게임 만들기 (single.. binaryjourney.tistory.com 참고한 영상 www.youtube.com/watch?v=kBR7pDLcC3A&t=2462s 이건 내가 혼자 참고보려고 긁어온 url react-dnd.github.io/re.. 공감수 0 댓글수 0 2021. 4. 2.
  • [React][Clone] Chess 게임 만들기 - 3. 체스말 움직이기 이전글 2021/02/10 - [React] - [React][Clone] Chess 게임 만들기 (single-player) - 2. (2) 체스판 모양 갖추기, require 로 image 파일 가져오기, default 의 필요성 [React][Clone] Chess 게임 만들기 (single-player) - 2. (2) 체스판 모양 갖추기, require 로 image 파일 가져오기 이전 글 2021/02/09 - [React] - [React][Clone] Chess 게임 만들기 (single-player) - 2. (1) board settings [React][Clone] Chess 게임 만들기 (single-player) - 2. (1) board settings 이전 글 2021/02/0.. 공감수 1 댓글수 0 2021. 2. 10.
  • [React][Clone] Chess 게임 만들기 - 2. (2) 체스판 모양 갖추기, require 로 image 파일 가져오기, default 의 필요성 이전 글 2021/02/09 - [React] - [React][Clone] Chess 게임 만들기 (single-player) - 2. (1) board settings [React][Clone] Chess 게임 만들기 (single-player) - 2. (1) board settings 이전 글 2021/02/09 - [React] - [React][Clone] Chess 게임 만들기 (single-player) - 1. setting [React][Clone] Chess 게임 만들기 (single-player) - 1. setting 오랜만의 포스팅...! 새 프로젝트 때문에 몇.. binaryjourney.tistory.com 참고한 영상 www.youtube.com/watch?v=kBR7pDL.. 공감수 0 댓글수 0 2021. 2. 10.
  • [React][Clone] Chess 게임 만들기 - 2. (1) board settings 이전 글 2021/02/09 - [React] - [React][Clone] Chess 게임 만들기 (single-player) - 1. setting [React][Clone] Chess 게임 만들기 (single-player) - 1. setting 오랜만의 포스팅...! 새 프로젝트 때문에 몇 달 동안 바빴다. 할당 된 일정 중 두 개가 취소돼서 지난주 이번주 그나마 시간이 났다. 남은 시간 동안 놀고 싶지는 않아서 괜찮아 보이는 소스를 따 binaryjourney.tistory.com Chess 게임 만들기 시리즈에서 참고하는 영상 www.youtube.com/watch?v=kBR7pDLcC3A 쉴새없이 이어지는 다음 포스팅..! npm Script 에서 start 오른쪽 재생버튼을 클릭한다. 영.. 공감수 0 댓글수 0 2021. 2. 9.
  • [React][Clone] Chess 게임 만들기 - 1. setting 오랜만의 포스팅...! 새 프로젝트 때문에 몇 달 동안 바빴다. 할당 된 일정 중 두 개가 취소돼서 지난주 이번주 그나마 시간이 났다. 남은 시간 동안 놀고 싶지는 않아서 괜찮아 보이는 소스를 따라해보려고 한다. 아래 영상을 보고 1인용 체스게임을 만들 것이다. www.youtube.com/watch?v=kBR7pDLcC3A 체스게임 좋아하지만 그렇게 즐겨하지 않았던 터라 '리액트로 체스 게임을 만들어볼까?' 하는 생각은 아마 무의식에 이 어느 정도 자리했던 게 아닐 까 싶다. 가능하다면 WebSocket을 이용하여 multiplayer 버전으로 바꿔보고 싶은데 능력이 따라줄까 모르겠다. 들어가기 전에 내 블로그에는 개념 설명이 많지 않다. 나도 내가 정리하는 편이 아니고 개발 도중에 궁금한 거 찾아보는.. 공감수 0 댓글수 0 2021. 2. 9.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들기 - 19. Refactoring, useState 구문 useSelector 로 클린코딩하기 목차로 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial * 인용 시 출처 같이 기재부탁드립니다. code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-.. binaryjourney.tistory.com 렌더링 최적화를 위해 useState로 사용했던 const [TitleValue, setTitleValue] = useState("") .. 공감수 0 댓글수 1 2020. 11. 19.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들기 - 18. 오류, issue 고치기, validateDOMNesting(...): <td> cannot appear as a child of <a> 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial * 인용 시 출처 같이 기재부탁드립니다. code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-.. binaryjourney.tistory.com Hi Everybody 안녕 Hola! 오랜만의 포스팅이다. 지난주부터 개발 들어가고 2주를 바삐 보냈다. react는 공부할수록 새롭다... 공감수 0 댓글수 0 2020. 11. 19.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들기 - 17. (2) createSelector를 이용하여 게시판 목록에 댓글 개수 띄우기, redux-toolkit, reselect 이전글: 2020/11/04 - [React] - [React][CRUD] 간단한 게시판 페이지 만들기 - 17.(1) 게시판 목록에 댓글 개수 띄우기, redux-saga, axios [React][CRUD] 간단한 게시판 페이지 만들기 - 17.(1) 게시판 목록에 댓글 개수 띄우기, redux-saga, axios 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Descrip.. binaryjourney.tistory.co.. 공감수 0 댓글수 5 2020. 11. 5.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들기 - 17.(1) 게시판 목록에 댓글 개수 띄우기, redux-saga, axios 이전글: 2020/11/04 - [React] - [React][CRUD] 간단한 게시판 페이지 만들어보기 - 16. 댓글 삭제하기, useDispatch, axios, redux-saga, redux-toolkit [React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 16. 댓글 삭제하기, useDispatch, axios, redux-sa [React][CRUD] 간단한 게시판 페이지 만들어보기 - 15. json-server에서 foreign key처럼 게시글 ID로 댓글 리 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD].. binaryjourney.tistory.com 목차.. 공감수 0 댓글수 2 2020. 11. 4.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 16. 댓글 삭제하기, useDispatch, axios, redux-saga, redux-toolkit [React][CRUD] 간단한 게시판 페이지 만들어보기 - 15. json-server에서 foreign key처럼 게시글 ID로 댓글 리 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Descrip.. binaryjourney.tistory.com 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board.. 공감수 0 댓글수 2 2020. 11. 4.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 15. json-server에서 foreign key처럼 게시글 ID로 댓글 리스트 가져오기, redux-saga, redux-toolkit, useDispatch, useSelector 이전글: 2020/11/03 - [React] - [React][CRUD] 간단한 게시판 페이지 만들어보기 - 14. 댓글 달기(우선 댓글 저장부터), redux-toolkit, redux-saga, redux, reducer, useState, useDispatch, json-server, axios [React][CRUD] 간단한 게시판 페이지 만들어보기 - 14. 댓글 달기(우선 댓글 저장부터), redux-toolkit, redu 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-bo.. 공감수 0 댓글수 0 2020. 11. 4.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 14. 댓글 달기(우선 댓글 저장부터), redux-toolkit, redux-saga, redux, reducer, useState, useDispatch, json-server, axios 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com 퇴근 전까지 진도 나갈 수 있을지는 모르겠으나 일단 도전해보겠다. 나는 화면부터 만들었다. /src/compon.. 공감수 0 댓글수 0 2020. 11. 3.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - [Issue] React 는 Date() 를 rendering 하지 못한다. (Objects are not valid as a React child) 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com date를 화면에 나타내 보려다 계속해서 만난 오류 Objects are not valid as a React .. 공감수 0 댓글수 0 2020. 11. 3.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 13. 게시글 삭제하기, redux-toolkit , redux-saga, useDispatch, react router history, axios delete 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com 이제 board.json을 비우는 등의 서버를 직접 건드리는 일은 더 이상 발생하지 않도록 게시글 삭제 기능을 .. 공감수 0 댓글수 0 2020. 11. 3.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 12. axios put으로 게시글 수정하기, redux-saga, redux-toolkit, slice Reducer, react router 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com 11편에서 a 태그와 router의 Link 컴포넌트의 차이점을 혹독히 경험하면서 응용으로 수정하기 버튼은 Li.. 공감수 0 댓글수 7 2020. 11. 3.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 11. NullPointerException 처리하기, axios put으로 조회수 증가 반영하기, 조건부 렌더링, 삼항 연산자, router Link의 문제점 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com board 목록 조회를 데이터 존재 유무 상관없이 가능하도록 해놨기 때문에 서버를 실행시키지 않았거나 board.. 공감수 0 댓글수 0 2020. 11. 2.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 10. 게시판 전체 글 가져오기, useDispatch, createSlice, redux-toolkit, useSelector, axios, useEffect 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com 9편에서는 게시글 한 개의 내용을 불러오는 것을 다뤘고 이번 편에서는 게시글 목록 전체 조회를 다룰 것이다. 이.. 공감수 0 댓글수 0 2020. 11. 2.
  • [React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 9. useEffect와 useDispatch로 게시글 페이지 내용 나타내기, redux, redux-saga, axios, redux-toolkit, useSelector 목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com 화면 이동이 해결되었으니 이제 내가 등록한 글의 내용이 화면에 나타나는 것을 구현해보도록 해보자 첫번째로 art.. 공감수 0 댓글수 0 2020. 11. 2.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.