자바스크립트의 데이터 타입은 총 8가지를 가진다. (ES11 에서 새로운 원시값 BigInt 가 추가되었다. 기존 숫자값의 최대치보다 더 큰 숫자를 표현할때 사용된다.) 구분 데이터타입 설명 원시 타입 숫자 타입(number) 숫자, 정수와 실수 구분 없이 하나의 숫자 타입 문자 타입(string) 문자열 불리언 타입(boolean) 논리적 참(true)과 거짓(false) undefined var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌 타입 ES6에서 추가된 7번째 타입 bigint 타입 ES11에서 추가된 8번째 타입 객체 타입 객체, 함수, 배열 등 6-1. 숫자타입 자바스크립트는 독특하게 하나의 숫자 타입만 존재한다. 모든 ..
5-1. 값 값(value)은 표현식(expression) 이 평가(evaluate)되어 생성된 결과를 말한다. 표현식이 평가된다? 표현이 생소하다. 우선 평가가 된다는 표현으로 보아 누군가에 의해 행해짐을 알 수 있고, 그로 인한 결과물을 값이라 표현하는 것으로 해석할 수 있겠다. 표현식은 무엇인가? 식이라 하면 수학시간에 배웠단 연산식이 예시로 떠오른다. 그렇다면 연산식이 누군가에 의해 평가 되어 해석된 결과를 값이라고 판단한다면, 이를 자바스크립트에 적용해보면 될듯 싶다. 10 + 20; // 30 10 + 20 이라는 표현식(소스코드) 를 자바스크립트가 평가 하여 그 결과인 30을 생성한다. 이때 30이 값이다. 모든 값은 데이터 타입을 가지며, 메모리에 2진수 비트의 나열로 저장된다. 뭐 010..
이 포스트는 [모던 자바스크립트 Deep Dive] 서적을 기반으로 정리한 글입니다. 다시 한번 돌아가서, 조금 급한 마음으로 학습을 진행하고, 프로젝트를 진행하느라 예전에 공부했었던 자바스크립트가 가물가물하다. 사실 뭐 얼마나 지났다고 벌써부터 이런건지 당황스럽지만, 인간은 망각의 동물이 아니던가? 체념하고 다시 더 깊숙히 공부를 해보자. 마침 좋은 책이 있어서 이 책을 기반으로 정리하는 식으로 글을 작성해보려 한다. 조금은 간략하게 작성할 수 있겠지만, 추가할 내용이 있으면 추가하고 사실 이 책 하나만 제대로 파고 공부해도, 충분히 자바스크립트에 대하여 다질 수 있을 것이라 생각하여 매일같이 공부를 해보고자 한다. 분량이 많은 편이기에, 길게 잡고 공부를 이어가보자. 4-1. 변수란 무엇인가? 간단한..
매번 다시 리뷰한다고 하면서도 안하고 있는 내모습... 2차 프로젝트에서는 1차와 달리 전체적인 컴포넌트들의 연결들을 담당했던 것을 제외하자면(라우팅 등) 크게 Nav 부분과 더불어 검색 부분의 Filter 를 담당했었다. 사실 원래는 검색 상세페이지를 담당하는 쪽으로 가고있었다가, filter 부분을 담당할 사람이 딱히 정해지지 않아서, 검색과도 연관이 깊은 부분이니 조원들에게 같이 담당을 하겠다고 얘기를 했었다. 스프린트 계획대로라면, filter 를 마무리하고 마지막으로 예약페이지 혹은 마이페이지를 작성하려고 하였으나, 2주라는 프로젝트 시간관계상 벅찬것도 사실이었고, 무엇보다도 나 자신이 생각했던 것보다 Filter 컴포넌트를 구현하는 데 애를 먹었던 기억이 난다. 당시에 뭔가 정리도 잘 안되는것..
클라이언트 사이드 렌더링과 서버 사이드 렌더링의 장점을 모두 가져오기 위해, 앞서서 Next.js 라는 프레임워크를 이용할 수 있다고 설명했었다. 다만 한번도 세팅을 해본적은 없어서, 공식문서 상 learn more 부분을 참고하여 초기 세팅을 해봤고, 간략하게 설명을 해보고자 한다. 시작하기.. 프레임워크인 Next.js 는 프레임워크인 만큼 첫 세팅때부터 말그대로 하라는 데로 잘 따라서 사용을 하면 된다. Next.js 가 가지고 있는 장점은 많은데, 리엑트보다도 좀 더 직관적인 페이지 기반 라우팅 CSR, SSR, SSG 페이지 단위로 지원 더 빠른 페이지 로드를 위한 자동 코드 분할 prefetch 를 통한 Client-side routing 대부분의 CSS-in-JS 라이브러리 구현 가능 등등 ..
많이 듣던 단어인데.. 자바스크립트를 처음 공부하고 있을 때, 남들이 리엑트를 쓴다고 하고 또 리엑트를 활용하면 좀 더 쉽게 화면단을 그릴 수 있다고 해서 약간 조급한 마음으로 자바스크립트를 공부했던 기억이 난다. 당시에 리엑트에 대해서 잘 몰랐으니, 사람들이 왜 리엑트를 사용하는지 잘 알 수 없었고, 그냥 전세계 사람들이 가장 많이 사용하는 라이브러리 라는 정보만을 가지고 있었다. 무엇인가 편리한 것이 있게지 싶어 넘어갔었을 때, 이해도 못하고 넘어갔었던 부분이 바로 SPA이다. 물론 지금도 완전히 이해한것은 아니니, 다시 돌아보는 지금 시점에서 한번 더 알아가보자 라는 마음으로 블로그를 작성해야겠다 마음먹었다. SPA(Single Page Application) 우선 왜 SPA 가 나오게 됬는지 파악..
그래서 난 무엇을 하고 싶은거지? 12개월 전, 퇴사를 하기 전 항상 물어보는 질문이었다. 호기롭게 이전 직장에서 뛰쳐나와 내 생각을 자유롭게 표현하는 직업을 찾고자 하였다. 겁이 많은 성격에 회사를 나오기 전에 무엇이라도 준비를 해야하지 않을까 인터넷과 서적을 뒤지고 찾아본저 어연 3개월이 넘어갔음에도, 마땅한 직업군을 찾지 못하고 있을 때 개발자라는 익숙하면서도 들려지는 소리가 많은 직업이 내 눈앞에도 아른거리기 시작했었다. 의식적으로 회피하고 있었던 직업이었다. 흥미와 직업은 다르며, 지금 내가 개발자로서 걸어가고자 선택하는것은 과연 나 스스로의 판단인가? 아니면 타고 들어온 외부의 판단일까? 답을 내릴 수 없었다. 그렇기에 어쩌면 앞으로 살아가고 싶은 방향을 제시해줄 수 있는 가능성이 큰 직업이었..
이제 하위 컴포넌트들을 관리하는 최상위 컴포넌트 Nav 를 정리해보자. 처음 Nav 를 설계할 때, 생각 이상으로 상위에서 props 로 전달해주어야 할 변수 및 함수가 많을 것이라 예상되었다. 그도 그럴 것이 실시간으로 조건에 맞는 Nav 를 랜더링 해야하며, 그 각각의 Nav에 대해 따른 모달 컴포넌트도 정상적으로 랜더링 되어야 하기 때문이며 또한 사용자가 편리하게 사용할 수 있도록 신경써야 하였기에 Nav 가 유기적으로 움직이기 위해 좀 더 체계적으로 설계했어야 했다. 이로 인해 Nav 의 코드는 직관적이지 않게 코드가 짜여졌다. import React, { useState, useRef, useEffect } from 'react'; import LoginModal from '../Modal/Lo..
