전체 글
-
[Network] HTTP : 쿠키(Cookie)와 세션(Session) 등장 배경Computer Science/Network 2024. 6. 5. 14:47
쿠키와 세션을 이용하는 이유 : HTTP먼저 쿠키와 세션의 등장 배경을 설명하기 위해 HTTP에 대해 잠시 설명하려 합니다.HTTP(HyperText Transfer Protocol)는 request(요청)/response(응답) 구조로 웹에서 브라우저가 서버와 통신하여 데이터를 주고받는 규칙을 말합니다. 클라이언트가 HTTP request를 서버에 보내면, 서버는 HTTP response를 보내는 식으로 동작합니다.브라우저와 서버가 주고받는 요청과 응답의 형태를 더 자세히 살펴보면Request MessageRequest Message는 첫 줄(method, url path, HTTP version) + 두 번째 줄(headers) + body로 이루어져 있습니다.GET /index.html HTTP/1..
-
[React] useState() 훅과 클로저React 2024. 5. 6. 16:14
결론부터 말하자면 useState는 리렌더링 되었을 때 이전 상태를 기억하기 위해서 클로저의 상태 유지 특성을 사용합니다.useState()의 구조useState는 상태를 관리할 수 있는 훅으로 아래와 같은 방법으로 사용 가능합니다. [state, setter] = useState(initialState) useState는 초기값으로 initialState을 받고, [state, setter]의 배열을 반환합니다.state는 상태를 나타내고 setter을 이용해서 state를 변경할 수 있습니다. useState() 동작 원리 useState() 사용 예시를 봐볼게요. useState(0) 호출 코드는 실행됩니다. state에는 초깃값 0이 할당됩니다. 클릭 이벤트를 통해서 handleClick() ..
-
React로 Scroll Reveal Animation 구현하고 컴포넌트화 하기React 2024. 4. 30. 14:36
저번 게시물에서 Scroll Reveal Animation을 React/Next.js로 구현하기 앞서 동작 원리를 알아보기 위해 JavaScript로 구현해 보았습니다. 이번에는 실제 프로젝트에 적용하기 위해 React로 구현하고 컴포넌트화 했습니다! JavaScript로 Scroll Reveal Animation 구현하기Next.js 로 프로젝트 중 토스 홈페이지를 보고 스크롤 이벤트 시 요소들이 여러 방향으로 나타나는 애니메이션을 프로젝트 소개 페이지(Intro Page)에 적용하고 싶었습니다. 그래서 React로 만들기에dev-ea-jung.tistory.com ✅ 구현하고 싶은 내용props로 animation direction을 받을 수 있는 컴포넌트를 만들려고 합니다. 애니메이션을 적..
-
JavaScript로 Scroll Reveal Animation 구현하기JavaScript 2024. 4. 29. 16:17
Next.js 로 프로젝트 중 토스 홈페이지를 보고 스크롤 이벤트 시 요소들이 여러 방향으로 나타나는 애니메이션을 프로젝트 소개 페이지(Intro Page)에 적용하고 싶었습니다. 그래서 React로 만들기에 앞서 JavaScript로 구현하여 원리를 파악하려 합니다. 다음 자료를 참고하여 구현해 보았습니다. ✅ 구현하고 싶은 내용Scroll Reveal Animation를 적용하고 싶은 요소가 viewport에 들어왔을 때 애니메이션이 실행되게 하려고 합니다.✅ transition, transform, animationtransitiontransition: property duration timing-function delay;transition은 hover나 onClick과 같은 이벤트 트리거에 ..
-
자바스크립트에서 비동기 처리는 어떻게 이루어 질까? (+자바스크립트 동작 원리)JavaScript 2024. 4. 21. 16:24
글을 쓰게 된 이유는 자바스크립트는 Single Thread로 동기적으로 동작하지만, 자바스크립트로 만들어진 웹 서비스들은 여러 작업들이 비동기적이고 동시에 동작하고 있는데서 오는 혼란에서 였습니다. 결론부터 말하자면, 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작하는게 맞고, 브라우저가 멀티 스레드로 동작하기 때문에 자바스크립트의 비동기 코드의 처리가 이루어 질 수 있는 것 이었습니다. 우선 자바스크립트가 동작하는 결국에는 마지막에 알게 되는 전체적인 구조를 먼저 살펴보면 아래와 같습니다. 자바스크립트의 모든 소스 코드(전역 코드나 함수 코드 등)들은 실행에 앞서서 평가가 됩니다. 평가를 통해서 전역 코드와 함수 코드 각각은 실행 컨텍스트를 생성하게 됩니다. 실..
-
[JS + TS / 🔥 Tadak Tadak 🔥] 공백 입력 방지를 위한 폼 유효성 검사 구현하기 ( trim() 메서드 + as 단언 )JavaScript 2024. 2. 2. 16:44
🍎 목차 1. 문제 상황2. 소스 코드3. trim() 메서드4. as 단언5. 결과 1. 문제 상황차후에 회원가입과 로그인의 각 항목에 대한 유효성 검사를 추가할 예정이지만 우선 간단하게 만들어보고 있습니다. 회원가입을 시험하던 중 아이디를 빈칸으로 제출한 경우에도 제출에 성공하는 문제를 발견했습니다. 닉네임과 비밀번호에서도 동일한 문제를 발견할 수 있었습니다. 이런 예외 상황에 대한 처리 코드를 추가하려고 합니다. 2. 소스 코드// 이전 코드'use server'import { signIn } from '@/auth'import { redirect } from 'next/navigation'export default async (formData: FormData) => { if (!..
-
[Next.js 14 / 🔥 Tadak Tadak 🔥] Next.js 14 새로운 기능! Server Actions 알아보자!Next.js 2024. 1. 11. 13:55
🍎 목차1. Server Actions 등장2. Server Component 에서 Server Actions 사용하기2. Client component에서 Server Actions 사용하기 1. Server Actions 등장Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications. Next.js 14 가 나오면서 실험적이었던 기능이었던 Server Actions가 안정화되면서 도입되었습니다. 공식 문서의 본문..