yuhun do IT

그냥 html에서는 img 태그의 src 속성에 이미지 파일의 경로를 주면 사용 가능했다. 하지만 리액트에서는 import 또는 require() 사용해야 경로를 사용할 수 있다. 이걸 몰라서 계속 엑스박스가 떠 한참을 헤멨다.. 1. import 사용 2. require 사용 1. import 사용법 import 원하는이름 from '경로' 이렇게 해주어야 이미지를 가져와 사용할 수 있다. 2. require 사용법 require('경로').default require를 사용하고 .default를 붙여야 우리가 원하는 대로 경로를 가져올 수 있다. default가 없으면 객체를 가져오는 거라 제대로 사용할 수 없다.

서버와 json으로 통신은 편리하지만 이미지가 들어가면 조금 복잡해진다.. FormData를 이용해 보내야 한다. const handleImage = () =>{ const formData = new FormData(); // FormData 생성 formData.append('multer에서 쓸 이름', event.target.files[0]); // formData는 그냥 콘솔로 안보여서 value 확인하는 방법 // console.log(formData) 하면 아무것도 안나온다. // for (let value of formData.values()) { // console.log(value); // } // 서버에 formData 보내기 const response = await axios.post(..

중요한 정보가 있으면 깃에는 올리면 안됩니다. 그래서 .env라는 파일을 만들어 변수를 저장해두고 .gitgnore에 추가해 주어야합니다. 그러면 .env를 이용할 수 있는 dotenv를 알아보겠습니다. 패키지 설치 yarn add dotenv 이제 루트 디렉토리에 .env 파일을 생성해줍니다. 그리고 원하는 key=value로 작성하면 되는데 일반적인 문자열처럼 ' ' 안에 작성하는 것이 아닌 그냥 작성하시면 됩니다. // .env IMPORTANT_KET=value값 그대로 이제 value를 사용할 파일에서는 어떻게 사용하는지 알아보면 다음을 추가해주고 process.env.키값 으로 이용합니다. // server.js require('dotenv').config(); cosnt key = proce..

사용자 권한에 따라 들어갈 수 있는 페이지와 없는 페이지를 제작해 보도록 하겠습니다. 다음은 구현을 위해 가정한 것입니다. 1. 권한을 단순하게 0 , 1 , 2 로 나눴습니다. 2. 유저 정보에 authority 라는 항목을 두어 권한을 부여했습니다. 3. 유저의 권한가 접속 권한보다 더 높거나 같으면 해당 페이지에 접속이 가능합니다. 먼저 app.js에서의 구성은 다음과 같습니다. function App() { // 컴포넌트를 연결시켜줄 함수 const destination = (user) => { return ; }; // 사용자 권한 가정 const user = { authority: '2' }; // router 부분 return( ) } 이제 Auth로 넘어가서 받아온 props로 권한을 비교..

오늘은 동기, 비동기 때문에 고생을 좀 했습니다.. useState는 성능때문에 다른 state를 기다렸다가 한꺼번에 render 한다고 합니다. 그래서 이를 간과하고 useState를 남발해서 코드를 짜면 돌이키기 힘든 문제가 발생합니다. 나는 분명 순서대로 잘 짠 것 같은데 생각처럼 동작하지 않는 경험을 할 수 있기에 state는 해당 컴포넌트에서 중요한 변경사항이 있는 값에 사용하도록 합시다. 제가 고생한 예시를 보겠습니다. 다음의 결과가 어떻게 나올까요? // 중간 발췌 const [a, setA] = useState(null); const [b, setB] = useState(null); useEffect(() => { setA('a'); console.log(a, b); setB('b'); c..

에러명 [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client 회원가입을 구현하다가 마주친 에러인데 찾아보니 response를 여러번 보내려고 할 때 발생한다고 되어있었습니다 보통은 if 문을 사용할 때 그냥 res.~~~ 가 아니라 return res.~를 해주면 해결되는 문제입니다. 하지만 다음 예시에서는 에러가 해결되지 않았습니다. const users = [] app.post('/sign', (req, res) => { const { id, name, passWord, email } = req.body; users.map((user)=>{ if(user.id === id){ res.json({msg:'중복된 아이디..

get 요청하는 법 params에 원하는 데이터를 담아 보낼 수 있습니다. axios.get('요청 주소', { params: { ex1 : 1, ex2: 2 } }) // .then((res) => { console.log(res.data) }) .catch(() => { logOut(); }); get요청 처리하는 법 req.query.ex1 같은 방법으로 접근해도 되고 다음 예시처럼 { } 안에 요청과 같은 이름을 사용한다면 간편하게 받아올 수도 있습니다. router.get('요청 주소', (req, res) => { const { ex1 , ex2 } = req.query; // res.query에서 params를 접근한다. const data = '반환' res.status(200).json(..

클라이언트와 서버가 데이터를 주고받을때 json이 참 편리합니다. 그런데 그냥을 사용할 수 없고 다음의 코드를 추가해주셔야 json을 사용할 수 있습니다. const app = express(); app.use(express.json()); // json을 사용할수 있게 해줍니다. 전에는 'body-parser'를 설치해서 사용했다는데 지금은 express에서 지원해주니 편리합니다. 이제 요청을 받았을때 다음처럼 json을 넘겨줄 수 있습니다. app.get('/요청', (req, res) => { res.status(200).json({'오브젝트 전달 가능!!'}) });

axios 라이브러리를 사용하면서 겪은 몇가지 에러 문제입니다. 1. useEffect( )에서는 async 사용 불가 useEffect( ) 안에서는 async를 사용할 수가 없더군요.. 그래서 따로 함수를 분리해 선언해주고 그 함수를 useEffect에 넣어주었습니다. 2. axios를 사용할때 비동기임으로 데이터가 필요하다면 await 사용하기 사실 1번 문제가 2번 때문에 일어났는데요. 다음 예시를 보며 설명드리겠습니다. let a= 'a' axios.get('요청') .then((res)=> { console.log(res.data.a) a = res.data.a //res.data.a 는 'b'라고 가정하자 }) console.log(a) 이렇게 되면 콘솔에는 어떻게 찍힐까요? b가 두번 찍..

react-cookie를 이용해 쿠키를 관리하고 이를 통해 로그인 인증을 하는 방법을 알아보겠습니다. 일단 리액트 훅을 사용할 예정이기에 react-cookie를 설치해 줍니다. yarn add react-cookie 쿠키 훅을 사용하는 방법을 먼저 살펴보면 다음의 형식으로 사용합니다. const [cookies, setCookie, removeCookie] = useCookies(['쿠키 이름']); cookies는 쿠키가 들어있습니다. 쿠키를 만들고 제거하기 위해선 다음을 사용하는데 옵션은 필요하면 넣을수 있습니다. setCookie()는 쿠기에 값을 넣을때 -> setCookie(쿠키 이름, 쿠키에 넣을 값, 옵션) removeCookie()는 쿠기를 삭제할 때 필요합니다. -> removeCook..