나의 프론트엔드 개발 여정: 배움에서 성장까지설명여러분이 지난 6개월 동안 프론트엔드 개발자가 되기 위해 경험한 학습 과정, 도전, 성장을 회고하고 작성해주세요. 여러분의 이야기를 솔직하게 작성하면서, 스스로 학습 여정을 돌아볼 수 있는 소중한 기회가 될 거예요.세부

스프린터분들의 커리어 발전을 돕기 위해 다양한 수료 후 커리어 지원 서비스를 준비했어요.여러분의 성장과 취업 성공을 진심으로 응원할테니, 능력 있는 개발자로 도약하기 위한 향후 커리어 여정을 함께해주세요.모의면접사전에 안내된 공지에 신청해주신 분들에 한해서 기술 및 인

스프린트와 함께 하는 커리어 성장 과정은 수료 이후에도 계속됩니다. 수료생과 현직 개발자들이 함께 참여하는 스프린트 수료생 커뮤니티를 통해 함께 즐겁게 성장하는 경험을 계속 만들어가세요.스프린트 수료생 커뮤니티는 스프린트를 수료한 스프린터, 스프린트 과정을 함께 만들어

Google 소셜 로그인을 실행하기 위해서는 일련의 과정을 거쳐야 합니다. 여기에는 사용자, 프론트엔드 애플리케이션, 백엔드 서버, 그리고 OpenID Connect 프로바이더 (Google) 간의 상호작용이 포함됩니다. 아래는 각 단계에 대한 요약 설명입니다.사용자

가장 먼저 mongoose.connect() 함수를 사용해서 커넥션을 만들고 사용합니다. 이때 Next.js 환경에서 커넥션을 불필요하게 여러 개 만들 수 있기 때문에, 캐싱 기법을 사용하는데요. 조금은 복잡할 수 있기 때문에 공식 리포지터리에 있는 코드(next.js

예를 들어서 /api/short-links로 들어오는 리퀘스트를 처리하려면 /pages/api/short-links.js 또는 /pages/api/short-links/index.js 경로로 파일을 만들고 아래처럼 함수를 default export하면 됩니다.함수 체이

웹 브라우저가 페이지를 로딩하기 이전에 렌더링하는 걸 말합니다. 크게 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)으로 나뉩니다. Next.js에서는 기본적으로 모든 페이지를 정적 생성합니다.프로젝트를 빌드하는

프리 렌더링을 하면 검색 엔진 최적화(SEO)에 도움이 되고, 페이지의 로딩 속도가 빠르다는 장점이 있다고 배웠습니다. 정적 생성과 서버사이드 렌더링 두 가지 선택지가 있었는데요. 이 두 가지를 언제 어떻게 사용하는 것이 좋을까요? 이번 레슨에서는 앞에서 만들었던 페이

이번 레슨에서는 Image 컴포넌트, Head 컴포넌트, 그리고 빌드와 실행하는 방법에 대해 간단히 정리해보고 넘어가겠습니다.Next.js에서는 이미지를 사용할 때 Next.js 서버를 한 번 거쳐서 이미지 최적화를 한 다음 사용할 수 있도록 해 주는데요. 그래서

요즘 구글 폰트를 사용한 사이트를 많이 볼 수 있는데요. 무난한 디자인에 구글에서 적용할 수 있는 코드도 제공하기 때문에 많은 곳에서 활용하고 있죠. Next.js에서는 구글 폰트를 위한 기능도 제공하는데요. 구글 폰트를 편하게 쓰는 것뿐만 아니라 여러 가지 최적화도

CORS는 웹 브라우저에서 실행되는 스크립트가 다른 도메인의 자원에 접근할 때 발생하는 보안 기능입니다. 웹 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)을 따르는데, 이는 다른 도메인에서 리소스를 요청하는 것을 제한합니다. 만약 서로

이번 레슨에서는 Image 컴포넌트, Head 컴포넌트, 그리고 빌드와 실행하는 방법에 대해 간단히 정리해보고 넘어가겠습니다.Next.js에서는 이미지를 사용할 때 Next.js 서버를 한 번 거쳐서 이미지 최적화를 한 다음 사용할 수 있도록 해 주는데요. 그래서

Next.js에서는 페이지를 만드는 것처럼 간단하게 백엔드 API를 만들 수 있는데요. 사실상 작은 Node.js 서버를 구현할 수 있습니다. 백엔드 개발자 없이 간단한 API도 개발하고 싶고, 프론트엔드도 개발하고 싶은 사람들에게 유용한 기능이겠죠? 이번 레슨에서는

학원API이제부터 사이트에 API를 연동해 볼 건데요. 아래 두 문서를 참고해서 API를 연동해 보겠습니다. 필요할 때마다 아래 API 문서를 찾아보면서 웹사이트를 구현해 보세요.Codeitmall API 문서Watchit API 문서

Next.js에서 특별하게 사용하는 타입은 많지 않기 때문에 공식문서만 읽어보아도 충분합니다. 이번 레슨에서는 공식 문서의 내용을 기반으로 타입을 활용하는 방법에 대해서 알아보도록 하겠습니다.\_app.tsx 파일에선 웹사이트 전체에 공통적으로 렌더링 되는 App이라는

정적 타입 체크:TypeScript는 정적 타입을 지원하여 변수, 함수, 객체 등의 타입을 명시적으로 선언할 수 있습니다.이는 개발 중에 발생할 수 있는 타입 관련 오류를 미리 방지하고 코드의 안정성을 향상시킵니다.코드 가이드 및 자동 완성:IDE에서 TypeScrip

서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원:Next.js는 기본적으로 SSR 및 SSG를 지원하여 초기 로딩 속도를 개선하고 검색 엔진 최적화(SEO)에 도움을 줍니다.SSR은 서버에서 페이지를 렌더링하여 클라이언트에 전달하므로 초기 로딩 시간을

CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던

앞에서 프로젝트를 만들 때 tsc --init 명령어로 tsconfig.json 파일을 생성했습니다. 아래와 같은 파일이 생성되었는데요. 이번 레슨에서는 이 파일에서 사용할 수 있는 옵션들에 대해서 좀 더 자세히 살펴보겠습니다.compilerOptions에서 사용할

특정한 숫자나 문자열 같이 변수의 값을 타입으로 하는 타입입니다. 각 리터럴 타입들은 string이나 number 같은 더 큰 타입에 포함됩니다.복잡한 타입에 이름을 붙이고 재사용하고 싶을 때 사용합니다.A이거나 또는 B인 경우를 타입으로 만들고 싶을 때A와 B의 성질