노인과바다의 개발로그 노인과바다의 개발로그

프로미스와 어씽크를 알기 위해선 동기와 비동기 콜백의 개념부터 알아야 한다. 동기코드: 순차적으로 실행 되는 코드. 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다. 쉬운버전: 요청과 결과가 동시에 일어남. 결과를 볼 때 까지 기다려야함. 비동기코드: 비동기식 처리 모델(Asynchronous processing model 또는 Non-Blocking processing model)은 병렬적으로 태스크를 수행한다. 즉, 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행한다. 쉬운버전: 요청과 결과가 일어나는 것이 시간차가 있음. 결..

Routing이란? 어떤 URL에서 어떤 화면을 보여줄 것 인가를 정하는 것 Connect the URL URL을 연결 시킨 뒤에 (모든 라우터 컴포넌트는 BrowserRouter 하위에 있어야 한다) First things first, we want to connect your app to the browser's URL: import BrowserRouter and render it around your whole app. , Add Some Routes 자 이제 이 되어있으므로 URL에 /를 입력하면 컴포넌트로 화면 전환이 일어난다 Add Some Links nav li ul 의 패턴에서 a href와 같은 역할. 사용법은 아래와 같다. to 뒤에 이동한 url을 넣어주면 된다. 자 이제 works..

사실 create-react-app으로 하면 거기에 웹팩과 다양한 설정들이 이미 들어가있어서 우리가 직접 세팅할 필요는 없지만,,, 다양한 설정을 위해서는 웹팩에 기본정도는 알아야 할것 같아서 이를 간단하게 정리해봤다. Webpack이란 무엇인가? 여러 컴포넌트와 다양한 파일들을 묶어서 한 덩어리로 만들어 주는 모듈 번들러(Module bundler)이다. 하단의 이미지 왼쪽의 input과 같이 다양한 종류의 파일들을 묶는 번들링이라는 과정을 거쳐 아웃풋으로 오른쪽과 같은 파일을 만들어낸다. 예시) 다양한 파일들을 번들링하여 하나로 합쳐진 js파일 혹은 여러개로 나눠진 js파일을 만들수 있다. sass라고하는 css preprocessor를 통해서 만들어진 파일을 css로 변환 이미지를 최적화해서 새로운..

콜백함수란? MDN에선 다음과 같이 정의한다. A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. 콜백 함수는 다른 함수에 인자로서 건네지는 함수로, 외부 함수에서 어떤 처리나 액션을 수행한다.(인자 내부에 함수를 넣어서 처리하거나 액션을 수행할 수도 있다. = 콜백 함수란, 함수 타입의 값을 파라미터로 넘겨줘서, 파라미터로 받은 함수를 특정 작업이 끝나고 호출을 해주는 것을 의미합니다 특징: 다른 코드의 인자로 넘겨줌으로써 제어권 또한 위임 즉, 콜백 ..

key값이 잘못 전달 되었음을 의미. 주의할점이 여기서 말하는 key 값이 무엇인지 애매할 때가 있다는 것이다. stackoverflow 구글도해보고 에러메시지도 찬찬히 읽어보며 (cards와 form가 힌트) 추적해본결과.. (stackoverflow 고마워요ㅠㅜ) 이곳의 form이 문제였다. formRef를 console.log로 찍어보면 위와 같이 object타입으로 나온다. firebase의 내부가 어떤방식으로 돌아가는지는 모르겠으나 card 객체를 가져올 때 그 key 값(즉 에러메세지에서 말했던 key값이란 가져오는 객체의 key값을 의미하는 것이었다 ) 중에 object가 들어있어서 위와 같은 에러가 발생했다고 추측이 되어진다.. card_add_form.js 의 card내의 formRef를..

화면간 인자전달에 사용 기본 형식은 다음과 같다 navagate(이동할 url, 전달할 인자) url은 url이고, 여기서 말하는 전달할 인자가 무엇이냐? 여기로 prop같은것을 전달 할 수 있다는 말이다 만약 replace 기능이 필요하다면, navigate(to, { replace: true })의 형태로 사용할 수 있다. state를 사용한다면 navigate(to, { state }) 의 형태로도 가능. to는 에서 사용한 to=''와 동일한 내용.(가고자 하는 url을 넣으면 됨) 라우터 5. 버전에서의 useHistory의 기능 중 { go, goBack, goForward }는 각각 해당 위치로, 이전으로, 다음으로 의 역할을 수행해왔는데, 이 부분도 navigate로 통일하고 index를 ..

components flow : image_uploader.js->index.js-> image_file_input.js 해결방법: image_file_input.js의 ImageUploader를 imageUploader로 바꾸니 해결되었다. class에 있는 function을 호출 할 때 instance의 함수로 호출하지 않고 클래스의 함수를 바로 호출하여 생긴 에러인듯 하다. props로 ImageUploader의 instance를 전달하고있기 때문에 클래스에서 통으로 호출한것 부터 실수

우리가 원하는 card에 있는 아이디를 키로 이용하고 card자체 오브젝트를 밸류로 쓸 거에요 1. obj형태로 데이터 변경 2. cards는 이제 obj. map을 할 수 있는 상태로 만들어줘야함 Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다. // 단순 배열 const arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // console: ['0', '1', '2'] // 배열형 객체 const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.keys(obj)); // console: ['0', '1', '2'] // ..