Debelloper

학습용으로 private 저장소를 만들고 push를 하려니까 에러가 났다. 먼저 $ git remote -v 로 확인을 해보았다. url도 정상적으로 잘 들어가 있었다. 검색을 해보니 $ git remote set-url origin https://계정이름@github.com/~~~ 로 remote url을 새로 세팅해보라는 글이 있어 혹시 몰라 다시 세팅 후 push를 시도해 보았지만 에러는 그대로였다. 마지막으로 시도한 방법으로 해결을 하였는데 아래와 같다. Windows 자격 증명에 들어가면 '일반 자격 증명'이라고 되어있는 것을 볼 수 있다. 리스트를 확인해보면 git:https://github.com으로 되어있는 증명이 확인되는데 펼쳐보면 아래와 같이 나온다. 저기 사용자 이름에 붉은색으로 마킹..

다음 렌더링 전에 동일한 상태 변수를 여러 번 업데이트해야 하는 경우가 있을 수 있다. 이런 경우 다음 상태 값을 전달하는 대신 다음 상태 값을 기반으로 새로운 상태 값을 계산하도록 할 수 있다. 이는 React에게 상태 값을 단순히 교체하는 대신 “이전 상태”를 기반으로 무언가를 수행하도록 지시하는 방법이다. 예를 들어 장바구니의 담겨있는 동일 상품을 하나가 아닌 여러 개를 사고 싶어 + 버튼을 통해 이전 수량에서 1씩 추가를 해야 한다고 가정을 해보자. 상품 데이터가 있는 json 파일을 먼저 만들어준다. [product.json] { "id": "nf-uni-padding", "imageSrc": "NFPadding.jpg", "imageAlt": "검정색 노스페이스 남여공용 패딩", "name":..

React의 작동 흐름은 크게 네 가지 단계로 나누어진다. Mount: 컴포넌트가 새롭게 생성되는 단계이다. 컴포넌트 함수가 실행되고 결과물로 나온 Element들이 가상 DOM에 삽입되고 실제 DOM을 업데이트하기까지의 과정이다. Trigger: 렌더링을 유발한다. 앱 시작 초기 또는 state의 변경이 있을 때(re-render)에 해당한다. Render: 브라우저 DOM에 반영될 요소를 계산하는 단계이다. 브라우저 DOM에 업데이트 하기 전에 가상돔을 조작하여 업데이트할 모양을 만들어 내는 단계이다. 가상돔을 통해 업데이트를 미리 실행하는 이유는 브라우저 DOM을 직접 조작하는 비용(repaint, reflow)가 크기 때문이다. 초기 렌더라면 루트 컴포넌트를 호출하여 전체 엘리먼트에 대한 가상돔을..

Web Component 웹 컴포넌트는 코드들을 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음이다. 슬롯(Slot) 웹 컴포넌트의 여러 기술들 중 HTML 템플릿에는 ‘template’과 ‘slot’ 엘리먼트가 있다. 이들은 렌더링된 페이지에 나타나지 않는 마크업 템플릿을 작성할 수 있게 해주며, 커스텀 엘리먼트의 구조를 기반으로 여러번 재사용 할 수 있다. HTML ‘slot’ 요소는 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 placeholder이다. [예제] ㄴ 템플릿 작성 이것은 외부에서 넘어온 헤더입니다. 이것은 외부에서 넘어온 푸터입니다. ㄴ sl..

컴포넌트를 만들 때 아래와 같은 에러를 본 적이 있을 것이다. Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? 만약 컴포넌트가 아래와 같이 작성이 되었다고 해보자. const App = () ⇒ { return ( one two; ); } 이 코드에는 문법 오류 문제가 있다. JSX 문법으로 작성된 내용이 아래와 같이 해석이 되기 때문이다. return ( React.createElement('div', {}, "one") React.createElement('div', {}, "two") ) React 컴포넌트는 하나의 최상위 엘리먼트만 렌더링을 할 수 있기 때문에 2개 이상의 엘리먼트가..

Situation 마켓 컬리 사이트 클론 코딩 프로젝트 중에 레이아웃이 깨지는 문제가 발생하였다. 아이디 입력란과 비밀번호 입력란은 동일한 클래스를 주고 같은 스타일을 적용하였는데 비밀번호는 원하는대로 스타일이 나와주었고 아이디 입력란만 먹통이였다. 회원가입 페이지도 마찬가지로 아이디와 이름 입력란만 레이아웃이 깨지는 현상이 발생하였다. Task 로그인 페이지와 회원가입 페이지의 레이아웃 깨짐 현상을 해결하여 원하는 스타일이 나오도록 해야했다. Action 먼저 시도해 본 방법은 캐시 비우기 및 강력 새로고침이였다. 그대로다. 두 번째 시도해 본 방법은 작성한 코드와 로컬 서버 상태를 확인하는 것이였다. 코드를 아무리 보아도 클래스를 잘못 주었다거나, 스타일을 잘못 준 것도 아니였다. 로컬 서버의 문제도..