본문 바로가기

리액트

[MongoDB] MongoDB 초기 설정 로그인 기능을 위해 Firebase라는 DB툴을 써보려 했는데 서버를 구축하지 않아도 된다는 점에서 장점이 있지만 여러가지 단점이 있었습니다. 가격적인 부분, 확장성 등등.. 그래서 MongoDB사용법을 공부해서 서버에 적용해보도록 하겠습니다. MongoDB는 NoSQL을 사용하기 때문에 데이터 구조화가 필요 없어 사전 작업 없이 데이터 베이스를 이용할 수 있습니다. 참고로 데이터베이스 관련해서는 '데이터베이스'라는 전공을 들었었는데 MySQL을 썼었지만 내용은 기억이 나지 않네요. 크게 중요할 것 같진 않습니다. Download MongoDB Community Server | MongoDB Try MongoDB Community Edition Try MongoDB Community Edition on .. 더보기
[React] 투두리스트 로그인 구현하기2 이번 시간에는 리액트 라우터 돔의 라우팅을 통해 메인페이지, 로그인, 회원가입 페이지를 분리해보도록 하겠습니다. 먼저 app.js에 루트(경로)들을 만들어 줍니다. import {BrowserRouter, Routes, Route} from "react-router-dom"; import를 해주고 function App() { return ( ); } 루트를 만듭니다. import React, { useState } from 'react'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; const TodoTemplateBlock = styled.div` width: 512px; height: 7.. 더보기
[React] 투두리스트 로그인 구현하기1 안녕하세요! 주말동안 갑자기 열이 나서 아무것도 못했습니다,, 오늘은 회원가입 페이지의 간단한 UI부분을 만들고 백엔드 쪽도 공부해서 로그인 기능까지 차근차근 구현해 보도록 하겠습니다. 베이스는 기존 투두리스트 웹을 이용하여 진행할 예정입니다. 기존 TodoTemplate을 이용하면 될 것 같습니다. import React from 'react'; import styled from 'styled-components'; const TodoTemplateBlock = styled.div` width: 512px; height: 768px; position: relative; /* 추후 박스 하단에 추가 버튼을 위치시키기 위한 설정 */ background: white; border-radius: 16px; .. 더보기
[React] 투두리스트 웹 만들기3 에러가 난 원인이 components에 있는 TodoContext함수를 인식을 못해서 였는데 폴더 이름과 함수 이름을 바꿔 보아도 해결되지 않아서 TodoContext함수만 따로 빼주었습니다. + 버튼을 누르면 45도 회전시켜서 X버튼으로 보이게 하고 할일을 입력할 수 있는 인풋 창이 생성됩니다. 여기서 처음 알게 된 것은 box-sizing: border-box; 라는 css 속성인데 border-box로 설정하면 요소의 width 값은 '콘텐츠 크기 + 좌우 padding 값 + 좌우 border 값'으로 계산되는 것입니다. width: 100%; 즉 width값이 100%이기 때문에 요소의 크기와 width 값이 동일하게 적용됩니다. 이제 UI 부분은 모두 구현된 것 같고 기능을 구현해 보도록 하겠.. 더보기
[React] 투두리스트 웹 만들기 2 기능을 구현하려면 여러 상태들을 관리해야하는데 보통은 useState로 부모 클래스에서 관리하곤 합니다. 이번에는 ContextAPI를 이용해서 보다 깔끔하게 상태를 관리해 보겠습니다. (벨로퍼트님의 강좌를 참고하였습니다.) TodoContext라는 파일을 하나 만들어 주고 useReducer를 사용해서 상태를 관리해 줍니다. import React, { useReducer, createContext, useContext } from 'react'; const initialTodos = [ { id: 1, text: '프로젝트 생성하기', done: true }, { id: 2, text: '컴포넌트 스타일링하기', done: true }, { id: 3, text: 'Context 만들기', done:.. 더보기
[React] 투두리스트 웹 만들기 안녕하세요 오랜만에 돌아왔습니다. 방학한지 3주정도 지났는데 이제야 공부 시작하네요. 소프트웨어 공학이라는 전공에서 팀 프로젝트로 투두리스트 어플을 만들었었는데 저는 디자인 담당이라 기능 구현을 하지 못했습니다. 이번 기회에 혼자서 따라가면서 만들어 보려고 합니다. 이번 프로젝트는 벨로퍼트 님의 게시물을 참고하였습니다. 벨로퍼트와 함께하는 모던 리액트 · GitBook (vlpt.us) 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us 먼저 프로젝트를 하나 만들어 줄게요. 터미널에 npx .. 더보기
[React] 리액트로 서버에 데이터 연동하기2 저번 시간에는 express를 이용해서 서버에 데이터를 추가하고 변경하는 것까지 해봤습니다. 이번에는 리액트에서 코드를 짜서 서버에 데이터 요청을 해보겠습니다. (라매개발자님의 강의 영상을 참고하였습니다.) 먼저 create-react-app database를 터미널에 입력해서 작업 폴더를 만들어 줍니다. 그리고 필요없는 css파일들과 logo.svg파일을 지워줍시다. 파일을 지웠으니까 index.js와 app.js의 import문과 내용을 지워줍니다. function App() { return ( Todolist ); } export default App; 임의로 코드를 적고 npm start를 통해서 테스트 해봅시다. 잘 나오네요! 서버에 데이터를 요청하려면 fetch와 axios를 사용해야 합니다... 더보기
[React] 리액트로 서버에 데이터 연동하기 안녕하세요 오랜만에 글쓰게 되었네요. 게으른 자신을 반성중.. 오늘은 리액트로 서버에서 데이터를 가져와보는 시간을 가져보겠습니다. 라메개발자님의 강의 동영상을 참고했습니다. 먼저 폴더를 하나 만들어줍니다. 그리고 터미널 창에 npm i express를 쳐서 익스프레스를 설치해줍니다. 구글에 npm이라 치면 npm관련 동작을 도와주는 사이트가 나오는데 여기서 검색창에 express라고 치면 샘플코드가 나옵니다. 이것을 App.js 파일에 넣어주고 실행시켜 봅시다. 터미널의 node app.js라고 친뒤 실행시키면 요렇게 서버가 잘 실행되는 것을 확인할 수 있습니다. const express = require('express') const app = express(); let id = 2; app.use(e.. 더보기

티스토리툴바