개발하고 싶은 초심자

개발을 하다가 내가 원하는 그림으로 나오지 않아 한참 고민하다가 해결이 되어 블로그에 정리하게 되었다. 1. 클릭 이벤트를 작성할 때 그 안에 한 조건이 참일 때 두 가지 이상의 이벤트를 동작시키기 onClick={() => {condition1 ? value1 value2 : value3}} 위 코드는 올바른 문법은 아니지만, 보는 사람의 이해를 돕기 위해 정말 직관적으로 작성해봤다. (근데 작성해보고 나니 정말 저렇게 작동되면 좋을 것 같은데 왜 저렇게 못하게 했을까, 리액트 형님들(?)의 큰 뜻이 있는것일까...) 여러가지 방법들을 시도해보다, 결국 해답을 찾아냈다. 처음에 작성했을 때는 onClick={() => {condition1 ? () => {value1; value3}} : value2}..

1. 처음 시도해본 방법 if (window.location.pathname === '/') return null; 구글링으로 찾아봤을 때 나온 방법이었다. 단순하게 헤더를 보이지 않게 하는 데에는 성공했으나 새로고침을 임의로 해주어야만 헤더가 없어지는 문제가 생겼다. 사이드 이펙트 내용: 임의로 새로고침을 한 후에 다른 페이지로 넘어가면 똑같이 헤더가 나오지 않는 문제. 2. 해결한 방법 // App.js import React, { useEffect, useState } from 'react'; import { Route, Routes, useLocation } from 'react-router-dom'; ... function App() { const [path, setPath] = useState..

(npm 공식문서) 1. react-confirm-alert confirm box를 어떻게 만들 수 있을까에 대해 고민하며 구글링을 하던 중, react-confirm-alert라는 라이브러리를 알게 되었다. 어떻게 사용하는지에 대해 간략하게 알아본 후 적용시켰고, 결과는 95% 정도 성공인 것 같다. 5%가 빠진 이유는, 같은 페이지에 같은 코드를 삽입함에도 불구하고 기능이 제대로 작동하지 않은 페이지가 있다. 원인을 아직 발견하지 못했지만, 추후 알게 된다면 함께 작성할 예정이다. npm i react-confirm-alert --save import { confirmAlert } from 'react-confirm-alert'; // alert 라이브러리 사용을 위한 import import 're..

(reference) (reference-stackoverflow) git rm --cached -r .env git add . git commit -m "remove .env file from git" git push (reference-from inflearn) ① .gitignore에서 .env라는 코드를 삭제 (이때부터 .env파일 git으로 추적 다시 시작) ② .env 파일 삭제 ③ 커밋 및 푸시 (이러면 원격 저장소에 .env가 사라지겠죠) ④ .env 파일 되살리기 ⑤ 다시 .gitignore에 .env 라는 코드 추가

해당 (reference) 를 참고함. 원래 NavLink를 활용하여 header에 로고를 클릭하면 바로 루트 페이지로 이동할 수 있게끔 만들었다. 그런데 다른 컴포넌트들은 styled components를 활용하여 css를 적용했는데, header만 따로 css파일을 만드는 것이 거슬려서 NavLink를 활용하면서 styled components를 적용할 수 있는 방법을 찾아보았다. import { NavLink } from 'react-router-dom'; // ① NavLink import import styled from 'styled-components'; // ② styled-components import export const NavStyle = styled(NavLink)` color:..

import IconButton from '@mui/material/IconButton'; import MenuIcon from '@mui/icons-material/Menu'; return ( ) 텍스트를 활용한 버튼의 경우에는 Button으로 감싸줄 수 있지만, 그렇지 않은 홈페이지, 휴지통, 메뉴(사이드바) 등 순수 아이콘의 경우에는 IconButton으로 감싸준다. (reference) 사이즈 변경은 fontSize를 활용하여 바꾸어준다.

(how to connect my own project in gihutb repository) 기존 프로젝트 폴더 안으로 진입 git init 으로 깃 저장소 초기화 git remote add origin 깃 저장소 주소 git remote -v 로 현재 리모트 주소 확인 git add . 로 새 레포지토리에 파일 업로드를 위해 스테이지에 파일 올리기 git status 로 현재 스테이징된 파일들 확인 git commit -m "커밋 메시지 내용" 으로 커밋 git push origin master 로 레포지토리에 파일 업로드 ✷ git push -u origin master : -u 옵션이 붙으면 다음부터는 git pull / push할 때 origin master를 지정하지 않아도 알아서 origin..

(22.09.28 ~ 22.10.06) 1. mui(material ui)가 설치되지 않는 에러 react-create-app을 선행할 때 리액트 버전이 18로 설치가 되며, material ui는 16 버전부터 적용 가능하다. → 해결책 npm install --save react@^17.0.2 react-dom@17.0.2 // react, react-dom 버전 낮추기 npm install @material-ui/core --legacy-peer-deps // --legacy-peer-deps 옵션으로 설치 npm install @mui/icons-material --legacy-peer-deps 혹은 npm install @material-ui/core --force // --force 옵션으로 ..