bloomCode

git@github.com: Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists 팀 프로젝트를 진행 중에 팀원에게서 위의 오류가 발생했다. 구글링 해본 결과 거의다 토큰이나 config설정에 관한 내용이었는데 많은 방법을 시도해봤지만 오류를 해결하지 못했다.그 끝에 문제를 찾았는데 팀 조직의 Organizations 설정에 있었다. 팀원들에게 member권한이 설정되어 있어서 owner설정으로 바꿔줌으로써 해결했다, 신기했던 점은 한분은 pull@request가 되는데 github ..

벌써 리액트 심화 주차에 돌입했다. 이제 이번주에 리액트 리덕스로 json서버를 이용해서 CRUD를 구현해보고 다음주부터는 백엔드 분들과 팀이 합쳐저서 실전을 대비하게 된다. 벌써 설레고 그때를 위해서 열심히 해야겠다는 생각이 든다. 이번주차 과제는 라이프사이클(클래스형 vs 함수형) 와 react hooks 대해서다 LifeCycle 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 나타낸다. 아래 표는 리액트 컴포넌트의 라이프 사이클을 보여준다. 라이프사이클은 크게 세 단계로 나눠진다. 생성될 때(Mount), 업데이트할 때(Update), 제거할 때(Unmount)로 나눠진다. 클래스형 vs 함수형 (react hooks) 1. constructor component..

axios.post를 이용한 delete 요청을 할 때 해당과 같이 오류를 만났다. 삽질하던 도중 stackoverflow 글을 보고 해결할 수 있었다. 요청할 때에 url에 정보가 잘못되었다는 걸 바로 알아차리고 수정해주었다. 해당과 같이 url/todos/해당 데이터의 id값을 통해 delete요청을 보낼 수 있었다.

컴포넌트를 나누던 도중에 해당과 같은 오류를 만나게 되었다. 구글링을 해보니 input 태그의 value가 undefined 값이 들어갈 수도 있으면 발생하는 에러라고 한다. uncontrolled input이었다가 controlled input으로 바뀌면서 발생한 것이며, 초기값이 undefined였다가 렌더링 후에 값이 들어와 바뀌면서 발생한 오류라고 한다. 해결방안으로 controlled input 범주의 '' 공백문자를 포함시켜주면 된다고 한다

벌써 28일 차 슬슬 리액트의 대해 이해가 되기 시작했고, 어떻게 사용해야 되는지 어느 정도 적응을 한 것 같다. 그만큼 다른 라이브러리에 대해서 욕심이 생겼고 바로 실천에 옮길 생각이다. 또 리액트를 공부하면서 자바스크립트 문법 또 계속해서 공부하고 있다. 정말 힘든 한 주였던 것 같다. 그래도 그만큼 성장한 게 느껴지고 실전까지 남은 시간을 어떻게 활용해야 될지 이제 좀 방향성이 잡힌 것 같다. 이번 주차 과제는 리액트의 리 렌더링에 대해 얘기해보는 것이다. 리액트에서 리렌더링이 되는 조건은 1. props가 바뀔때 2.state가 바뀔 때 3. 부모 컴포넌트가 리 렌더링 될 때 4.this.forceUpdate 강제로 렌더링 할 때 으로 대표적으로 4가지가 있는 것 같다. 리액트는 단방향 데이터 바..

자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 모든 것들이 객체라고 한다 객치지향 프로그래밍은 사물이나 개념을 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다. 실체는 특징이나 성질을 나타내는 속성(property 또는 attribute)을 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있다. 사람은 이름, 주소 , 성별 , 나이, 신장 ,체중 등 다양한 속성을 갖고 이때 이름은 홍길동이고 성별은 남성이며 나이는 20세인 사람 과 같이 속성을 구체적으로 표현하며 특정한 사람을 다른 사람과 구별하여 인식할 수 있다. 사람에게는 다양한 속성이 있으나 구현하는 프로그래밍에서는 사람의 이름과 주소라는 속성에만 관심이 있다고 가정했을 때 다양한 속성 중에서 ..

리액트에서는 불필요한 렌더링을 막기 위해 데이터 값의 변경들을 한 번에 모아 한 번에 업데이트하는 방식 Batching update 방식이 있다고 한다 여러번 불필요한 리 렌더링이 많이 일어나게 되면 애플리케이션의 성능에 영향을 미칠 수 있기 때문에 이를 해결하기위해서 등장했다고 한다. React batch updating 위 사진에서 코드는 버튼을 클릭했을 시에 setPlusNum(plusNum + 1)을 총 3번 실행하므로 한 번의 버튼 클릭 시 plusNum이 +3이 되도록 구현을 해보았다. 하지만!! 콘솔 창과 화면에 보이는 현재에 plusNum은 한 번만 실행된 것처럼 1값만 즉 +1 단 한번만 실행된 것 처럼 나왔다. 이 결과로 리액트는 Batching update방식으로 중복되는 처리들을 한..

SPA vs MPA SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이다. MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다. MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다. 매번 전체 페이지가 다시 렌더링 된다. 반면 SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드한다. 그 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달받아서 페이지를 갱신한다. 그래서 SPA를 CSR(Client Side Rendering) 방식으로 렌더링한다고 말한다. 그래서 MPA를 SSR(Server Side Rend..

데이터 바인딩이란? 화면상에 보이는 데이터(View)와 브라우저에 있는 데이터(Model)를 묶어서 (Binding) 서로 간의 데이터 동기화를 의미합니다. 해당 값으 ㅣ데이터가 변경될 경우 다시 화면상에 그 변경된 값을 맞추어 주는 과정, 동작을 데이터 바인딩이라고 한다. 단방향 데이터 바인딩 Javascript(Model)에서 HTML(View)로 한 방향으로만 동기화하는 것을 이미 역으로 HTML (View)에서 JS(Model) 도의 직접적인 데이터 갱신은 불가능하다. 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 구조입니다. 양방향 데이터 바인딩 Javascript(Model)과 HTML(View) 사이에 View Model 이 존재하여 하나로 묶어서 (Binding) 둘 중 하나만 반영..

브라우저는 화면을 그리기 위해서 DOM(Document Object Model)이라는 개념을 사용합니다. DOM(Document Object Model)은 브라우저 렌더링 엔진의 HTML parser에 의해 생성된 '트리' 구조의 Node 객체 모델이며 DOM은 HTML 파일 내용을 토대로 만들어지는데, JavaScript와 같은 스크립팅 언어로 수정할 수 있도록 만들어진, 웹 페이지의 객체 지향 표현입니다. DOM은 브라우저가 화면을 그리기 위해서 필요한 정보가 트리 형태로 저장된 데이터입니다. React에서 사용하는 가상 DOM도 실제 DOM 내용에 기반하여 만들어집니다. 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업은 무겁기 때문입니다. 그래서 ..