티스토리

미새문지

검색하기

블로그 홈

미새문지

moonmisae-cdpt.tistory.com/m

프론트엔드 야무지게 달리기

구독자: 3

방명록 방문하기

주요 글 목록

vercel 배포 next의 배포엔 vercel을 많이 사용한다고 해서 퍼즐 프로젝트를 vercel로 배포했다.https://misaepuzzle.vercel.app/ Puzzle Game misaepuzzle.vercel.app 완성된 프로젝트는 아니고 간단하게 퍼즐을 맞추고 랭킹에 자동 등록할 수 있게만 해놨기 때문에 테스트만 마치고 계속 기능들을 추가해야한다.vercel에 배포하려면 몇 가지 할 일이 있는데, .env파일 같은 키값이나 url값 등이 있다면 배포 시에 적용되지 않기 때문에 vercel에 등록해야 한다. vercel 회원가입해서 깃허브 계정과 연동해주면 프로젝트 레포지토리나 올가니제이션을 선택할 수 있다. 등록하면 연결한 레포지토리가 보우측에 있는 점 세개 클릭하고 설정 들어가서 Environmen.. 공감수 1 댓글수 0 2025. 2. 27.
supabase 연결, 랭킹 페이지 구현 무료로 사용하기 좋은 supabase를 퍼즐 프로젝트에 연결했다. supabase를 사용한 이유supabase는 어느 회사에서 면접 보는 중에 면접관님이 알려주셨다. 협업도 중요한데 개인의 기량을 위해 개인 프로젝트 하는 것도 괜찮을 것 같다며, 무료에다 sql기반으로 혼자서 풀스택처럼 할 수 있다고 사용을 추천해주셨다.supabase는 firebase의 대체제로 firebase와 다르게 PostgreSQL 기반의 서비스를 제공하기 때문에 데이터베이스나 파일 저장 등의 기능들이 가능하다고 한다. Supabase의 주요 기능PostgreSQL 데이터베이스강력한 SQL 데이터베이스(JSON, 관계형 데이터, 실시간 변경 감지 지원)를 제공하며, Firebase와 다르게 완전한 SQL을 지원한다.리얼타임 데이.. 공감수 1 댓글수 0 2025. 2. 25.
퍼즐 만들기 메인 페이지 추가 설치한 tailwind를 사용하여 스타일 구성을 변경하고, 기존의 게임 페이지는 /game 경로로 이동시켰다.프로젝트가 실행될 때 메인 페이지에는 닉네임, 퍼즐 개수, 퍼즐 선택 입력을 추가하고 게임 시작 버튼 클릭 시 /game 페이지로 이동하도록 구현했다.현재 퍼즐 이미지는 3개를 넣어놨는데, 화질과 가독성이 떨어지는 부분이 있어 나중에 깔끔한 퍼즐로 변경할 예정이다. 내용을 입력하고 게임시작을 누르면 alert창이 뜨며 확인 버튼을 누르면 game 페이지로 이동한다. 이동 시 입력한 닉네임을 확인할 수 있으며, 이동 횟수와 시간, 물음표가 보인다. const handleDrop = (event: React.DragEvent) => { event.preventDefault(); if (d.. 공감수 0 댓글수 0 2025. 2. 19.
next.js에서 tailwind 에러 기존에 학습중이던 넥스트 프로젝트인 퍼즐 맞추기를 하고 있었는데, 퍼블리싱에 작업하는 시간을 줄이기 위해 tailwind를 사용해보려고 했다. https://tailwindcss.com/docs/installation/framework-guides/nextjs Install Tailwind CSS with Next.jsSetting up Tailwind CSS in a Next.js project.tailwindcss.com공식문서에 따라 설치를 진행했다.npm install tailwindcss @tailwindcss/postcss postcsstailwind에 있는 postcss를 함께 설치한다. const config = { plugins: { "@tailwindcss/postcss": {}.. 공감수 1 댓글수 0 2025. 2. 18.
퍼즐 만들기 그저께 정보처리기사 필기를 보고왔다. 이제는 아예 컴퓨터로 체크하고 답안 제출을 하다보니 시험지도 없어 문제 추출도 못 하는 것 같더라.다 풀고 점수 확인하니 72점 안정권으로 들어왔다. 합격자 발표는 3월 12일인가 했는데 아마 크게 변동은 없을거라 붙었다 생각하고 실기도 천천히 준비하려고 한다. 퍼즐const PUZZLE_ROWS = 5;const PUZZLE_COLS = 5;퍼즐의 열과 행 개수를 5개로 초기화했다. 처음엔 10개씩 해서 100개의 퍼즐로 해볼까했는데 이미지가 어려우면 못 풀겠더라. 그래서 무난하게 5x5로 했다.퍼즐에 사용할 이미지는 어디서 가져온지 모르는 흑정령 그림. 쓸만한 이미지를 찾던 중에 사진 폴더에 있길래 가져왔다. 지피티한테 물어본 결과 퍼즐을 만드는 방식은 css를 .. 공감수 2 댓글수 0 2025. 2. 13.
Promise.all() Promise.all()여러 개의 프로미스를 동시에 실행하고, 모든 프로미스가 완료될 때까지 기다리는 자바스크립트의 내장 메소드주어진 프로미스 배열의 모든 프로미스가 성공적으로 이행되면 모든 결과를 배열로 반환하지만, 하나라도 거부되면 즉시 실패하며, 첫 번째 거부된 프로미스의 이유를 반환한다. 문법Promise.all([promise1, promise2, promise3, ...]) .then(results => { console.log(results); // 모든 프로미스의 결과가 배열로 반환 }) .catch(error => { console.error(error); // 하나라도 실패하면 첫 번째 오류를 반환 }); 동작 방식입력: Promise.all()은 배열이나 이터러블 형.. 공감수 1 댓글수 0 2025. 2. 12.
정처기 공부 자료 사전 표기법= : 자료의 정의+ : 자료의 연결() : 자료의 생략[] : 자료의 선택{} : 자료의 반복** : 자료의 설명(주석)테스트 유형블랙박스동치(동등) 분할 검사(Equivalence Partitioning Testing)경계값 분석(Boundary Value Analysis)원인-효과 그래프 검사(Cause-Effect Graphing Testing)오류 예측 검사(Error Guessing)비교 검사(Comparison Testing)화이트박스기초 경로 검사제어 구조 검사조건 검사(Condition Testing)루프 검사(Loop Testing)데이터 흐름 검사(Data Flow Testing)인터페이스 구현 검증 도구 xUnit, STAF, FitNesse, NTAF, Seleni.. 공감수 1 댓글수 0 2025. 2. 8.
정처기 공부 정규화 과정1NF : 모든 도메인이 원자 값으로만 구성2NF : 기본키가 아닌 속성이 기본키에 대한 완전 함수적 종속을 만족, 부분적 함수 종속을 제거한 정규형3NF : 기본키가 아닌 모든 속성이 기본키에 대해 이행적 함수 종속 관계를 만족하지 않는 정규형BCNF : 모든 결정자가 후보키인 정규형, 종속성 보존X4NF : 다치 종속이 성립하는 경우, R의 모든 속성이 A에 함수적 종속 관계를 만족5NF : 모든 조인 종속이 R의 후보키를 통해서만 성립되는 정규형도부이결다조시스템 카탈로그시스템 카탈로그는 DBMS가 스스로 생성하고 유지하며, 시스템 자신이 필요로 하는 스키마 및 여러가지 객체에 관한 정보를 포함하고 있는 시스템 데이터베이스이다.또한, 시스템 카탈로그에 저장되는 내용을 메타데이터라고도 한다... 공감수 0 댓글수 0 2025. 2. 3.
디바운스(Debounce), 쓰로틀(Throttle) 디바운스 (Debounce)디바운스는 연속해서 발생하는 이벤트 중 마지막 이벤트가 발생한 후 일정 시간이 지나면 실행되도록 하는 방식이며, 이벤트가 계속 발생하는 동안에는 실행되지 않다가, 사용자가 입력을 멈추거나 일정 시간이 지나야 실행된다.사용 예시검색창 자동완성: 사용자가 입력할 때마다 서버에 요청을 보내는 것이 아니라, 입력이 끝난 후 일정 시간이 지나면 요청을 보낸다.윈도우 리사이즈 이벤트: 창 크기를 조절할 때마다 발생하는 이벤트를 연속적으로 처리하는 대신, 최종 크기가 결정된 후 일정 시간이 지나야 실행된다.예제 코드function debounce(func: Function, delay: number) { let timer: NodeJS.Timeout; return function (.... 공감수 0 댓글수 0 2025. 1. 31.
이벤트 전파(event propagation), 웹 성능 최적화 방법 이벤트 전파(event propagation)이벤트 전파는 DOM에서 발생한 이벤트가 어떻게 전달되는지를 설명하는 중요한 개념이며, 이 과정은 캡처링, 타겟, 버블링으로 크게 세 단계로 나눠진다.캡처링(Capturing) 단계이벤트가 DOM 트리에서 최상위 요소인 document에서 시작해, 실제 이벤트가 발생한 요소인 타겟으로 내려가는 단계이며, 이 단계에서는 상위 요소에 등록된 이벤트 리스너들이 순차적으로 실행된다.타겟(Target) 단계이벤트가 실제로 발생한 타겟 요소에 도달하는 단계이며, 이 때 해당 타겟 요소에 등록된 이벤트 리스너가 실행된다.버블링(Bubbling) 단계이벤트가 타겟 요소에서 발생한 후, 다시 DOM 트리의 상위 요소들로 올라가며 전파되는 단계이며, 이 과정에서 상위 요소들에 .. 공감수 3 댓글수 0 2025. 1. 31.
CommonJS와 ES Module의 차이점 CommonJS와 ES Module(ESM)은 자바스크립트에서 모듈을 관리하고 불러오는 두 가지 주요 방식이며, 사용 환경과 특징에서 차이가 있다.CommonJS도입 배경: Node.js에서 모듈을 관리하기 위해 도입된 모듈 시스템특징:동기적 로딩: 모듈을 require로 가져올 때, 해당 모듈이 완전히 로드될 때까지 코드 실행이 멈춘다.문법:가져오기: const module = require('module');내보내기: module.exports = value; 또는 exports.property = value;사용 환경: 주로 Node.js 환경에서 사용되며, 브라우저에서는 번들러(예: Webpack, Browserify)를 통해 사용할 수 있다.모든 코드가 런타임 시점에 평가되기 때문에 동적 로딩이.. 공감수 1 댓글수 0 2025. 1. 29.
async와 defer의 차이점 태그에서 async와 defer는 스크립트를 비동기적으로 로드한다는 공통점이 있지만, 실행 시점과 순서에서 큰 차이가 있다.async 속성특징비동기 다운로드: HTML 파싱과 동시에 스크립트를 다운로드한다.즉시 실행: 다운로드가 완료되면 바로 스크립트를 실행하며, 이 시점에 HTML 파싱은 잠시 중단된다.실행 순서가 불규칙: 여러 async 스크립트가 있을 경우, 다운로드가 완료된 순서대로 실행된다.적합한 경우다른 스크립트나 HTML 구조와 독립적으로 실행되는 코드에 적합하다.예: Google Analytics, 광고 스크립트 등 페이지와 상호작용하지 않는 외부 도구 defer 속성특징비동기 다운로드: HTML 파싱과 동시에 스크립트를 다운로드한다.HTML 파싱 이후 실행: HTML 문서 파싱이 끝난 후.. 공감수 3 댓글수 0 2025. 1. 28.
정처기 오답 풀이 교착상태가 발생할 수 있는 조건이 아닌 것은? 1. Mutual exclusion2. Hold and wait3. Non-preemption4. Linear wait더보기답: 4 해설:교착상태 발생의 조건상호 배제 (mutual exclusion)점유와 대기 (hold and wait)비선점 (Non-preemption)환형 대기 (Circular wait)리눅스 Bash 쉘(Shell)에서 export와 관련한 설명으로 틀린 것은?1. 변수를 출력하고자 할 때는 export를 사용해야 한다.2. export가 매개변수 없이 쓰일 경우 현재 설정된 환경변수들이 출력된다.3. 사용자가 생성하는 변수는 export 명령어 표시하지 않는 한 현재 쉘에 국한된다.4. 변수를 export 시키면 전역(Global.. 공감수 1 댓글수 0 2025. 1. 27.
Render phase와 Commit phase Render phase와 Commit phaseReact의 렌더링 과정은 Render phase와 Commit phase로 크게 두 가지 단계로 나눌 수 있다.각각의 단계는 UI 업데이트 과정에서 서로 다른 역할을 수행하며, 이를 통해 효율적이고 일관된 사용자 경험을 제공한다.Render PhaseRender phase는 React가 변화된 상태(state)나 속성(props)에 따라 어떤 UI를 변경해야 할지를 결정하는 단계이며, 이 과정에선 실제 DOM을 업데이트하진 않지만, 변경 사항을 가상 DOM(Virtual DOM)에서 계산하고 비교한다.중단 가능성: Render phase는 성능에 영향을 주지 않도록 필요에 따라 중단되거나 다시 실행될 수 있다.비동기 처리: React 18에서 도입된 Con.. 공감수 0 댓글수 0 2025. 1. 22.
정처기 공부 IEEE 802의 표준 규약 IEEE 802.3 : CSMA/CDIEEE 802.4 : Token BUSIEEE 802.5 : Token RINGIEEE 802.8 : Fiber optic LANSIEEE 802.9 : 음성/데이터 통합 LANIEEE 802.11 : 무선 LAN(CSMA/CA)HRN 방식의 우선순위 산정 공식 (대기시간+서비스시간) / 서비스 시간 >> (값이 클 수록 우선순위가 높다.)IP 주소 ClassA class에 속하는 ip 주소 범위: 0.0.0.0 ~ 127.255.255.255B class에 속하는 ip 주소 범위: 128.0.0.0 ~ 191.255.255.255C class에 속하는 ip 주소 범위: 192.0.0.0 ~ 223.255.255.255D class i.. 공감수 0 댓글수 0 2025. 1. 21.
정처기 공부 시스템 구성요소입력 (Input): 처리 방법, 처리할 데이터, 조건을 시스템에 투입하는 것처리 (Process): 입력된 데이터를 처리 방법과 조건에 따라 처리하는 것출력 (Output): 처리된 결과를 시스템에서 산출하는 것제어 (Control): 자료를 입력하여 출력될 때까지의 처리 과정이 올바르게 진행되는지 감독하는 것피드백 (Feedback): 출력된 결과가 예정된 목표를 만족시키지 못할 경우 목표 달성을 위해 반복 처리하는 것코드 방식연상 코드: 항목의 명칭이나 약호와 관계 있는 숫자, 문자, 기호를 이용하여 코드를 부여하는 방법블록 코드: 대상 항목에서 공통적인 것을 블록으로 구분하고 블록 내에 일련 번호를 부여하는 방법순차 코드: 일정 기준에 따라 최초의 자료부터 순차적으로 일련번호를 부여.. 공감수 1 댓글수 0 2025. 1. 21.
Strict Mode StrictMode StrictMode는 React 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하는 데 도움을 주는 개발도구이며, 프로덕션 빌드에서는 아무 영향을 미치지 않고, 오직 개발 환경에서만 작동한다.비권장 API 및 오래된 라이프사이클 메서드 감지React의 최신 버전에서는 더 이상 사용되지 않거나 비권장 상태인 API를 감지할 수 있다.예: componentWillMount, componentWillReceiveProps, componentWillUpdate와 같은 오래된 라이프사이클 메소드이러한 메소드가 포함된 코드는 콘솔 경고를 통해 개발자에게 알림을 주고, 최신 React API로 전환하도록 유도한다. 의도치 않은 부수효과 감지React는 컴포넌트가 예측 가능한 방식으.. 공감수 1 댓글수 1 2025. 1. 20.
www.google.com를 입력하면 발생하는 일 www.google.com을 입력하면 발생하는 일웹 브라우저 주소창에 "www.google.com"을 입력하면, 브라우저는 사용자가 요청한 웹 페이지를 화면에 표시하기 위해 여러 단계를 거친다.1. DNS 조회사용자가 입력한 도메인 이름(예: www.google.com)은 사람이 읽기 쉬운 형태로, 실제 서버와 통신하려면 해당 도메인의 IP 주소가 필요하다.브라우저는 먼저 캐시를 확인하여 IP 주소가 있는지 찾고, 만약 캐시에 없으면 로컬 DNS 서버를 통해 IP 주소를 조회한다.결과적으로 www.google.com에 해당하는 IP 주소를 얻는다.(예: 142.250.190.78)2. TCP 연결 수립IP 주소가 확인되면 브라우저는 해당 서버와 데이터를 주고받기 위해 TCP 연결을 설정하며, TCP 연결.. 공감수 1 댓글수 0 2025. 1. 18.
브라우저 렌더링 파이프라인 브라우저 렌더링 파이프라인브라우저 렌더링 파이프라인은 브라우저가 HTML, CSS, JavaScript 파일을 처리하여 웹 페이지를 화면에 표시하는 과정을 말하며, 6단계로 나뉜다.1. DOM 생성 (Document Object Model)브라우저는 HTML 파일을 바이트 단위로 수신하여 이를 문자로 변환하는데, 문자를 HTML 토큰으로 파싱하고, 이 토큰을 기반으로 DOM 트리를 생성한다.DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 태그는 노드로, 태그 간의 계층 구조는 부모-자식 관계로 나타난다.2. CSSOM 생성 (CSS Object Model)브라우저는 CSS 파일도 바이트로 수신하여 문자로 변환한 뒤, 이를 CSS 규칙으로 파싱한다.CSS 규칙은 선택자와 선언으로 구성되며.. 공감수 2 댓글수 0 2025. 1. 17.
리액트 성능 최적화 방법 리액트에서 성능 최적화를 위해 적용할 수 있는 방법 컴포넌트 렌더링 최적화React.memo를 사용한 컴포넌트 메모이제이션React.memo는 함수형 컴포넌트를 메모이제이션하여 불필요한 렌더링을 방지한다.사용 예시:const MyComponent = React.memo((props) => { return {props.value};});렌더링 비용이 큰 컴포넌트나, 부모 컴포넌트의 재렌더링이 자식 컴포넌트의 렌더링을 불필요하게 유발할 때 사용된다.useCallback으로 함수 메모이제이션useCallback은 동일한 함수를 재사용하여 자식 컴포넌트가 불필요하게 렌더링되지 않도록 한다.사용 예시:const handleClick = useCallback(() => { console.log('Button c.. 공감수 1 댓글수 0 2025. 1. 15.
Controlled Component와 Uncontrolled Component Controlled Component와 Uncontrolled ComponentControlled Component입력값이 State를 통해 제어되는 컴포넌트이다.입력 요소의 value는 리액트 상태와 동기화되며, 사용자가 입력을 변경할 때마다 onChange 이벤트 핸들러가 호출되어 상태를 업데이트한다.장점:리액트 상태로 관리되므로 입력값을 실시간으로 검증하거나 수정하기 쉽다.여러 입력 필드 간의 복잡한 의존 관계나 동적인 폼 로직 처리에 적합하다.import React, { useState } from 'react';const ControlledInput = () => { const [value, setValue] = useState(""); const handleChange = (e) => { .. 공감수 0 댓글수 0 2025. 1. 14.
Props와 State Props와 StateProps (Properties)Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터이며, 자식 컴포넌트는 props를 수정할 수 없다.특징읽기 전용: props는 자식 컴포넌트 내에서 변경이 불가능하다.단방향 데이터 흐름: 데이터는 부모에서 자식으로만 전달된다.컴포넌트 재사용성 증가: 부모에서 props를 다르게 전달하면 컴포넌트를 다양한 방식으로 재사용할 수 있다.예시: App은 Greeting 컴포넌트에 name이라는 props를 전달한다.function Greeting(props) { return Hello, {props.name}!;}function App() { return ;} StateState는 컴포넌트 내부에서 관리되는 동적인 데이터이며, 값을 변경 시.. 공감수 0 댓글수 0 2025. 1. 13.
정처기 오답 풀이 - 1 1과목 : 소프트웨어 설계1. 정형 기술 검토(FTR)의 지침으로 틀린 것은?의제를 제한한다.논쟁과 반박을 제한한다.문제 영역을 명확히 표현한다.참가자의 수를 제한하지 않는다.더보기답: 4 해설:FTR은 다수의 검토자가 참여하는 공식적인 검토 방법으로, 참가자의 수를 제한해 검토의 효율성과 효과를 높이는 게 중요하다. FTR(Formal Technical Review)소프트웨어 개발 산출물 대상 요구사항 확인 및 검증을 수행하는 방법이며, 동료검토, 워크스루, 인스펙션 등이 있다. FTR 지침 사항제품 검토에만 집중하라의제를 제한하여 진행하라논쟁과 반박을 제한하라문제영역을 정확히 표현하라해결책이나 개선책에 대해서는 논하지 말라참가자수를 제한하고 사전준비를 강요하라자원과 시간 일정을 할당하라모든 검토자들을.. 공감수 2 댓글수 0 2025. 1. 12.
이벤트 루프 (Event Loop) 이벤트 루프 (Event Loop)이벤트 루프는 자바스크립트의 실행 모델에서 비동기 작업을 효율적으로 처리하기 위한 핵심 메커니즘이며, 자바스크립트는 싱글 스레드 기반 언어로 한 번에 하나의 작업만 실행할 수 있지만, 이벤트 루프 덕분에 비동기 작업을 효과적으로 관리하고, UI를 렌더링하면서도 중단 없이 프로그램을 실행할 수 있다. 구성 요소콜 스택 (Call Stack)함수 호출이 쌓이고, 실행이 끝나면 제거되는 LIFO(Last In, First Out) 구조현재 실행 중인 작업이 위치하며, 동기 코드는 콜 스택에 쌓였다가 순서대로 실행된다.태스크 큐 (Task Queue)비동기 작업의 콜백 함수가 대기하는 곳태스크 큐에는 매크로태스크와 마이크로태스크라는 두 가지 종류가 있으며, 이벤트 루프는 태스크.. 공감수 0 댓글수 0 2025. 1. 10.
Tanstack-query Tanstack-queryTanStack Query는 React Query라고 불렸으며, 리액트를 포함한 다양한 자바스크립트 프레임워크에서 사용 가능한 데이터 fetching, 캐싱, 동기화, 업데이트를 효율적으로 처리하기 위한 라이브러리이다.서버 상태 관리에 특화되어 있으며, 클라이언트와 서버 간의 데이터를 간편하게 동기화하도록 돕는다.주요 기능데이터 Fetching 및 Caching데이터를 가져오고(fetch) 이를 캐싱하여 동일한 요청을 반복하지 않아도 된다.동일한 데이터를 사용하는 여러 컴포넌트가 있을 때, 이를 자동으로 공유한다.자동 재요청(Refetching)데이터가 오래되거나(stale) 네트워크 상태가 변경되었을 때 자동으로 데이터를 다시 가져온다.서버 상태 동기화클라이언트와 서버의 데이터.. 공감수 1 댓글수 0 2025. 1. 9.
실행 컨텍스트(Execution Context) 실행 컨텍스트(Execution Context)실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 정의하는 개념으로, 스크립트나 함수 실행 시 관련 변수, 객체, 함수 등의 정보를 담고 있는 구조이다.자바스크립트의 스코프, 호이스팅, 클로저 등을 이해하는 핵심 개념이기 때문에 중요하다.실행 컨텍스트의 구성 요소변수 객체(Variable Environment)실행 컨텍스트 내에서 선언된 변수, 함수 선언, this 값을 저장하는 공간이며, 변수 선언 및 함수 선언을 위한 호이스팅이 이 단계에서 처리된다.초기화 시점에는 함수 선언만 포함되며, 변수는 undefined로 초기화된다.스코프 체인(Scope Chain)현재 컨텍스트와 부모 컨텍스트를 참조할 수 있는 링크 체인이며, 변수를 검색할 때 가장 먼저 현.. 공감수 1 댓글수 0 2025. 1. 8.
Reflow와 Repaint Reflow와 Repaint는 웹 페이지가 렌더링 되는 과정에서 발생하는 중요한 작업들이며, 웹 성능과 사용자 경험에 큰 영향을 미친다.Reflow (Layout)Reflow는 웹 페이지의 레이아웃을 다시 계산하는 과정이며, DOM 구조나 CSS의 스타일이 변경되면 브라우저가 렌더 트리를 생성한 후, 각 요소의 크기와 위치를 계산해야 하는데 그 과정에서 발생한다.발생 상황DOM 요소가 추가, 제거, 혹은 수정될 때요소의 크기나 위치가 변할 때 (예: width, height, margin, padding, border 등)브라우저 창 크기가 변경될 때 (viewport 변경)글꼴이 로드되거나 변경될 때CSS 속성이 변경되어 레이아웃에 영향을 줄 때Reflow의 비용Reflow는 계산량이 많으며, 비용이 .. 공감수 1 댓글수 0 2025. 1. 8.
클로저(Closure) 클로저(Closure)클로저는 자바스크립트에서 함수가 선언될 때의 스코프를 기억하여, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능이다.주로, 함수 내부에서 선언된 다른 함수가 외부 함수의 변수에 접근할 수 있게 해주는 메커니즘을 의미하며, 클로저는 자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프의 조합으로 만들어진다. 클로저의 형성 과정함수 내부의 함수클로저는 일반적으로 함수 내부에 선언된 함수가 반환되거나 다른 곳에서 호출될 때 형성된다.외부 변수 접근내부 함수는 자신이 선언된 스코프에 있는 변수들에 접근할 수 있다.생존 기간 연장외부 함수가 실행을 종료하더라도, 내부 함수가 외부 함수의 변수들을 참조하고 있다면, 해당 변수들은 메모리에서 지워지지 않고 유지된다. 예시 코드func.. 공감수 0 댓글수 0 2025. 1. 7.
SOLID 원칙 SOLIDSOLID는 객체지향 프로그래밍(OOP)에서 유지보수성과 확장성을 높이기 위한 5가지 설계 원칙을 의미하며, 이 원칙들은 모듈화가 잘 되어 있고 재사용 가능성을 높이는 데 도움을 준다.Single Responsibility Principle (SRP) - 단일 책임 원칙정의: 한 클래스는 한 책임만을 가져야 하고, 그 역할과 관련된 변경만 반영해야 한다.목적: 각 클래스가 명확한 역할을 가지도록 설계하여 코드 변경 시 다른 부분에 영향을 최소화예시:// 잘못된 설계class UserManager { createUser() { /* 사용자 생성 */ } validateUser() { /* 사용자 검증 */ } sendEmail() { /* 이메일 전송 */ }}// 개선된 설계: .. 공감수 0 댓글수 0 2025. 1. 6.
Typescript란? Typescript란?Typescript는 마이크로소프트에서 개발한 오픈 소스 프로그래밍 언어로, Javascript의 상위 집합이다.또한, 타입스크립트는 정적 타입을 지원하며, 자바스크립트 코드에 선택적으로 타입을 추가할 수 있게 해주고, 최종적으로 타입스크립트 코드는 자바스크립트로 변환되어 브라우저나 node.js 환경에서 실행된다. 자바스크립트는 대규모 애플리케이션을 개발할 때 동적 타입 언어의 특성상 버그를 찾기 어렵고 코드 유지보수가 힘들어지는 문제가 있었는데, 이를 해결하기 위해 타입스크립트를 개발하게 됐다.자바스크립트의 상위 집합이기 때문에 타입스크립트는 ES6+의 모든 기능을 지원하며, 기존 자바스크립트 라이브러리와도 완벽히 호환된다. 타입스크립트 주요 특징정적 타입변수, 함수 등에 타입을.. 공감수 1 댓글수 0 2025. 1. 3.

문의안내

티스토리
로그인
고객센터

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