자기계발 캠퍼스

데이터 타입 data type은 값의 종류를 말한다. 자바스크립트에는 총 7개의 데이터 타입이 있다. 먼저 크게 원시 타입과 객체 타입으로 구분된다. 원시타입 숫자 타입 number 숫자, 정수와 실수 구분 없음 문자열 타입 string 문자열 불리언 타입 boolean 논리적 참 true와 거짓 false undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용 심벌 타입 symbol ES6에서 추가된 7번째 타입 객체 타입 객체, 함수, 배열 등 1과 '1'은 값은 비슷해보이지만 전혀 다르다. 숫자 타입과 문자열 타입은 값을 생성한 목적과 용도가 다르다. 숫자 타입은 주로 산술 연산을 위해 생성하지만 문자열 타입은 주로 텍..

개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것이다. 이번 장에서는 앞으로 자주 사용할 용어의 의미를 주의 깊게 살펴보자. 처음 살펴볼 내용은 값 value 이다. 값은 식(표현식 expression)이 평가 evaluate 되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 10 + 20 //30 위의 식은 평가되어 30이라는 결과값을 생성한다. 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있는데 이는 6장에서 살펴보자. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 그 자체 또는 메모리 공간을 식별하기 위해 붙인 이름이다. 따라서 변수에..

사람은 계산과 기억을 모두 두뇌에서 하지만, 컴퓨터는 연산과 기억을 수행하는 부품이 나눠져 있다. 컴퓨터는 CPU를 사용해 연산하고, 메모리르 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 셀 하나의 크기는 1바이트이며, 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어들인다. 그리고 각 셀은 고유의 메모리 주소를 갖는다. 이 메모리 주소는 메모리 공간의 위치를 나타내며 0부터 시작해서 메모리의 크기만큼 정수로 표현된다. 예를 들어, 4GB 메모리는 0부터 (2의 32승-1) 까지의 메모리 주소를 갖는다. 컴퓨터는 모든 데이터를 2진수로 처리한다. 따라서 메모리에 저장되는 데이터는 데이터의 종류와 상관없이 모두 2진수로 저장된다. 10 + 20 이런 코드가 있다면 1..

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 브라우저 뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있다. 따라서 자바스크립트는 브라우저 또는 Node.js에서 실행할 수 있다. 하지만 브라우저와 Node.js는 용도가 다르다. 브라우저는 웹페이즈를 브라우저 화면에 렌더링하는 것이 주된 목적이지만 Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다. 따라서 둘다 ECMAScript를 실행할 수 있지만 브라우저와 Node.js에서 ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다. 예를 들어 파싱된 HTML element를 선택하거나 조작하는 기능은 DOM API는 브라우저는 활용가능하지만 Node..

1995년 웹 브라우저 시장을 지배하고 있던 넷스케이프는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정. 브랜던 아이크가 자바스크립트를 개발함. 자바스크립트가 다른 브라우저와는 완벽히 호환되지 못하고 브라우저에 따라 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다. 따라서 모든 브라우저에서 정상 동작하는 표준화된 자바스크립가 필요했고 ECMA International이 표준화된 자바스크립트인 ECMAScript를 공개했다. 계속해서 새로운 기능이 추가되고 있고 지금 ES11(ECMAScript 2020)까지 나온 상황이다. 초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다. 브라우저는 서버로부..

프로그래밍을 한다고 할 때 그 기저에는 반드시 사용하는 언어에 대한 기본 개념과 동작 원리의 이해가 있어야 한다. 시행착오를 많이 겪어봐야 한다. 동작원리 -> 코딩 스킬 -> 프로젝트 -> 동작원리 .... 동작원리를 이해하는 것은 코딩 스킬과도 연결 되고 이를 통해 프로젝트를 진행할 때 동작원리를 정확히 이해하고 있어야한다. 세 개가 삼박자로 계속해서 잘 맞아떨어져야 한다. "빨리 가는 유일한 방법은 제대로 가는 것이다" 프로그래밍을 왜 필요한가? -> 문제를 해결하기 위해서 문제를 어떻게 해결할 건데? -> 복잡한 문제는 단순하게 분해하고 사용하는 자료구조들을 정리 및 구분을 하면 된다. 언어의 종류 - 컴파일러 언어, 인터프리터 언어 사람 ------------- 컴파일러 or 인터프리터 ----..

React를 활용해서 Form을 만들어본다. 간단하게 이름과 이메일을 받아서 submit하는 form이다. 체크할 부분 -이름 빈칸인지 아닌지 확인 -이메일은 @가 들어갔는 확인 -클릭하고 넘어갈 때도 이름과 이메일 조건 맞는지 확인 import useValidate from "../hooks/use-validate"; 먼저 useValidate라는 custom hook을 만들어준다. return { inputValue, onChangeHandler, onBlurHandler, isValid, className, reset, }; 이 훅에 포함될 것은 위와 같다.. onBlur이 뭐냐면 처음에 input 박스 클릭하면 focus가 되는데 이 focus가 풀리면 Blur라고 한다. input 입력하다가 다..

내가 통상 쓰던 async는 then과 catch를 결합하여 좀 길긴 하지만 한 줄로 끝내는 방식 then과 catch를 활용하는 방법 외에 다른 방법으로 async를 활용하는 방법을 배워서 이렇게 정리해봄. try { nonExistentFunction(); } catch (error) { console.error(error); // expected output: ReferenceError: nonExistentFunction is not defined // Note - error messages will vary depending on browser } 기본적인 형식은 이러함 사실 거의 똑같음 then 대신 try catch는 그래도 이런 느낌 const func = async () => { try ..

처음 보는 useReducer라는 훅이다. 당연히 공부할 때 공식 문서는 국룰이다. 강의를 들으면서 살짝 응용을 해보긴 했는데 공식문서에 나와있는 예시가 더 이해가 쉬운 듯하다. 오늘 처음 배워서 일단 쉬운 걸로 매커니즘을 이해하는 것이 우선이라고 생각한다. 일단 useReducer는 useState가 너무 많아지거나 복잡해질 때 이를 효과적으로 활용하기 위해 등장했다. 그래서 useState와 구조가 크게 다르지 않다. 위의 구조로 되어있다. useState에서 [원하는 변수, 변수조작함수]=useState(초기상태) 거기에 조금 더 추가된 것들이 있다. 앞에 구조는 똑같고 뒤에 reducer라는 애가 init라는 애가 새로 생겼다. 먼저 reducer가 어떻게 작동하는지 보자. 흔한 예시다. 버튼을 ..

useEffect는 예전에도 배웠었지만 기억이 조금 희미한 관계로 다시 정리해보려 한다. useState와 마찬가지로 정말 중요한 훅이라고 생각하기 때문. 일단 useEffect 공식문서 먼저 보자. useEffect를 알아보기 전에 effect라는 게 뭔지 알아보자. side effect나 effect라 불리는 녀석은 눈에 보이지 않는 행동들을 의미한다고 보면 된다. 예를 들어 데이터를 fetch하거나 구독을 설정하거나 리액트 컴포넌트의 DOM을 수정하는 것을 의미한다. 구독 설정 보이는데요? 그거는 데이터에 따라서 ui가 바뀌게 만들어놓은거고 멍충아 이제 아래 예시를 보자. useState처럼 리액트에서 그냥 불러오면 되고 useEffect 안에 저런 함수가 있다. useEffect 안에 있는 함수는..