Tech 99

[Javascript] 스코프(scope)

스코프(scope)란? 식별자의 유효 범위를 뜻하며, 선언된 위치에 따라 유효 범위가 달라진다. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 갖는다. 전역 변수는 어디에서든지 참조가 가능한 값이다. 반면, 지역 변수는 함수 몸체 내부를 말한다. 따라서 지역 변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효하다. 블록 레벨 스코프 자바스크립트에서 모든 코드 블록(ex. 함수, if, for, while, try/catch 문 등)을 지역 스코프로 인정하는데, 이를 블록 레벨 스코프라고 한다. 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 함수 레벨 스코프 var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지..

Tech/Javascript 2022.03.30

[Javascript] 변수와 호이스팅(Variable and Hositing)

변수란? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙여진 이름을 말한다. 즉, 변수란 값의 위치를 가리키는 상징적인 이름을 말한다. var foo = 135; console.log(foo) // 135 변수명(식별자)인 foo는 변수의 값이 아닌 메모리 주소를 기억하고 있고, 변수명을 사용하게 되면 자바스크립트 엔진이 변수명과 맵핑된 메모리 주소를 통해 value 값을 반환한다. 아래의 예제를 살펴보자. console.log(foo); // ① undefined var foo = 135; console.log(foo); // ② 135 { var foo = 246; } console.log(foo); // ③ 246 var 키워드를 사용하여 선언한 변수는..

Tech/Javascript 2022.03.30

[React] React-icons (The code generator has deoptimised - index.esm.js as it exceeds the max of 500kb) 이슈 해결하기

react 개발을 진행하면서 webpack에서 빌드를 할 때, 계속 아래와 같은 오류가 발생해서 이를 해결해보고자 했다. 오류에 따르면 뭔가 최적화가 안되고 있고, react-icon 주에서 fa와 md에서 최대 값인 500kb를 초과하고 있다는 내용이었다. [BABEL] Note: The code generator has deoptimised the styling of .. react-icons/fa/index.esm.js as it exceeds the max of 500KB. [BABEL] Note: The code generator has deoptimised the styling of .. react-icons/md/index.esm.js as it exceeds the max of 500KB...

Tech/React 2022.03.17

[Javascript] 옵셔널 체이닝 (Optional Chaining)을 사용해보자

Optional chaining 이 필요한 이유? 옵셔널 체이닝은 왜 필요한 것일까? 일단 옵셔널 체이닝(optional chaining)?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다고 한다. 에러 없이 안전하게 접근한다? 음.. 어떤 부분에 대해서 안전할까에 대해서 한번 천천히 생각해보도록 하자. 만약, data라는 배열을 받아와서 핸들링한 후 리턴하는 예시가 있다고 해보자. 코드의 결과는 당연히 undefined가 나올 것이다. 왜 undefined가 나올까? 그것은 data가 아직 도착하지 않았는데 map 함수가 실행되었기 때문이다. map 함수 입장에서는 data가 뭔지 모르겠으니까 data를 undefined 취급해줄 수밖에 없는 것이다. const examp..

Tech/Javascript 2022.03.16

[Tech] CORS (Cross-origin Resource Sharing) 정책

CORS? 개발을 하다 보면 쉽게 접하게 되는 CORS에 대해서 한번 정리해보고자 한다. 그렇다면 먼저 CORS란 무엇일까? CORS는 Cross-Origin Resource Sharing의 줄임말로, 직역하면 교차 출처 리소스 공유이다. 교차 출처 리소스 공유라는 말은 쉽게 와닿지 않는다. 쉽게 말해, 내가 가지고 있는 모자를 친구가 빌린다고 했을 때, 내가 알겠다고 하는 느낌으로 생각하면 될 것 같다. 그렇다면, 출처(Origin)란 무엇일까? 서버의 위치를 뜻하는 URL들은 여러 개의 구성 요소로 이루어져 있는데, 이중에 sheme(protocol), host(domain), port로 구성되어있는 것이 출처이다. 예를들어, https://aosjehdgus.tistory.com/라는 주소가 있다고..

Tech 2022.03.15

[Tech] AWS EC2 Instance ping test 해보기

AWS EC2 Instance에 ping test를 진행해봤더니 아래와 같이 timeout 메시지를 받게 된다. 그리고 테스트를 종료해보면 100.0% packet loss라는 메시지를 보게 된다. 그렇다면 ping test 진행을 위해서 어떠한 설정을 해주어야 할까? Request timeout for icmp_seq 0 이것을 해결해주기 위해서는 인바운드 규칙을 별도로 추가해주어야 한다. 순서는 다음과 같다. AWS EC2에 접속 후에, 좌측 네비게이션 바에서 보안 그룹을 클릭한다. 내가 수정하고 싶은 보안 그룹을 클릭한다. 인바운드 규칙 편집을 클릭한다. 규칙 추가 버튼을 클릭한다. 여기서 유형 , 프로토콜 , 소스 를 지정해주면 된다. 각각의 설정 내용은 아래와 같다. 유형 : 네트워크 트래픽에 ..

Tech 2022.01.18

[React]You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) 오류

npx create-react-app taskbox 명령을 사용했는데, 아래와 같은 오류가 발생하여서 이를 해결해보고자 한다. 간단하게 이제 글로벌 설치가 지원되지 않는다는 것이다. You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) We no longer support global installation of Create React App. 해당 오류를 해결하기 위한 방법으로 아래와 같은 방법이 터미널에 제시되고 있다. Please remove any global installs with one of the following commands: npm uninstall -g create-react-app ya..

Tech/React 2022.01.13

[Tech] 웹 접근성

웹 접근성 개요 웹은 원래부터 사용자의 환경이나 사용하는 기기, 운영체제에 가능한 영향을 받지 않고 웹이 제공하는 정보를 사용자에게 전달하고자 하는 목적에서 만들어진 정보 전달 체계이다. 따라서, 웹 접근성은 새롭게 대두되는 것이 아니라 당연히 가져야 할 개념이라고 볼 수 있다. 그러나 최근의 웹의 현질은 웹의 기본적이고 중요한 목적을 무시하고 특정 기기 또는 운영체제에만 최적화되어 있는 경우가 많았다. 특히나 노약자 또는 장애인 등은 정보화의 혜택이 필요한 계층임에도 불구하고 국내의 웹 환경으로 부터 소외되고 있다. 이러한 상황은 웹이 생활 속에 파고든 현 시점에서 커다란 문제점으로 제기되고 있는 것이다. 따라서, 이번에는 웹 접근성에 대해서 자세히 알아보는 시간을 가져보려고 한다. 웹 접근성이란? 웹..

Tech 2022.01.11

[MongoDB] MongoDB Compass 로 외부 서버(외부 컴퓨터, aws 인스턴스)와 연결하기

mongoDB Compass를 외부 서버의 컴퓨터에 연결을 하면서 많은 시행착오를 겪어서, 내용을 천천히 기록으로 남겨보려고 합니다. 먼저 이 과정은 mongoDB, mongodb-compass 가 정상적으로 설치되어 있고, 환경 설정이 끝났다는 가정하에 진행되었습니다. mongoDB Compass를 실행 시켜보면 아래와 같은 화면을 볼 수 있습니다. 여기서 연결하는 방법이 두가지가 있는데, 저는 string 형식을 사용하지 않기 때문에 Fill in connection fields individually를 눌러 줍니다. 그러면 아래와 같은 폼을 볼 수 있습니다. 여기서 Hostname은 default로 localhost로 두고, port도 마찬가지로 27017로 둡니다. (별도의 변경 사항이 없었다면)..

Tech/MongoDB 2021.12.24

[MongoDB] macOS mongoDB 설치 및 인증 설정

머리말 다양한 구글링을 해보면서 mongoDB 를 설치를 하다 보니 각각 다른 환경 설정을 가지고 있어서 여러 문제가 발생하는 것 같습니다. 그래서 저의 mac 에 맞는 설치 및 인증 설정 기록을 남겨보려고 합니다. 저는 homebrew 를 통한 설치 방법을 진행해보겠습니다. (homebrew 가 설치되어있다고 가정하고 진행) 설치 과정 패키지 저장소를 확보합니다. $brew tap mongodb/brew 설치할 mongodb 버전을 찾습니다. $brew search mongodb 저는 mongodb-community@4.4 버전을 설치하도록 하겠습니다. $brew install mongodb-community@4.4 설치를 하고 나면 아래와 같은 메시지가 뜨게 되고, 이 메시지를 주목할 필요가 있습니다..

Tech/MongoDB 2021.12.21