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({ ..

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

대한민국의 98%는 카카오톡을 사용하고 있다. 그래서인지 현재 대부분의 서비스에서 소셜로그인, 그 중에서도 카카오 로그인을 이용하여 서비스를 사용 할 수 있도록 하고있다. 내 기억에도 서비스에서 로그인이 필요할 때, 카카오 로그인을 이용해서 로그인 한 경험이 많았었다. 그래서~ 이번 프로젝트에서 소셜 로그인을 맡아서 진행하기로 했다. 이번 프로젝트는 프론트와 백엔드가 협업하여 프론트에서 로그인을 요청하여 인가코드를 받아와서 백엔드로 넘겨주면 인가코드를 이용해 카카오 서버에서 토큰을 받아와 얻은 정보를 이용해 자체 jwt 토큰을 제작해서 프론트에서 사용자 정보를 받아올 것이기 때문에 REST API를 사용했다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카..

Slack과 Github 협업을 하면서 가장 많이 사용하고있는 Github와 Slack을 연동할 수 있다고해서 알아보았다. 슬랙 채널들을 쭉 내려보면 앱을 추가할 수 있는 칸이 나온다. 앱 추가 버튼을 누르고 검색창에 github를 검색하면 설치가 가능하다. 검색 결과로 나온 Github를 클릭하면 자동으로 앱이 추가된다. 아직 끝이 아니다. 원하는 채널에 들어가서 명령어 입력을 해야되는데 /github만 쳐도 전체 명령어를 확인할 수 있다. 따라서 채팅창에 /github subscribe [깃허브 계정 이름]/[연결할 레포지토리 이름] 을 입력하면 해당 깃허브 레포가 연결된다. 요렇게 입력하면 해당 채널에 아래와 같은 메시지가 온다. connect 버튼을 누르면 위 화면으로 연결되는데, Connect ..