전체 글20 [모던 자바스크립트 딥다이브] 5~6장 요약 정리 05장 표현식과 문1. 값값은 식이 평가되어 생성된 결과를 말한다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이라고 했다. 따라서 변수에 할당 되는 것은 값이다. 값은 다양한 방법으로 생성할 수 있다. 가장 기본적인 방법은 리터럴을 사용하는 것니다. 2. 리터럴리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다. 리터럴은 사람이 이해할 수 있는 문자(숫자, 한글, 알파벳 등) 또는 미리 약속된 기호('',"",[],.,{} 등) 로 표기한 코드다. 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다. 3. 표현식표현식은 값으로 평가될 수 있는 문이다. 표현식이 평가가.. 2025. 1. 27. [모던 자바스크립트 딥다이브] 4장 요약 정리 04장 변수1. 변수란 무엇일까? 왜 필요한가?변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 사람은 계산과 기억을 모두 두뇌에서 하지만, 컴퓨터는 연산과 기억을 수행하는 부품이 나눠져 있다. 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체 이다. 하나의 메모리 셀의 크기는 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어드린다. 각 셀은 고유의 메모리 주소를 가지게 되고, 그 주소는 메모리 공간의 위치를 나타낸다. 컴퓨터는 모든 데이터를 2진수로 처리한다. 따라서 메모리에 저장되는 데이터는 종류에 상관없이 모두 2진수로 저장된다. 만약 성공적으로 연산이 끝나고 연.. 2025. 1. 26. [모던 자바스크립트 딥다이브] 3장 요약 정리 03 장 자바스크립트 개발 환경과 실행 방법1. 자바스크립트 실행 환경자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다. 다만, 브라우저와 Node.js는 용도가 다르다. 브라우저는화면 렌더링이 주 목적이지만, Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다. 따라서 브라우저와 Node.js 모두 자바스크립트의 코어인 ECMAScript를 실행할 수 있지만, 이외의 추가로 제공하는 기능은 호환되지 않는다. 자바스크립트는 사용자 컴퓨터의 브라우저에서 동작한다. 만약 브라우저를 통해 다운로드 되어 실행되는 자바스크립트가 사용자 컴퓨터의 로컬파일을 삭제하거나 수정하고 생성할 수 있다면, 이는 사용자 컴퓨터가 악성코드에 그대로 노출된 것과 마찬가지다.. 2025. 1. 26. [모던 자바스크립트 딥다이브] 1장~2장 요약 정리 01장 프로그래밍1. 프로그래밍이란?프로그램이이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 요구사항을 명확히하고 적절한 문제 해결 방안을 정리하여 무엇을 실행하고 싶은 지 정의 할 필요가 있다. 대부분의 문제는 복잡하다. 문제를 명확히 이해해야하며 단순하게 분해하고 자료를 정리하고 구분하고 순서에 맞게 배열해야한다. 우리는 문제 해결 방안을 고려할때 컴퓨터의 입장에서 문제를 바라봐야한다. -> 컴퓨팅 사고가 필요하다.2. 프로그래밍 언어컴퓨터가 이해할 수 있는 기계어로 명령어를 전달해야 컴퓨터가 명령을 수행할 수 있다. 하지만 기계어로 사람이 명령을 전달하는 것은 매우 어려운 일. 그래서 우리는 "프로그래밍 언어"를 사용한다. 그리고 그걸 기계어로 변환해주는 일종의 번역기가 컴파일러 혹은 인터.. 2025. 1. 25. [Javascript 알고리즘] 연속된 부분 배열의 최대 합 문제정수 배열과 윈도우 크기 k가 주어졌을 때, 연속된 k개의 원소의 합 중 최대값을 찾는 함수를 작성해주세요.풀이 접근잘 몰르겠어서 클로드랑 차근히 풀고 나니 이해가 되었다..첫번째 묶음의 합을 구한다.그 합을 최대값으로 저장한다.한칸씩 이동하면서 최대값을 갱신한다. 이때 한칸씩 이동하는 방법: 합에서 이전 묶음의 첫번째 요소를 빼고, 이번묶음의 마지막 요소를 합에 더한다.풀이function maxSumSubarray(arr, k) { let sum = 0; // 1. 첫번째 합을 구한다. for (let i = 0; i 다른 사람 풀이function maxSumSubarray(arr, k) { // 최대값을 저장할 변수 let maxSum = 0; // 배열을 처음부터 끝까지 순회 for.. 2025. 1. 22. JWT 기술분석: Access Token과 Refresh Token 전략 목차JWT(JSON Web Token) 개요Access Token vs Refresh Token토큰 관리 전략보안 고려사항구현 모범 사례1. JWT(JSON Web Token) 개요1.1 JWT란?JWT(JSON Web Token)는 당사자 간에 정보를 JSON 객체로 안전하게 전송하기 위한 독립적인 방식을 정의하는 개방형 표준(RFC 7519)입니다. 이 정보는 디지털 서명되어 있으므로 신뢰할 수 있습니다.1.2 JWT의 구조JWT는 다음과 같은 세 부분으로 구성됩니다:Header: 토큰 유형과 사용된 서명 알고리즘Payload: 클레임(claim)들을 포함하는 실제 데이터Signature: 토큰의 유효성을 검증하기 위한 서명예시:header.payload.signature2. Access Token .. 2025. 1. 17. useState가 클로저로 만들어진걸 알고 계신가요? React의 useState와 클로저의 깊은 관계 이해하기React의 useState Hook은 우리가 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 강력한 도구입니다. 하지만 useState가 어떻게 동작하는지, 특히 클로저(Closure)와 어떤 관계가 있는지 깊이 이해하고 계신가요? 오늘은 useState의 내부 동작 원리와 클로저의 관계에 대해 자세히 알아보겠습니다.클로저란 무엇인가?클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 쉽게 말해, 함수가 자신이 생성될 때의 환경을 기억하는 것입니다. 다음 예시를 통해 클로저의 기본 개념을 이해해보겠습니다:function createCounter() { let count = 0; // 외부 변수 return function() { .. 2025. 1. 16. [javascript 알고리즘] 접미사인지 확인하기 문제어떤 문자열에 대해서 접미사는 특정 인덱스부터 시작하는 문자열을 의미합니다. 예를 들어, "banana"의 모든 접미사는 "banana", "anana", "nana", "ana", "na", "a"입니다.문자열 my_string과 is_suffix가 주어질 때, is_suffix가 my_string의 접미사라면 1을, 아니면 0을 return 하는 solution 함수를 작성해 주세요.풀이접근처음에는 split으로 분할해서 분할되는 갯수로 하려고 했다. -> 이렇게 하니 ana 가 2번 들어가서 첫번째 ana으로 분리되었다.endWith라는 문자열 메서드를 알게되었다. 간단하게 풀이가 가능했다. 풀이function solution(my_string, is_suffix) { return my_s.. 2025. 1. 14. 웹 애플리케이션의 네트워크 요청 최적화 가이드 모던 웹 애플리케이션에서 네트워크 요청은 성능에 크게 영향을 미치는 핵심 요소입니다.사용자 경험을 향상시키기 위해서는 효율적인 네트워크 요청 처리가 필수적입니다.이 글에서는 네트워크 요청을 최적화하는 다양한 전략과 기법들을 살펴보겠습니다.1. 데이터 번들링과 압축리소스 번들링모던 웹 애플리케이션은 수많은 JavaScript, CSS 파일들로 구성되어 있습니다.각 파일마다 별도의 HTTP 요청이 발생하면 성능이 저하될 수 있습니다.이를 해결하기 위해 다음과 같은 방법을 사용할 수 있습니다:Webpack, Rollup 등의 번들러를 사용하여 여러 파일을 하나로 병합Code splitting을 통해 필요한 시점에 필요한 코드만 로드Tree shaking으로 사용하지 않는 코드 제거압축 기법 활용전송되는 데이터.. 2025. 1. 14. [javascript 알고리즘] 3진법 뒤집기 문제자연수 n이 주어질 때, n을 3진법으로 변환하고 이를 뒤집은 후, 다시 10진법으로 변환한 값을 return 하도록 함수를 작성해주세요.제한사항n은 1 이상 100,000,000 이하인 자연수입니다.입출력 예n = 45result = 7설명:45를 3진법으로 변환하면 "1200"이를 뒤집으면 "0021"이를 10진법으로 변환하면 7풀이function solution(n) { const 삼진법 = n.toString(3); const 거꾸로 = [...삼진법].reverse().join(""); return parseInt(거꾸로, 3);}다른 사람 풀이// 한 줄로 풀기const solution = n => parseInt(n.toString(3).split("").reverse().join(.. 2025. 1. 13. 자바스크립트의 비동기 처리에 대해 알아보자 자바스크립트는 싱글 쓰레드 기반으로 동작하는 언어입니다. 하지만 실제로는 여러 작업을 동시에 처리하는 것처럼 보이는데요. 이러한 비동기 처리가 어떻게 이루어지는지 자세히 알아보겠습니다.비동기 처리의 핵심 요소1. Call Stack자바스크립트 엔진이 코드를 실행하는 메인 쓰레드입니다. 여기서는 동기적으로 코드가 순차적으로 실행됩니다.2. Web APIs브라우저에서 제공하는 API로, setTimeout, fetch, DOM 이벤트 등의 비동기 작업을 처리합니다. Node.js 환경에서는 C++ APIs가 이 역할을 담당합니다.3. Callback Queue비동기 작업이 완료된 후 실행될 콜백 함수들이 대기하는 곳입니다.4. Event LoopCall Stack이 비어있을 때, Callback Queue의.. 2025. 1. 12. Next.js로 배우는 실전 웹 바이탈 최적화 완벽 가이드 안녕하세요! 오늘은 Next.js에서 제공하는 기능들을 활용해 웹 바이탈을 최적화하는 방법을 상세히 알아보겠습니다. 특히 Next.js 13 이상에서 사용할 수 있는 최신 기능들을 중심으로 설명드리겠습니다.1. LCP(Largest Contentful Paint) 최적화LCP는 사용자가 보는 화면에서 가장 큰 이미지나 텍스트가 표시되는 시간을 측정합니다. Next.js의 Image 컴포넌트를 활용하면 쉽게 최적화할 수 있습니다.Next.js Image 컴포넌트 최적화// app/page.tsximport Image from 'next/image'function HeroSection() { return ( )}Next.js 설정 최적화// next.config.jsmodule.exports = .. 2025. 1. 11. 이전 1 2 다음
