꿈꾸는 개발자

사용 목적: component를 사용하지 않고 페이지 이동을 할 때 사용하는 Hook이다 const goBack = () => { // 이전 페이지로 이동 // -2를 넣을 경우 뒤로 두 번 이동을 한다! navigate(-1); }; const goArticles = () => { // articles 경로로 이동 navigate('/articles'); }; 이벤트 핸들러에 위 함수를 할당 할 경우 주석으로 처리된 기능으로 작동하게 된다! 사용법: Hook의 첫 번째 인자로 이동하기 원하는 path를 주는 것(두 번째(replace) 인자의 경우 optional) const goArticles = () => { navigate('/articles', { replace: true }); } replac..

리액트 16.8 이전에는 함수형 컴포넌트에서 상태 관리가 불가능했다 => react 16.8에서 Hooks이란 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리가 가능해졌다! (useState도 Hooks 중 하나!) 이벤트 설정: import React from 'react'; function Counter() { const onIncrease = () => { console.log('+1') } const onDecrease = () => { console.log('-1'); } return ( 0 +1 -1 ); } export default Counter; react에선 이벤트를 설정할 때 on이벤트이름={실행하고싶은함수} 형태로 사용해야 한다! => 단 함수호출이 아닌, 함수명만 입력을 해야 한..

버블링(bubbling) 정의: 버블링은 한 요소의 이벤트가 발생하면 해당 요소에 할당된 핸들러가 작동하고, 이어서 부모 요소의 핸들러가 동작하는 형식을 말한다. 해당 과정은 가장 최상단의 요소(document 객체)를 만날 때까지 반복된다. 위 사진에서 태그 영역을 클릭하게 되면 p 태그에 할당된 헨들러만 동작되는 것이 아닌, div, form에 있는 핸들러들까지 순차적으로 작동하게 된다! => 이처럼, p는 가된 element에서 가장 최상단 요소까지 핸들러가 동작하게 되는 것이다. 거의 모든 이벤트는 버블링 된다(즉 예외는 존재함!) => ex) focus이벤트는 버블링X Event.target event.targe로 이번트가 발생한 target요소에 접근 가능! event.target vs thi..

Upstream/Donwstream 단어 뜻 그대로 생각하면 상류와 하류이다. 이와 마찬가지로 물은 상류에서 하류로 흐듯이 pull하는 쪽이 downstream, pull 당하는 쪽이 upstream이라고 생각하면 된다. 즉 upstream과 downstream은 상대적인 개념이다! upstream과 origin 오픈소스에 기여하기 위해 fork하는 맥락에서 upstream과 origin을 파악해야 한다! => upstream과 donwstream은 항상 상대적인 개념이기 때문에=> fork에서도 상대의 remote repository와 나의 remote repository도 donwstream과 upstream의 관계가 형성된다! 다른 사람의 github 저장소를 fork한 경우 본인의 github이 ..

과제를 하면서 npm install을 진행했지만 밑과 같은 오류가 발생했다 https://sebhastian.com/npm-err-enoent/ How to solve npm ERR! enoent This is related to npm not being able to find a file Learn how to solve npm error code ENOENT: no such file or directory sebhastian.com 해결을 하기 위해 검색하던 중 위 사이트에서 npm start과 install에서 발생하는 code ENOENT 오류에 대한 해결을 참고 했다. 일단 npm start에서 오류가 발생할 경우 directory의 문제일 가능성이 높다 또는 start가 package에 잘못 ..

공통: 얕은 복사든 깊은 복사든 생성된 객체는 기존과 다른 별개의 객체이다! 복사에 대한 정의: 여기에서 복사란, 원시값처럼 새로운 값을 복사한다는 의미로 복사되지 않았다는 것은 곧 참조값이 넘어갔다는 의미로, 상호간의 영향을 줌을 의미한다. 얕은 복사(Shallow Copy): 객체에 중첩되어 있는 객체의 경우 참조값을 복사한다 객체 트리의 노드의 최말단을 복사하지 않는 방식 (따라서, 중첩 객체의 참조값을 복사한다고 한다!) const original = { num: 3, age: 24, arr: ["a", "b", "c"], }; const clone1 = { ...original }; //참고 spread문법은 iterable한 객체만 사용할 수 있다 original.num = 4; console..

생활코딩 영상 참고 await에 대한 이해: 그림에 나온 것처럼, 좌측에 있는 promise-then() 형식의 코드를 오른쪽처럼 단순화하기 위해서는 각 promise함수에 await란 keyword을 붙여야 한다=> 추가로, await은 function() 내에 사용돼야 하며, await을 포함하고 있는 function은 async란 keyword를 앞에 추가해야 한다! run()함수를 호출하면 왼쪽과 오른쪽 코드는 완전히 똑같은 동작을 하게 된다! await/async를 사용하지 않은 코드: function timer(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(time); }, time); }); } con..

생활코딩 영상 참고-(1)-then(),catch(),: -fetch api를 사용한다(Ajax에 대한 추가적인 내용의 학습이 필요해 보인다!) 해당 사이트의 post에 각각의 글들을 json이란 데이터 타입으로 만든? url을 획득하는 것이다? 아무튼 url을 통해 서버에 통신하는 것처럼 json 데이터를 fetch할 수 있음! https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2022, serving ~1...