본문 바로가기

전체 글55

[React] react, redux 를 사용하여 게시판 만들기 - 떽떽대는 개발공부 본격적인 리액트 공부를 하기 위해 구글링을 하다 아래의 블로그에서 게시판 만드는 것을 따라 해 보았다. mjn5027.tistory.com/35 [ React ] 리액트 Redux 로 게시판 만들어보기 이번 포스팅에선 리덕스를 이용해 게시판의 기본적인 Create, Read, Update, Delete 구현을 다룬다. ​ 공부하며 간단히 만들어본거라 설명이 미약한 점 참고해주시길. ​ 먼저 프로젝트를 만들고 리덕 mjn5027.tistory.com 이해가 될듯 말듯 알쏭달쏭한 상태에서 router 를 이용하여 페이지 이동할 수 있는 기능을 추가 구현해 볼까 한다. redux 관련 부분은 상기의 페이지에서 확인하면 될 것이다. 이번 글에서는 router 사용을 중점으로 했다. 내가 공부했던 Router 글.. 2021. 1. 19.
[React] 절대경로를 사용하여 css 적용하기 - 떽떽대는 개발공부 2021/01/14 - [React] - [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 2020/12/30 - [React] - [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부 [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부 리액트 프로젝트 생성 및 실행 방법 프로젝트 생성 프로젝트 생성 ddeck.tistory.com 이전 글에서 webpack 을 이용하여 개발환경을 구성했다. 작성한 프로젝트에 css를 추가하고자 한다. src 디렉토리가 위치한 동일 디렉토리에 public 디렉토리를 생성하고 css 디렉토리를 생성한 후 style.css 파일.. 2021. 1. 15.
[React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 2020/12/30 - [React] - [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부 [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부 리액트 프로젝트 생성 및 실행 방법 프로젝트 생성 프로젝트 생성 명령 설치하기 npm install -g create-react-app 위 명령으로 리액트 프로젝트를 생성하는 create-react-app명령을 설치했다. -g옵션이 주어 ddeck.tistory.com 상기 글에서 리액트 프로젝트를 생성하는 방법을 포스팅 했다. 실제 프로젝트 작업을 하기 위해 상기의 생성 프로젝트에서 수정해야 할 사항이 보이는데 이 부분을 보다 웹팩을 이용하여 직접 프로젝트 개발 환경 구성하는 법에 대해 알아보았다. 먼저 프로젝트를 생성할 디렉토리를 열어준다. 터.. 2021. 1. 14.
[React] react-dom 과 css animation 을 이용하여 loading 중 아이콘 구현하기 - 떽떽대는 개발공부 2021/01/11 - [React] - [React] ReactDOM 을 사용하여 팝업창 띄우기 [React] ReactDOM 을 사용하여 팝업창 띄우기 오늘은 react-dom 을 사용하여 팝업창 생성을 해보도록 하자. react 프로젝트가 생성될 때 하나의 돔이 생성되고 그 위에 view 가 그려진다. 따라서 팝업창을 생성하기 위해선 이미 펼져쳐 있는 dom 위 ddeck.tistory.com 이전에 react-dom 을 이용하여 팝업창 띄우기를 공부했다. 이 것을 응용하여 loading 중 아이콘도 구현할 수 있다. 동일하게 this.state값을 이용하여 로딩중 아이콘이 있는 팝업창을 나타낼 것이다. import React, {Component} from 'react'; import PopupD.. 2021. 1. 12.