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

html로 만들어진 회사 홈페이지를 직접 수정하다가 보니 vanilajs에서 getAttribute를 사용해야 되는경우가 있어서mdn을검색해봤는데 아래와 같은 설명이 나와있었다. 도통 무슨말인지 모르겠어서 간단히 직접 실험을 해봤다. 실험 결과를 밑의 스크린샷을 참고하면된다. Element.getAttribute() 요약 getAttribute() 은 해당 요소에 지정된 값을 반환 합니다. 만약 주어진 속성이 존재 하지 않는 다면, null 값이나 ""(빈문자열); 을 반환 할 것입니다. 자세한 사항은 Notes 참조 하십시오. 문법 var attribute = element.getAttribute(attributeName); attribute는 attributeName의 값을 가지고 있는 문자열입니다...

Thunk는 특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미한다. 리덕스에서 비동기처리를 위해 Redux Thunk를 공부하다가 Redux-Thunk의 핵심 함수인 다음과 같은 함수를 만났다. 이해가 잘 되지 않아서 차근차근 살펴보았다. 이해가 잘 되지 않아서 내 나름내로 아래와 같이 이해를 해봤다(문법적으로틀림) const addOneThunk = x => return(const fn = ()=>addOne(x)) 즉 const AddOneThunk = x=> return값 이라는 함수가 있을 때, 이 함수의 리턴 값으로 무기명함수(fn으로 표시함)이 들어있는것이다. 이를 문법에 맞게 표현하면 위와 같다. 그렇다면 이렇게 복잡한 함수를 왜 쓰는걸까? 결국 이는 콜백함수의 형태..

이 둘은 자바스크립트 모듈화를 할 때 사용되는 녀석이다. express로 코딩을하다가 오른쪽 그림과 같이 export는 안되는데 default export는 가능해서 이 둘의 차이를 알아보고자 포스트를 작성한다 먼저 MDN의 정의는 다음과 같다. export export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있습니다. 구문 // 하나씩 내보내기 export let name1, name2, …, nameN; // var, const도 동일 export let name1 = …, name2 = …, …, nameN; // var, const도 동일 export function functionNam..

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

콜백함수란? 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. 콜백 함수는 다른 함수에 인자로서 건네지는 함수로, 외부 함수에서 어떤 처리나 액션을 수행한다.(인자 내부에 함수를 넣어서 처리하거나 액션을 수행할 수도 있다. = 콜백 함수란, 함수 타입의 값을 파라미터로 넘겨줘서, 파라미터로 받은 함수를 특정 작업이 끝나고 호출을 해주는 것을 의미합니다 특징: 다른 코드의 인자로 넘겨줌으로써 제어권 또한 위임 즉, 콜백 ..

우리가 원하는 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'] // ..

배열 or 객체를 풀어서 다시 합치는것이 가능하다 card 객체를 받아온 뒤 spread 문법을 사용하여 key와 value쌍을 추가한 card객체를 updateCard의 콜백인자로 전달하여 상위 컴포넌트로 state까지 전달하여 렌더링하는 로직 []를 사용하지 않으면 event.currentTarget.name : value쌍이 추가된다 (event.currentTarget.name의 (name, company, title와 같은) 값이 들어가는게 아니라 변수명으로 그대로 들어감) 아래와 같은 응용도 가능 key와 함께 value를 즉석 에서 추가가능하다 const cards = { '1':{id:'1', name:'eel'}, '2':{id:'2', name:'ddde'} } console.log(c..