JavaScript
-
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 (!..
-
디바운싱과 쓰로틀링JavaScript 2023. 7. 14. 16:55
💡 이번주 데브 코스 강의에서 디바운싱과 스로틀링에 대한 내용이 나와서 한번 다시 정리해 보려 합니다! "debouncing"이라는 영어 표현이 익숙하지 않아서 한번 찾아봤더니 적절한 한국어 표현이 없더라고요! 전등의 스위치를 누르는 상황을 가정해 봤을 때 신호가 한 번만 가서 바로 전등의 불이 켜진다고 생각하지만 실제로는 신호의 안정성이 확립되기까지 시간이 걸린다고 하네요. 이 시간 동안 스위치 내의 접점에서 여러 번의 접촉과 분리가 일어날 수 있는데, 이로 인해 노이즈가 발생하고 여러 번의 상태 변화가 일어날 수 있다고 해요. 우리가 원하는 건 스위치를 켜서 보내는 신호 한 번인데 중간에 불필요한 신호가 가면 안 되겠죠? 이를 해결하기 위해 도입된 방법이 "debouncing"이라고 해요. 앞에서..
-
유틸성 함수(utility function)JavaScript 2023. 6. 23. 15:32
안녕하세요! 😎오늘은 유틸성 함수(utility function)에 대해서 알아보려 합니다. 저번주에 멘토님께 코드 리뷰를 받는데 비교에 대한 코드가 반복되면 유틸성 함수를 사용해 보라는 리뷰를 주셨어요! 유틸성 함수가 뭐죠...? 그래서 한번 정리해 보려고 합니다! 우선 utilie 이라는 단어를 찾아보면 유용한, 도움이 되는, 쓸모 있는 이라는 뜻으로 변역 돼요. 흠... 그럼 utility function은 쓸모있는 함수...? 쓸모없는 함수도 있나...? 전혀 도움이 안 되네요. 좀 더 이용목적에 초점을 두고 찾아보니 '코드의 크기가 작고, 애플리케이션 비즈니스와는 관련이 적으며, 굉장히 일반적인 기능을 담당하는 코드'라고 나오네요! 프로젝트에 관련된 중요한 코드 기능보다는 자주 사용되는 작..
-
렉시컬 스코프(정적 스코프)JavaScript 2023. 6. 15. 21:13
클로저에 대해서 공부를 하는데 렉시컬 스코프에 대한 얘기가 반복적으로 나와 한번 정리해 보려 합니다. 한 번쯤 생각해 보신 적 있을 거예요.자바스크립트 엔진이 우리가 짠 자바스크립트 소스코드를 어떻게 인식하고 처리해서 우리가 원하는 결과를 도출해 줄까? 자바스크립트 엔진은 소스코드를 2개의 과정, 즉 "소스코드의 평가"와 "소스코드의 실행" 과정으로 나누어 처리해요.저는 처음에 "소스코드의 평가"과정을 생각하지 못했어요. 단순하게 그냥 코드는 실행된다고만 생각했죠.하지만 아니에요. 실행을 위해서는 미리 실행을 위한 정보를 수집하는 과정이 필요하답니다. 이 단계가 "소스코드의 평가" 과정입니다. "소스코드의 평가" 과정에서는 실행 콘텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변..
-
[프로그래머스 FE 데브코스/TIL] 브라우저 동작원리, 메모리, 스코프JavaScript 2023. 6. 4. 21:40
데브코스 첫날이네요! 앞으로 6개월 동안 강의를 들으면서는 노션에 메모하고, 중요하다고 생각하는 부분은 블로그에 쓰면서 생각을 정리하려고 합니다. 오전 시간과 주말을 잘 사용해야겠다는 생각이 첫날부터 드네요... 😅오늘 신경 써서 보고 싶은 부분은 브라우저의 동작 원리, 메모리, 스코프와 클로저입니다.그리고 키워드 var을 지양하는 이유를 호이스팅과 관련해서 한번 알아보라고 하셔서 이 부분도 정리해 보겠습니다. ✔️ 브라우저의 동작 원리브라우저의 동작은 크게 통신, 렌더링, 스크립트 실행으로 나눌 수 있습니다. 통신브라우저와 서버와의 통신을 의미합니다.브라우저가 서버에 요청을 보내면 서버는 요청에 따라 특정 값을 응답합니다. ❗️요청은 한 번에 하나를 할 수도 있고, 한 번에 여러 개를 할 수도 있습..