Debelloper

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

Situation 경찰청 공공 API를 활용한 분실물/유실물 찾기 서비스 제작 프로젝트 진행 중 메인 화면에 거슬리는 것이 하나 있었다. 주인을 찾아요 아래에 최근 습득물을 보여주는 UI가 서버에서 데이터를 받아오는 동안 화면에 보이지 않았다가 뒤늦게 나타난다. 물론 이 메인 화면을 구경하고 있는 사용자가 있을 수 있겠지만, 보통은 본인이 원하는 메뉴를 탐색하면 그곳을 클릭하기 때문에 저 자리에 어떤 것이 있는지 사용자가 인식하지 못하고 지나칠 수도 있다. Task 그래도 나름 사용자를 위해서 만든 기능인지라, 저곳에 무언가가 있다는 것을 사용자에게 인식시켜 줄 필요가 있었다. Action 그래서 생각난 것이 스켈레톤 라이브러리다. 스켈레톤 라이브러리는 웹 페이지나 애플리케이션에서 데이터 로딩 과정을 사..

다음 렌더링 전에 동일한 상태 변수를 여러 번 업데이트해야 하는 경우가 있을 수 있다. 이런 경우 다음 상태 값을 전달하는 대신 다음 상태 값을 기반으로 새로운 상태 값을 계산하도록 할 수 있다. 이는 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개 이상의 엘리먼트가..