(※ 이 내용은 아직 정확하게 구현되는지 검증되지 않았습니다! 백엔드와 소통없이 프론트에서 독단적으로 작성한 것이니 참고만 해주세요!!!) 로그인을 구현할 때, 1. 단순히 백엔드한테 구글로부터 받은 인가코드를 보내면 2. 받은 토큰을 localStorage에 저장하는 방식으로 구현했었다. 하지만 이 방식은 보안을 고려했을 때 좋은 방법이 아니다. localStorage에 토큰을 저장하는 것은 권장되는 방법이 아니다. 따라서 아래와 같은 방법으로 수정하려 한다. 로그인을 하면 서버는 클라이언트한테 Access Token과 Refresh Token을 받음 Access Token은 전역 변수로 관리(Zustand 활용), RefreshToken은 httpOnly 쿠키로 서버로 부터 받음(이 때 서버와 클라이..
오늘 GDSC에서 주최한 'kprintf'라는 행사를 다녀왔다. 디스코드에서 kprintf라는 행사가 열린다는 것을 확인하고 무슨 주제에 대한 강의가 열리는지 살펴봤다. 다양한 주제들이 있었는데 그 중에 React에 대한, 정확히는 React 버전이 19로 업데이트되면서 어떻게 바뀌는지 알려주는 강의가 있길래 바로 신청했다. React를 사용해본 적은 꽤 있지만 버전이 몇인지, 또 최신 기능은 무엇인지에 대한 관심은 갖지 않았었다. 이번 세션을 통해 React에 대하여 더 깊은 이해도를 가질 수 있기를 기대했다. 이번 학기에(사실 저번학기도) 신공학관에서 수업을 듣지 않기에 정말 오랜만에 신공학관을 방문한 것 같다. 입장권 QR코드를 체크하고 학번과 이름을 작성했다. 그리고 위 사진과 같이 경품을 받았다..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. 프로토타입 자바스크립트 객체는 Prototype이라는 내부 프로퍼티가 존재한다. 거의 모든 객체가 생성 시점에 이 프로퍼티에 null이 아닌 값이 할당된다. 객체 내부에 없는 프로퍼티를 호출하게 되면? → 해당 프로퍼티를 찾지 못하면 바로 [[Prototype]]링크를 따라가 프로퍼티를 탐색한다. 모든 일반 객체의 최상위 프로토타입 연쇄는 내장 Object.prototype이고 이 지점에서도 찾지 못하면 탐색이 종료된다. (undefined 반환) 두 객체를 서로 연결짓는 가장 일반적인 방법은 함수 호출 시 new키워드를 앞에 붙이는 것이다. new키워드는 일반 함수 호출 + "객체" 생성이라는 잔업을 더 부과하는 지시자이다. const f = ..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. HTML 문서의 각 엘리먼트들은 계층적으로 이루어져 있습니다. → 이런 계층적 구조 특징 때문에 HTML 요소에 이벤트가 발생하면 연쇄적 이벤트 흐름이 일어나게 됩니다! 이런 이벤트 전파(Event Propagation)은 크게 버블링과 캡처링으로 나뉩니다. 버블링: 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파(기본값) 캡처링: 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달 즉, 버블링은 자식→ 부모, 캡처링은 부모→ 자식으로 방향이 정반대인 것을 알수 있습니다. 이벤트 전파 흐름은 3가지 단계가 있습니다. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 ..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. 이번 주부터 저희는 JavaScript에 대해서 배우게 됩니다! 강의 도중에 실행 컨텍스트라는 개념에 대해서 배우게 되는데요. 이와 관련해서 좋은 글을 발견해서 같이 공유하려 합니다. 글 링크 : https://velog.io/@hyumapr/JavaScript-Sean103024 JavaScript의 핵심 원리 탐구: 실행 컨텍스트관점으로 보는 클로저, this, 그리고 호이스팅 여러 면접을 거쳐오면서 기술면접 질문들로 자주 받는 내용들인 실행 컨텍스트,클로저,this,호이스팅을 한번에 다뤄볼려고 한다. velog.io 어제 쓰여진 따끈따끈한 글인데요. 이 글에서는 this 바인딩, 클로저, 호이스팅이 무엇인지 알려주고 이 개념들과 실행 컨텍스..
지금까지 헤더는 왼쪽에 제목, 가운데에 검색바, 오른쪽에 로그인(로그인 되있으면 마이페이지 버튼)이 있었다. 그런데 사실 헤더에 버튼들을 더 추가할까 생각 중이었는데, 그렇게 되면 모바일 화면에서는 공간이 좁아서 도저히 보여줄 수 없는 문제가 있었다. 그래서 사이드바를 만들고 싶었다. 사이드바를 만들려면 어떻게 할지 머리가 지끈했다. ‘바 버튼을 누르면 오른쪽으로 쫙 나오는 애니메이션은 어떻게 구현하지?’ 그리고 ‘원래 화면은 살짝 흐릿해져야하는 건 어떻게 만들어야하지?’ 같은 생각들이 머릿 속을 스쳐지나갔다. 그러다 깨달았다. 그냥 라이브러리를 쓰면 되는구나. 분명히 사이드바를 쉽게 구현할 수 있는 라이브러리가 있겠지. 가장 대표적인 라이브러리가 뭐지? → Material UI를 써보자! 옛날에 부트스..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. box-sizing: border-box box-sizing : border-box로 설정하고 border나 padding을 추가하면 해당 box의 크기는 그만큼 더 커지지 않고 사용자가 지정한 너비나 높이만큼 길이에 맞추게 된다. → border값이나 padding 값이 지정한 width값이나 height값에 포함이 된다. 출처: https://juicyjerry.tistory.com/entry/css에서-box-sizing-을-border-box로-하는-이유 position sticky가 적용이 되지 않는 이유 sticky 속성을 갖는 요소는 자신의 부모 요소 안에서만 적용됨 부모 태그는 무조건 height 높이 값이 들어가 있어야 ..
2024년 1학기 현재, 3학년 2학기를 다니고 있다.(즉, 엇학기로 다니고 있다.) 내가 다니는 학교에서 컴퓨터공학부는 졸업프로젝트를 1년 단위로 진행한다. 사실 4학년부터 시작하는 것이 일반적이지만, 운이 좋게도 아는 사람들끼리 팀을 구성할 수 있어서 이번 학기부터 졸업프로젝트를 시작하기로 했다. 주제 팀원분들과 상의한 결과, ‘공공 데이터와 AI를 활용하여 개인 맞춤형 코스를 제공하는 웹 애플리케이션’ 을 개발하기로 했다. 크게 구현할 기능은 3가지로 나눌 수 있는데, AI를 활용한 사용자 정보 기반 코스 추천 실시간으로 공공데이터에 기반한 추천 제공 유저 간 코스 기록 및 공유 이렇게 기능을 개발할 예정이다. 초기 세팅 팀에서 프론트엔드는 나랑 다른 팀원, 총 두 명이다. 어제 만나서 같이 개발 ..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. CSS 전처리기 CSS 전처리기는 전처리기가 가진 특별한 문법으로 CSS를 생성하도록 하는 프로그램입니다. → 기존 CSS가 가진 문제점들을 해결하기 위해 만들어졌습니다. CSS 전처리기를 사용하면 다음과 같은 장점이 있습니다. 재사용성 공통 요소 또는 반복적인 항목을 변수, 함수로 대체 가능 시간적 비용 감소 임의 함수 및 내장 함수로 인한 개발 시간적 비용 절약 유지 관리 CSS코드를 여러 파일로 나눠 유지 보수성 향상 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지 및 관리 용이 Learning curve 낮음 하지만 전처리기를 위한 도구가 필요하다는 점과, 퍼블리셔나 디자이너가 개발에 대한 역햘과 요소 접목으로 개발적인 요소..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. id와 class의 차이 html에서 id를 사용할 때도 있고, class를 사용할 때도 있습니다. 이 둘은 무슨 차이일까요? id는 태그에 유일한 이름을 쓸 때 사용됩니다. → 단 하나의 요소에만 사용되므로 중복이 불가합니다. → class보다 우선적으로 적용이 됩니다. class는 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 사용됩니다. → 유형별로 동일한 class를 사용할 수 있으므로 중복이 가능합니다. 출처: https://velog.io/@jos9187/id-속성과-class-속성의-차이 css 우선순위 id가 class보다 우선적으로 css가 적용되는 것은 이제 알겠습니다. 그렇다면 전체적으로 css 우선순위는..
