소신의 블로그생활

▶ 다이슨 충전 시 빨간 불이 들어왔다면? 1. 배터리 교체하자마자 이런 현상이 발생하였다면 → 불량, 제조사 확인 2. 불량이 아니라면 → 배터리 수명다함 ▶ 다이슨 모델 확인 방법 다이슨 손잡이 하단에 있는 dyson 오른쪽 위 SV10 모델버전을 확인 ! 모델 별 상품명 확인 모델명 상품명 SV07 , SV09 V6 SV11 V7 SV10 V8 SV12 V10 ▶ 다이슨 분해 우선 청소기를 분해하겠습니다 1. 필터 분리 뒤쪽에 달린 헤파 필터는 그냥 가볍게 돌리면 분리가 됩니다. 프리필터 부분은 위쪽으로 잡아당겨야 하는데 조금 힘을 들이면 쉽게 분리됩니다. 2. 본체 분리 청소기 본체는 저 빨간색 버튼을 누르고 위로, 아래쪽에 청소기 통은 안쪽으로 밀고 아래로 빼면 분리가 됩니다. 오 gif 매끄러..

React에서 고차 컴포넌트(Higher-Order Component, HoC)는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수입니다. HoC는 컴포넌트의 재사용성, 로직 공유, 상태 추상화, prop 조작 등에 유용합니다. HoC의 기본적인 구조는 다음과 같습니다: function withHoC(WrappedComponent) { // 반환되는 새로운 컴포넌트 return function(props) { // 추가 로직이나 상태를 이곳에 작성 // ... // WrappedComponent에 props를 전달 return ; }; } HoC 예제: 로딩 상태 관리 예를 들어, 여러 컴포넌트에서 공통적으로 사용되는 로딩 상태 관리 로직을 HoC를 사용하여 구현할 수 있습니다. 아래는 로딩 상태를..

useEffect와 useMemo는 React의 훅(Hook)이지만, 사용 목적과 동작 방식이 서로 다릅니다. 차이점 요약 useEffect는 컴포넌트가 렌더링된 후에 실행되는 부수 효과를 다루는 데 사용됩니다. useMemo는 계산 비용이 높은 연산의 결과를 메모이제이션하여 성능을 최적화하는 데 사용됩니다. useEffect는 DOM 업데이트, 데이터 가져오기, 구독 설정과 같은 작업에 주로 사용됩니다. useMemo는 복잡한 계산이나 재계산을 피해야 하는 값의 계산에 주로 사용됩니다. 1. useEffect 목적: useEffect는 컴포넌트의 렌더링이 완료된 후에 부수 효과(side effects)를 수행하기 위해 사용됩니다. 부수 효과는 데이터 가져오기, 구독 설정, 수동으로 DOM 조작하는 것 ..

정렬, 요소 배치, 등 웹 화면을 그릴 때 자주 사용하는 CSS 기법들을 정리해보았다. 순서 특정 요소 내 정가운데 정렬 화면 가운데 정렬 내부 요소 크기 조정 1. 특정 요소 내 정가운데 정렬 .flex-center{ display: flex; justify-content: center; align-items: center; } div 박스 내에 있는 요소를 정가운데에 정렬해야 할 경우 사용한다. 2. 화면 가운데 정렬 .screen-center { width: 100%; max-width: 393px; (screen-x 화면 최대 크기) height: 100%; display: flex; align-items: center; /* fixed center */ position: fixed; top: 5..

Prettier는 코드 포매터로 저장 시 자동으로 코드를 깔끔하게 정리해주는 라이브러리이다. 이번에 프론트엔드 협업을 진행하면서 코드를 맞추기위해 Prettier를 사용해야했고, VScode에서 사용하는 법을 정리하려고 한다. prettier-vscode github Prettier (Code Formmater) doc 협업함에 있어 컨벤션을 정하는 것은 당연히 중요하지만 코드 가독성을 높이기 위해서 줄바꿈, 들여쓰기를 적절히 하는것도 중요하다. 본 글은 node로 생성한 프로젝트가 있다는 가정하에 진행한다. 순서 1. prettier 설치 2. prettier 설정 3. vscode 설정 1. prettier 설치 package.json이 들어가있는 Node 프로젝트라면 환경에 상관없이 사용가능 npm..

테스트코드를 짜임새있게 작성했을 때 이점이 많이 있다. 특정 코드를 수정했을 때 문제가 될 수 있는 부분을 빠르게 확인할 수 있기 때문에 리팩토링이 원활하게 이루어진다. pytest를 활용해서 테스팅을 진행할 때, 파일을 수정하고나서 저장한 뒤 직접 테스트 파일을 실행하는 것이 귀찮았다. 디렉토리 내 파일이 변경되는 것을 추적하고 자동으로 특정 명령어를 실행할 수 있도록 쉘 스크립트를 작성했다. > FileTracker github TDD (Test Driven Development) 테스트 주도 개발은 매우 짧은 개발 사이클을 반복하는 소프트웨어 개발 프로세스 중 하나이다. 개발자는 먼저 요구사항을 검증하는 자동화된 테스트 케이스를 작성한다. 그런 후에, 그 테스트 케이스를 통과하기 위한 최소한의 코드..

코딩 스타일 가이드는 2인 이상이라면 규모에 상관없이 정하고간다. 2인 팀의 소규모 프로젝트부터 기업과 같이 인원수가 많은 곳 어디든 스타일 가이드는 코드리뷰와 유지보수를 위해 중요하다. 주로 컨벤션이라고 함 스타일가이드 스타일 가이드의 기본적인 의미는 프로젝트를 시작할 때 최종 제품의 시각적 이미지 및 표현을 정의하고 디자인 및 개발 프로세스를 계획하는 데 사용하기 위한 것이다. 코딩 스타일 가이드는 코드의 표현을 정의하는 것이라고 볼 수 있다. 순서 1. 개발 언어 별 변수, 함수, 클래스 네이밍 규칙 2. git flow 3. IT 기업 스타일 가이드 4. 참고자료 1. 개발 언어 별 변수, 함수, 클래스 네이밍 규칙 파이썬 (Python) # variable snake_case = True # c..

기본적으로 Ubuntu나 Linux서버는 AWS에서 빌려서 사용하는 경우가 많고, 주된 사용 목적은 웹서버, crontab으로 돌리는 파이썬 프로그램이다. CLI (Command Line Interface) 명령어 인터페이스 = 터미널 순서 1. 경로 2. 파일 관리 3. vim editor 1. 경로 pwd : 현재 위치를 출력 cd : 경로 변경 ls : 현재 경로에 있는 파일, 경로목록 출력 ls -a : 숨김폴더까지 모두 출력 ls -l : 권한, 상세정보 출력 ls -al 2. 파일관리 mkdir : 폴더 생성 cp : 파일 복사 (잘 사용안하고 파이썬 파일로 코딩해서 씀) mv : 파일 이동 (마찬가지) rm : 삭제 (디렉토리 삭제 시 -r 옵션, -f 시 즉시 삭제) touch : 파일 생..

아직은 부족한 실력이지만, 백엔드 서버 개발을 하면서 찾아보고 알게 된 API 작성법에 대한 글을 남겨보고 나도 이 글을 통해 원칙을 세워보자 한다. API (Application Programming Interface) API는 간단하게 특정 비즈니스 로직을 서버에서 처리하고 그 결과를 네트워크 통신을 통해 전달하는 메커니즘이다. 최근에는 클라가 서버 데이터에 액세스하는 REST API가 메인이고 이 글도 REST API를 다룬다. 순서 1. API 원칙 2. REST API 샘플 3. Router 규칙 4. 문서화 5. 참고자료 1. API 원칙 당연스럽게도 하나의 API는 하나의 일만 '잘' 해야한다. 에러가 발생할 수 있는 사항은 가능한 빨리 확인, 처리한다. 클라이언트에서 예외처리를 요구하는 리..

개인프로젝트를 진행할 때나, 팀단위 프로젝트를 진행할 때 git을 주로 사용한다. 팀으로 협업을 할 때에는 코드 컨벤션뿐 아니라 git 컨벤션을 필수적으로 정하는 것을 보면 깃을 통한 협업은 개발쪽에서 필수가 되었다. Git 컴퓨터파일의 변경사항을 추적하고 여러 사용자들 간의 작업 조율을 위한 분산 버전 관리 시스템, 인터넷 연결 없이도 동작하는 독립적인 이력관리, 버전추적 등 기능을 갖춘 저장소 순서 Git 기본 개념 git 기본 명령어 git 설정 git 협업 명령어 1. Git 기본 개념 저장소 : .git 폴더가 있는, git으로 관리되고 있는 폴더 로컬저장소 : 내 컴퓨터에 저장 원격저장소 : github, gitlab등 웹 서버에 저장 커밋 : 변경사항을 기록하여 하나의 버전으로 상태를 저장 ..