둥지

1) 네이티브 앱특정 플랫폼 (ios, android)를 위해 최적화되어 개발된 애플리케이션플랫폼의 네이티브 프로그래밍 언어(swift, objective-c, kotline, java 등)로 개발장점:1. 성능: 최적화된 코드로 인해 빠른 성능을 제공2. 기능 접근성: 카메라 GPS 등 기기의 하드웨어 기능에 완벽하게 접근 가능단점:1. 개발 비용: 각 플랫폼마다 별도의 앱을 개발해야 하므로 비용과 시간이 많이 소요됨2. 유지 관리: 여러 플랫폼 버전을 유지 관리 해야 함3. 앱 스토어 심사: 각 플랫폼의 앱 스토어 정책에 따라 앱 심사 과정을 거쳐야 하며, 이는 시간이 소요되고 때로는 승인이 거부될 수도 있음 2) 웹 앱웹 기술(예: HTML, CSS, JavaScript)을 사용하여 개발별도의 앱 ..

웹 애플리케이션을 개발할 때, 부드러운 애니메이션을 구현하기 위해 다양한 기술을 사용합니다.그 중 하나가 바로 requestAnimationFrame입니다.이 함수는 브라우저가 다음 리페인트를 수행하기 전에 특정 애니메이션 함수를 호출하도록 예약할 수 있게 해줍니다.requestAnimationFrame은 웹 API로, 브라우저의 리페인트 주기에 맞춰 애니메이션 함수를 실행합니다.이를 통해 개발자는 부드럽고 효율적인 애니메이션을 구현할 수 있습니다.예를 들어, 요소의 위치를 변경하거나 크기를 조절하는 애니메이션을 만들 때 이 함수를 사용하면 화면 주사율에 최적화된 애니메이션을 구현할 수 있습니다. requestAnimationFrame 작동 원리이 함수는 브라우저의 렌더링 주기와 밀접하게 연관되어 있습니..

웹 애플리케이션을 개발할 때, 사용자 경험을 향상시키기 위해 다양한 최적화 기법을 사용합니다.그 중 하나가 바로 requestIdleCallback입니다.이 함수는 브라우저가 대기 상태일 때 특정 작업을 수행하도록 예약할 수 있게 해줍니다.requestIdleCallback은 웹 API로, 브라우저가 대기 상태일 때 호출할 함수를 대기열에 넣습니다.이를 통해 개발자는 애니메이션이나 입력 응답과 같은 중요한 작업이 아닌 부수적인 작업을 효율적으로 처리할 수 있습니다.예를 들어, 페이지 로딩 후 사용자에게 보이지 않는 데이터 로딩이나 DOM 업데이트 등을 이 시점에 수행함으로써 사용자 경험을 저해하지 않도록 할 수 있습니다. requestIdleCallback 작동 원리이 함수는 브라우저의 이벤트 루프와 밀..

두 훅은 둘다 상태 관리를 위해 사용되는 훅이라는 점에서 같은 목적으로 사용됩니다. 두 훅은 각각의 특징이 있는데 아래와 같습니다.useState간단한 상태 관리를 위해 사용됨.useReducer복잡한 상태 로직을 관리하기 위해 사용됨.상태 업데이트 로직을 리듀서 함수로 분리하여 관리함.주로 여러 상태를 포함하거나 상태 변경 로직이 복잡한 경우에 사용. 간단한 토글 상태 혹은 간단한 구조의 데이터를 다루는 경우 useState를 사용하는 것이 좋습니다.하지만 특정 액션에 따라 복잡한 상태 로직 관리가 필요한 경우 예를들어 무한 스크롤에서 아이템요소들이 추가될때 아이템 요소들에 대한 갯수 및 페이지, 오프셋 등을 관리하고자 할때 useReducer가 더 적합할 수 있습니다.

리액트에서 컴포넌트는 생명 주기를 갖습니다.생명 주기란 컴포넌트가 생성되고 사용되고, 소멸되는 과정을 뜻합니다. 함수 컴포넌트에서 생명 주기는 크게 3가지 단계로 구분할 수 있습니다.렌더 (Render)커밋 (Commit)클린업 (Cleanup)이 세 단계를 각각 설명하자면 다음과 같습니다.렌더함수 컴포넌트가 호출되어 JSX가 반환됨.side effect가 호출되지 않음.커밋실제 DOM에 변화가 적용되는 단계.useEffect가 호출되는 단계.클린업컴포넌트가 언마운트되거나, useEffect가 다시 실행되기 전 정리 작업을 수행하는 단계.useEffect의 cleanup이 호출되는 단계. 이 단계를 간단히 아래의 코드로 살펴볼 수 있습니다.import React from 'react';function C..

1. Props란?Props란 컴포넌트 간에 데이터를 전달하기 위해 사용됩니다.부모 컴포넌트에서 자식 컴포넌트로 단방향으로 데이터를 전달할 때 사용되며, 자식 컴포넌트는 전달 받은 `props`를 읽기 전용으로 사용하게 됩니다. 2. State란?State란 컴포넌트 내부에서 관리되는 상태를 나타냅니다.상태가 변경되면 컴포넌트는 리렌더링이 일어나게 됩니다.컴포넌트 외부에서는 직접 접근할 수 없습니다. 3. 그렇다면 Props와 State의 차이점은 무엇이 있을까?데이터의 소유와 제어Props: 부모 컴포넌트가 소유하고 제어함.State: 해당 컴포넌트 내부에서 소유하고 제어함.변경 가능성Props: 읽기 전용.State: 컴포넌트 내에서 업데이트 가능.데이터 흐름Props: 부모에서 자식으로 단방향.St..

Electron에 바벨을 셋팅하려는데 최신 정보가 잘 없어 정리하게 되었습니다. 먼저 일렉트론에 바벨을 셋팅하려면 노드가 설치되어 있어야합니다. 노드는 이미 설치되어 있다고 가정하고 넘어가겠습니다. 먼저 프로젝트를 먼저 생성해야겠죠? 아래의 명령어를 입력합니다. npm init -y 다음으로 일렉트론을 설치합니다. 다음의 명령어를 콘솔에 입력합니다. npm i -D electron 다음으로 바벨설정하기 위해 필요한 라이브러리들을 설치합니다. npm i -D @babel/cli @babel/core @babel/preset-env @babel/register 그리고 .babelrc 파일을 만들어 아래의 내용을 입력합니다. { "presets": ["@babel/preset-env"] } 이번엔 일렉트론을 ..

이번 파트는 자바스크립트의 참조와 복사에 대해서 공부하는 파트입니다. 1. const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; const team = players; console.log(players, team); team[3] = 'Lux'; console.log(players, team); 결과는 players와 team이 같이 바뀐다 이것은 얕은 복사라서 그렇습니다. 2. const team2 = players.slice(); const team3 = [].concat(players); // 아래 두 방법은 ES6부터 사용가능합니다. const team4 = [...players]; const team5 = Array.from(players); 배열은 위의 ..

이번 파트는 많이 쓰이는 스크롤을 내리면 이미지가 날아오는 것을 구현하는 파트입니다. 1. slide-in 클래스를 가진 element들을 변수로 저장. const sliderImages = document.querySelectorAll('.slide-in'); 2. 이미지 슬라이드 체크 함수 구현. function checkSlide() { sliderImages.forEach(sliderImage => { // 이미지의 절반 계산 const slideIntAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; // 이미지의 하단 계산 const imageBottom = sliderImage.offsetTop + sliderImage...

이번에는 비밀키를 설정해두고 비밀키를 입력할경우 유니콘이 뜨게하는 파트입니다. 그럼 시작해보겠습니다. 1. 먼저 비밀키를 설정합니다. const secretCode = 'wow'; 2. 키업 함수를 만듭니다. function handleKeyup(e) { pressed.push(e.key); pressed.splice(0, pressed.length - secretCode.length); // splice는 slice와 다르게 if (pressed.join('').includes(secretCode)) { cornify_add(); } } 3. 만든 함수를 이벤트로 등록합니다. window.addEventListener('keyup', handleKeyup); cornify_add 함수는 cornify...