전체 글

[TIL] 데브코스 TIL - 쿠키와 세션, 웹스토리지, IndexedDB

하루하루 공부한 모든 내용을 블로그에 정리하긴 힘들겠지만 하루에 하나씩은 정리해서 공유해보도록 노력하겠습니다! 1. 쿠키와 세션 쿠키와 세션에 대해서는 내가 예전에 정리해놓은 글이 있어 따로 다시 정리하지는 않고 내가 쓴 글을 다시 보며 복습하는 계기가 되었다!!! https://judahhh.tistory.com/46 [Web] 쿠키와 세션의 차이점, 인증과 인가, 세션 기반 인증 방식 쿠키와 세션의 차이점을 알아보기 전에 먼저 쿠키와 세션이 무엇인지부터 알아보자(나한테 하는 말) 쿠키와 세션의 사용 이유, 배경 쿠키와 세션을 사용하는 이유는 서버와 클라이언트의 통신 judahhh.tistory.com 2. 웹 스토리지 (Web Storage) 웹 스토리지는 두 가지 저장소를 제공한다. 개발자 도구 메..

[React] button onClick 시 onSubmit 이 실행되는 문제 해결

다음과 같이 회원가입 기능을 개발하던 중 인증코드와 인증코드 확인을 누르면 이 form 을 감싸고 있는 곳에 선언해둔 onSubmit 이 실행되어 비밀번호를 입력하지 않았다고 뜨는 문제가 발생하였다. 인증코드 전송버튼과 인증코드 확인 버튼은 onClick을 통해 이벤트를 발생시키도록 하였고 폼 전체의 전송은 onSubmit을 통해 이벤트가 발생한다. button 에 onClick 발생 시 onSubmit이 발생하는 이유를 Stack overflow 를 통해 찾아봤더니 onsubmit의 제일 밑에 기본이 되는 함수가 onClick 이어서 라고 한다. 이를 해결하기위해 으로 만든 버튼을 으로 변경해주면 된다고 한다. 나는 button을 styled-components를 통해 만들었기 때문에 이부분을 inpu..

[React] 환경변수가 undefined일 때 (process.env undefined)

axios baseURL에 ip주소를 직접 넣는 것이 아니라 .env에 환경변수를 설정해서 넣었다. 그러나! process.env_REACT_SERVER_URL이런 식으로 넣어줬더니 인식을 못하고 콘솔에 찍어봤더니 undefined였다. .env는 최상위 루트에 만들어줬어야 했는데 src 파일 안에 만들어서 undefined가 났었다. 이렇게 src밖으로 옮겨주니 바로 잘 작동하였다!

[React] 오늘의 에러 - Too many re-renders. React limits the number of renders to prevent an infinite loop.

const getGroups = useCallback(async () => { const user_email = localStorage.getItem("email"); await api .get(`/${user_email}/groups`, { headers: { access_token: localStorage.getItem("jwt_accessToken"), }, }) .then((response) => { console.log(response); setGroups([]); setGroups(response.data.groups); groups.forEach((v) => { groupName.push(v["group_name"]); }); setGroupNames([]); setGroupNames(gro..

[Network] 컴퓨터네트워크 스터디 회고 (2023.04.11 ~ 2023.05.06)

🤍 활동 내용 한달간 진행했던 컴퓨터네트워크 스터디에 대해 기록해보려고 한다. 이 컴퓨터네트워크 스터디는 멘토님들이 정해주시는 한 회차의 질문들을 바탕으로 각자 공부를 해오고 4명이 팀을 이루어 모의면접을 하는 방식으로 진행되었다. 지원자1, 면접관2, 관찰자1 이렇게 구성되어 지원자에게 그 회차에 공부한 것에 대해 질문하고 꼬리질문이나, 추가적인 인성 질문도 그때그때 같이 질문하고 대답한 후 면접관 입장, 관찰자 입장에서의 피드백도 주고받았다. 🤍 활동 자료 줌을 캡쳐한 사진은 없지만 블로그에 꾸준히 네트워크 스터디에 대한 과제물을 포스팅하였다. 🤍 역할, 기여한 부분, 성과 나는 이 스터디에서 서로 돌아가며 모의 면접을 하는 시간이 각자 공부를 열심히 해오는 것 이상으로 중요하다고 생각했다. 그래서 ..

[React] Warning: Each child in a list should have a unique "key" prop. 에러 원인 및 해결방법

리스트를 map메서드로 보여주던 중 에러 발생 Warning: Each child in a list should have a unique "key" prop. 에러 발생 코드 {chatList.map((value, index) => ( index로 key값을 주는 것을 지양한다고 한다. 항목들이 삽입,삭제 될 경우 독립적인 key값이 아니게 된다..! 2. key={value} -> 이 역시도 리스트들 중 같은 value값이 존재하면 key값은 독립적이지 않다. 결론 순회하고 있는 각 배열 값의 id로 key값을 부여하였다. 이 id값은 데이터베이스에 저장되어 있는 id값이기 때문에 삽입, 삭제가 되어도 독립적인 값이다. {chatList.map((value, index) => (

[React] npm start 시 ERR_CONNECTION_REFUSED (사이트에 연결할 수 없음 localhost에서 연결을 거부했습니다.)

어느날 코드도 설정도 바꾸지 않았는데 npm start 를 하니 이런 에러를 만나게 되었다. 이게 정말 막막했던 이유는 localhost자체가 안되는 것이 아니라 다른 프로젝트는 npm start 했을 때 실행이 잘 되는데 이 프로젝트만 안된다는 것이었다. 현재 react개발을 맡고 있고 java와 spring으로 백엔드 두명이 개발 중이며 통신 확인은 백엔드 팀원 노트북 ip에 내가 접속(같은 와이파이에 없을 경우 포트포워딩)하여 진행하고 있었다. 여태 통신 확인도 잘 되다가 정말 불쑥 이런 에러를 보게 되었다. 끝없는 구글링과 여러 자문을 구해 내가 시도한 방법 1. 인터넷 연결 확인 -> 인터넷 연결 때문 아님 2. node_modules, package-lock.json 삭제 후 캐시 클린 작업 ..

[Network] 컴퓨터 네트워크 스터디 6회차 - 쿠키, 세션, CORS, REST, xxs, SQL Injection, 웹 캐시, 웹 프록시

✅ 쿠키에 대해 설명해주세요. (쿠키를 통해 HTTP 상태유지를 어떻게 하는지 클라이언트-서버 관점에서 설명. 장단점 설명) HTTP 는 비연결성, 비상태성이라는 특징을 지니고 있어 요청 간 의존관계가 없습니다. 상태와 연결을 유지하지 않는 http 에서 상태를 유지하기 위한 방법 중 하나로 쿠키가 있습니다. 먼저, 쿠키란 클라이언트의 로컬에 저장되는 키와 값이 들어있는 파일로, 쿠키이름, 쿠키 값, 유효시간, 경로 등을 포함하고 있습니다. 쿠키는 클라이언트의 상태 정보를 브라우저에 저장하여 참조합니다. - 동작방식 a. 웹 브라우저가 서버에 요청 b. 상태를 유지하고 싶은 값을 쿠키로 생성 c. 서버가 응답할 때 HTTP 헤더(Set-Cookie)에 쿠키를 포함해서 전송 d. 전달 받은 쿠키는 웹 브라..