찐빵이의 개발일기

Git은 Local, HTTP, SSH, Git 이렇게 네 가지의 프로토콜을 사용한다.로컬 프로토콜Git Clone 시 파일 경로를 직접 쓸 때와 file:// 로 시작하는 URL을 사용할 때는 다르게 처리된다.디렉토리 경로를 그대로 사용하는 경우ex) git clone /srv/git/project.gitGit은 필요한 파일을 직접 복사하거나 하드 링크를 사용한다. 빠르지만 복사본이 생성되어 폴더가 지저분할 수 있음.file:// 로 시작하는 경우Git은 네트워크를 통해서 데이터를 전송할 때처럼 프로세스를 별도로 생성하여 처리한다.프로세스로 데이터를 전송하는 게 직접 복사하는 것보다 효율이 떨어지지만 외부 Refs나 개체들이 포함된 저장소의 복사본을 깨끗한 상태로 남겨둘 수 있는 장점이 있다.로컬 프로..

1. 앱스토어 심사지침앱 런칭 전 심사 지침이 어떻게 되는지 미리 확인 필요2. 애플 휴먼 인터페이스 디자인개발 전 애플이 권장하는 인터페이스 디자인 확인해보기

몇 달 전, 바닐라JS에서 CSS로 다크모드 설정하는 방법을 공부했다. 그리고 리액트를 공부하다가 다시 한번 다크모드 설정을 구현하게 되었는데, 너모너모 쉬워서 깜짝 놀랐다. 잊고 싶지 않아서 글로 남겨본다. 1. 다크모드 Context 만들기 앱 전반적으로 활용해야하는 설정이라면 Context를 사용해서 구현하는 게 편리하다. 다크모드도 앱 전체에 적용되어야 하는 값이기 때문에 Context를 활용하여 구현해 준다. // DarkModeContext.jsx import { createContext, useContext, useEffect, useState } from 'react'; export const DarkModeContext = createContext(); export function Dar..

Routing이란? 주소창에 uri를 입력했을 때 서버가 요청된 uri에 해당하는 페이지를 전달해 주는 것 동작 순서 클라이언트에서 서버로 페이지 요청 → 서버에서 페이지 전달 → 페이지 전체가 업데이트 됨 Client Side Routing이란? 페이지를 이동할 때 새로운 html을 받아오는 것이 아니라, 각 페이지에서 필요한 데이터를 네트워크 통신(fetch)을 사용해서 필요한 데이터만 받아오는 것 동작 순서 클라이언트에서 서버로 변경되는 데이터 요청 → 서버에서 데이터 JSON 형태로 전달 → 필요한 부분만 업데이트됨 React Router Client Side Routing을 가능하게 해주는 API 장점 SPA를 유지하면서 멀티 페이지 형태의 장점(uri 경로 변경)을 사용할 수 있다. histo..

Immer 가 뭐야? 며칠 전, Reducer로 상태 관리를 하는 방법에 대해 배웠다. Reducer를 사용해서 편리하게 상태 관리하는 건 알았어! 그런데, 중첩된 객체가 많아진다면?? 상태 업데이트 할 때마다 중첩 객체 업데이트를 위해 spread 연산자 사용하고, 복잡해질 것이다. 그래서 중첩 객체가 많아도 쉽게 간단하게 상태 관리를 할 수 있도록 Immer가 나온 것이다. Immer 예시 Immer를 사용했을 때는 가변성 객체를 다루는 것처럼 쉽게 상태 변경을 할 수 있다. Immer 객체 내부에서 새로운 객체를 생성하고 있기 때문에, 우리는 그걸 신경 쓰지 않아도 되는 것이다. Immer 사용 방법 Install yarn add immer use-immer Use import { useImmer ..

서비스를 개발할 때 아이템의 상태 관리를 하는 것은 중요하다. 리액트에서도 상태 관리를 할 수 있다. 기본 상태 관리 - useState 컴포넌트 안에서 사용하는 아이템의 상태를 관리하려면 useState를 사용하면 된다. 그런데 다른 컴포넌트에서도 이 아이템을 사용하고 싶다면?? 이런 고민과 불편함은 상태 관리 라이브러리를 사용하여 해결할 수 있었다. 상태 관리 라이브러리 종류: Redux, MobX, Immer 등... 하지만! 지금은 최신 React에서 제공해 주는 Hook을 이용해서 상태 관리를 할 수 있다. React Hook으로 상태 관리하기 useState : 일반 원시값이나 객체, 배열인 경우 useReducer : 상태 관리 코드를 분리하고 재사용하고 싶을 경우 context : 여러 컴..

이벤트를 위임할 때 Element 하나씩 이벤트 핸들러를 달아주면 성능도 저하되고 코드도 복잡해진다. 따라서 부모 태그에 이벤트 리스너를 만들고, 자식 요소를 클릭하면 이벤트 버블링이 일어나서 부모 태그에 만들어 둔 리스너가 동작한다. 이때 이벤트 리스너에서 event.target을 체크한 뒤 원하는 동작을 구현하면 코드가 간단해지고 성능도 빨라진다는 장점이 있다. 이러한 방법을 이벤트 델리게이션이라고 한다.

우리가 코드를 작성하면, 화면에 어떤 원리로 나오는 것일까? 궁금해서 공부해 봤다. HTML → DOM 브라우저는 우리가 작성한 HTML을 읽는다. HTML은 Element로 이뤄져 있는데, 이걸 노드로 변환한다. 이렇게 변환한 노드를 모으면 DOM Tree가 된다. 즉, DOM Tree는 노드의 집합이라는 것! DOM에는 어떤 정보가 있을까? DOM에는 콘텐츠, 이벤트에 관련된 내용을 가지고 있다. (단, 스타일은 제외된다.) 노드에 콘텐츠(Value)가 들어있는 건 이해하지만, 이벤트는 어떻게 가지고 있는 걸까? 바로 Node가 EventTarget을 상속받기 때문! EventTarget에는 addEventListener 등 이벤트 등록, 제거 관련 메서드가 있는데, 노드에서 이것을 상속하기 때문에 ..

웹을 구현할 때 Click 이벤트를 구현하는 방법이 두 가지가 있다. addEventListener('click', () => {} 이렇게 이벤트 리스너를 추가하는 방법과 onclick() HTML에 onClick을 더해주는 방법! onclick이 더 간단한 것 같고, onclick이 가능한 곳에서 왜 addEventListener을 사용하나 궁금해서 문서를 작성하게 되었다. 브라우저 호환성 Onclick 메서드는 모든 버전에서 호환되지만, AddEventListener는 IE에서 호환되지 않는다. 버블링, 캡처링 설정 가능 여부 Onclick 메소드는 구현할 기능인 함수만 받지만, AddEventListener는 3번째 파라미터로 버블링, 캡쳐링 동작 여부를 결정할 수 있다. boolean 값으로 tr..

전략패턴이란? 알고리즘군을 정의하고 캡슐화해서 각 알고리즘군을 수정해서 쓸 수 있게 해주는 패턴이다. 전략 패턴을 사용하면 클라이언트로부터 알고리즘을 분리해서 독립적으로 변경할 수 있다. 이게 무슨 말일까? 즉, 객체가 할 수 있는 행위들을 각 알고리즘으로 만들어놓고, 동적으로 행위의 수정이 필요한 경우 알고리즘을 바꾸는 것으로 행위를 수정하는 것이다. 전략패턴 구현 방법 전략에 대한 인터페이스를 구현한다. 전략 인터페이스를 상속받는 세부 전략 클래스를 구현한다. 다른 클래스에서 전략 인터페이스 값으로 선언하여 특정 전략을 사용할 수 있다. 참고자료 헤드퍼스트 디자인 패턴