본문 바로가기

React

[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] 리액트로 서버에 데이터 연동하기 안녕하세요 오랜만에 글쓰게 되었네요. 게으른 자신을 반성중.. 오늘은 리액트로 서버에서 데이터를 가져와보는 시간을 가져보겠습니다. 라메개발자님의 강의 동영상을 참고했습니다. 먼저 폴더를 하나 만들어줍니다. 그리고 터미널 창에 npm i express를 쳐서 익스프레스를 설치해줍니다. 구글에 npm이라 치면 npm관련 동작을 도와주는 사이트가 나오는데 여기서 검색창에 express라고 치면 샘플코드가 나옵니다. 이것을 App.js 파일에 넣어주고 실행시켜 봅시다. 터미널의 node app.js라고 친뒤 실행시키면 요렇게 서버가 잘 실행되는 것을 확인할 수 있습니다. const express = require('express') const app = express(); let id = 2; app.use(e.. 더보기
[Next.js] 포트폴리오 사이트 만들기 오늘부터는 포트폴리오 사이트를 만들어 보려고합니다. 본실습은 개발하는 정대리님의 강의 영상을 참고하였습니다. 먼저 폴더를 하나 만들어 주고 npx create-next-app@latest --experimental-app 를 터미널에 입력해줍니다. 초기 설정을 해주고 npm run dev를 통해 실행합니다. export default function Home() { return ( 메인 페이지임 ) } index.js에서 메인 페이지가 잘 동작하는지 확인하기 위해서 다음과 같이 코딩을 짰습니다. 잘 동작하네요! 레이아웃을 만들기 위해서 components라는 폴더를 만들어 주고, Layout.js 파일을 만들어 줍니다. export default function Layout({children}) { re.. 더보기
[Next.js] 쿠팡 사이트 디자인 따라해보기 2 저번 시간에 이어서 쿠팡 사이트 디자인을 따라해보겠습니다! 쿠팡 사이트의 툴 바는 좌측에 2개의 링크바, 우측에 3개의 링크바가 정렬 되어 있는데 저번에 구현한 사이트에선 이것을 구현하지 못했습니다. 일단 이것먼저 보완해보겠습니다. 우측 3개의 링크바를 먼저 태그로 감싸줘야할 것 같습니다. 로그인 회원가입 고객센터 Rightbar라는 이름의 태그로 감싸줍니다. 그 다음, .Rightbar{ display:flex; justify-content: space-between; } display를 flex한 컨테이너로 바꿔주고 space-between 속성을 주게 되면 공간을 확보하기 위해 우측으로 밀려날 것 같습니다! 성공적으로 정렬 된 모습입니다. 좌측 2개의 링크바도 손봐줍시다! 즐겨찾기 입점신청▼ 먼저 .. 더보기
[Next.js] 쿠팡 사이트 디자인 따라해보기 1 안녕하세요 제가 Next.js를 좀 다루다 보니 기본적인 css 디자인 능력이 좀 부족하더라고요. 그래서 오늘은 연습으로 쿠팡 사이트와 같은(거의 비슷한) 사이트를 만들어 보겠습니다. 차근차근 하나씩 해보겠습니다. 먼저 위쪽을 보시면 작은 회색의 툴바가 있습니다. 툴바를 먼저 만들어 봅시다! 즐겨찾기 입점신청▼ 로그인 회원가입 고객센터 툴바 클래스 입니다. 링크 태그로 감싸져 있는 메뉴를 5개 만들어 줍니다. 그리고 툴바의 배경이 될 박스를 만들어 줍니다. .toolbar{ background-color: rgba(222, 222, 233, 0.456); padding:7px; display:flex; margin:0 auto; justify-content: space-around; } 회색바의 css .. 더보기
[Next.js] React 기능들을 이용해서 디자인하기 오늘은 저번 시간과 마찬가지로 Next.js와 친해지는 시간을 가져보겠습니다. 그러기 위해서는 React기능들을 복습할 필요가 있겠네요. 이번 공부는 코딩애플님의 강좌를 참고하였습니다. Home상세 1 Next.js 입문 React에서와 똑같이 div 태그안에 className을 통해서 css를 디자인할 수 있습니다. 태그는 html에 a href태그와 같은 기능을 합니다. 는 기본페이지로 이동하게 해주고, 는 기본페이지 뒤에 /list를 입력하면 그 페이지로 이동하게 해줍니다. 태그는 글자의 크기를 키워줍니다. 이때 ~ 역순으로 크기가 증가합니다. Next.js에서 css를 건드리려면 React의 app.js와 똑같은 역할을 하는 globals.css로 이동을 해야합니다. 내용을 다 지우고 .front.. 더보기
[Next.js] 개발환경 셋팅 요새는 React 보다는 Next.js를 쓰는 것이 인기라고 하네요. 저도 트렌드를 따라서 Next.js 공부를 해보려고 합니다. Next.js는 React문법을 기본으로 사용하기 때문에 공부하기 수월할 것 같습니다! 먼저 개발환경 셋팅을 해보겠습니다. Node.js 18버전 이상이 필요하다고 하네요. 왼쪽 버튼을 눌러 다운받아 줍니다. 에디터는 VScode를 그대로 사용하면 될 것 같습니다. 코드를 짤 폴더도 만들어 주겠습니다. 그리고 이것을 VScode에서 열어주면 되겠네요. 폴더를 연 다음 터미널을 열어서 npx create-next-app@latest --experimental-app 명령어를 입력해줍니다. 그러면 이렇게 에러가 발생합니다. 하하,, 구글링을 해 볼 차례입니다. 생각보다 쉽게 해결.. 더보기

티스토리툴바