<김고양이 />

1. 컨텍스트(Context)주요 목적: 전역 상태 공유 (ex. 다크 모드, 언어 설정, 인증 상태 등)사용 방식: React.createContext() + useContext()특징:컴포넌트 트리 전체에서 데이터를 쉽게 공유 가능Provider를 통해 특정 트리 내에서만 상태 제공 가능기본적으로 useState와 함께 사용됨상태 업데이트 시 Provider 하위의 모든 컴포넌트가 리렌더링됨 → 성능 저하 가능성적절한 사용 사례:글로벌 UI 상태 (테마, 언어, 인증)별도의 복잡한 로직 없이 단순한 상태 공유2. 스토어(Store) - Zustand, React Query주요 목적: 복잡한 상태 관리 및 데이터 캐싱사용 방식: zustand, react-query 등 라이브러리를 활용특징:zustan..

1. parseInt()문자열을 정수로 변환.첫 번째 숫자를 찾으면 변환을 멈추고, 숫자가 아닌 문자가 나오면 무시.두 번째 인자로 radix(진수)를 지정할 수 있음. (기본값: 10진수)console.log(parseInt("123px")); // 123console.log(parseInt("12.34")); // 12 (소수점 이하 버려짐)console.log(parseInt("007")); // 7console.log(parseInt("0xF", 16)); // 15 (16진수)console.log(parseInt("abc")); // NaN (숫자로 변환 불가) 2. Number()정수와 소수를 모두 변환 가능.공백이 있으면 자동으로 제거.숫자가 아닌 문자가 포함되면 NaN 반환...

동기(synchronous) 프로그래밍과 비동기(asynchronous) 프로그래밍의 주요 차이점은 작업이 처리되는 순서와 방식입니다.동기 프로그래밍순차적 실행: 동기 프로그래밍에서는 하나의 작업이 완료될 때까지 다음 작업이 시작되지 않습니다. 즉, 모든 작업이 순차적으로 실행됩니다.블로킹: 동기 작업은 이전 작업이 완료될 때까지 기다리기 때문에, 어떤 작업이 오래 걸리면 그 동안 다른 작업이 진행되지 않습니다.예시 (동기 코드):console.log('Start');function fetchDataSync() { // 오랜 시간이 걸리는 작업 for (let i = 0; i 위 코드에서 fetchDataSync 함수가 실행될 때까지 다음 코드가 실행되지 않습니다. 따라서 콘솔 출력은 순차적으로 'S..

IntelliJ IDEA에서 UglifyJS를 사용하여 JavaScript 파일을 자동으로 압축하려고 할 때, PATH 문제로 인해 어려움을 겪는 경우가 있습니다. 여기서는 PATH 문제를 해결하는 과정을 중심으로 설명하겠습니다.   1. 문제 상황 IntelliJ IDEA에서 UglifyJS를 사용하려고 할 때 다음과 같은 오류가 발생했습니다:env: node: No such file or directoryProcess finished with exit code 127 이 오류는 Node.js 실행 파일을 찾지 못해 발생한 것으로, PATH 설정이 제대로 되어 있지 않음을 의미합니다.   2. PATH 문제 해결 Node.js와 npm 경로 확인 먼저 터미널에서 Node.js와 npm이 올바르게 설치되..

1개월차: 기초 다지기 1주차: 플러터 소개 및 기본 설정  • 학습 목표: 플러터와 다트의 기본 개념 이해 • 활동 내용: • 플러터와 다트 언어에 대한 소개 영상 시청 • 개발 환경 설정 (VS Code 또는 Android Studio) • 첫 번째 플러터 앱 생성 및 실행 2주차: 다트 언어 기초  • 학습 목표: 다트 언어 문법 및 기본 구조 이해 • 활동 내용: • 변수, 자료형, 함수, 조건문, 반복문 학습 • 클래스와 객체 지향 프로그래밍 개념 학습 • 다트 문법을 연습할 수 있는 작은 프로그램 작성 3주차: 플러터 기본 위젯  • 학습 목표: 플러터의 기본 위젯 사용법 익히기 • 활동 내용: • 주요 위젯(Container, Text, Row, Column, Stack 등) 학습 • 간단한..

하드코딩 방식 (텍스트 및 스타일 직접 코딩) 장점:  1. SEO 최적화: 검색 엔진이 페이지의 내용을 더 잘 인식할 수 있습니다. 2. 유연성: 텍스트와 스타일을 쉽게 수정하고 업데이트할 수 있습니다. 3. 반응형 디자인: 다양한 화면 크기와 장치에서 적절하게 표시됩니다. 4. 접근성: 스크린 리더와 같은 보조 기술이 텍스트 콘텐츠를 읽을 수 있습니다. 단점:  1. 복잡성: 많은 콘텐츠와 스타일을 관리해야 할 때 코드가 복잡해질 수 있습니다. 2. 시간 소모: 초기 개발 시간이 더 오래 걸릴 수 있습니다. 이미지 기반 방식 (크게 잘라서 페이지 구성) 장점:  1. 간단함: 이미지로 페이지를 구성하면 HTML과 CSS 코딩이 단순해질 수 있습니다. 2. 일관성: 디자인이 정교하게 유지됩니다. 단점:..

https://nomadcoders.co/dart-for-beginners Dart 시작하기 – 노마드 코더 Nomad CodersFlutter 앱 개발을 위한 Dart 배우기nomadcoders.coINTRODUCTION #0.1 Why Dart1. 두 개의 컴파일러 제공 (JIT : for dev, AOT : for run)2. 모두 Google에서 만듦 -> flutter를 위해 dart 수정이 가능 1. AOT 컴파일러네이티브(arm, x86, x64), 웹(js)시스템에 맞게 최적화된 바이너리를 생성하므로 컴파일에 많은 시간이 걸린다.최종 배포시 사용.2. JIT 컴파일러dart VM 사용코드의 결과를 바로 보여준다.가상머신에서 동작중이라 조금 느리지만 많은 디버깅 옵션도 지원.개발중에만 사용하..

클래스101에 있는 플러터 앱 강의를 들어보자 🧐시작일 2024.05.21 Chapter 1앱 개발 환경 준비하기앱 개발 도구 설치IDE 설치 (안드로이드 스튜디오)안드로이드 스튜디오 > 플러그인 설치 (flutter, Dart)안드로이드 스튜디오 > SDK Manager > 안드로이드 SDK 커맨드라인 도구 설치자바 개발 도구 설치(앱 릴리즈 과정에서 필요) homebrew > $brew install openjdk@11멀티 플랫폼 앱 개발을 도와주는 플러터 개발 도구 설치Flutter공식 사이트에서 Flutter SDK 설치 > flutter 폴더를 홈으로 이동컴퓨터 환경설정 변경apple칩을 사용하는 컴퓨터에서 Flutter SDK를 사용하려면 로제타 설치 (intel칩은 패스)SDK 라이센스 동..

신뢰할 수 있는 외국 기업 리스트 1. Deque SystemsDeque Systems는 Axe 도구를 제공하는 회사로, 웹 접근성 평가와 인증 서비스를 제공합니다.절차Deque의 Axe 도구 사용: 웹사이트의 접근성을 자동화 도구인 Axe를 사용하여 사전 평가합니다.전문 평가 의뢰: Deque Systems에 웹 접근성 평가를 의뢰합니다. 전문가가 WCAG 기준에 따라 웹사이트를 평가합니다.수정 및 재평가: 평가 결과에 따라 필요한 수정을 수행하고, 재평가를 요청합니다.인증 획득: 평가 기준을 충족하면 Deque Systems에서 웹 접근성 인증을 발급합니다.웹사이트Deque Systems2. Level AccessLevel Access는 웹 접근성 컨설팅과 평가 서비스를 제공하는 전문 회사입니다.절차..

성능 측정이 필요한 이유지연 속도가 늘어날 수록 사이트 이탈률이 급격히 증가하고, 구매 전환율 역시 감소검색 엔진 최적화에도 영향을 줌  웹 성능 측정 기준치Google의 Web Vitals는 웹 페이지의 사용자 경험을 측정하고 개선하는 데 중요한 핵심 성능 지표(Core Web Vitals)를 제공합니다. Core Web Vitals는 웹 페이지의 성능, 반응성, 시각적 안정성을 평가하는 주요 지표로 구성되어 있습니다. 현재 Google은 세 가지 주요 지표(볼드처리된 것)를 Core Web Vitals로 정의하고 있습니다.1. First Contentful Paint (FCP)설명: 사용자가 처음으로 페이지 콘텐츠(텍스트, 이미지 등)를 볼 수 있는 시점.권장 기준치: 1.8초 이하2. Largest..