React7 원하는 페이지에서만 nav와 footer 라우팅 및 잘못된 경로는 404 페이지 라우팅하기 이번 홈페이지에서는 nav와 footer가 모든 화면에서 다 보여지고 있어서 다른 설정을 해주지 않아도 되었는데 404페이지를 만들자는 의견이 나오면서 라우팅을 손을 봐주어야했다. 404페이지 path 404페이지는 정해지지 않은 path를 입력하는 경우 무조건 떠야하기 때문에 아주 간단하게 path에 *를 입력해주면 된다. 근데 이렇게만 코드를 넣어주니 nav와 footer가 같이 보이거나 에러가 나는 상황이 생겼다. react-router-dom 의 outlet 그래서 알게 된 방법이 컴포넌트를 분리해 라우팅을 해주면 되는 것이었다. Layout이라는 컴포넌트 안에서 Nav와 Footer를 불러오고 그에 따라 달라져야하는 부분을 Outlet으로 처리해주었다. const Layout = () => { .. 2023. 7. 16. 1차 프로젝트 회고록 & 위코드 5주차 1. About team Seoulminer - mining codes 개발기간: 2023.06.23 ~ 2023.07.07 깃헙 링크 : FrontEnd, BackEnd Clone Coding project - 배민문방구 웹 개발의 첫 걸음을 뗀 seoulminers는 사람들이 가장 일상적으로 영위하는 행동 중 하나인 상거래를 웹페이지로 구현해 보기로 했다. 그러던 중 우리의 눈에 발견된 우아한형제들의 우아한 브랜드, 배민문방구 우리에게 주어진 시간은 단 2주. 2번만의 스프린트 안에 최대한 클론 할 수 있는 범위 내에서 우당탕탕 이나마 굴러가는 프로덕트를 만들어 내야 한다. 우리가 구현해야 할 행위 - 전자상거래 인터넷이 우리 생활에 보급된 이래, 사람들이 현실세계에서 영위하는 행동들 중 많은 수가 .. 2023. 7. 10. addEventListenser 총정리 자바스크립트는 동적인 언어이기때문에 이를 잘 활용하기 위해서는 내 기준 event 메소드를 쓰는 것이 중요한 것 같다. 다른 문법들을 같이 섞어 써야하지만 addEventListenser 메소드로 사용자의 행동을 이끌어줄 수 있기 때문이라고 생각한다. 그래서 오늘은 자바스크립트의 addEventListenser를 샅샅히 살펴보려고 한다. 먼저 addEventListenser의 구조는 아래와 같다. DOM의 타겟.addEventListenser(event타입, 실행될 함수, 옵션) 하지만 우리는 리액트를 사용하고 있고 그런 경우 더 쉽게 이벤트를 적용할 수 있다. 중괄호 안에는 콜백함수도 들어갈 수 있고 함수를 따로 넣어줄 수도 있는데 함수명만 넣어주는 경우 별도의 따옴표 없이 함수명만 넣어주면 된다. a.. 2023. 6. 25. 댓글 기능 구현하기 바닐라 자바스크립트에서 했던 댓글 기능을 리액트로도 구현해보려고 한다. DOM 직접 조작과 너무 달라서 한참 애를 먹었다. 멘토님께서 배열을 사용해서 해야한다고 힌트를 줘서 먼저 useState로 변수 선언 먼저 했다. 댓글이 들어가는 input 의 value를 가져오는 idValue, 만들어진 댓글이 들어갈 배열인 saveComment, 댓글이 한글자라도 적히면 버튼의 색을 바꿔줄 btnColor를 만들어주었다. const [idValue, setIdValue] = useState(''); const [saveComment, setSaveComment] = useState([]); const [btnColor, setBtnColor] = useState(0.3); 그리고 앞서 포스팅했던 로그인 버튼 활.. 2023. 6. 19. 로그인 버튼 활성화 구현하기 idValue의 값이 조건을 만족할 때 로그인 버튼이 활성화되고 버튼을 누를 수 있도록 만들고 싶었다. 그리고 버튼을 누르면 main 페이지로 이동할 수 있도록 만들어 주려고 했다. 바닐라 자바스크립트에서는 DOM을 직접적으로 조작하면서 input창의 값을 불러왔는데 리액트는 가상돔을 구현하기때문에 직접적인 DOM 조작을 할 필요가 없어서 뭔가 다른 산을 만나게 되었다. 일단 이번에 useState와 useNavigate 훅을 사용할 예정이기 때문에 import를 해주었다. import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import './Login.scss'; id와 pw의 input 창의 값.. 2023. 6. 19. SPA로 구성된 React에서 Router 구현하기 리액트는 SPA로 html파일이 하나밖에 없는 라이브러리다. MPA처럼 다른 파일로 넘어가는것처럼 보여주기 위해 여러컴포넌트를 라우터를 이용해 옮겨다닌다. 우리는 한페이지짜리 웹을 만드는 것이 아니니까 라우터 기능을 필히 알아야한다. 이번에는 기존에 작업하던것에 라우터를 적용해보려고 한다. [과제 1] Router 컴포넌트 구현하고 Router 기능 구현하기 일단 먼저 link와 useNavigate를 쓸거기때문에 import를 먼저 해준다. 당연히 export도 미리 해준다. import React from "react"; import { Link } from "react-router-dom"; import { useNavigate } from "react-router-dom"; import "./In.. 2023. 6. 15. 이전 1 2 다음
