어제보다 더 나은 오늘

지난 포스팅에 이어 컴퓨터가 사칙연산을 하는 법을 찾아보았다. 예상했던 대로 컴퓨터가 하는 연산의 기본은 덧셈이다. 뺄셈은 음수를 더하는 방식으로 계산한다. 다시 말해 컴퓨터가 4-2를 수행하는 과정은 4+(-2)를 연산하는 것이다. 컴퓨터에게 음수를 알려주는 방식으로는 최상위 비트(가장 왼쪽의 비트)를 이용해 최상위 비트가 0일 때는 양수, 1일 때는 음수라고 약속하면 된다. (이 방법으로 연산한 경우 overflow - 서로 부호가 다른 정수의 덧셈, 뺄셈 연산에서 발생 가능 - 가 생길 수 있다고 하는데 여기까지는 파고들지 않기로 한다...) 곱셈은 덧셈을 반복 수행하면 되고, 나눗셈은 곱셈과 달리 나머지라는 것을 처리해줘야 하고, 0으로 나눌 수 없다는 예외가 있기에 곱셉만큼 간단하지는 않다. 일..

상태 변경 함수(setState)를 써서 상태 갱신을 할 때 데이터 확인을 위해 아래 예시 코드의 6번 라인과 같이 console.log(state)를 해보면 다음과 같이 실제 입력값보다 한 개씩 밀려서 출력이 되는 걸 알 수 있다. const [username, setUsername] = useState(""); const handleChangeUser = (event) => { setUsername(event.target.value); console.log(username); }; return ( // ... // ... ) 이는 setState 함수가 이벤트 핸들러 내에서 비동기적으로 작동하기 때문이다. 이게 무슨 뜻일까? 위의 문장을 이해하려면 React가 상태 업데이트를 실시간으로 처리하는 것이..

우리의 친구, 우리의 벗 console.log()...! console.log()로 데이터가 잘 들어왔는지, 혹은 생성됐는지 확인하는 용도로 쓴다. 그리고 console.dir()로는 객체를 보다 생생하게 볼 수 있다. stack overflow에 따르면 기본적으로 console.log()와 console.dir()의 역할은 다음과 같다. 1. console.log() : 인자를 string으로 찍어준다. 2. console.dir() : 탐색할 수 있는 트리(navigable tree)를 보여준다. 3. console.table() : 테이블 형태로 자료를 보여주고, 탐색할 수 있는 트리를 그 아래에 출력한다. 먼저 console.log()와 console.dir()의 차이점을 살펴보자. 스택오버플로우..

함수 선언식이나 표현식에 비해 간결한 문법으로 사용할 수 있기 때문에 특히 콜백 함수가 들어갈 argument 자리에 화살표 함수를 쓰는 경우가 많다. 그래서 map(), reduce() 등 배열 내장 메소드와 함께 자주 쓰게 된다. const arr = [1, 4, 9, 16] const newArr = arr.map(x => x * 2) console.log(newArr) // [2, 8, 18, 32] 위의 예제에서 두 번째 줄 .map() 부분을 좀 더 살펴보면 다음과 같다. 중괄호를 제거하고 return 키워드를 빼고 간편하게 적을 수 있다. const newArr = arr.map(x => x * 2) // 아래는 위의 코드와 동일한 코드이다. const newArr = arr.map(x =>..

부트캠프 코스 중에서 기술면접 대비 세션이 있었다. 이제까지 한 달 동안 배운 html, css, javascript, dom 관련 주제 중에서 면접에 나올 만한 예상 질문 리스트를 추려서 주고, 그 중에 일부를 선택해서 모의 면접을 보는 식으로 진행되는 세션이었다. 💡 기술 면접 Tip : 결론은 간명하게, 설명과 사례는 구체적으로 css의 box model, 자바스크립트의 스코프, 클로저, 원시자료형과 참조자료형의 차이 등은 충분히 예상 가능한 질문이었지만 요소는 왜 요소의 자식 요소여야만 할까? 라는 질문은 이제껏 너무 당연하게 마크업을 해오면서 한 번도 생각해 보지 못한 질문이었다. 일단 html 파일을 하나 생성해서 브라우저에 띄워보기로 했다. item1 item2 item3 item4 요소로 ..

children과 childNodes는 자바스크립트에서 특정 요소의 자식 요소/노드에 대해서 접근할 수 있게 해주는 프로퍼티다. 이 둘의 차이는 무엇일까? 그러려면 일단 요소와 노드의 차이부터 알아야겠다. 결론부터 얘기하자면 node는 element(요소)의 상위 개념이다. DOM 트리구조의 모든 것이 다 node이고, 그 중 element는 html 문서에서 , , , , 등과 같은 태그를 사용해서 작성된 노드이다. 늘 그렇듯 말로 푸는 설명이 더 어렵기 때문에 바로 예제를 살펴보자. menu menu menu photo news-picture news-title news-description footer 이 중에서 id가 nav인 태그를 가져와 해당 요소의 children과 childNodes를 살펴..

자바스크립트의 배열은 수많은 내장 메소드가 있는데, 그 중 강력한 메소드 중에 하나로 데이터 핸들링 시 자주 쓰인다는 reduce 메소드. 하지만 array.reduce()는 mdn을 읽어봐도 당최 무슨 말인지 모르겠고, 강력한 거 다 좋은데 그래서 언제 어떻게 왜 쓰는건데! 라는 답답함을 안고 지내다가 며칠 전 유투브 ZeroCho TV 채널의 자바스크립트 강좌를 보다가 광명을 찾았다. 구문: array.reduce((누적값, 현재값) => (다음 누적값 표현식), 초기값) 구문을 봐도 무슨 말인지 모르겠는 게 당연하다. 바로 예제를 보자. [1, 2, 3, 4].reduce((a, c) => (a + c), 0) // a (accumulator) : 누산기 // c (currentValue) : 현재..

오늘의 주제는 변수에 원시자료형(number, string, boolean, undefined, null)을 담을 때와 참조자료형(객체, 배열, 함수)을 담을 때 데이터를 저장하는 공간(메모리)에서는 어떤 일이 일어나는지를 두 자료형의 차이점을 중심으로 살펴보고자 한다. 우리가 프로그램을 짜는 이유는 데이터를 내가 원하는 방식으로 처리, 가공하여 재생산하고자 함이 크다. 그렇기 때문에 이런 데이터 핸들링을 원활하게 하기 위해서는 데이터를 저장해 두고 필요한 때에 꺼내 쓸 수 있어야 한다. 컴퓨터에서 데이터를 저장하는 공간이 바로 우리가 아는 '메모리'이다. 우리는 메모리에 데이터를 저장해두고 원할 때에 해당 데이터를 꺼내와서 그 데이터를 읽기도 하고 수정하기도 하고 삭제하기도 한다. 이러한 과정을 쉽게 ..

배열과 객체가 담고 있는 데이터에 접근하거나 조작(수정, 삭제 등등)을 해주기 위해 배열과 객체를 순회해야 하는 경우가 빈번하게 발생한다. 배열 순회하는 방법 for loop forEach 메소드 for of : element 접근 for in : index 접근 while 객체 순회하는 방법 for in : key 접근 Object.keys() : 객체의 keyName을 배열로 받아오기 때문에 이 배열을 활용해 객체를 순회 (또는 Object.values() 도 쓸 수 있지만 key를 받아오면 어차피 obejct[key]로 value에 접근 가능하기 때문에 굳이...?) 시작점이나 종료 지점을 지정할 수 있는 for loop를 객체를 순회할 때는 쓸 수 없기 때문에 사실상 선택지가 for in 하나 밖..

자바스크립트에서 함수를 정의하는 방법은 총 세 가지가 있다. 함수 선언식 function declaration 함수 표현식 function expression 화살표 함수 arrow function 화살표 함수는 간편하게 쓸 수 있는 모양새부터 다른 두 함수 정의 방식과 아주 다르고, 함수 내부에서 this가 생성되지 않는 등 나머지 두 가지 함수 정의 방법과 다른 부분을 알겠지만, 반면 선언식과 표현식은 생김새가 너무 유사해서 대체 무슨 차이가 있어서 이 둘을 구분하는 건지 궁금했다. syntax의 미세한 차이 말고 기능적 차이가 분명 있을텐데. 그렇지 않고서야 굳이 함수를 정의하는 방법을 따로 두 가지를 만들어 놓을 이유가 없을 테니 말이다. 함수 선언식 syntax: function foo (arg..