profile
실수는 삶과 정신의 여백입니다. 여백이 많은 츄러블슈팅 맛집

[Next.js]왜 써요? 어떻게 써요?

리액트 라이브러리(Create-react-app)로 작업시에는 Routes, Render 등등 작업을 해줘야 됨.Next 프레임워크(npm install next@latest)는 pages폴더에 원하는 js문서를 만들어주면 됨. 앞서 리액트 라이브러리에서 해주던 세팅들

2022년 5월 3일
·
0개의 댓글

[Redux]알아보자

Redux에서 제공하는 공식도구인 Redux Toolkit을 쓰세요.(RTK): 상태변화가 필요할 때 발생시키는 객체: 파라미터를 받아, 액션객체를 만드는 함수컴포넌트에서 액션 쉽게 발생시키기 위해 액션 생성함수 만듬 - export를 붙여 다른 파일에서도 불러올 수

2022년 4월 26일
·
0개의 댓글

[기업협업]새로 접한 스택들로 인한 부트캠프 수료생의 고뇌

create-react-app하시고, package.json, gitignore 기타등등빼고는 싹 지워주실게요~뭐야 이 생소한 것들은... 일단 하나씩 구글링해보자: 자주쓰는 초기세팅 템플릿: 개이름. git hooks를 관리. git 상태가 변화할때 자동실행되는 스크

2022년 4월 25일
·
0개의 댓글

[map]써도써도 까먹는 map 실수리스트 정리

Back to the basic!map을 돌리는 대상이 배열의 형태가 아니다.혹시 아래과 같은 객체를 놓고 씨름하고 있었다면배열의 형태로 바꿔줍시다...key 설정을 동일한 값으로 돌리셨군요..key는 unique한 값으로 꼭 세팅해주셔야합니다.객체의 id가 있으면 i

2022년 4월 13일
·
0개의 댓글
post-thumbnail

Custom Hooks 개요

ASIS : ID & PWD 유효성검사 후 버튼색 변경하는 함수TOBE : ID유효성 함수 , PWD유효성 함수, 버튼색 변경 함수로 분리하나의 수정사항에는 해당 부분만 변경하기 위해, 단위를 잘게 나눔 =>Divide & Conquer를 용이하게 함.Loose Cou

2022년 4월 13일
·
0개의 댓글

[Infra] 가용성(Availibility)

서버와 네트워크 등 시스템이 정상적으로 사용가능한 정도를 의미고가용성이란 해당 시스템이 오랜기간동안 지속적으로 장애없이 정상운영이 가능하다는 성질을 의미한다.9가 5개라는 뜻으로 99.999%의 고가용성을 지닌다는 의미이다.Service Level Agreement의

2022년 4월 10일
·
0개의 댓글
post-thumbnail

[Infra]Scale up & Scale out

Scale out : 하나의 장비에서 처리하던 일을 여러 장비로 나눠 처리할 수 있도록 증량한다. 수평확장이라고도 한다.Scale up : 더 빠른 속도의 CPU나 RAM을 추가하는 것. 일반적으로 Scale out보다 비용부담이 크다. 수직확장이라고도 한다.

2022년 4월 10일
·
0개의 댓글
post-thumbnail

디즈니샵 프로젝트 후기

제품 카테고리를 줄이고 기능적인 측면을 구현하는데에 집중하기로 하였으며, 자세한 내용은 하기와 같습니다.150여개 카테고리와 다양한 IP를 보유하고 있는 쇼핑몰 => 7개 카테고리와 3개 브랜드로 축소 구

2022년 4월 10일
·
0개의 댓글
post-thumbnail

[동적라우팅]다중필터 처리하기 (3편: 카테고리 depth별 서로다른 queryString 만들기)

지난시간까지 했던 다중필터는 의류의 TYPE이라는 카테고리가 지닌 top, bottom, acc라는 속성안에서는 잘 돌아가지만, 카테고리가 바뀌어버리면 백엔드에 올바른 queryStringd을 줄 수 없다는 문제가 생겼다.이에 신박한 접근을 떠올리게 되는데,,,클릭의

2022년 4월 2일
·
1개의 댓글
post-thumbnail

[동적라우팅]다중필터 처리하기 (2편:Query Parameter를 사용해보자)

이번에는 좌측에 위치한 필터들을 클릭했을 때, 해당 필터에 해당하는 제품들을 보여주는 기능을 구현해보고자 한다.한 번 클릭하면 필터가 활성화되고, 두 번 클릭하면 해제되는 형태이다. 토글등등 다양한 방법을 고민해보았는데, 결국 아래 3단계로 완료할 수 있었다.필터를 클

2022년 4월 2일
·
0개의 댓글

[동적라우팅]다중필터 처리하기 (1편:라우팅개념)

url주소를 기준으로 다른 view를 보여주는 것화면을 이동하여 새로고침하지 않고, 동적으로 화면(뷰)를 그려주는 기술\-react에서는 recat-router-dom을 활용하여 SPA라우팅을 구현1)정적라우팅 : /, /users , /products와 같이 정해진

2022년 4월 1일
·
0개의 댓글

[Hook]구조분해할당으로 child에 State값 내리기

구조분해할당을 적용하면 State값을 child에 내릴 때 좀 더 간단히 진행할 수 있다.monsters라는 state는 여러 monster의 속성들이 객체의 형태로 담겨있는 배열이다.parents에서 child로 monsters의 id / name / email이라는

2022년 3월 26일
·
0개의 댓글

[Javascript]Promise객체와 비동기처리

Promise객체란 비동기 작업이 멎아헐 성공/실패에 대한 결과값을 의미한다.\-MDN-생성된 작업에 대한 상태정보를 하기 3가지 유형으로 가지고 있는 객체이다Promise객체에 대해 찾아보면 비동기처리에 대해 먼저 확인하고 오라는 답변을 익숙하게 받았을 것이다. 이

2022년 3월 26일
·
0개의 댓글

프로젝트 분석 개론

1)package.json(디펜던시)의존성확인2)index.html -> index.js -> router.js복잡한 코드에 대해 설명하는 주석 지양해야하는 이유 : 코드가 업데이트될때마다 설명도 업데이트해야되는데 쉽지않다. 그러므로, 코드설명하는 주석 대신 코드를 쉽

2022년 3월 24일
·
0개의 댓글
post-thumbnail

인증과 인가

권한을 확인하는 과정을 인증과 인가라고 한다. 이들이 필요한 이유와 방법에 대해 살펴보자

2022년 3월 21일
·
0개의 댓글

[Git]Git conflict

<협업가이드> 하나의 PC에서 세팅1)CRA 하면 git init까지 됨2)Default Setting 리액트라우터돔 설치 사스 설치3)add / commit add:initial setting complete git remote add origin(저장소명

2022년 3월 18일
·
0개의 댓글
post-thumbnail

[TS] React CRA설치중 발생하는 에러(npm ERR! could not determine executable to run )

CRA섩치를 위해 터미널에서 상기와 같이 입력하면아래의 에러를 만나게 됩니다..npm ERR! could not determine executable to run만약 당신이 이 문제에 직면했다면...npx < install > create-react-app 경로명

2022년 3월 16일
·
2개의 댓글
post-thumbnail

[Git]Git을 활용한 협업 Flow

깃헙에 위스타 레파지토리가 있는데 그걸 내 로컬로 가져온다면?=> git clone 레파지토리 주소=> git branch feature/브랜치명브랜치 생성했으나 난 아직 마스터에있음브랜치로 이동하자git checkout feature/브랜치명<코드작성후>git

2022년 3월 16일
·
0개의 댓글

[javascript]className & classList & toggle

자바스크립트에서는 html의 class명을 입력 / 수정할 수 있다.h1태그의 문자를 클릭할 때마다 h1태그의 class명을 바꾸는 코드를3가지 방법으로 사용가능하기에 하기와 같이 소개한다.클래스명이 단일값일 경우 사용가능하다.통상 복수의 클래스명을 가져가는 경우가 많

2022년 3월 12일
·
0개의 댓글

[Git]기초사용 가이드

Github의 Remote에는 Master라는 기본 작업공간이 있다. >Reomte에 있는 Master를 Local로 가져오려면 단, 마스터에서는 이곳에서는 절대로 코드를 쳐선 안된다. 별도로 작업공간이 필요한데 이 때 브랜치를 생성한다. >로그인 기능만 만든다

2022년 3월 12일
·
0개의 댓글