👩‍💻나의 서비스가 👨‍👩‍👦‍👦사용자를 대신해서 🌃google과 같은 서비스의 무언가를 이용하고 싶다면? 👩‍💻 내가 만든 서비스 👨‍👩‍👦‍👦 내가 만든 서비스를 사용하는 사용자 🌃 내가 만든 서비스가 * 연동하려고 하는 서비스*(googl

기능 변경에 따른 코드변경 소프트웨어는 지속적으로 변경되고 있다. 그리고, 자주 변경되는 소프트웨어를 살펴보면 아래와 같은 경우가 있을 것이다. 기존의 코드가 바뀐다 기존의 것이 사라진다 삭제된다 이 중에서도, 가장 빈번히 일어나는 것은 새로운 기능 추가일 것이다.

개발자는 항상 무엇을 만든다. 그렇다면 어떻게 만들어야 할까?만들다보면 더 잘 만들고 싶고, 기능들을 더 추가하고 싶고, 제공하고 싶고... 분명 욕심이 나는게 사실이다.이런 욕심들을 채우기 위해 많은 것들을 담으려고 노력하면...? 안된다! 어떤 제품을 만들 때는 그

문제가 많은 DOM API? 웹 어플리케이션에 있어서 가장 많은 문제를 일으키는 요소는 DOM이라고 하는 API라고 할 수 있다. DOM API라고 하는 것은 html문서를 브라우저가 rendering하기 위해서, 그리고 그 안의 많은 것들을 작동 시키기 위해서 가

변한다!대부분의 소프트웨어는 현실의 문제를 해결하기 위한 솔루션으로 만들어진다.여기서의 현실은? 매번 변하게 된다!당연히 현실의 문제가 바뀌니까, 현실의 문제를 해결하는 소프트웨어도 바뀌어야 한다!그래서! 소프트웨어는 굉장히 자주 , 그리고 지속적으로 바뀌게 된다.당연

Git-book을 읽고 목차별 내용 정리를 통한 학습을 10주간 스터디를 시작한당 !\_! 😺개발자 협업에서 git은 필수라고 생각한다. 지금도 코드를 올리는 데는 사용은 하고 있지만, git에 대한 자세한 내용과 사용법은 모르고 있었다. 협업 시에도 무리없이 잘 사

📱접속 후 채팅해서 server가 메시지를 받은 뒤,메시지를 각 사용자들에게 보내는 방식의 채팅 앱 만들기~!📲 서버 생성은 처음이다! 서버단이 어떻게 돌아가는지 아주 간단하겠지만 알아보는 과정을 살펴보기 위해 앱을 만드는 시간을 가져봤다. (아주 일부분이겠지만..

javascript의 application들이지 react의 application이 아니다!redux는 react와 별개이다.redux는 angular, vue.js, (프레임워크 없는)vanilla.js 에서도 쓸 수 있다.redux는 react에 의존하는 라이브러리

React Custom Hook (useTabs)을 만들던 도중 위와 같은 에러를 만났다..! > 에러 코드 이 준수해야 할 두가지 규칙 1) 최상위(at the Top Level)에서만 을 호출해야 한다. 반복문, 조건문 혹은 중첩된 함수 내에서 을 호출 하면 안된다. 대신 이 실행되기 전에 항상 함수의 최상위(at the top level)에서...

Context API

컴포넌트를 만들다보면, 종종 반복되는 로직들이 발생한다.\-> ex) input 을 관리하는 코드는 자주 작성할 수 있는 코드이다. \-> input을 관리하려면 e.target 안에 들어 있는 name값이랑value를 읽어서 참조해서 어떤 새로운 상태를 설정해야 함

이전에 컴포넌트 상태를 업데이트 할 때에는 useState사용해서 새로운 상태를 설정했다.useState말고, useReducer라는 Hook을 사용해서 상태를 업데이트 할 수 있다.useState\->설정하고 싶은 다음상태를 직접 지정해주는 방식으로 상태를 업데이트.

컴포넌트에서 리렌더링 불 필요할 때 이전에 렌더링 했던 결과를 재사용 할 수 있게 하는 방법.\-> React.memo 함수 사용하면 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있다.컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능

useMemo 와 비슷한 HookuseMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용.App.js에서 onCreate, onRemove, onToggle\-> 위 함수들은 컴포넌트

리엑트에서 컴포넌트 생김새를 정의할 때 사용하는 문법.얼핏 보면 html처럼 생겼지만, 사실은 javascript이다.\-> babel이라는 도구를 사용해서 xml형태의 코드가 javascript로 변환된다.1\. 태그는 열었으면 꼭 닫혀 있어야함.\-> Self cl

성능 최적화를 위하여 이 전에 연산된 값을 useMemo라는 Hook 을 사용하여 재사용.성능을 최적화 해야 하는 상황에서 사용.특정 값이 바꼈을때만 특정 함수 실행해서 연산을 하도록 처리.원하는 값이 바뀌지 않았다면, 리렌더링할 때 예전에 만들어 놨던 값을 재사용할

useEffect 라는 Hook 을 사용하면!만든 컴포넌트가 마운트 됐을 때 (처음 나타났을 때)언마운트 됐을 때 (사라질 때, 삭제될 때) 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리할 수 있다.📍첫 번째 파라미터 : 함수 등록두 번째 파라미터

html과 js를 사용할 때는 특정DOM선택해야 하는 상황에 document.getElementbyId() querySelector() 같은 DOM selector을 사용해서 선택함.react를 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야 하는 상황 발생할 수

React 16.8 이전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다.그러나 React 16.8에서 hooks 라는 기능도입으로 인해 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다~!리엑트에서 useState라는 함수 불러오는 것.useState 사용해서

공을 그릴때는 항상 중심점을 기준으로 공에 x , y 값을 잡는다. => 중심점이 공의 실제 위치 (회색 점)반지름이 굉장히 중요!반지름을 x, y 값에다가 + , - 해줘야 실제로 공이 브라우저에 닿았는지 알 수 있음.그래서 공에 x , y값을 비교하는 것이 아니