KUIT

KUIT 6기 랜딩페이지 🔗 https://www.konkuk-kuit.com/6/introduce0. GSAP를 써보자2025년 2학기를 맞이하여, 운영진으로 참여했던 KUIT(건국대학교 기획/개발 동아리)도 이제 6기를 맞아 부원들을 모집해야되는 시기가 다가왔다. 저번 4기와 5기 부원 모집 때에는 framer-motion 라이브러리를 활용하여 풀 페이지 스크롤 애니메이션 랜딩페이지를 구현했었는데, 이번 6기 모집 때 똑같은 템플릿을 활용할지 아니면 새로운 인터랙션을 구현할지 고민이 되었다. 4기 랜딩페이지 🔗 https://www.konkuk-kuit.com/4/introduce풀페이지 스크롤 애니메이션 구현기 🔗 https://quickchabun.tistory.com/131 부원 모집까지 ..

0. 제안과 고민동아리 회장을 맡아달라는 제안을 들었다. 처음에는 부담스러웠다. ‘회장’이라는 단어는 내게 너무 이질적으로 다가왔다. 초등학교 때 몇 번 반장을 맡았던 적은 있었지만 그건 그 때 뿐이었고, 내가 나서는 것을 좋아하지 않는다는 사실을 알게 된 이후로 무언가를 대표하는 직책을 맡지 않았었다. 웹 파트장도 내가 웹 프론트엔드를 좋아해서 맡은 거였다고. 회장은 자신감이 넘쳐야하고, 남들을 설득할 줄 알아야하고, 책임을 질 줄 알아야한다. 나에게는 없는 요소들이었다. 그랬기에 사실 이런 제안은 나에게 기회기도 했다. 아마 다시는 오지 않을 기회. 회장을 맡으면 더 성숙한 내가 될 수 있지 않을까. 자리가 사람을 바꾼다는 뻔한 말을 한 번 믿어볼까. ‘내가 모든 걸 망쳐버리면 어떡하지?’라는 생각이..

0. 풀페이지 스크롤 애니메이션을 구현하고 싶었다.KUIT 온보딩 페이지를 어떻게 만들까 고민을 시작했을 때, 가장 먼저 떠올랐던 것이 풀페이지 스크롤 애니메이션이었다. 스크롤 한 번 내리면 화면이 하나씩 내려가는 애니메이션을 구현하고 싶었다. PC에서 휠로 스크롤을 하거나, 모바일로 위로 스와이프를 하면 화면이 바뀌는 애니메이션을 구현하고 싶었다. fullPage.js와 같은 라이브러리를 쓰는 것을 먼저 고려해봤지만, 라이센스 비용이 있다는 말을 듣고(비영리면 무료라고 하긴 하지만) 포기했다. 그 대신 Framer-motion을 사용해서 한 번 구현해보기로 했다. 어떻게 해야할지 감은 잘 잡히진 않았지만, 내게는 Claude가 있으니까. 계속 질문하고, 수정하고. 내가 원하는 결과가 나오기까지 반복했다..

1. SSG(Static Site Generation) + Headless CMS로 제작해볼까동아리 온보딩 페이지를 제작 중이다. CSR로 제작할까, SSR로 제작할까 고민 중이었는데, SSG(Static Site Generation)을 사용하면 좋다는 의견이 있어서 Next.js로 SSG를 구현하기로 했다. 왜냐하면 동아리 온보딩 페이지는 내용이 거의 바뀌지 않으니까. 그래도 컨텐츠를 업데이트해야할 수도 있다. 그럴 때마다 코드를 수정해서 배포하면 되지 않을까 생각했는데, 코드를 수정하지 않고도 컨텐츠를 업데이트할 수 있는, 콘텐츠 관리만을 위한 서비스인 Headless CMS를 활용하면 된다! 어떤 Headless CMS를 활용할까 생각하다가, strapi가 좋다는 사람들의 의견이 많아서 strapi..

0. 네? 제가 파트장이요?올해 1월 말이었을 것이다. 날씨는 꽤나 추웠고, 봄이 온다는 것이 상상이 되지 않았다. 나는 동아리에서 웹 프론트엔드로 참여한 프로젝트 작업을 하며 시간을 보내고 있었다. 느슨했지만 아예 놀지는 않았던, 조금은 여유로웠던 순간이었다. 그러다가 디스코드로 연락이 왔다. 동아리 차기 회장이 되는 친구였다. 프로젝트에 대해, 그리고 머지 않아 진행될 다음 학기 수강 신청에 대해 이야기를 주고받았다. 그러다 갑자기, 나보고 다음 학기 웹 파트장을 할 생각이 없냐고 물어봤다. 음?주관적으로, 아니 객관적으로도 내가 웹 부원 중에서 파트장을 맡을만큼 실력이 좋았냐고 물어본다면, 아니라고 답할 수 있다. 훨씬 논리적이고 코딩 잘하는 친구들의 얼굴이 스쳐지나갔다. 왜 갑자기 나한테 이런 기..

아래 글은 KUIT 웹 부원분들을 대상으로 작성한 글입니다.Access Token과 Refresh Token은 어디에 저장해야할까?브라우저에서 변수는 네 가지 공간에 저장이 가능하다.쿠키로컬스토리지세션스토리지메모리이 때 메모리에 값을 저장하려면 웹앱의 로컬변수를 사용해서 값을 저장해야→ 이 방식을 사용하면 자바스크립트 코드로 접근이 불가능→ 또 하나 기억해야 할 특징은 새로고침을 하면 내부 변수가 초기화됨 자바스크립트 코드로 접근이 가능한 쿠키, 로컬스토리지, 세션스토리지→ XSS 공격에 취약(다만 쿠키의 경우 HttpOnly 속성을 추가하면, 자바스크립트로 접근할 수 없는 쿠키 생성 가능) 출처: https://velog.io/@iamtaehoon/sagah Refresh Token → HttpOnly..

아래 글은 KUIT 웹 부원분들을 대상으로 작성한 글입니다.API endpoint의 뜻은?→ 요청을 보내고자하는 URLAxios와 Fetch의 차이1. 에러 처리axios와 fetch는 둘 다 Promise를 이용해 비동기 요청을 처리 axios: 네트워크 오류가 발생하거나, HTTP 상태코드가 200~299가 아니면 Promise를 reject 시fetch: 네트워크 오류가 발생했을 때만 Promise를 reject-> axios처럼 상태 코드가 200~299 사이가 아닐 때도 에러 처리를 하고 싶다면, Response.ok를 활용해야  2. 헤더axios는 요청 헤더에 ‘Content-Type: application/json을 자동으로 추가(fetch는 직접 추가해야) 브라우저 환경에서 Content..

상태관리에 대한 접근 방식은 크게 3개로 나눌 수 있다.Flux (Redux, Zustand)Proxy (Mobx, Valtio)Atomic (Jotai, Recoil)(출처: https://velog.io/@ggong/상태-관리를-위한-라이브러리-jotai) 1. FLUX 방식(이미지 출처: https://velog.io/@alskt0419/FLUX-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90%EB%9E%80) FLUX는 Facebook에서 개발한 애플리케이션 아키텍처이 패턴은 클라이언트-사이드 웹 애플리케이션을 구축하는 데 사용되며, 특히 단일 페이지 애플리케이션에서 유용하다.FLUX는 다음 네 가지 주요 구성 요소로 구성:Dispatcher: 모든 데이터 흐름을 관리하는 중앙 ..

이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.1. Link와 useNavigatea 태그와 마찬가지로 Link 컴포넌트도 지정한 경로로 바로 이동을 시켜준다.a 태그와 Link 차이a : 외부 프로젝트로 이동하는 경우Link : 프로젝트 내에서 페이지 전환하는 경우가. Link클릭 시 바로 이동하는 로직 구현 시에 사용ex) 상품 리스트에서 상세 페이지 이동 시Link를 사용한 경우에는 렌더링 된 컴포넌트의 state가 유지되어 SPA로 동작할 수 있음to라는 속성을 통해 이동할 경로를 지정한다는 점은 a 태그와 비슷하지만 실제로 해당 링크로 이동하는 대신 에 지정된 컴포넌트를 렌더링v6부터는 Link로 props를 전달하지 못함나. useNavigate페이지 전환 시 추가로 처리해야 하는 ..

이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.1. React Hook이란?함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리 규칙1. 최상위에서만 Hook을 호출해야한다.→ 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 규칙2. 리액트 함수 내에서만 Hook을 호출해야 한다.→ Hook은 일반적인 js 함수에서는 호출하면 안된다. 출처: https://choijying21.tistory.com/60 React Hooks = 독립적인 state 데이터 조작 API useState = 독립적으로 데이터를 관리할거야useEffect = 독립적으로 side-effect를 관리할거야useMemo = 독립적으로 데이터 캐싱을 관리할거야useCallback = ..