REturn 0;

우아한테크코스 프리코스와 최종 코딩테스트를 응시하고, 느낀점과 성장했다고 생각하는 포인트에 대해서 작성하고자 글을 작성한다.🪐우아한테크코스 7기 프론트엔드 지원 이유🪐멋쟁이사자처럼 중앙대학교의 11기 프론트엔드 부원이자 12기 회장 및 프론트엔드 운영진으로 활동했다.지원이유 작성 전에 활동을 하면서 내가 느낀 3가지를 먼저 작성하자면, 1. 같은 목표를 가진 사람들과 함께하는 것이 더 빠른 성장을 할 수 있다.개발을 배우고 싶어서 지원했던 11기 프론트엔드에서 같은 목표를 가진 부원들과 함께 공부한 덕분에 소속감도 생기고, 잘하고 열심히 하는 사람들이 주변에 많아서 자극도 많이 됐던 것 같다. 또한, 혼자서 목표를 달성하는 것보다 함께 노력해서 달성하는 목표가 훨씬 더 뿌듯했다. 같은 목표를 가진 사..

배포된 웹페이지에 폰트가 갑자기 적용이 안되는 상황이 발생했다.코드를 건든 적이 없는데, 왜 갑자기 페이지가 변하는지 알 길이 없었다…왼쪽이 기존 폰트, 오른쪽이 갑자기 변해버린 폰트이다.css의 font-family 속성이 적용 여부를 확인하기 위해 개발자 도구를 켜봤는데,GmarketSans가 잘 적용되어 있다고 나오는데,,,, 대체 왜이러는걸까로컬에서 프로젝트를 열어봐도 똑같은 상황이었고, 몇시간 삽질 끝에 원인을 찾을 수 있었다.네트워크 탭을 열어보니 웹폰트로 사용하고 있던 GmarketSans가 404 오류로 인해 불러오지 못하는 상황이었다. 왜 404 오류가 발생했는지 링크를 들어가보니그냥 없어졌다... 해당 폰트가 적용된 텍스트가 많았기 때문에 디자인을 전체적으로 수정해야 하나 걱정이 많았는..

캐시데이터를 미리 복사해 놓는 임시 장소저장 공간의 크기는 작지만 속도는 빠름자주 사용하는 데이터를 캐시에 저장 시 데이터를 훨씬 빠르게 가져올 수 있음웹 브라우저는 기본적으로 캐시를 사용해 속도를 높이고 네트워크 비용 감소서버에 매번 데이터를 요청하는게 아니라 저장해 놓은 데이터를 유저에게 보여줌캐시를 사용하는 것이 캐싱React-Query 캐시백엔드에서 데이터를 다시 받아오는 것 → refetchimport { getRecentDocs } from '@/apis/docs';import { useQuery } from '@tanstack/react-query';export const useGetRecent = () => { const { data: recentDocs } = useQuery({ ..

2023년 7월 26 ~ 8월 26일까지, 이 기간동안 멋쟁이 사자처럼 프론트엔드 파트에서 활동하며, 교환학생 매칭 서비스 "오리챗(All-It-Chat)"의 프론트엔드 개발자로 전체 해커톤에 참가하였다. 개발을 시작하고 참여한 첫 프로젝트로, 2달간 공부한 React를 잘 활용할 수 있을지에 대한 걱정을 안고 시작했었다.| 프로젝트에서 구현한 기능https://zza-lng.notion.site/All-It-Chat-c6e7240f004c456fb0bf5ea2a0785d05?pvs=4 오리챗(All-It-Chat) | Notion기술 스택zza-lng.notion.site | 프로젝트에서 만족했고, 앞으로 지속하고 싶은 부분팀 분위기가 너무 좋았다. 모두가 열심히 하고, 서로가 열심히 하는 모습을 보며..

프로젝트 소개"멋쟁이사자처럼 중앙대학교"의 이야기를 저장하고 공유하는 공간순수 팔로우 프론트엔드 개발자가 아닌, 프론트엔드 리드 개발자로 참여했던 프로젝트프로젝트 제작 동기함께 모여 활동하며 쌓인 추억들이 시간이 지나면서 잊혀지는게 아쉬웠다.즐겁거나, 힘들었던 순간들과 감정들을 기록할 우리만의 오프더레코드, 멋사위키프로젝트명멋사위키프로젝트 제작 기간2023.12.11 ~기술 스택  역할종류FrameworkProgramming LanguageStylingState ManagementData FetchingFormatting Package ManagerVersion Control 전 프로젝트에서 마이그레이션을 통해 Next JS를 다뤄보았지만, 어떤 원리로 우리 프로젝트에 Next를 사용하는 것이 더 유리한..

React+TS로 서비스를 만들어 출시했다. Arti 아티 투표를 통해 세상에 숨겨져 있던 유니크한 옷들을 만나보세요 arti-fashion.site 하지만 이미지가 너무 많아서 렌더링이 느리고, 검색 엔진에서 찾기 쉽게 하는 SEO 작업에 제한이 있다는 것을 알게 됐다. 이러한 이유로 더 빠른 렌더링과 SEO를 위해 Next.js로 마이그레이션을 하기로 결정했다. 1차 스프린트를 React+TS로 마무리하고, 이 프로젝트를 Next로 마이그레이션 후 2차 스프린트를 진행하는 순서로 진행중이었는데, 한 선생님께서 질문을 하셨다. 분명 난 이유가 있어서 마이그레이션을 하기로 결정한건데, 질문에 대답을 잘 못하는 모습을 보고 다시 공부해야겠다는 생각이 들어 이렇게 글을 적는다. SSR이란? 분명 뭔지 알고,..

보통 우리는 npm에서 필요한 모듈을 설치한 다음 필요한 컴포넌트에서 해당 모듈을 import해서 사용합니다. 하지만 TS에서는 분명히 모듈을 설치했는데도 아래와 같은 에러가 발생하는 경우가 있다. 내가 설치를 안했나... 해서 다시 설치도 해보고, 실수로 다른 모듈을 설치했나.... 해서 다시 설치 했는데 결국 실패했다. 📌 본인이 설치한 모듈이 JS 환경에서 사용가능한 형태만 지원하고, 해당 모듈 개발자가 TS에서 사용가능한 형태는 지원하지 않아서 아무리 설치해도 모듈을 찾을 수 없다는 오류가 발생했던 것이다. 이러한 오류를 해결하는 방법은 간단했다. d.ts 파일 생성해서 전역에 선언해주기 src 폴더 내에 types 폴더를 생성해주고 모듈명과 똑같은 이름으로 d.ts파일을 생성해준다. 위 모듈을 ..