alpeca's world alpeca's world

핵심 요약append(): 노드 객체와 문자열 모두를 한 번에 여러 개 추가할 수 있으며, 반환값이 없습니다.appendChild(): 노드 객체만 추가할 수 있으며, 한 번에 하나씩 추가해야 하고, 추가된 노드 객체를 반환합니다.이러한 차이점을 이해하고 상황에 맞게 적절한 메서드를 선택하여 사용하시기 바랍니다. JavaScript에서 DOM 조작 시, 부모 노드에 자식 노드를 추가하기 위해 append()와 appendChild() 메서드를 사용합니다.이 두 메서드는 유사한 기능을 하지만, 몇 가지 중요한 차이점이 있습니다.append()append() 메서드는 부모 노드의 마지막 자식으로 노드 객체나 문자열(DOMString)을 추가할 수 있습니다.예시:// 노드 객체 추가const parent = ..

핵심 요약- 설치 및 빌드 속도: Vite는 CRA보다 빠른 설치와 빌드 속도를 제공합니다.- 경량성: Vite는 더 가벼운 번들 크기를 제공하여 성능 향상에 기여합니다.- 유연한 설정: Vite는 설정 파일을 통해 다양한 옵션을 쉽게 조정할 수 있습니다.- 절대 경로 지원: vite.config.js에서 별칭을 설정하여 절대 경로 임포트를 지원할 수 있습니다.Vite는 빠른 개발 환경과 유연한 설정을 원하는 개발자들에게 CRA의 대안으로 고려해볼 만한 도구입니다.   React.js 프로젝트를 시작할 때, 많은 개발자들은 create-react-app(CRA)을 사용하여 기본 템플릿을 생성하고 로컬 개발 서버를 설정합니다.그러나 최근에는 Vite라는 도구가 주목받고 있습니다. Vite는 빠른 설치와 빌..

핵심 요약Context API    - React에 내장된 상태 관리 도구로 추가 설치 불필요.    - Prop Drilling 문제를 해결하는 간단한 방법.    - 자주 변경되지 않는 상태(예: 테마, 언어 설정)에 적합.    - 소규모 애플리케이션 또는 특정 데이터 공유에 적합.Redux    - 중앙 집중식 상태 관리를 위한 강력한 도구.    - 복잡하고 대규모 애플리케이션에서 상태 관리에 적합.    - 강력한 디버깅 툴(DevTools) 제공.    - 별도 설치 및 설정 필요.주요 비교    - Context API는 단순성과 React 기본 내장이라는 장점.    - Redux는 확장성과 예측 가능한 상태 관리에 초점.결론    - Context API는 소규모 프로젝트에서 Prop ..

핵심 요약- then(): 비동기 작업 후 콜백 함수를 실행하며, 함수의 나머지 부분은 계속 실행됩니다.- async/await : 비동기 작업이 완료될 때까지 함수 실행을 일시 중지하여, 동기적인 코드처럼 작성할 수 있습니다.- 가독성과 유지보수를 위해 async/await 사용이 권장되며, 복잡한 프로미스 체이닝은 피하는 것이 좋습니다. JavaScript에서 비동기 요청을 처리할 때, then()과 async/await 두 가지 방법을 사용할 수 있습니다.이 두 방법은 매우 유사하지만, 함수 실행 흐름에서 차이가 있습니다. async 함수 내에서는 JavaScript가 프로미스가 해결될 때까지 함수 실행을 일시 중지합니다.반면, then()을 사용할 경우 함수의 나머지 부분은 계속 실행되지만, 프로..

Docker 공식 웹사이트 방문 🌟Docker 공식 웹사이트에 접속합니다.Download for Mac - Apple Silicon을 클릭하여 설치파일을 다운받습니다. 설치파일 설치 ⚡️Docker.dmg를 실행하고, 위 이미지에서 Docker 파일을 Applications에 drag and drop 해줍니다. 실행 🐣Finder > 응용프로그램에 가보시면 Docker가 잘 설치되어 있는 것을 볼 수 있습니다.아이콘을 더블 클릭하여 실행하면 끗~!

Axios Interceptors ❓axios로 주고받는 요청과 응답을 가로채서 핸들링할 수 있습니다.호출하는 매 순간마다 요청과 응답에 대한 처리를 하지 않고, 공통적으로 처리할 수 있습니다.주로 jwt토큰 인증, 재발급에 쓰입니다. Usage ⚡️먼저 axios instance를 생성해줍니다.const axiosInstance = axios.create({ baseURL: {api주소} });  axios 요청을 가로채서 핸들링합니다.요청 url에 따라 처리를 할 수 있고, 요청 헤더를 셋팅할 수 있습니다.axiosInstance.interceptors.request.use( (config: any) => { return convertRequest(config); }, (error)..

안녕하세요.요새 커스텀 엘리먼트의 매력에 빠져 소소하지만 커스텀 엘리먼트를 하나 만들어봤습니다. 제 블로그 상단에 노출되는 개발자 명언입니다.페이지가 새로 랜딩될때마다 명언이 랜덤하게 뽑혀서 나옵니다. 명언은 틈틈히 추가해나갈 것이며, 여러분들이 추가하고 싶은 명언이 있다면 PR을 날려주세요!! 적용 방법티스토리 블로그를 예시로 적용 방법을 설명드릴게요.어느 웹사이트든 적용가능합니다! 블로그 설정 > 스킨 편집 > html편집 위와 같이 접근하시고 단 두줄만 추가해주시면 됩니다! cdn방식으로 스크립트를 불러오도록 했는데, 지금은 github로 연결되어있습니다. 추후 수정/보완할 예정입니다.   위 스크립트를 head 태그 안에 넣어줍니다. 이제 개발자 명언을 노출시키고 싶은 위치에 다음 태그를 넣어주..

0. 블라블라..개발자로 살아온지 5년째.. 그동안 사이드 프로젝트도 해보고 기획자들과도 함께한 시간들이 많이 있었다. 나는 생각을 코드로 표현하는 것은 잘하지만 생각을 글로 표현하는 것을 못했기에 기획자들이 항상 부러웠고 멋있다고 생각했다. 그렇다보니 사이드 프로젝트를 하더라도 주먹구구식이었고 뭔가 불완전한 느낌이 들었고, 프로젝트를 끝내도 남는게 없는 것 같았다. '소프트웨어공학' (aka. 소공) 수업 때 교수님이 하신 말씀이 항상 생각난다.바로 코드 먼저 작성하려하지말고, 설계와 분석을 먼저 해야한다. 성격이 급한 편도 아닌 난데 매번 지키지 못하고 vscode 먼저 켰다.이번엔 못해도, 느려도 완성도 있는 "프로젝트"를 해보려한다. 1. 기획안, 어떻게 써야하나..?막막했다. 그동안 무수히 많은..