개발자 90%가 잊고 사는 자바스크립트 동작원리

"내가 짠 자바스크립트는 크롬(v8엔진)이 실행해주니깐..." 자바스크립트 동작원리 중간에 undefined가 왜 출력되는지 알면 동작원리를 공부할 필요가 없다. 이미 그들은 일반인이 아니기 때문이다. 1. console.log(1+1)가 먼저 실행되어 결과인 2가 콘솔에 출력된다. 2. 다음으로 setTimeout(()=> console.log(2+2), 1000)가 실행된다. setTimeout은 비동기 함수로, 자체로 호출은 되지만, 콜백 함수는 대기 시간이 지난 후에 실행된다. 고로 setTimeout 함수 자체는 아무런 값을 반환하지 않기 때문에 실행 결과로 undefined가 반환된다. 3. console.log(3+3)이 실행되고 결과인 6이 콘솔에 출력된다. conso..

• format_list_bulleted Javascript
• · 2025. 4. 23.
• textsms

싱글톤 자체는 메모리 사용량을 줄이지 않는다.

https://snowman-seolmini.tistory.com/84 [React Project] 파지직TV⚡[Ver2.0]Intro✍️기존의 사이트를 자신만의 것으로 만들어 보는 것은 리액트를 공부하고 연습해 보는 의미에서 큰 의미가 있다고 생각한다. 파지직TV사이트는 학습한 리액트 지식을 활용하고, 더 나은snowman-seolmini.tistory.com 파지직TV에서 수많은 비디오 호출 메서드들은 싱글톤 패턴으로 이뤄져 있다. 이게 무슨 소리냐, 하나의 클래스 안에 많은 호출 메서드들을 두고 이를 Context AP를 사용해 모든 컴포넌트에서 하나의 인스턴스로 여러 메서드들을 사용하는 것이다. 이러한 방식을 이용하면 리소스를 줄일 수 있다고 믿었고, 이를 직접 확인하고자, 인스턴스의 생성을 콘솔..

• format_list_bulleted Project
• · 2024. 11. 9.
• textsms

[React Project] Momentum - Lighthouse 최적화

Vercel을 통해 배포한 프로젝트를 Lighthouse로 검사한 후 최적화를 진행해 보기로 했다. Lighthouse는 웹 페이지의 성능, 접근성, SEO 및 모범 사례를 평가하여 개선할 수 있는 영역을 제시해 주기 때문이다. 1. Lighthouse로 검사 후 제공되는 보고서의 주요 항목은 다음과 같다.- 성능 : 페이지 로딩 속도, 인터랙티브 시간, 이미지 최적화 등.- 접근성 : 사용자 경험을 향상시키기 위한 접근성 기준 충족 여부.- SEO : 검색 엔지 최적화 과년 점검.- 모범 사례 : 보안 및 최저화 관련 체크 항목. 2. 최적화 개선 사항Lighthouse에서 제시한 일반적인 최적화 방법- 이미지 최적화 : 이미지 파일 크기를 줄이고 필요한 경우 포맷을 변경 (예 : WebP)- 코드 스..

• format_list_bulleted Project
• · 2024. 11. 6.
• textsms

Cookies, Session, Cache에 대해 알아보자.(2)

쿠키, 세션, 캐시도 각각의 여러 종류가 존재해. 이걸 알아볼 거야. Cookies🍪에도 Session Cookies(세션 쿠키), Persistent Cookies(지속 쿠키), Secure Cookies(보안 쿠키), HttpOnly Cookies(자바스크립트 금지 쿠키), SameSite Cookies (같은 사이트 쿠키)의 다양한 쿠키가 존재해. (벌써 어지럽다..) 먼저 이해하기 쉽게 예시를 들어 설명을 해줄께...!(하- 뭐가 이렇게 많냐 ㅡ.ㅡ) Cookies1.Session Cookies (세션 쿠키)이건 마치 식사하는 동안 먹을 음식이야. 한 끼 식사가 끝나면 테이블을 떠나면서 사라져. 브라우저를 닫으면 이 쿠키도 자동으로 없어지지.세션 쿠키는 사용자가 브라우저를 닫을 때까지만 유지되는..

• format_list_bulleted ETC
• · 2024. 10. 31.
• textsms

[React Project] Momentum ver 1 .1 .1 리팩토링 과정 중 문제&해결

1. 문제 상황useBackgroundImage 훅에서 backgroundImageUrl 값이 업데이트 됨Main 컴포넌트에서 backgroundImageUrl 값이 제대로 반영되지 않는 현상- 비동기 요청을 통해 배경 이미지를 가져오는 useBackgroundImage 훅을 사용하고 있다. 그러나 이 훅에서 상태 업데이트가 발생했음에도 불구하고, Main 컴포넌트에서 backgroundImageUrl 값이 제대로 반영되지 않아 새로고침 시 업데이트된 이미지가 렌더링되지 않는 문제가 발생한다. 2. 코드 설명 기존 코드 구조 : useQuery와 useEffect를 활용한 비동기 요청backgroundImageUrl 상태 관리 방식과 발생한 문제점localStorage와 상태 불일치 문제# 기존 코드# ..

• format_list_bulleted Project
• · 2024. 10. 18.
• textsms

내가 만들어 본 것들에 대한...

JavaScript와 리액트를 배우면서 대부분이 만들어보는 투두리스트를 시작으로 전화번호부, 뽀모도로 타이머, API, 쇼핑몰, 유튜브, SNS, 블로그 등 많은 애플리케이션을 만들어 보았다.  사이트를 만들어보면서 해당 사이트의 기능을 구현하기 위해 여러 가지 기능을 하는 함수, 많은 함수들을 관리하기 위해 어떻게 아키텍처를 잡아야 할까 하는 고민, 수많은 문제 상황과 해결했던 날들 등 많은 것을 경험했다고 생각한다. 하지만 한편으로 " 현역 개발자들은 이보다 얼마나 더 복잡하고, 멋진 코드를 작성하고 있을까? " 라는 생각이 들면 그동안 나의 경험들이 초라하게 느껴질 때도 있다.   그러나, 개발자 지인이 한 말이 있다. "현직 개발자들이 프로젝트를 평가할 때, 기술 스택이나 기능의 복잡성만 보는 것..

• format_list_bulleted 끄적끄적
• · 2024. 10. 16.
• textsms