TiL33 11. 22. 30일차 TIL 세션, 토큰, 쿠키, JWT 오늘은 챌린지 반에서 과제를 통해 세션이란 무엇인지, 토큰, 쿠키, JWT란 무엇인지에 대해 알게 되었다.1. 쿠키쿠키는 웹 브라우저에 저장되는 작은 데이터 조각이다. 쿠키는 서버가 클라이언트에게 데이터를 저장하도록 요청하면, 브라우저는 해당 데이터를 저장하고 이후 요청에서 다시 서버로 보내는 방식으로 작동한다. 1) 주요 특징- 클라이언트(-라우저) 측에 저장됨.쿠키는 사용자의 컴퓨터에 저장된다.저장된 쿠키는 동일한 도메인에 대한 요청 시 자동으로 서버에 전달된다.- 크기 제한쿠키는 보통 4KB이하의 데이터를 저장할 수 있다.- 수명쿠키에는 만료 시간이 설정될 수 있다.만료 시간이 없는 쿠키는 브라우저를 닫으면 삭제 된다. (세션쿠키)만료 시간이 설정된 쿠키는 브라우저를 껏다 켜도 유지된다. (영구 쿠.. 2024. 11. 22. 11. 21. 30일차 TIL 팀프로젝트 회고 짧았던 팀프로젝트가 마감되었다. 이번 프로젝트에서는 정말 많은 일이 있었다. 수파베이스에 연동 단계에서 겪었던 어려움으로 시작하여 내가 github에 업로드 된 .env파일의 기록을 지워보려다가 파일 생성 이후의 모든 기록을 reset --hard로 날려버린 일... 이유 모를 프로젝트 파일 안에 복사가 된 프로젝트 파일로 .. 경로가 모두 꼬여버리는 일... 마감 전 날 누군지는 모르지만 yarn과 npm의 혼용되어 사용되었고 그 파일들이 모두 github에 업로드된 일,.. 때문에 작업하던 브랜치에서 push가 되지 않아 튜터님을 찾아가 자문을 구했으나 결국 해당 branch를 삭제하여 작업했던 기록이 한번 더 저장하지 못하고 날려버린 일... 등등 정말 다사다난했다... 특히 마지막 날에 밤을 세.. 2024. 11. 22. 11. 19. 29일차 TIL git reflog 오늘은 어제 마저 하지 못한 기능들을 추가한 뒤, 깃허브에 실수로 올렸던 .env파일의 기록을 지우려고 했다. 그러다가 .env 추가 이후의 기록을 모두 날려버렸다.. 이를 해결 하기 위해 튜터님들을 찾아가 자문을 구했다. 그렇게 알게된 git reflog를 통해 삭제된 모든 기록을 다시 되돌릴 수 있었다.1. git refloggit reflog는 Git에서 브랜치의 HEAD가 어떻게 변화했는지를 기록하는 로그이다. 이 명령어를 사용하면, 과거의 커밋이나 체크아웃, 리셋 등의 작업으로 인해 HEAD가 어떤 상태였는지를 확인할 수 있다.1) 주요 기능HEAD의 이동 기록 : git reflog를 통해 HEAD가 카리키던 커밋의 이력을 볼 수 있다.복구 작업 : 실수로 커밋을 삭제하거나 브랜치를 변경했을 .. 2024. 11. 20. 11.18. 28일차 TIL Team_Project 로그인, 회원가입 오늘은 피그마를 다듬고, 회원가입과 로그인 페이지 기능을 구현하였다.1. 피그마 정리 모습 작년에 xd를 사용하여 워크프레임을 만들어 본 경험이 있었는데 피그마도 비슷한 느낌이어서 사용하는 데에 크게 어렵지는 않았다.프로토타입 또한 설정하는 것이 간단해서 좀 재밌었다 ㅋㅋ2. 로그인 기능 구현오늘은 시간이 없는 관계로.. row_code를 첨부한다 ㅠㅠ 다음에 코드를 리펙토링하며 로직에 대한 해석을 작성할 예정이다.더보기import { useEffect, useState } from 'react';import { useNavigate } from 'react-router-dom';import supabase from '../supabase/supabase';import Home from './Home';.. 2024. 11. 18. 11. 15. 27일차 TIL Team Project_01 오늘은 고대하던 팀프로젝트의 발제 날이다. 오전에 발제를 시작하여 주제와 홈페이지의 컨셉을 정했다. 이후 피그마를 활용하여 워크프레임을 작성하였다. 챌린지 반 수업에서는 클린코드에 대해 학습하였다. 클린코드란 협업을 하는 개발자에게 매우 중요한 개념이며, 이 때 코드 컨벤싱과 깔끔하게 코드를 적는 기술이 필요하다.1. 계획 이번 과제는 뉴스피드 사이트를 만드는 것이다. 우리는 Y2K테마의 뉴스피드를 만들려고 한다.1) 구성과 기능로그인페이지회원가입 : 입력한 정보에 맞는 회원 정보를 생성한다.로그인 기능 : 회원정보에 저장된 아이디, 비밀번호와 일치하면 home페이지로 이동한다.Home페이지모든 웹사이트 사용자가 업로드한 뉴스피드를 볼 수 있는 페이지회원정보 : 프로필사진 수정기능, 자기소개 수정기능,.. 2024. 11. 16. 11. 14. 27일차 TIL CORS 오늘은 React 두번째 과제를 마무리하고 해설영상을 통해 복습한 이후 챌린지반 과제를 통해 CORS에 대해 학습하였다.* CORS란 CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 서로 다른 출처 간의 리소스 공유를 허용하는 기술로, 웹 보안과 데이터 접근성을 조화롭게 관리하기 위해 설계되었다. 1. 기본 개념동일 출처 정책 (Same-Origin Policy)동일 출처 정책은 보안 모델로, 웹 페이지가 로드된 출처와 다른 출처의 리소스에 접근할 수 없도록 제한한다. 이는 악의적인 사이트가 사용자의 정보를 탈취하는 것을 방지하기 위한 것입니다.출처는 프로토콜(예: HTTP, HTTPS), 도메인(예: example.com), 포트(예: 80, 443)로 정의됩니다.. 2024. 11. 14. 이전 1 2 3 4 ··· 6 다음
