hyun
  • 홈
  • 글쓰기
  • 태그
  • 방명록
  • 메뉴 닫기
  • 글작성
  • 방명록
  • 환경설정
    • 분류 전체보기 (103)
      • 1. Computer Science (11)
      • 2. FrontEnd (51)
        • Javascript (10)
        • TypeScript (6)
        • CSS (3)
        • React (17)
        • Next.js (1)
        • Dart (1)
        • Three.js (3)
        • State Management (4)
        • TDD (2)
        • Ag-Grid (1)
        • LeetCode (1)
      • 3. Backend (9)
        • NestJS (9)
      • 4. Git (4)
      • 5. Blockchain (9)
        • Mastering Ethereum (5)
      • 6. Error (16)
      • 7. Infra | Cloud (2)
        • Docker (2)
        • Kubernetes (0)
        • AWS (0)
      • 8. 자격증 (0)
        • CompTIA A+ (220-1101, 220-1102.. (0)
      • Daily (1)
        • 후기 (1)
        • 맛집 (0)
  • 홈
  • 태그
  • 방명록
4. Git

[Git] master branch to main branch

gitHub로 푸쉬를 master로 잘못했다.. OMG 이번 글은 바보같은 짓을 만회하기(?)위해 메모하고자 작성함.. (* 단, master에 있는 걸 main에 다갖다 덮어쓰는 것으로, main에 작업한 게 다 사라지므로 주의할것) 아래 코드로 문제 해결 git checkout master git branch main master -f git checkout main git push origin main -f 디폴트로 main 브랜치 설정 git config --global init.defaultBranch main master 브랜치 삭제 git push origin --delete master 로컬저장소의 브랜치 삭제 git branch [-d] 브랜치명 -d : 병합여부와 관계없이 삭제

2023. 11. 20. 17:28
2. FrontEnd/React

[React] react-i18next로 다국어 처리 적용하기

회사에서 맡은 프로젝트 중 관리자 페이지 웹사이트에 다국어처리를 적용하게 되었다. 우선, 관리자 페이지여서 SEO는 따로 필요 없었기 때문에 React이고, 이에 따라 react-i18next 적용해서 했던방법을 정리하여 나중에 기억안날때 꺼내볼 목적이다. (참고 : 서버에서 다국어 지원을 제공하는 next-i18next 라이브러리도 있음) 1. 패키지 설치 $ yarn add react-i18next i18next $ npm i react-i18next i18next 2. 폴더 구조 (옵션이지만 이렇게 하는게 이쁨) src > locales폴더 만든 후, en / ko폴더 안 json으로 넣었다. 현재는 관리자페이지만 다국어 처리 적용을하여 json으로 관리해도 될 만큼의 작은규모라 이렇게 하였음 대규..

2023. 11. 20. 13:26
Daily/후기

[매일유업] 어메이징오트 버라이어티팩 :: 3천원의 행복

매일유업이 오트(귀리) 음료 브랜드인 ‘어메이징 오트’ 커피·초콜릿 신제품 출시를 기념해서 어메이징 오트의 라인업 5종(오리지날·언스위트·바리스타·커피·초콜릿)을 모두 먹어볼 수 있는 ‘버라이어티 세트’ 체험 이벤트인 ‘어메이징 오트, 어메이징 초이스’를 하고있어요! 배송비인 단돈 3천원만 내면 받을수있다고해요! 오트우유라서 비건음식 경험겸 고물가시대에 봄비같은 체험❤️ 매일 오전 10시에 8000세트 한정 수량으로 진행되어 당일 준비된 물량이 조기 소진될 수 있다고 들었는데 오전 11시 30분쯤에 한 결과, 성공적 결제했고,배송도 2일만에 엄청 빠르게 왔습니다. (호다닥) 패키지 그림체가 왜이렇게 귀엽지 비건음료인 오트우유를 개발하면서 연구원들이 전하는 메세지가 맨 상단에 담겨있구요 어메이징 오트 5종..

2023. 11. 19. 15:20
2. FrontEnd/State Management

[Zustand] 사용법

1. 설치 # NPM npm install zustand # Yarn yarn add zustand 2. store만들기 나의 경우는 src폴더 안에 store폴더를 만들어 store.ts types.ts를 만들어서 상태관리를 주석처리로 구분하여 모아놨다. import { create } from 'zustand' const useStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }), })) store는 hook이다. store에 primitives, objects, functions을 넣을 수..

2023. 11. 15. 11:41
2. FrontEnd/State Management

[Zustand] 기존 라이브러리 간 비교

Zustand는 React의 많은 상태 관리 라이브러리 중 하나이다. 각 라이브러리마다 장점과 단점이 있는데, 각 라이브러리 간의 주요 차이점과 유사점을 비교하여 Redux, Valtio, Jotai, Recoil 등의 일부 라이브러리와 비교하여 Zustand에 대해 설명한다. Zustand vs Redux 개념적으로, Zustand와 Redux는 매우 유사하며, 둘 다 불변 상태 모델에 기반을 두고 있다. 그러나 Redux는 당신의 앱이 context providers 에 래핑되어야 하며, Zustand는 providers로 감싸주지 않아도 사용이 가능 앱 내 렌더 최적화에 관해서는 Zustand와 Redux의 접근 방식에 큰 차이가 없습니다. 두 라이브러리 모두 selectors를 사용하여 렌더 최적..

2023. 11. 15. 11:36
4. Git

[Git] 깃허브 파일명 변경하는 방법

문제 깃허브(github) 파일명을 변경했는데 수정이 안되는 경우 해결 방법 1️⃣ GitBash 등 터미널을 통해 git에서 대소문자를 구분 하도록 설정해 주기 git config core.ignorecase false // 대소문자 구분함 git config core.ignorecase true // 대소문자 구분 안함 2️⃣ 이후 파일명 변경 git 명령어 작성 (.확장자까지 작성) git mv oldName newName git mv pages/Admin.tsx pages/admin.tsx //예시 3️⃣ git status 확인 해보기 git status 이때 Untracked files에 파일명이 제대로 뜨면 성공 4️⃣ 이후 push 진행 하기 git add . git commit -m "파..

2023. 11. 14. 15:11
6. Error

[Error] Can't perform a React state update on an unmounted component

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 경고: 마운트 해제된 구성 요소에 대해 반응 상태 업데이트를 수행할 수 없습니다. 이는 사용자의 프로그램에서 메모리가 누출되었음을 나타냅니다. 수정하려면 useEffect 정리 기능에서 모든 구독 및 비동기 작업을 취소합니다. 해결방법 데이터 가져오기 또는 기타 비동기 작업은 Promise를 반환한다...

2023. 11. 14. 13:22
7. Infra | Cloud/Docker

[VM] Ubuntu 설치하고 환경 구성하기

2. Ubuntu 설치하고 환경 구성하기 우분투 다운로드 이후 우분투 환경설정 약간 변경함 (4096MB, 컨트롤러:IDE를 다운받은 우분투로 설정) 이후 시작버튼 클릭 언어설정 (한국어) -> Install Ubuntu 클릭 -> 자동으로 한국어 키보드 설정됨 -> 기본값으로 설치 하고 정보입력창에 개인 입력 환경설정에 들어가 다음과같이 IPv4를 바꿔줌 터미널에 들어가서 hostname이랑 hosts 관련 설정을 해주고, 8.8.8.8(Google의 DNS)에 3개만 접속 해주는 테스트를 한다 잘 되는거면, 만든 VM이 외부 네트워크와 통신하는데 전혀 문제가 없다라고 생각하면 된다. 우분투는 기본적으로 root에 PW가 없다 -> 그래서 root계정으로 전환하는것이 안된다 그래서 root에 PW를 설..

2023. 11. 13. 16:01
7. Infra | Cloud/Docker

[VM] Hypervisor 설치하기

파일 > 도구 > 네트워크 관리자 > NAT 네트워크 > 만들기(C) 클릭 오른쪽 마우스 > 속성버튼 이름은 마음대로 IPv4접두사는 원라는대역으로 넣음 (10.100.0.0/24) 포트포워딩에서 알맞게 바꿔준다 (*docker1의 경우 : 로컬의 105번으로 연결하려고 하면, 가상머신 우부투 시스템의 22번으로 커넥션 시켜주겠다) (*docker2의 경우 : 로컬의 106번으로 연결하려고 하면, 가상머신 Cent OS의 22번으로 커넥션 시켜주겠다)

2023. 11. 10. 15:49
6. Error

[Warning] Cannot update a component (`BrowserRouter`) while rendering a different B component. To locate the bad setState() call inside `B component `, follow the stack trace as described

에러메세지 Warning: Cannot update a component (`A : BrowserRouter`) while rendering a different component (`B : 컴포넌트이름`). To locate the bad setState() call inside ` 컴포넌트이름 `, follow the stack trace as described in https://reactjs.org/link/setstate-in-render Bug: too hard to fix "Cannot update a component from inside the function body of a different component." · Issue #18178 · face Note: React 16.13...

2023. 11. 10. 15:05
2. FrontEnd/TDD

[TDD] Cypress를 사용하여 E2E테스트

E2E(End to End) : 사용자의 관점에서 테스트를 진행하는 것 사용자가 서비스에 접속했을 때 하는 행동들과 그 행동들에 의해 동작되는 여러 액션들을 테스트할 수 있기 때문에 사용자가 사용하는 관점에서 발생될 수 있는 문제들을 파악하는데 도움을 줍니다. E2E 테스트를 포함하여 React에서 진행되는 테스트들은 다음과 같이 있습니다. 단위 테스트 통합 테스트 E2E 테스트 E2E 테스트는 브라우저를 통해 실제 사용자가 서비스를 사용하는 부분을 테스트하기 때문에 위의 테스트들 중 가장 큰 리소스를 필요한다 (=즉, 테스트를 진행하는데 상대적으로 많은 비용이 필요하며 무겁기 때문에 속도도 느린 편) 그래서 E2E 테스트는 전체 테스트에서 10% ~ 20% 정도만 차지할 정도로 구성을 하기에 꼭 필요로..

2023. 11. 10. 09:46
2. FrontEnd/State Management

[Recoil] 새로고침(refresh) 하면, state가 날아가는 현상

문제 : Recoil을 사용하면서 새로고침시 기존 정보가 초기화 되는 부분을 보완해야한다. 해결 : 새로고침해도 데이터를 유지하기 위해서 recoil-persist 라이브러리를 사용 npm : https://www.npmjs.com/package/recoil-persist recoil-persist Package for recoil to persist and rehydrate store. Latest version: 5.1.0, last published: 4 months ago. Start using recoil-persist in your project by running `npm i recoil-persist`. There are 7 other projects in the npm registry u..

2023. 11. 8. 11:47
2. FrontEnd/TDD

[TDD] Jest 사용법

Jest를 설치 npm install jest --save-dev yarn add jest --dev Jest를 테스트 러너로 설정 package.json > 테스트 필드에 Jest를 추가 { "scripts": { "test": "jest" } } Jest가 테스트 코드를 포함하는 파일로 인식할 수 있도록 테스트 파일의 이름은 .test.js로 끝나야 함 테스트를 실행 npm run test yarn test 특정 파일만 실행하고 싶으면, 다음과 같이 테스트 파일을 지정 npm run test componentName.test.js yarn test componentName.test.js 테스트를 시작하면 Jest는 콘솔에 실패 또는 통과 로그를 출력 $ jest PASS ./componentName...

2023. 11. 7. 17:54
2. FrontEnd

[FE] 빌드시스템 (Node.js / NPM / Prettier / Babel / polyfill / ESLint / Prettier)

빌드란? 소스코드를 실행 가능한 프로그램을 만드는 과정. Node.js Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경을 의미한다. JavaScript 엔진(V8 Engine)으로 빌드된 JavaScript 런타임이다. JavaScript 엔진(V8 Engine) : 개발자가 작성한 자바스크립트 코드를 해석하고 실행시켜주는 것이 자바스크립트 엔진으로, 가능한 짧은 시간 내에 가장 최적화된 코드를 생성하는 것이 목표, 그중 V8 은 오픈소스로 구글크롬과 node.js에서 사용 JavaScript 런타임 : 프로그래밍언어가 구동되는 환경 JavaScript를 크롬(Chrome)같은 브라우저에서만 쓰는 것이 아닌 브라우저 밖. 즉, 내 컴퓨터에서 다양한 용도로 확장하기 위해 만들어진 것이..

2023. 9. 5. 18:06
2. FrontEnd/Javascript

[JS] 비동기처리 (Promise)

[ Promise ] ▶️ Promise함수란? Promise는 자바스크립트 비동기 처리에 사용되는 객체이다.(약속해 줘~이런 느낌인데..) 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다. (난 널 기다리지 않아 언제 오든 다음코드실행한다.) ▶️ Promise가 왜 필요한가요? Promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 사용합니다. API가 실행되면 서버에다가 ‘데이터 하나 보내주세요’라는 요청을 보내죠. 그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터..

2023. 8. 31. 17:28
2. FrontEnd/Javascript

[JS] Event Bubbling / Capturing

어떤 프레임워크를 쓰느냐와 관계없이 기본적인 브라우저의 이벤트 감지 방식이다. 이벤트 등록 및 제거 방법 : addEventListener() / removeEventListener() 이벤트 전달 방식 (Event Bubbling, Event Capturing) 이벤트 전파 막기 : event.stopPropagation() 이벤트 위임 : Event Delegation ▶️ 이벤트 등록 및 제거 웹 애플리케이션에서 사용자의 입력을 받기 위해 필요한 기능이다. (아래와 같은 코드를 의미) add one item const button = document.querySelector('button'); button.addEventListener('click', addItem); function addItem..

2023. 8. 31. 17:08
2. FrontEnd/Javascript

[JS] This의 4가지 역할

▶️ This 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다. 자바스크립트의 경우 Java와 같이 this에 바인딩되는 객체는 한가지가 아니라 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. this는 this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서(=문맥에 따라서) 그 역할이 크게 4가지정도로 나눌 수 있다. 즉, this를 이용하는 함수를 4가지 방식 중에서 어떤 방식으로 실행하느냐에 따라 this의 값이 결정된다는 뜻이다. 1. 함수 호출 2. 메소드 호출 3. 생성자 함수(new) 호출 4. apply/call/bind 호출 1. 함수 호출 (일반함수 실행 방식 Regular Funct..

2023. 8. 31. 16:50
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • »

공지사항

  • 이메일 = fltxld1@gmail.com / GitHub = https⋯

전체 카테고리

  • 분류 전체보기 103
    • 1. Computer Science 11
    • 2. FrontEnd 51
      • Javascript 10
      • TypeScript 6
      • CSS 3
      • React 17
      • Next.js 1
      • Dart 1
      • Three.js 3
      • State Management 4
      • TDD 2
      • Ag-Grid 1
      • LeetCode 1
    • 3. Backend 9
      • NestJS 9
    • 4. Git 4
    • 5. Blockchain 9
      • Mastering Ethereum 5
    • 6. Error 16
    • 7. Infra | Cloud 2
      • Docker 2
      • Kubernetes 0
      • AWS 0
    • 8. 자격증 0
      • CompTIA A+ (220-1101, 220-1102.. 0
    • Daily 1
      • 후기 1
      • 맛집 0
애드센스 광고 영역
  • 최근 글
  • 최근 댓글

최근 글

최근댓글

태그

  • #Nestjs
  • #pdf다운로드 기능
  • #cookie
  • #다국어처리
  • #javascript
  • #AppModule
  • #js
  • #test
  • #gridoptions
  • #react
  • #useEffect
  • #Next14
  • #레포팅솔루션
  • #TDD
  • #sessionStorage
  • #이더리움
  • #typescript
  • #Next12
  • #코드팩토리
  • #폴더구조
  • #AppRoutes
  • #activereportsjs
  • #getdocument
  • #LocalStorage
  • #Docker
  • #14버전
  • #next
  • #i18n
  • #반응형
  • #CSS
MORE

전체 방문자

오늘
어제
전체

블로그 인기글

Powered by Privatenote Copyright © hyun All rights reserved. TistoryWhaleSkin3.4

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.