전체 글 검색 결과

해당 글 12건

[Nextjs] Next.js로 구현하는 로그인

1. 왜 인증이 중요한가?웹에서 인증은 필수적인 기능이다. 사용자의 데이터를 보호하고, 로그인한 사용자만 특정 기능을 이용할 수 있도록 제한하는 것이 중요하다.인증 방식에는 여러 가지가 있지만, 이번 강의에서는 세션 기반 인증을 배웠다. 특히 Next.js의 서버 액션과 Lucia 인증 라이브러리를 활용하여 인증 시스템을 구현하는 방법을 살펴보겠습니다.2. Lucia vs NextAuth: 어떤 인증 라이브러리를 선택할까?강의에서 Next.js에서 인증을 구현할 때 유명한 두 라이브러리로 Lucia와 NextAuth.js 얘기가 나왔다. 궁금해져서 지피티에게 물어보았다. 강의에서는 현재 NextAuth.js에 오류가 있어 Lucia를 선택하였다.1️⃣ Lucia✅ 세션 기반 인증 지원 (쿠키 기반, 서버..
웹 3개월 전

[Next.js] 서버 컴포넌트 vs 클라이언트 컴포넌트

강의를 듣다 저번 Nextjs 프로젝트 할때 가장 어려웠던 서버 컴포넌트와 클라이언트 컴포넌트에 대한 내용이 나왔다. 넥스트로 프로젝트를 처음해봤어서 편하다는 이유로 최상단 루트에 클라이언트 컴포넌트를 선언하고 개발을 진행했다. 그리고 개발이 다 끝나고 나서야 알았다. 이게 얼마나 멍청한 짓이였는지를.. 그래서 저번과 같은 실수를 반복하지 않기 위해 서버 컴포넌트와 클라이언트 컴포넌트에 대해 정리를 해보기로 했다.서버 컴포넌트 vs 클라이언트 컴포넌트서버 컴포넌트란서버 컴포넌트는 서버 측에서 렌더링되고 처리되는 React 컴포넌트이다. 그리고 넥스트의 모든 컴포넌트들은 기본적으로 서버 컴포넌트로 동작한다. 또한 주요 특징은 다음과 같다:서버 측 렌더링: 컴포넌트가 서버에서 직접 렌더링되어 초기 로드 속도..
웹 4개월 전

React-Router-Dom 로더와 액션

1. Loader와 Action은 왜 나오게 되었나?데이터 API의 변화Loader와 Action이 나오기 전인 React Router DOM v6.4 이전에는 라우팅과 데이터 페칭이 완전히 분리되어 있었습니다. 라우터는 단순히 URL에 따라 어떤 컴포넌트를 렌더링할지만 결정했고, 데이터 로딩은 각 컴포넌트의 책임이었습니다.function ProductPage() { const [product, setProduct] = useState(null); const [loading, setLoading] = useState(true); const { id } = useParams(); useEffect(() => { async function loadProduct() { setLoading..
웹 4개월 전

2025 ICT 인턴십 합격 후기

1. ICT 지원 동기ICT를 하게 된 이유는 사실 되게 간단하다.4학년이 되고 난 후, 학교에서 듣고 싶은 과목이 없었고인턴을 하며 실전 경험을 쌓고 싶었기 때문에 지원하게 되었다.2. 어떤 기업에 지원했나ICT는 총 3개의 기업에 지원을 할 수 있었다.그 중에서 내가 충분히 어필할 수 있는 내용의 프로젝트를 진행하는 기업에 지원했다.2-1. A 기업다른 기업들에게 솔루션을 제공하는 기업이었다.그리고 또한 내가 지원하는 기업들중 가장 규모있는 기업이었다.이미 진행중인 프로젝트에 내가 구현한 기능을 넣는다는 것이 매력적으로 다가왔다.2-2. B 기업지원 이유는?내가 이전에 해본 프로젝트들과 가장 핏한 기업이 아니였나 싶다.그 만큼 어필할 수 있는 점이 많았고, 잘 어필한다면 합격 가능성이 제일 크다고 생..
회고 4개월 전

깃허브 액션으로 CI해보기

저번 테커 부트캠프때 깃허브를 이용해서 CI/CD를 해봤는데 지금 읽는 스터디 책에 깃허브로 CI하는 내용이 있어서 정리 한 번 해보고 코드에 반영을 할 수 있으면 반영까지 해보려고 한다!CI란?우선 기본적인 CI의 정의는 Continuous Integration(지속적 통합)의 약자로, 소프트웨어 개발에서 자주 사용하는 개발 관행 및 프로세스이다.코드에 CI를 적용함으로써 팀 구성원이 각자의 코드를 주기적으로 공통 레포지토리에 통합하는 작업을 자동화하여, 통합 과정에서 발생할 수 있는 문제를 조기에 발견하고 해결하도록 돕는다.CI의 주요 개념지속적 통합(Continuous Integration):개발자가 작업 중인 코드를 자주(하루에도 여러 번) 공유 리포지토리에 푸시하여 다른 개발자의 코드와 통합.통..
웹 4개월 전

[React] 리액트 개발 도구를 활용해 좋은 웹 어플리케이션 만들기

디버깅은 프로그래밍에서 가장 중요한 요소중 하나다. 잘못된 동작을 찾아내는 것은 때론 간단하지만, 여러 라이브러리와 작성된 코드들이 섞인다면 잘못된 동작을 찾아내기란 사막에서 바늘 찾기다. 이때 활용할 수 있는 리액트 개발 도구에 대해 소개해보겠다.리액트 개발 도구리액트 개발 도구란?리액트 팀에서 리액트 개발을 더 편리하게 돕기위해 만든 디버깅 툴이다. 리액트 개발도구는 브라우저의 확장 프로그램으로 만들어져있다.크롬, 파이어폭스, 엣지를 지원하는데 나는 크롬을 사용하기에 크롬에 설치해보았다.리액트 도구를 설치하고 난 후에 회색으로 뜬다면 리액트 개발 도구가 정상적으로 접근할 수 없는 페이지이거나 리액트로 개발되지 않은 페이지라는 뜻이고 리액트 로고가 정상적으로 표시된다면, 리액트 개발 도구가 웹 어플리케..
웹 4개월 전