티스토리

요모조모

검색하기

블로그 홈

요모조모

kellyjs.tistory.com/m

kelly09 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

자꾸 잊는 reduce() 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환하는 메소드.array.reduce(callback(accumulator, currentValue[, index[, array]]), [initialValue])callback: 각 요소에 대해 실행할 함수. 네 개의 매개변수를 가짐.accumulator: 누적값(이전 콜백의 반환값)currentValue: 현재 처리 중인 배열 요소index(선택): 현재 처리 중인 요소의 인덱스array(선택): reduce를 호출한 배열initialValue(선택): 첫 번째 호출에서 accumulator로 사용할 값 ☕ 사용 예시- 배열의 합계 구하기const numbers = [1, 2, 3, 4, 5];const sum = num.. 공감수 0 댓글수 0 2025. 3. 1.
type과 interface 둘이 어떤 차이가 있는지? 확장 방법의 차이interface는 extends를 사용하여 확장 가능함.type은 &(intersection) 연산자를 사용하여 결합 가능함.interface Dessert { name: string;}interface Cake extends Dessert { fruit(): void;}type DessertType = { name: string;}type CakeType = DessertType & { fruit(): void;}; 합집합(Union) 타입 지원 여부type은 유니언을 이용한 타입 조합이 가능, interface는 불가능interface A { name: string;}interface B { age: number;}// type에서는 가능type C =.. 공감수 0 댓글수 0 2025. 2. 13.
implements와 extends TypeScript에서 class를 공부하던 중 헷갈려서 정리하게 되었다. 둘 다 class 상속의 유형들이다. implements: 인터페이스 구현인터페이스에 정의된 구조를 강제할 때 사용함.인터페이스는 실제 구현이 없고, 클래스가 인터페이스를 구현해야 함.interface Flyable { fly(): void;}class Bird implements Flyable } fly() { console.log("파닥파닥"); }}const myBird = new Bird();myBird.fly(); // "파닥파닥"인터페이스를 구현하는 클래스는 반드시 인터페이스의 모든 속성과 메서드를 정의해야 함.implements 절을 사용하면 클래스가 특정 인터페이스를 충족하는지 확인할 수 있음. extends: 상.. 공감수 0 댓글수 0 2025. 2. 11.
07 - 응용 계층, 애플리케이션에 접속하는 단계 *를 정리한 내용입니다.응용 계층의 역할: 사용자가 사용하는 애플리케이션(응용 프로그램)이 동작하는 곳클라이언트 - 서비스를 요청하는 측서버 - 서비스를 제공하는 측클라이언트에서 서버로 데이터를 보내기 위해 프로토콜 사용응용 계층의 대표적인 프로토콜프로토콜 내용HTTP웹 사이트 접속DNS이름 해석FTP파일 전송SMTP이메일 송신POP3이메일 수신 HTTP 프로토콜요청(request) - 사용자가 URL을 입력응답(response) - 사용자의 요청에 응답⇒ 요청과 응답을 위해 HTTP 프로토콜 사용HTTP(HyperText Transfer Protocol)클라이언트와 서버가 어떻게 데이터를 교환할지 정해놓은 규칙80번 포트 사용문자 형태로 데이터 전송, 필요한 부분 파싱 필요시작 라인헤더공백body…시작.. 공감수 0 댓글수 0 2025. 2. 9.
06 - 전송 계층, 오류 없이 데이터를 전달하는 단계 *를 정리한 내용입니다.전송 계층의 역할오류 점검컴퓨터가 데이터를 제대로 받았을 때 어떤 애플리케이션으로 전달해야 하는지 식별 오류 점검 방식혼잡 제어(Congestion Control)네트워크로 들어가는 정보량을 조절하여 네트워크가 혼잡해지지 않게 조절Time Out - 프로그램이 특정 시간 내에 성공적으로 수행되지 않아서 진행이 자동적으로 중단되는 것.흐름 제어데이터 링크 계층의 정지-대기 방식과 동일송신자가 하나의 데이터 전송 후 다음 데이터 전달 전에 확인 응답 기다리는 방법오류 제어확인 응답 - 수신자 측으로부터 ACK 응답을 받아야 함, ACK가 없으면 오류로 판단시간 초과 - 특정 시간 내에 ACK가 없으면 세그먼트에 오류가 있다고 판단 오류 발션 시 데이터를 재전송해야 하는데, 재전송이 필.. 공감수 0 댓글수 0 2025. 2. 9.
05 - 네트워크 계층, 목적지를 찾는 단계 * 를 정리한 내용입니다.네트워크 계층의 역할ex) A학교의 수연이가 B학교의 수지에게 이메일 보내고 싶음 ⇒ 각 학교의 스위치가 다르기 때문에 절대 상대방의 MAC 주소를 알 수 없음 ⇒ 라우터 필요라우터(Router) - 데이터의 전달 경로를 알려주는 내비게이션IP 주소를 사용한 통신라우팅(Routing) - 가장 빠른 길을 찾는 과정IP 주소란?LAN 환경은 스위치를 이용하여 MAC 주소로 통신 ⇒ 인터넷에 바로 접속 불가, 우리 회사 이외의 컴퓨터와 통신 불가 ⇒ IP 주소 필요IP(Internet Protocol) 주소 - 인터넷상에 있는 컴퓨터의 고유한 주소어떻게 부여?인터넷 하기 위해 인터넷 서비스 제공자(Internet Service Provider, ISP) SKT, KT, LG U+ 같.. 공감수 0 댓글수 0 2025. 2. 1.
04 - 데이터 링크 계층, MAC 주소로 통신하는 단계 * 를 정리한 내용입니다.데이터 링크 계층의 역할네트워크에서 데이터를 관리하고 전달하는 계층 - 데이터 전송의 신뢰성, 효율성에 중요한 역할데이터를 작은 프레임 단위로 분할MAC 주소를 활용하여 장비 식별오류 탐지, 수정, 충돌 관리오류 감지, 수정 방식회선 제어 - 오류 회피ENQ(Enquiry)[신호의 시작]와 EOT(End Of Transmission)[끝을 의미]을 명시적으로 지정수신자는 ACK(Acknowledgement)를 송신자에게 보냄 ⇒ 신호 간 충돌 피함오류 제어 - 외부 간섭, 시간 지연에 의한 송수신 데이터의 변형, 순서가 어긋나는 통신 장애가 발생하지 않도록 오류 검출/정정 → 통신에 대한 신뢰성 확보 방법패리티 검사 - 각 비트를 검사해서 "짝수"인지, "홀수"인지 확인 후 오류.. 공감수 0 댓글수 0 2025. 2. 1.
03 - 물리 계층, 데이터를 전기 신호로 변환하는 단계 * 를 정리한 내용입니다.물리 계층의 역할컴퓨터들을 물리적으로 연결하거나 데이터를 전기 신호로 변환하고 제어하는 역할전기 신호의 종류아날로그 신호 - 빛, 소리와 같이 연속적으로 변하는 물결 모양의 신호ex. 유선 전화, 라디오 방송디지털 신호 - 특정한 값을 기준으로 불연속적으로 변하는 막대 모양의 신호ex. 컴퓨터, 스마트폰앞서 비트란 컴퓨터가 데이터를 처리하는 최소 단위로, 0과 1로 구성된다고 함.⇒ 결국 모든 데이터는 0과 1로 표현하면 됨.“나에게 network.docx 파일을 보내줘!”라는 메시지를 전송하고싶음!1. 문장을 0과 1의 비트로 변환2. 해당 비트를 전기 신호로 변환3. 수신자에게 (디지털 신호로) 전달4. 수신자 측에서 다시 0과 1의 비트로 변환됨어디서 어떻게 전기 신호로 변.. 공감수 0 댓글수 0 2025. 2. 1.
02 - 네트워크 통신을 위한 약속 * 를 정리한 내용입니다.네트워크의 규칙, 프로토콜프로토콜 - 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고받는 양식과 규칙의 체계대표적인 프로토콜OSI 7계층TCP/IP 4계층OSI 7계층 등장 배경컴퓨터와 컴퓨터가 통신하기 위해 필요한 것을 7개 계층으로 분리해놓은 것.1980 개인용 컴퓨터 多 → 제조사마다 자신들만의 프로토콜 사용 → 통신 장비들끼리 호환(통신) xISO(국제표준화기구)에서 컴퓨터 간의 통신이 가능하도록 OSI 7계층이라는 표준 제정각 계층별로 필요한 장치들 정의 → 제조사들이 통신에 필요한 프로토콜 통일 가능OSI 7계층컴퓨터와 컴퓨터가 통신하는 구조를 7개의 계층으로 정의해둔 약속 ⇒ 프로토콜응용 계층 - 사용자와 애플리케이션 간의 소통(이메일 전송, 웹 사이트 조회)표현 .. 공감수 0 댓글수 0 2025. 2. 1.
01 - 네트워크 첫 걸음 * 를 정리한 내용입니다.네트워크Net + Work각종 통신 장비들이 서로 그물망처럼 연결되어 데이터를 교환하거나 협력하여 일할 수 있게 해주는 통신망ex) 네이버에서 뉴스 보기, 구글에서 검색하기 → 네트워크를 기반으로 함.네트워크가 필요한 이유주변 장치 공유주변 장치 - 컴퓨터에 연결해서 사용하는 장치ex. 프린터, 스마트폰, 태블릿.데이터 공유공동으로 문서 생성, 편집 시팀 단위의 공동 작업 시회원가입 기능, 장바구니/결제 기능, 상품 관리/검색 등 분배된 작업을 이후에 완성 시 모든 기능이 유기적으로 결합해야 함.각 기능을 한곳에 모아 저장하고 결합할 때 네트워크를 사용함.네트워크 형태: 랜 & 왠통신 범위에 따라 나뉨.LAN(Local Area Network, 근거리 통신망) - 건물 안이나 특.. 공감수 0 댓글수 0 2025. 2. 1.
자꾸 까먹는 map() 호출한 배열의 모든 요소에 주어진 함수를 호출한 결과로 채운 새로운 배열 생성.원본 배열은 변경되지 않음.=> 배열의 모든 요소를 하나씩 가져와서 주어진 함수에 넣어 처리한 결과로 새로운 배열을 만들어 주는 메서드. 🍰 구문map(callbackFn)map(callbackFn, thisArg)callbackFn: 배열의 각 요소에 대해 실행할 함수thisArg(선택 사항): callbackFn 안에서 this로 사용할 값 🍰 callbackFn의 세 가지 매개변수currentValue - 현재 처리 중인 요소의 값index - 현재 처리 중인 요소의 인덱스array - map() 메서드를 호출한 배열 자체 🍰 사용 예시// currentValue 사용하기const numbers = [10, 20.. 공감수 0 댓글수 0 2025. 1. 29.
[멋쟁이 사자처럼 프론트엔드 스쿨] 95일차 - 종료 9월 25일로 부트캠프는 종료되었다. 시작할 땐 분명 아직 멀었다 싶었는데, 결국 끝이 왔다.어딘가에 소속되어 있지 않으면 불안하고, 혼자 공부하면 잘 하고 있는 건지 걱정되고, 나태해지고 등등의 이유로 부트캠프에 참여했었는데, 이제 끝나니까 갑자기 세상에 던져진 기분이다... 그리고 나름 5개월 동안 정 들었는데, 동료 피드백 쓰고 부트캠프 소감 쓰고 롤링 페이퍼를 쓰는 등 끝나가는 분위기가 조성되니까 슬퍼졌다... (근데 다들 안 그래보였다)사실 당장 뭘 해야 할 지 부터가 막막하지만, 일단 나름대로 계획을 세워서 하나씩 해보려고 한다... 당장 급한 건 정처기 실기. 시험 전까지는 여기에 비중을 좀 많이 두기로...혼자 알아서 잘 하는 사람이 아니다 보니까 두려움이 거의 공포 정도로 자라날 때가 있.. 공감수 1 댓글수 1 2024. 9. 26.
파이널 프로젝트 D-2 이제 다음주부터 당장 파이널 프로젝트가 시작된다. 시작 전에 생각을 좀 정리해야 할 것 같다.📚 어제 매니저님께서 프로젝트 조원들간의 갈등은 실력 차에서 오진 않는다는 얘기 듣고 살짝 안심이 됐다. 나는 스스로가 없던 갈등도 생기게 할 만큼 실력이 부족하다고 생각해서...😢 리액트 수업 시작 즈음부터 프로젝트만 생각하면 스트레스였다. 원래 성격이 걱정이 많은 편이라 더 그런 것 같다. 온갖 부정적인 생각은 다 하고, 만약 내가 이런 실수를 한다면, 저런 실수를 한다면 이런 생각 하면서 무서워하고. 그런 거 다 쓸데 없다는 걸 알지만 생각을 멈출 수가 없다. 지금 난 아직 자바스크립트 개념을 물어보면 제대로 대답을 못한다면? 문제가 생기면 구글링을 하는 게 아니라 지피티한테 먼저 물어본다면? 지피티.. 공감수 3 댓글수 1 2024. 8. 21.
[멋쟁이 사자처럼 프론트엔드 스쿨] 71일차 TIL - 명령형 핸들, Effect 🍰 오늘도 아자자자!🍴 명령형 핸들(Imperative Handle): 함수형 컴포넌트에서 클래스 컴포넌트의 ref와 유사한 기능을 제공하는 개념.forwardRef와 함께 사용 - 부모로부터 전달 받은 ref를 자식 컴포넌트에 연결함useImperativeHandle 훅 사용 - 이 훅을 통해 부모에게 노출할 메서드나 속성을 정의함명령형 핸들은 주로 DOM 요소에 직접 접근해야 하는 경우나 복잡한 애니메이션 제어 등에 유용함.🍫 명령형 핸들이 뭔데?명령형(imperative) 프로그래밍 패러다임을 가리킴.프로그램의 상태를 변경하는 명령문을 사용하여 프로그램이 어떻게 동작해야 하는지를 상세히 기술함.React는 주로 선언적(declarative) 방식을 사용하지만, 이 기능은 더 직접적이고 명령적인.. 공감수 1 댓글수 0 2024. 8. 15.
[멋쟁이 사자처럼 프론트엔드 스쿨] 70일차 TIL - Motion One, forwardRef 🍰 수업 때 한 번 줌 소리가 아예 안 들린 적이 있어서 매우 당황했다. 무슨 문제지;🍴 Motion One: JavaScript 애니메이션 라이브러리.React와 같은 프레임워크에 의존하지 않고, CSS와 JavaScript 만으로 애니메이션을 구현할 수 있게 해줌.Web Animations API(WAAPI)를 활용하여 고성능 애니메이션을 제공함.WAAPI: 브라우저에 내장된 네이티브 애니메이션 APIJavaScript에서 직접 제어할 수 있어 정밀한 애니메이션 가능작은 파일 크기로도 고성능 애니메이션 구현 가능 - 웹 페이지의 로딩 시간 최소화에 기여함pnpm add motion// 사용하고자 하는 파일에서import { animate } from 'motion'; // 추가하기 🍴 forw.. 공감수 1 댓글수 0 2024. 8. 15.
[멋쟁이 사자처럼 프론트엔드 스쿨] 69일차 TIL - 참조(Refs) 활용 🍰 날씨도 더운데 가만히 앉아서 수업 들으려니까 더 졸리고 집중이 잘 안 되는 것 같다. 🍴 useRef: React 훅. 컴포넌트의 생명주기 동안 유지되는 가변값을 저장하는 데 사용됨.반환된 객체는 컴포넌트의 전 생애주기를 통해 유지됨.값을 변경해도 컴포넌트가 리렌더링 되지 않음.주로 DOM 요소에 직접 접근하거나 이전 상태를 기억하는 데 사용됨.countRef를 사용하여 컴포넌트의 리렌더링 없이 값을 유지하고 변경할 수 있는 예시 코드.import React, { useRef, useState } from 'react';function CounterWithRef() { const countRef = useRef(0); const [, setDummy] = useState(0); const i.. 공감수 1 댓글수 0 2024. 8. 15.
[멋쟁이 사자처럼 프론트엔드 스쿨] 66일차 TIL - Hook, state, 상태 끌어올리기 🍰 요즘 수업 집중도는 올라가서 좋은데, 내용은 이해가 되지 않아서 슬프다. 이해했다고 생각해도 막상 실습을 시키면 손을 못 댄다. 🍴 Hook의 등장React 컴포넌트는 Container (Stateful)와 Presentational (Stateless)로 구분됨.상태를 가질 수 있는 건 클래스뿐이었고, 클래스 내부 로직은 재사용이 어려웠음.이로 인해 래퍼 헬 문제가 발생했음: 컴포넌트가 래퍼로 감싸지는 구조가 반복되어 복잡해짐.결과적으로 Huge components가 만들어져 리팩토링과 테스트가 어려워짐.문제 해결 시도상태를 가진 로직을 재사용하려고 클래스와 고차 함수(H.O.C)를 사용.컴포넌트를 쪼개지 않으면 React의 장점이 사라짐.상태를 가질 수 있는 다른 방법이 필요.Hook 등장함수.. 공감수 1 댓글수 1 2024. 8. 8.
[멋쟁이 사자처럼 프론트엔드 스쿨] 65일차 TIL - 선언형vs명령형, 렌더링과 커밋, 컴포넌트 상태와 업데이트, props/state 🍰 완전 이해 못 했던 수업. 예습의 필요성을 철저히 느꼈다.🍴 선언형 vs 명령형 프로그래밍: 프로그램을 작성하는 두 가지 주요 접근 방식. React는 선언형 프로그래밍 패러다임을 따름. 🍫 선언형 프로그래밍(Declarative Programming)원하는 결과를 명시함'무엇'을 할 지 설명함상태를 기반으로 UI를 설명함리액트 = 선언적 프로그래밍 도구 🍫 명령형 프로그래밍(Imperative Programming)목표를 달성하기 위한 단계별 지침을 제공함.'어떻게' 할 지 설명함.UI를 직접 조작하는 방식임.전통적인 DOM 조작 방식. 🍴 Rendering 그리고 Commit 🍫 React의 렌더링 과정Trigger - 렌더링 프로세스 시작하는 단계. 주로 state 변경이나 부모 컴포.. 공감수 0 댓글수 0 2024. 8. 8.
[멋쟁이 사자처럼 프론트엔드 스쿨] 64일차 TIL - 순수 함수, 부수 효과, 이벤트 핸들러, 버블링 🍰 5일 전 수업이지만 열심히 생각해내서... 써야 한다.🍴 순수 함수함수가 호출되지 전에 존재했던 객체나 변수는 변경하지 않음.같은 입력이 주어지면 같은 결과를 반환해야 함.React 컴포넌트는 작성되는 모든 컴포넌트가 순수 함수일 거라 가정함.=> 같은 입력이 주어지면 반드시 같은 JSX를 반환한다는 뜻.그럼 누가 순수함을 보장하는가? => 우리가 규칙을 지켜야 함.🍫 어떤 게 순수 함수인데?const plus = (x, y) => x + y;위 함수는 1, 2를 넣는다고 가정했을 때 1, 2를 몇 번을 넣어도 결과는 항상 동일하게 3이 나온다.컴포넌트(함수)는 순수한 로직만 가져야 함.순수한 로직 => 컴포넌트를 렌더링 하는 것. 렌더링 프로세스는 리액트의 DOM을 생성하기 때문에 순수해야 함.. 공감수 0 댓글수 0 2024. 8. 7.
[멋쟁이 사자처럼 프론트엔드 스쿨] 63일차 TIL - 컴포넌트 속성 검사 🍰 요즘 진짜 뭘 복습하려고 해도 뭐부터 손 대야 할지도 모르겠고, 막 저번 주 수업도 이해 안 간 게 있는데 그게 쌓이고 쌓이다 보니 그냥 체념하고 새로 배우는 내용들이나 이해하기로 했다. 일단은 하자.🍴 컴포넌트 속성 매뉴얼 검사왜 필요한가? => 컴포넌트는 외부로부터 전달 받은 데이터인 속성(props)에 따라 마크업을 생성해 반환함.컴포넌트 제작자는 정확히 요구되는 마크업을 생성하기 위해 속성 타입을 지정해야 함.리액트 컴포넌트 제작 시 컴포넌트 속성 타입 지정하는 방법은? => propTypes 선언지난 시간에는 주어진 데이터의 자료형을 문자열로 반환하는 함수를 작성했었다.export function typeOf(data) { return Object.prototype.toString.ca.. 공감수 0 댓글수 0 2024. 8. 7.
[멋쟁이 사자처럼 프론트엔드 스쿨] 62일차 TIL - JSX 마크업 (조건부 렌더링, 리스트 렌더링) 🍰 우와 너무 밀려서 일단 올려놓고 업데이트 해야겠다.🍫 ?urlVite 또는 다른 번들러에서 사용되는 특별한 쿼리 파라미터에셋 처리 지시자 - ?url은 번들러에게 이 파일을 어떻게 처리해야 하는 지 알려줌?url 사용 시 번들러가 자동으로 content hash를 생성해줌🍫 Content hash파일의 내용을 기반으로 생성되는 고유한 문자열파일 내용 변경 시 해시 값도 변경됨생성 과정번들러가 빌드 과정에서 각 파일의 내용을 읽음파일 내용을 해시 함수에 통과시켜 고유한 해시값을 생성함이 해시 값을 파일 이름에 추가함번들러가 이 과정을 자동으로 처리함 🍴 JSX 마크업: JSX는 JavaScript의 확장 문법. HTML보다 더 엄격하고 몇 가지 규칙이 있음. 🍫 1. 하나의 루트 엘리먼트로 반.. 공감수 0 댓글수 0 2024. 8. 7.
[멋쟁이 사자처럼 프론트엔드 스쿨] 61일차 TIL - Vite 환경 구성 🍰 오늘은 그나마 중간중간 브레이크 걸어주셔서 간신히 따라갈 수 있었다. 그러나 머리에 남은 건 없는... 오늘 글 짱 깁니다. 주의.1. 작업할 폴더 생성 후 이동mkdir vite-reactcd vite-react/2. README.md와 index.html과 .gitignore 파일 생성touch README.md index.html .gitignore3. .gitignore 파일 내용 추가💡 Git이 의도적으로 추적하지 않을 파일 지정.DS_Store(맥 사용자만)node_modulesbuilddist4. Vite 설치pnpm add vite -D # --save-dev5. package.json 파일 수정{ "type": "module", "private": true, "name": "vit.. 공감수 0 댓글수 0 2024. 8. 3.
[실기] 요구사항 확인 - 소프트웨어 생명 주기 🍰 소프트웨어 생명 주기: 소프트웨어 개발을 위한 설계, 운용, 유지보수 등 과정을 단계별로 나눈 것폭포수 모형이전 단계로 돌아갈 수 없음을 전제각 단계 확실히 → 검토, 승인 → 다음 단계 진행가장 오래되고 폭넓게 사용됨고전적 생명 주기 모형각 단계 끝난 후 다음 단계 수행을 위한 결과물이 명확하게 산출돼야 함프로토타입 모형실제 개발될 SW에 대한 견본품(prototype) 만들어 최종 결과물 예측사용자 - 시스템 사이의 인터페이스에 중점 두어 견본품 개발나선형 모형(점진적 모형)SW 개발 과정을 여러 번 거쳐 점진적으로 개발보헴이 제안누락/추가된 요구사항 첨가 가능유지보수 과정 필요 X계획 수립 → 위험 분석 → 개발 및 검증 → 고객 평가애자일 모형고객의 요구사항 변화에 유연하게 대응, 일정 주기.. 공감수 1 댓글수 1 2024. 8. 2.
[멋쟁이 사자처럼 프론트엔드 스쿨] 60일차 TIL - React Component, props, createElement, JSX(w. Babel, TypeScript) 🍰 오늘도... vite보다 빠른 속도의 진도.🍴 React Component: 리액트 컴포넌트는 사용자 인터페이스(UI)의 뷰(view)를 구성하는 부품마크업으로 뿌릴 수 있는 JavaScript 함수React 앱에서 모든 UI는 컴포넌트이름은 대문자로 시작JSX 마크업을 반환🍫 함수 컴포넌트function Welcome(props) { return Hello, {props.name};} 🍫 클래스 컴포넌트class Welcome extends React.Component { render() { return Hello, {this.props.name}; // this는 클래스 컴포넌트에서 컴포넌트의 인스턴스를 가리키기 위해 사용됨 // 이 인스턴스는 해당 컴포넌트의 속성과 메.. 공감수 0 댓글수 0 2024. 7. 28.
[멋쟁이 사자처럼 프론트엔드 스쿨] 59일차 TIL - CommonJS VS ES modules, esm.sh, Virtual DOM, Reactivity(Proxy) 🍰 겁나 빠르다.🍴 module: SW 개발에서 코드의 조직과 재사용성을 높이기 위해 사용하는 개념.독립적인 코드 조각특정 기능을 수행하는 단위ex. 클래스 하나, 특정 목적을 가진 복수의 함수로 구성된 라이브러리 하나🍫 특징캡슐화 - 자체적인 scope를 가지며, 외부와의 상호작용 최소화재사용성 - 한 번 정의한 모듈을 다른 코드에서 가져다 사용 가능분리와 조직화 - 코드 기능 논리적으로 분리 가능 복잡한 프로그램 -> 작고 관리하기 쉬운 조각으로 나누어 개발🍴 ES(ECMAScript) module(표준) vs CommonJS module1. server.mjs (ES 모듈)import liveServer from "live-server";const params = { host: "local.. 공감수 0 댓글수 0 2024. 7. 27.
[멋쟁이 사자처럼 프론트엔드 스쿨] 바닐라 프로젝트 7일차 🍰 오늘은 대망의 중간 점검 받는 날. 진짜 얼마나 긴장했던지. 근데 생각보다 20분이 너무 짧아서 후루룩 지나갔다. 거의 선생님께서 랩을 하고 가신 수준. 약간 방금 뭐가 지나갔지...?싶은 정도였다. 정리해보면 아이콘 사용 시 sprite 이미지 사용해 보기정적 자산, 동적 자산 어떻게 분류해서 관리할 지 정하기이미지 포맷을 webp로 사용하기 (혹은 lazy loading)명도대비도 고려하기 공감수 0 댓글수 0 2024. 7. 11.
[멋쟁이 사자처럼 프론트엔드 스쿨] 43일차 TIL - Vite, 개발자 서버/클라이언트 서버, 정적/동적 자산 관리, DocumentFragment 🍰 오늘은 새로운 진도. 이제 JS 진도가 수요일에 끝난다. 🍴 Vite: 빠르고 효율적인 프론트엔드 개발을 위한 혁신적인 도구빠른 서버 시작HMRHMR: Hot Module Replacement개발자가 코드를 변경할 때마다 전체 페이지를 새로 고쳐야 하는 번거로움 없이 실시간으로 코드 변경 사항 반영하는 기능수정된 코드만 다시 로드하여 애플리케이션을 업데이트하기 때문에 개발 속도 크게 향상시킴개발자 서버 vs 클라이언트 서버개발자 서버 - 웹 개발자가 로컬 환경에서 웹 애플리케이션을 개발하고 테스트하는 데 사용하는 서버클라이언트 서버 - 실제 웹 애플리케이션을 사용하는 사용자에게 서비스를 제공하는 서버https://ko.vitejs.dev/guide/ ViteVite, 차세대 프런트엔드 개발 툴ko.. 공감수 0 댓글수 0 2024. 7. 1.
Throttle & Debounce 🍰 둘 다 JavaScript에서 성능 최적화를 위해 특정 이벤트의 호출 빈도를 제어하는 데 사용됨.🍴 Throttle: 이벤트가 연속해서 발생 시, 일정 시간 간격으로 이벤트를 처리함.이벤트가 자주 발생해도 일정 시간마다 한 번씩만 처리됨. let waiting = false; function throttle(callback, limit = 200) { if (!waiting) { // waiting이 false일 때만 실행 callback(); waiting = true; setTimeout(() => { // limit초 뒤에 waiting을 false로 변경하는 타이머 waiting = false; }, limit); }}타이머가 돌고.. 공감수 0 댓글수 0 2024. 6. 30.
ARIA 상태와 속성 🍰 WAI-ARIA 속성들 정리ARIA 속성 유형Widget 속성 - 웹 페이지의 상호 작용 요소를 식별하고 기능을 정의Live region 속성 - 웹 페이지의 내용이 동적으로 업데이트되는 영역을 식별하고 스크린 리더에 알림Drag-and-Drop 속성 - 웹 페이지에서 드래그 앤 드롭 기능을 구현하고 접근성을 향상시킴Relationship 속성 - 웹 페이지의 요소들 간의 관계를 정의하고 의미를 명확하게 전달함aria-haspopup - 해당 요소와 연결된 팝업 창이나 메뉴가 있는지 여부 나타냄true - 요소에 연결된 팝업이 있음false - 요소에 연결된 팝업이 없음(기본값)aria-controls - 현재 요소가 제어하는 요소(들)을 식별함ex. 탭 패널을 제어하는 탭과 같이 다른 요소를 제어.. 공감수 0 댓글수 0 2024. 6. 30.
[멋쟁이 사자처럼 프론트엔드 스쿨] 42일차 TIL - localStorage, sessionStorage 🍰 수업 때도 겨우겨우 따라가는 정도이다 보니, 나중에 복습할 때는... 백지에서부터 다시 시작하는 기분... 오늘은 실습 잔뜩과 localStorage 진도를 나갔다. 음... 다음 주 프로젝트 인 게 말이 되나?🍴 웹 스토리지 객체: 클라이언트 측에서 데이터를 저장하고 관리하기 위해 사용되는 HTML5 API쿠키와 유사한 역할, but 더 많은 데이터 저장 가능쿠키와 달라 HTTP 요청 헤더에 포함되지 않아 보안성이 높음localStorage사용자가 브라우저를 닫을 때까지 데이터 유지sessionStorage사용자가 브라우저 세션을 종료할 때까지 데이터 유지사용자가 브라우저를 닫고 다시 열면 세션 스토리지에 저장된 데이터는 삭제됨웹 스토리지 객체 사용 방법 setItem() 메서드: 데이터를 저장.. 공감수 0 댓글수 0 2024. 6. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.