본문 바로가기

전체 글393

2024-06-11 JWT 회원가입 인증/인가 실습하기 토큰 기반 인증 원리 이해하기 (Thunder Client)아래는 Thunder Client라는 VSCode extension과 미리 준비된 회원 관리 백엔드 API로 토큰 기반 인증의 원리를 실습해보며 이해하는 과정이다.굳이 이해할 필요가 없다면 생략하고 다음 과정으로 넘어가도 좋다.1. Thunder Client 설치VSCode extension에서 Thunder Client를 설치한다.2. Thunder Client 실행좌측 하단에 생긴 Thunder Client 메뉴에서 New Request를 누른다.아래와 같은 화면이 보인다.3. POST 요청 보내기 (회원가입)아래는 회원가입 API 명세서이다.API URL : https://moneyfulpublicpolicy.co.krMethod : POS.. Programing/TIL 2024. 6. 11.
2024-06-10 헤더 만들기 (styled-components) 상황사진은 헤더를 완성한 모습이지만, 헤더를 완성했을 때 메인 영역이 가운데로 좌우 여백을 균등하게 주고 몰려있는 것을 볼 수 있듯, 헤더도 사이즈가 고정이 되어버린다.  헤더는 좌우 여백없이 전체적으로 꽉 채우고 싶고, 위 사진처럼 브라우저를 축소하더라도 헤더의 영역은 고정되어 풀리지 않게 하고 싶다. 해결1. 개발자 도구를 열어 어디에서 메인의 사이즈를 제한하고 있는지 확인한다.본인의 경우에는 root에 max-width 속성으로 1280px으러 너비를 제한하고 있고, margin: 0 auto; 속성으로 가운데 정렬을 하고 있음이 확인되었다.이 상태에서 헤더를 만들어도 root 자체가 1280px로 고정되어 있기 때문에 헤더도 영향을 받아 가운데로 몰리게 된다. 2. root의 너비 제한을 풀고, .. Programing/TIL 2024. 6. 11.
2024-06-07 팀 프로젝트 회고 이번 팀 프로젝트에서는 발표를 맡았다. 나의 발표 대본을 함께 올려본다.배포주소 Our Knowledge our-knowledge-teamproject.vercel.app 발표시작안녕하세요, A10조 발표를 시작하겠습니다.저는 발표를 맡은 김병준입니다.발표 순서를 말씀드리겠습니다.발표 순서는 먼저 이번 프로젝트에 힘써주신 팀원분들을 소개하는 것을 시작하겠습니다.그 다음 결과보고서를 함께 보며 프로젝트에 대해 간단히 소개해드리고,웹 사이트를 직접 시연하며 구현한 기능에 대해서 소개해드린 후,소감을 발표하며 마무리하겠습니다.팀 소개화면: 2. 프로젝트 팀 구성 및 역할본격적인 발표에 앞서 잠도 못자고 고생해주신 저희 팀을 소개하겠습니다.먼저 김재훈 팀장님이 프로젝트 셋업과 홈 뉴스피드 제작을 맡아주셨습니다... Programing/TIL 2024. 6. 7.
2024-06-06 게시글을 업데이트 했음에도 페이지가 리렌더링 되지 않는 이유 해결방법너무 간단한 문제였는데, 문제는 fetch를 받아 온 데이터를 posts 라는 state에 담아 다른 컴포넌트에서도 사용할 수 있게 props로 하위 컴포넌트에 전달했는데 이 과정에서 리렌더링이 발생할 만한 조건을 내려주지 않은 것이다. 즉 posts라는 상태의 상태 변경 함수를 같이 내려주지 않았다는 것이 문제다. 그렇다 보니 posts 상태가 변경되었음에도 홈 피드에서는 posts의 상태를 변경해줄 수 없었던 것이다.그래서 새로고침을 직접 누르거나 아래 처럼 강제로 리로드를 해주어야 App 컴포넌트가 리렌더링 되면서 자식 컴포넌트들이 리렌더링이 그제서야 되는 문제가 발생했던 것이다.// 기존 코드navigate('/');window.location.reload(); // 변경 코드.. Programing/TIL 2024. 6. 6.
2024-06-05 팀 프로젝트 중간 회고 1. 사용한 라이브러리- quill / react-quill- supabase-js- styled-components- react-router-dom2. 에러가 난 부분, 어떻게 해결했는지- 회원정보에서 닉네임 등 다뤄야 할 서브 데이터가 증가하여 auth에서 관리하던 데이터를 users 테이블에서 관리하는 방식으로 교체하였고, 이 과정에서 홈 피드와 상세페이지에 닉네임을 렌더링 할 때 auth의 사용자와 users의 닉네임이 일치하지 않아 누구나 다 게시글을 수정하고 삭제할 수 있는 문제가 생김. => find 메서드를 통해 현재 로그인된 사용자의 id와 게시글 작성자의 id의 일치 여부를 판단해서 users 배열에서 닉네임을 추출.- quill editor에서 원하는 기능을 사용하지 못함 => 툴바를.. Programing/TIL 2024. 6. 5.
텍스트가 박스를 넘어서 렌더링 될 때 스크롤바 추가하기 텍스트가 길어서 내가 의도한 영역을 초과하여 렌더링 되는 경우가 있다. 이럴 때 해당 박스의 CSS에 overflow 속성을 주면 된다. overflow: auto; /* 스크롤 가능하도록 설정 */word-break: break-word; /* 긴 단어가 박스를 넘지 않도록 설정 */ Programing/CSS 2024. 6. 5.
형식에 맞지 않는 날짜 형태 변환해서 렌더링하기 데이터 테이블에서 글 생성일시를 불러오면 이런 형태로 되어 있는 데이터들이 많다.2024-06-04T08:06:49.657004+00:00작성일을 렌더링 할 때 저대로 보여주면 곤란하므로, 우리가 원하는 방식으로 아래처럼 포매팅을 해주면 된다. const formatDate = (dateString) => { const date = new Date(dateString); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); const hours = String(date.g.. Programing/React 2024. 6. 4.
2024-06-04 API 렌더링 시 태그가 그대로 노출되는 문제 해결 방법 예를 들어 웹 페이지를 아래와 같이 렌더링 하고자 하는데,quill 같은 에디터를 사용하면 데이터 테이블 안에 들어 있는 내용이 코드나 태그가 포함된다. 이를 map메서드나 filter메서드로 렌더링하면 태그가 그대로 렌더링 된다.  이런 식으로 렌더링을 하고 있을 건데 아래 처럼 개선하면 된다.   그러면 아래처럼 잘 렌더링 된다. Programing/TIL 2024. 6. 4.
2024-06-03 Supabase 스키마 이해하기 지난 팀프로젝트 간 CRUD를 제대로 해본 적이 없어 이번에 해보고 싶어 팀원들께 양해를 구한 후 CRUD를 해보고 싶다고 말씀드렸더니 흔쾌히 양보해주셨기에 CRUD를 구현하기로 하였다. 그런데 조건이 Supabase를 사용하는 것이었고, 크게 어렵지 않을 것이라고 생각했으나, 한국어 자료가 많이 없는 것에서 일단 큰 벽을 만났다. 가장 큰 문제는 '관계형' 데이터베이스에 기반한 서비스라는 게 핵심인 것인데, 이 관계형을 이해하지 못해 여러가지 문제에 봉착했다.   Supabase와 찰떡궁합인듯 많이 사용되고 있는 듯한 quill editor 라이브러리를 사용하기로 하였는데, 생각보다 적용이 어려웠다.default 모듈에서는 이미지 삽입 기능이 없어 별도의 모듈로 정의하고 장착하였는데, 문제는 여기서 이.. Programing/TIL 2024. 6. 3.
[supabase] 댓글 관리할 테이블 만들기 Comments 관리할 테이블 하나 만들기 먼저 posts 등의 게시글을 저장할 data table이 있다고 가정한다. 본인의 posts 테이블의 설저은 이러하다. 아래 쪽에서 foreign keys(외래키) 부분을 보면 auth (사용자 정보) 테이블에서 users라는 테이블의 id라는 key를 외래키로 받고 있고, 이를 posts 테이블의 user_id 칼럼에서 끌어다 사용하는 것을 알 수 있다. 이 원리로 새로 만들 댓글 테이블도 외부에서 가져올 데이터를 외래키로 설정해주면 된다.   새로운 테이블을 만든다.posts 테이블은 게시글을 관리하는 테이블로 기존에 만들어둔 것이다.  Foreign keys (외래키) 관계 설정하기 컬럼 5개가 있는데, id는 그 코멘트만이 갖는 고유한 아이디이다. pr.. Programing/Server 2024. 6. 3.

티스토리툴바