티스토리

찐빵이의 개발일기

검색하기

블로그 홈

찐빵이의 개발일기

just-my-blog.tistory.com/m

IT 개발자 찐빵이의 개발일기

구독자: 5

방명록 방문하기

반응형

주요 글 목록

Git 프로토콜 Git은 Local, HTTP, SSH, Git 이렇게 네 가지의 프로토콜을 사용한다.로컬 프로토콜Git Clone 시 파일 경로를 직접 쓸 때와 file:// 로 시작하는 URL을 사용할 때는 다르게 처리된다.디렉토리 경로를 그대로 사용하는 경우ex) git clone /srv/git/project.gitGit은 필요한 파일을 직접 복사하거나 하드 링크를 사용한다. 빠르지만 복사본이 생성되어 폴더가 지저분할 수 있음.file:// 로 시작하는 경우Git은 네트워크를 통해서 데이터를 전송할 때처럼 프로세스를 별도로 생성하여 처리한다.프로세스로 데이터를 전송하는 게 직접 복사하는 것보다 효율이 떨어지지만 외부 Refs나 개체들이 포함된 저장소의 복사본을 깨끗한 상태로 남겨둘 수 있는 장점이 있다.로컬 프로.. 공감수 0 댓글수 1 2024. 6. 8.
IOS 개발 전 확인해야할 것 1. 앱스토어 심사지침앱 런칭 전 심사 지침이 어떻게 되는지 미리 확인 필요2. 애플 휴먼 인터페이스 디자인개발 전 애플이 권장하는 인터페이스 디자인 확인해보기 공감수 0 댓글수 0 2024. 5. 29.
React에서 Context로 다크모드 구현하기 몇 달 전, 바닐라JS에서 CSS로 다크모드 설정하는 방법을 공부했다. 그리고 리액트를 공부하다가 다시 한번 다크모드 설정을 구현하게 되었는데, 너모너모 쉬워서 깜짝 놀랐다. 잊고 싶지 않아서 글로 남겨본다. 1. 다크모드 Context 만들기 앱 전반적으로 활용해야하는 설정이라면 Context를 사용해서 구현하는 게 편리하다. 다크모드도 앱 전체에 적용되어야 하는 값이기 때문에 Context를 활용하여 구현해 준다. // DarkModeContext.jsx import { createContext, useContext, useEffect, useState } from 'react'; export const DarkModeContext = createContext(); export function Dar.. 공감수 0 댓글수 0 2023. 5. 7.
React Router 란? Routing이란? 주소창에 uri를 입력했을 때 서버가 요청된 uri에 해당하는 페이지를 전달해 주는 것 동작 순서 클라이언트에서 서버로 페이지 요청 → 서버에서 페이지 전달 → 페이지 전체가 업데이트 됨 Client Side Routing이란? 페이지를 이동할 때 새로운 html을 받아오는 것이 아니라, 각 페이지에서 필요한 데이터를 네트워크 통신(fetch)을 사용해서 필요한 데이터만 받아오는 것 동작 순서 클라이언트에서 서버로 변경되는 데이터 요청 → 서버에서 데이터 JSON 형태로 전달 → 필요한 부분만 업데이트됨 React Router Client Side Routing을 가능하게 해주는 API 장점 SPA를 유지하면서 멀티 페이지 형태의 장점(uri 경로 변경)을 사용할 수 있다. histo.. 공감수 0 댓글수 0 2023. 5. 6.
React Immer로 상태관리하기 Immer 가 뭐야? 며칠 전, Reducer로 상태 관리를 하는 방법에 대해 배웠다. Reducer를 사용해서 편리하게 상태 관리하는 건 알았어! 그런데, 중첩된 객체가 많아진다면?? 상태 업데이트 할 때마다 중첩 객체 업데이트를 위해 spread 연산자 사용하고, 복잡해질 것이다. 그래서 중첩 객체가 많아도 쉽게 간단하게 상태 관리를 할 수 있도록 Immer가 나온 것이다. Immer 예시 Immer를 사용했을 때는 가변성 객체를 다루는 것처럼 쉽게 상태 변경을 할 수 있다. Immer 객체 내부에서 새로운 객체를 생성하고 있기 때문에, 우리는 그걸 신경 쓰지 않아도 되는 것이다. Immer 사용 방법 Install yarn add immer use-immer Use import { useImmer .. 공감수 0 댓글수 0 2023. 5. 5.
Reducer로 React에서 상태 관리 하는 방법 서비스를 개발할 때 아이템의 상태 관리를 하는 것은 중요하다. 리액트에서도 상태 관리를 할 수 있다. 기본 상태 관리 - useState 컴포넌트 안에서 사용하는 아이템의 상태를 관리하려면 useState를 사용하면 된다. 그런데 다른 컴포넌트에서도 이 아이템을 사용하고 싶다면?? 이런 고민과 불편함은 상태 관리 라이브러리를 사용하여 해결할 수 있었다. 상태 관리 라이브러리 종류: Redux, MobX, Immer 등... 하지만! 지금은 최신 React에서 제공해 주는 Hook을 이용해서 상태 관리를 할 수 있다. React Hook으로 상태 관리하기 useState : 일반 원시값이나 객체, 배열인 경우 useReducer : 상태 관리 코드를 분리하고 재사용하고 싶을 경우 context : 여러 컴.. 공감수 0 댓글수 0 2023. 5. 4.
이벤트 델리게이션이란? 이벤트를 위임할 때 Element 하나씩 이벤트 핸들러를 달아주면 성능도 저하되고 코드도 복잡해진다. 따라서 부모 태그에 이벤트 리스너를 만들고, 자식 요소를 클릭하면 이벤트 버블링이 일어나서 부모 태그에 만들어 둔 리스너가 동작한다. 이때 이벤트 리스너에서 event.target을 체크한 뒤 원하는 동작을 구현하면 코드가 간단해지고 성능도 빨라진다는 장점이 있다. 이러한 방법을 이벤트 델리게이션이라고 한다. 공감수 0 댓글수 0 2023. 2. 14.
HTML이 화면에 렌더링 되는 순서 (DOM? CSSOM?) 우리가 코드를 작성하면, 화면에 어떤 원리로 나오는 것일까? 궁금해서 공부해 봤다. HTML → DOM 브라우저는 우리가 작성한 HTML을 읽는다. HTML은 Element로 이뤄져 있는데, 이걸 노드로 변환한다. 이렇게 변환한 노드를 모으면 DOM Tree가 된다. 즉, DOM Tree는 노드의 집합이라는 것! DOM에는 어떤 정보가 있을까? DOM에는 콘텐츠, 이벤트에 관련된 내용을 가지고 있다. (단, 스타일은 제외된다.) 노드에 콘텐츠(Value)가 들어있는 건 이해하지만, 이벤트는 어떻게 가지고 있는 걸까? 바로 Node가 EventTarget을 상속받기 때문! EventTarget에는 addEventListener 등 이벤트 등록, 제거 관련 메서드가 있는데, 노드에서 이것을 상속하기 때문에 .. 공감수 0 댓글수 0 2023. 2. 14.
addEventListener()과 onclick()의 차이 웹을 구현할 때 Click 이벤트를 구현하는 방법이 두 가지가 있다. addEventListener('click', () => {} 이렇게 이벤트 리스너를 추가하는 방법과 onclick() HTML에 onClick을 더해주는 방법! onclick이 더 간단한 것 같고, onclick이 가능한 곳에서 왜 addEventListener을 사용하나 궁금해서 문서를 작성하게 되었다. 브라우저 호환성 Onclick 메서드는 모든 버전에서 호환되지만, AddEventListener는 IE에서 호환되지 않는다. 버블링, 캡처링 설정 가능 여부 Onclick 메소드는 구현할 기능인 함수만 받지만, AddEventListener는 3번째 파라미터로 버블링, 캡쳐링 동작 여부를 결정할 수 있다. boolean 값으로 tr.. 공감수 0 댓글수 0 2023. 2. 14.
[디자인패턴] 전략패턴 (Stratege Pattern) 전략패턴이란? 알고리즘군을 정의하고 캡슐화해서 각 알고리즘군을 수정해서 쓸 수 있게 해주는 패턴이다. 전략 패턴을 사용하면 클라이언트로부터 알고리즘을 분리해서 독립적으로 변경할 수 있다. 이게 무슨 말일까? 즉, 객체가 할 수 있는 행위들을 각 알고리즘으로 만들어놓고, 동적으로 행위의 수정이 필요한 경우 알고리즘을 바꾸는 것으로 행위를 수정하는 것이다. 전략패턴 구현 방법 전략에 대한 인터페이스를 구현한다. 전략 인터페이스를 상속받는 세부 전략 클래스를 구현한다. 다른 클래스에서 전략 인터페이스 값으로 선언하여 특정 전략을 사용할 수 있다. 참고자료 헤드퍼스트 디자인 패턴 공감수 0 댓글수 0 2023. 2. 1.
[디자인 패턴] 상태 패턴 (State Pattern) 일을 하다가 State 어쩌고 하는 클래스가 있길래 봤는데 잘 이해가 안 갔다. 혹시나 디자인 패턴일까 찾아봤는데, 아니나 다를까 상태 패턴을 사용해서 설계한 방식이었다. 상태패턴이란? 상태 변경에 따라 객체의 행위가 달라져야 하는 상황에서 객체가 직접 상태를 체크하여 상태에 따른 행위를 호출하지 않고 상태를 객체화해서 상태가 필요한 행동할 수 있게 위임하는 디자인 패턴이다. 객체가 직접 상태를 체크해서 행위를 호출하면 뭐가 안 좋아? 코드로 보자. class Document is field state: string // … method publish() is switch (state) "draft": state = "moderation" break "moderation": if (currentUser... 공감수 0 댓글수 0 2023. 1. 31.
시맨틱 마크업, 왜 필요할까? 그냥 태그로 다 쓰면 안돼요? 네 안돼요. 시맨틱 마크업이 무엇인지, 왜 필요한지 알아보자. 시맨틱 마크업 시맨틱(Semantic)이란 단어를 해석하면 의미론적인이란 뜻이고, 마크업은 HTML 태그로 문서를 작성하는 것을 말한다. 즉, 시맨틱 마크업은 의미에 맞는 HTML 태그를 사용해서 문서를 작성하는 것을 말한다. 의미를 가진 마크업? 어떻게 하는 건데? HTML은 여러 종류의 태그가 있다. 여러 태그 중에서 내용에 맞는 태그를 선택하여 문서를 작성하면 된다. 예를 들어 문서 제일 상단에 오는 박스인 경우 : 태그 사용 텍스트인 경우 : 태그 사용 최상위 제목인 경우 : 태그 사용 순서 없는 목록인 경우 : 태그 사용 등등.. 무작정 태그를 사용하거나, 제목인데 , css size 변경으로 스타일링을.. 공감수 0 댓글수 0 2023. 1. 28.
구글 폰트 내 웹 사이트에 적용하는 방법 구글 폰트 웹 사이트에 들어가 원하는 폰트를 찾는다. 폰트를 선택하면 왼쪽 바에 Use on the web이라는 메뉴가 보인다. 위에 보이는 링크를 복사해서 HTML 헤더에 추가한다. CSS에서 폰트를 적용할 지역에 CSS rules to specify families에 나온 폰트 코드를 넣어준다. body * { font-family: 'Noto Sans KR', sans-serif; }그럼 폰트가 적용된 화면을 볼 수 있다. 공감수 0 댓글수 0 2023. 1. 26.
CSS에서 다크모드 설정 방법 (feat. prefers-color-scheme) 최근에 많이 사용되는 다크모드, 라이트모드를 구현해 보면서 처음 알게 된 내용을 정리해보려고 한다. 1. OS 설정에 맞춰 모드 변경하는 방법 : prefers-color-scheme prefers-color-scheme 미디어 쿼리는 OS에서 설정된 라이트/다크 모드를 감지하여 자동으로 라이트, 다크 모드 스타일을 적용하는 기능이다. 일반식으로 쓰면 아래처럼 표현할 수 있다. @media (prefers-color-scheme: 모드) { /* 해당 모드에 적용할 스타일 */ } 다크모드 스타일 설정 예시 @media (prefers-color-scheme: dark) { body { background-color: var(--background-color); color: var(--text-color.. 공감수 0 댓글수 0 2023. 1. 26.
문자열 원형과 String 객체의 차이 자바스크립트에서는 스트링 객체와 문자열 원형을 다르게 취급한다. 문자열 원형과 String 객체는 어떻게 다를까? 원형 문자열 : new 키워드 없이 “” (따옴표)로 생성되는 문자열 String 객체 : new String() 키워드로 생성되는 문자열 const string_prim = "This is string"; const string_obj = new String(string_prim); console.log(typeof string_prim); // string console.log(typeof string_obj); // object 둘 다 String이지만 타입이 다르다. 값을 출력했을 때도 다르게 나오는 것을 확인할 수 있다. 1. 원시 타입을 출력했을 때 2. 객체 타입을 출력했을 때 .. 공감수 0 댓글수 0 2022. 11. 18.
VSCode 타이틀 바 색깔 변경하기 settings.json 에 아래 내용을 추가하면 된다. { "workbench.colorCustomizations": { "titleBar.activeBackground": "창이 활성화된 경우 제목 표시줄 배경", "titleBar.inactiveBackground": "창이 비활성화 된 경우 제목 표시줄 배경" } } 공감수 0 댓글수 0 2022. 4. 24.
[React] memo와 react hook PureComponent 클래스와 같은 역할을 한다. props 데이터가 변경되었을 때만 컴포넌트를 업데이트한다. memo 사용법 import React, { memo } from 'react'; //memo를 import 한다. const Card = memo(props => { // props를 전달해준다. ... // 코드 작성 } ); react hook 함수에서도 라이프 사이클을 사용할 수 있게 해주는 것. state를 선언할 때 useState를 사용하면 된다. const [count, setCount] = useState(0); useState는 아무리 호출돼도 동일한 값을 메모리에 저장해놓기 때문에 걱정하지 않아도 된다. 클래스와 함수의 차이점 클래스는 한 번 만들어지면 멤버 변수는 처음에.. 공감수 0 댓글수 0 2022. 4. 23.
React의 pureCompoent 특징 1. 리액트는 Component의 집합이다. 2. 데이터가 하나라도 변경되면 전체적으로 애플리케이션이 re-render 된다. 모든 elements들이 rerender 되지만, 리액트는 Virtual DOM에 이 트리를 보관하고 있고, 실제 DOM과 V-DOM을 비교해서 필요한 부분만 업데이트한다. 문제점 데이터가 변경되지 않아도 컴포넌트만 변경되면, 라이프 사이클에 등록한 로직이 수행된다. 만약 그 로직이 무거운 일이라면, 예상하지 못하게 불필요한 일을 해야할 수 있다. 이걸 방지하는 방법이 pureComponent(class인 경우)와 memo(function인 경우)이다. pureComponent와 memo 특징 컴포넌트의 state, props에 변화가 없다면 render 함수를 부르지 않는다. .. 공감수 0 댓글수 0 2022. 4. 23.
[React] Refs HTML과 바닐라 JS를 사용 시에는 DOM 요소를 가져올 때 querySelector를 사용했다. react에서는 Ref를 사용해서 같은 동작을 할 수 있다. 리액트에서는 돔 요소를 직접 접근하지 않는다. 사용방법 //Ref 생성 inputRef = React.createRef(); ... //원하는 요소에 ref 연결 inputRef.current.value에는 input의 value가 들어있다. (양방향 바인딩) 공감수 0 댓글수 0 2022. 4. 21.
[React] State 컴포넌트에 데이터를 넣으려면 State를 사용해야 한다. state = { message: 'hi', } 이런 식으로 넣을 수 있다. state update 하기 this.setState를 이용해서 state를 업데이트할 수 있다. 그냥 바로 message를 업데이트하게 되면 리액트는 모른다. this.setState({ message: 'hello' }); 공감수 0 댓글수 0 2022. 4. 19.
[React] FonteAwesome 사용하기 yarn으로 설치 yarn add @fortawesome/fontawesome-free index.js import '@fortawesome/fontawesome-free/js/all.js'; ... 사용시 원하는 아이콘의 html 태그를 복사해서 붙여넣으면 된다. FontAwesome 공감수 0 댓글수 0 2022. 4. 19.
[React] html과 jsx의 차이 html은 마크업 언어이고 jsx는 자바스크립트 코드이다. jsx로 작성한 코드를 Babel이 html과 javascript로 변환하게 된다. jsx는 장점은 UI를 만드는 코드에 비즈니스 로직을 작성할 수 있다는 장점이 있다. {}(중괄호)로 감싸서 코드를 넣으면 된다. return 부분에 ui가 들어가는데 꼭 하나의 노드로 만들어서 리턴해줘야 한다. 스타일링을 해줘야 할 때는 div 태그를, 그게 아니라면 비어있는 를 사용하면 된다. 공감수 0 댓글수 0 2022. 4. 19.
[React] 클래스 컴포넌트 함수 컴포넌트 Class Component state에 가지고 있는 상테와 데이터를 담을 수 있다. 라이프사이클 메소드를 사용할 수 있다. function Component state가 없다. 라이프사이클 메소드가 없다. 리액트 16.8 버전부터는 리액트 훅을 사용해서 state, life cycle을 사용할 수 있다. 함수에 리엑트 훅이 생긴 이유 클래스에서 멤버변수에 접근할 때는 앞에 this를 붙여야 한다. 이런 this의 중복이 불편하고, 바인딩 이슈가 있어서 불편하다. memo Higher Order Component 공감수 0 댓글수 0 2022. 4. 19.
React 개발에 유용한 툴 Chrome React Developer Tools 리액트 애플리케이션의 컴포넌트 구조를 확인할 수 있는 툴이다. 디버깅 시에도 유용하게 사용된다. React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 46a98cff2 on 3/30/2022. chrome.google.com reactjs snippet 컴포넌트를 rcc 명령어로 자동 생성할 수 있다. auto import 다른 리액트 컴포넌트를 자동으로 import 해준다. 공감수 0 댓글수 0 2022. 4. 16.
웹개발에 많이 사용되는 툴 정리 Babel ECMA 2015년 이후 버전의 코드를 예전 버전으로 변환해주는 툴. 타입 스크립트, jsx 등의 코드를 브라우저가 이해할 수 있도록 순수 자바스크립트로 변환해준다. 예전 버전을 사용하는 브라우저는 최신 코드를 이해하지 못할 수 있어서 이런 변환이 필요하다. webpack 작성한 소스코드와 리소스 이미지를 묶어서 번들 단위로 사용자에게 제공한다. (번들링) 코드 길이를 줄여주고 minify, uglify를 담당하고 있다. ESLint 코드에 잘못된 점이 있으면 경고 사인을 보내주는 툴 Jest 유닛 테스트를 할 수 있게 도와주는 테스팅 프레임워크 PostCSS CSS 전처리기 중 하나. less, sass와 비슷하다. sass는 정해진 것들만 할 수 있는 반면에, PostCSS는 다양한 플러그.. 공감수 0 댓글수 0 2022. 4. 16.
[React] eject로 숨겨진 툴 확인하기 yarn create react-app [project-name] 을 사용해서 리액트 프로젝트를 만들었다. 프로젝트 내부로 들어가면 이미 git init이 되어있는 걸 볼 수 있다. 즉, git이 숨겨져 있다! 어디에 있을까? yarn eject 명령어로 숨겨져있는 툴을 밖으로 꺼내서 확인할 수 있다. 주의해야 할 점은, eject를 하면 다시 되돌릴 수 없기 때문에 신중해야 한다. eject를 사용한 뒤, package.json 파일을 확인하면 많은 툴이 추가된 걸 확인할 수 있다. 결론 create react-app을 사용하면 많이 사용되는 툴들이 자동으로 설치된다. 회사에서는 create react-app을 사용하지 않고 수동적으로 프로젝트를 관리한다. 공감수 0 댓글수 0 2022. 4. 16.
[React] 프로젝트 생성 및 구조 파악하기 React 프로젝트 생성하는 방법 yarn create react-app my-app이후 yarn start로 실행할 수 있다. 공식문서 프로젝트 구조 .gitignore 형상관리를 하지 않을 리스트를 담고 있다. package.json 외부 라이브러리 정보나 스크립트에 대한 내용을 가지고 있다. manifest.json PWA를 만들 때 필요한 파일 robots.txt 크롤링을 할 때 필요한 파일 index.js 컴포넌트들을 화면에 나올 수 있게 해준다. public 폴더 html, 이미지 등 정적인 컨텐츠가 포함된 폴더 src 폴더 동적으로 변화하는 소스가 들어있는 폴더 웹팩 빌드 시 웹팩에서는 자바스크립트의 고유 버전이 할당된다. 변경되면 고유 버전이 업데이트 된다. 만약 자바스크립트가 변경되지 않.. 공감수 0 댓글수 0 2022. 4. 16.
npm보다 yarn을 사용하는 이유 Node JS 자바스크립트를 실행할 수 있는 환경. 자바스크립트는 원래 웹페이지를 위해 작성하는 언어였는데, NodeJS 덕분에 웹 브라우저 밖에서도 실행할 수 있게 되었다. 즉, 어떤 OS든, NodeJS 환경이 있다면 자바스크립트 코드를 작성하고 실행할 수 있고, OS 위에 있는 파일을 읽고, 수정하고 저장할 수 있다. 이런 NodeJS 덕분에 자바스크립트는 백엔드 서버를 만들 때도, 서버사이드 렌더링을 할 때도, 커맨드 라인 툴이나 스크립트를 만들 때도 사용된다. npm 이란? npm은 패키지 매니저이다. 외부 라이브러리가 필요하면, 아래와 같은 순서로 진행해야 한다. 라이브러리 소스코드를 다운로드한다. 소스코드를 프로젝트 안에 넣는다. 필요한 것을 임포트 해서 쓴다. 이 과정에서 매번 라이브러리 .. 공감수 0 댓글수 0 2022. 4. 12.
서비스 워커의 라이프 사이클 (Life cycle of Service worker) 서비스 워커는 웹 페이지와 별개의 생명주기를 가지고 있다. 서비스 워커의 생명주기 웹페이지에서 서비스 워커 스크립트를 호출한다. Installing : 브라우저 백그라운드에서 서비스 워커를 설치한다. 설치 과정에서 정적 자원을 캐싱한다. Activated : 설치 후 활성화한다. Error : 설치 과정에서 에러가 나면 그대로 종료된다. Idle : 사용하지 않을 때는 휴먼 상태에 있다가 필요시에만 해당 기능을 수행한다. Terminated : 메모리 상태에 따라 자체적으로 종료한다. 공감수 0 댓글수 0 2022. 3. 6.
[PWA] 서비스 워커란? + 특징 서비스 워커(Service Worker) 란? 브라우저와 서버 사이의 미들웨어 역할을 하는 스크립트 파일 오프라인 경험을 가능하게 한다. 동작 방식은 Shared Worker 자바스크립트 UI와 별개의 스레드로 동작한다. 서비스 워커 등장 배경 AppCache의 문제점(오동작, 파일 변화)을 보완하기 위해서 등장 서비스 워커의 특징 브라우저의 백그라운드에서 실행된다. 웹 페이지와 별개의 라이프 사이클을 가진다. 네트워크 요청을 가로챌 수 있다. 자원에 대한 캐쉬 또는 서버에 자원을 요청 가능하다. 프로그래밍 가능한 프록시 프록시 : 중계서버 브라우저 종속적인 생명주기로 백그라운드 동기화 기능을 제공한다. 브라우저가 끝나야 워커가 종료된다. 웹과 모바일 푸시 알림이 가능하다. navigator.servic.. 공감수 0 댓글수 0 2022. 3. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.