2023년부터 로그 기록 2023년부터 로그 기록

구조분해할당 (Destructuring) (1) 배열의 구조분해할당 - 구조분해할당이란 배열이나 객체에 저장된 여러 개의 값들을 말 그대로 분해해서 각각 다른 변수에 할당하는 문법 - 배열의 요소를 변수에 할당한다고 했을 때, 변수 마다 일일이 배열의 요소를 넣어 주는 것은 상당히 불편하다. - 이럴 때 구조분해할당을 사용하면 매우 편리하다. - 배열의 요소를 넘어가는 변수를 구조분해할당으로 선언하면, 배정되는 배열의 요소가 없는 배열들은 초기화 되지 못하고 undefined가 할당된다. - 배열의 요소가 구조분해할당으로 선언하는 변수의 수 보다 모자랄 상황을 대비해서 구조분해할당 시에 기본값을 설정하는 것도 가능하다. - 만약 배열의 원소에서 변수로 만들 필요가 없는 경우, let 다음에 나오는 대괄호..

Truthy와 Falsy - JavaScript에서는 참, 거짓이 아닌 값도 참, 거짓으로 평가한다. - 어떤 값이 참이나 거짓을 의미하는 값이 아닌데도, 조건문 내에서 참이나 거짓으로 평가하는 JavaScript의 특징을 지칭할 때 Truthy, Falsy라고 부른다. - 아래 if 문의 조건식에 있는 123이란 숫자 값처럼 참은 아니지만 조건문 내에서 참으로 평가되는 이러한 값들을 Truthy(트루시), 즉 참 같은 값이라고 표현한다. - 반대로 아래 코드 if 문의 조건식에 있는 undefined 처럼 거짓은 아니지만 조건문 내에서는 거짓으로 평가되는 이런 값들을 Falsy한 값, 즉 거짓 같은 값이라고 표현한다. - JavaScript에 존재하는 모든 값은 Truthy하거나 Falsy 하다. 이런..

객체 원시 타입이 아닌 객체 타입이며, 여러가지 값을 동시에 저장할 수 있는 자료형을 의미한다. 객체를 이용하면 현실 세계에 존재하는 어떤 삼루이나 개념을 표현하기 용이함 객체의 생성과 프로퍼티 - JavaScript에서는 객체를 두 가지 방식으로 생성할 수 있다. - 첫번째 방법은 객체 생성자라고 불리는 new Object() 내장함수를 이용하는 방식이고, 두번째 방법은 빈 중괄호를 하나 열어서 객체를 생성해주는 객체 리터럴 방식이다. 두가지 방식 모두 동일한 객체를 생성한다. 객체 리터럴 방식이 훨씬 더 간겨하기 때문에 대부분은 이 방식을 사용한다. - 객체를 작성하는 방법은 key-value 쌍을 콤마(,)로 구분해서 중괄호 안에 작성한다. 이때 key-value 쌍들을 객체의 프로퍼티라고 부르며,..

자바스크립트의 함수 함수는 여기저기 중복된 유사한 코드를 묶어서 이름을 붙여주어, 해당 기능이 필요할 때 간편하게 가져다가 쓸 수 있는 JavaScript의 문법이다. 함수 선언과 호출 - 함수선언 방식은 function 키워드와 이름 그리고 소괄호와 중괄호를 써준다. - 중괄호에는 함수가 실행할 코드를 작성하면 된다. - 새로운 함수를 생성하는 것을 함수선언이라고 한다. - 함수는 선언 시 바로 실행되는 것이 아닌, 함수이름을 써서 호출했을 때만 실행된다. (반드시 소괄호 작성) - 즉, 함수선언이란 함수가 호출되었을 때 실행할 코드를 미리 준비해두는 작업이라고 이해할 수 있다. - 함수가 호출되면 프로그램의 실행 순서가 함수 내부로 넘어간다. - 함수가 호출되면 코드의 실행 흐름이 마치 포탈을 타고 ..

자바스크립트의 조건문 if 문 (if 조건문) - 조건문이란 특정 조건을 만족했을 때에만 실행되는 코드를 작성하기 위한 문법 - 대표적으로 if, switch 조건문이 존재함 - 문법은 먼저 if 키워드를 써주고, 이어서 조건식을 써줄 소괄호와 조건식이 만족했을 때 실행할 코드가 들어가는 중괄호를 써준다. - 중괄호 안에는 여러줄의 코드를 작성할 수도 있다. - 조건식의 결과가 거짓으로 조건을 만족하지 않으면, 중괄호 안의 코드가 실행되지 않는다. - if문의 조건식을 만족하지 않았을 때 수행하고 싶은 코드가 있는 경우 (조건식의 결과가 거짓일 때) if 문 아래 else문의 중괄호를 열어서 코드를 추가할 수 있다. - else의 의미는 '그렇지 않으면' 이며, 전체적인 의미를 표현하면 'if 조건문이 ..

JavaScript의 형 변환(Type Casting) - 어떤 값의 타입을 다른 타입으로 변경하는 것을 말함 - 형 변환은 묵시적 형 변환(암묵적 형변환)과 명시적 형 변환으로 두가지 형태가 있음 - 묵시적 형 변환은 개발자가 직접 설정하지 않아도 알아서 JavaScript 엔진이 형 변환 하는 것을 말함 - 명시적 형 변환은 개발자가 직접 함수 등을 이용해 형 변환을 일으킴 묵시적 형 변환 - JavaScript 엔진은 최대한 Error를 통해서 프로그램이 멈추는 것을 방지하기 위해 묵시적 형 변환을 수행함 - 하지만 모든 불가능한 연산에 대해서 항상 묵시적 형 변환이 수행되는 것은 아니라 특정 하나의 변수의 값을 형변환 했을 때 오류가 발생하지 않고 연산이 잘 종료될 수 있는 경우에만 묵시적 형 변..

변수와 상수 변수, 상수는 값을 저장하는 박스 변수 선언 및 초기화 - 변수는 프로그래밍을 하면서 값을 바꿔가며 사용할 수 있는 변수 - 같은 이름의 변수를 선언하면 Error 가 발생한다. // 1. 변수 let age = 27; // let age; (초기화) let age = 27; (초기화 및 할당) console.log(age); // 27 age = 30; 상수 선언 및 초기화 - 상수는 변수와 달리 한번 저장된 값을 다시는 변경할 수 없다. - 상수는 let 대신에 const 라는 키워드를 사용한다. - 상수는 변할 수 없거나, 변해서는 안되는 값을 저장할 때 변수 대신에 자주 사용한다. - 상수는 선언 이후에는 값을 변경하는 것이 불가능하기 때문에 반드시 초기화가 필요하다. - 변수와 상수..

JavaScript 기초 개념 JavaScript(JS)는 무슨 역할을 하는 언어일까? - Web 페이지를 개발하기 위해 만들어진 언어 (JS, HTML, CSS) - 현재는 웹 서버, 데스크탑 어플리케이션, 모바일 어플리케이션, 기타 등등 넓어졌다. JavaScript는 어떻게 실행할까? - 웹 브라우저에 있는 JavaScrip 엔진을 통해 직접 실행해 볼 수 있다. GitHub 저장소 생성 새로운 github 저장소를 만들고 로컬 폴더와 연동하기 - REAMD.md 파일도 생성하도록 설정했으면 git clone 명령어로 쉽게 끝나는데.. 체크하는 걸 깜빡했다. - GitHub에서 알려준 대로 첫번째 코드블럭에 있는 예제를, VSCode 터미널에서 따라한다. VSCode 환경 설정 VSCode 확장 프..

오늘은 npm 저장소에 나만의 create-react-app (CRA) 커스텀 템플릿을 만들어 본다. 기존에 타입스크립트 기반의 리액트 프로젝트를 만드는 명령어가 있다. // npm 사용자 npx create-react-app my-app --template typescript // yarn 사용자 yarn create react-app my-app --template typescript 멋쟁이사자처럼(멋사) 7기 수업을 받으면서, 수업에 불필요한 요소를 제거하고 필수 요소만 남긴 템플릿을 자주 이용했다. 템플릿 이름은 basic-react이다. 5기였나...? 앞선 기수에서 npm 저장소에 등록해서 사용하면서 사용되기 시작했다. 새로운 프로젝트를 만들 때마다 파일을 삭제 및 정리하는 시간을 없앴다. 요..

1. React에서 가장 중요한 훅 useEffect 컴포넌트가 화면에 Mount(첫 렌더링) 될 때, Update(다시 렌더링) 될 때, 화면에서 Unmount(제거) 될 때 특정 작업을 처리할 코드를 실행하고 싶다면 useEffect를 사용하면 된다. 컴포넌트 (component): 자바스크립트, 특히 웹 개발에서 컴포넌트는 재사용이 가능한 코드 조각을 의미한다. 2. useEffect 형태 // 기본 형태 useEffect(setup, dependencies?) useEffect 훅은 인자로 콜백 함수(다른 함수의 인자로 전달된 함수)를 받는다. 우리는 콜백 함수에 원하는 작업을 처리해줄 코드를 작성해주면 된다. useEffect의 형태로 아래와 같이 두 가지만 기억하면 된다. 첫 번째 형태는 us..

Q. JavaScript에서 함수 뒤에 세미콜론을 붙이지 않는 이유가 뭐야? 요약) JavaScript의 함수는 자체 종결성을 가지는 코드 블록이기 때문에 세미콜론을 붙이지 않는다. 💡 Copilot 답변 JavaScript에서 함수 뒤에 세미콜론을 붙이지 않는 이유는 코드 블록문이 자체적으로 종결성을 갖고 있기 때문입니다. 이러한 코드 블록은 언제나 문(statement)의 종료를 의미하는 자체 종결성을 가지고 있습니다. 따라서 if문, for문, 함수 문 등의 코드 블록 뒤에는 세미콜론을 붙이지 않습니다. 반면, 객체를 선언하는 중괄호 {} 뒤에는 세미콜론을 붙입니다. 이는 코드 블록이 아니라, 객체를 표현하는 리터럴 방식의 값 할당이기 때문입니다. 세미콜론을 붙이지 않아도 JavaScript Eng..

11.1 유틸리티 타입 개념 유틸리티 타입(Utiltiy Types)이란 일반적인 타입 변환을 쉽게 할 수 있도록 타입스크립트에서 전역으로 제공하는 유용한 타입들을 지칭한다. 예를 들면, 추가적인 타입 정의 없이 모든 속성을 선택적 또는 읽기 전용 프로퍼티로 변경한 새로운 타입을 생성하거나, 기존의 정의된 타입을 속성/타입을 선택 또는 제외하여 재사용할 수 있다. 그리고 함수와 클래스의 매개변수의 타입 또한 튜플 형태로 뽑아내는 등의 편리한 기능을 제공한다. 유틸리티 타입은 앞서 우리가 배웠던 타입 문법을 활용해 충분히 구현할 수 있다. 하지만 타입스크립트로 프로젝트를 진행하며 자주 사용되는 타입 변환을 타입 별칭으로 미리 정의되어 있어 편리하게 사용할 수 있다. 유틸리티 타입 구현체는 우리가 npm을 ..

AWS S3와 MongDB 그리고 Express을 조합하여 웹 어플리케이션을 만들고 있는 중이다. 그런데 위 이미지와 같은 문제가 발생했다. AWS는 설정할 수 있는 항목도 많고 처음 만져보는 거라, 이런 Error가 발생해서 정말 머리가 아팠다. AWS 관련된 ejs 파일이나 config 파일에서 오타가 났는지 열심히 뒤졌다. IAM 액세스 키에 문제가 있는지 찾아보기도 하고, 에러 문구에 ACL(Access Control List)가 지원되지 않는다고 해서 원인이었던 '객체 소유권'은 못보고 그 아래에 있던 항목들을 어떻게 바꿔야 하는지 찾으며 고생했다. 답을 못찾아서 구글에 검색해봤더니 바로 답이 나왔다... (빨리 검색해볼껄) Problem AccessControlListNotSupported: ..

1. 타입스크립트 제네릭(Generic) 문법 '포괄적인'의 뜻을 가지고 있는 제네릭(Generic)은 타입스크립트 제네릭 문법은 함수를 시작으로 이해하면 효과적이다. 제네릭 (Generic): (형용사) 포괄적인, 총칭[통칭]의 TypeScript의 제네릭을 함수에 적용하면, 함수의 타입 변경 없이도 매개변수로 전달되는 타입이 반환값의 타입이 되도록 할 수 있다. 결과적으로 any나 unkown을 사용하지 않고도 모든 타입의 값을 다 적용할 수 있는 범용적인 함수를 정의할 수 있다. 제네릭 함수의 기본 타입 정의 방법은, 함수 이름 뒤에 꺽쇠() 기호를 사용해 타입을 담는 변수인 타입 변수를 선언한다. 그리고 매개변수와 반환값의 타입에도 똑같이 타입 변수로 설정한다. 아래 코드의 타입 변수 T는 함수가..

멋쟁이필더 사전 설명회 알람 신청을 해두고 안내 문자를 받았다. 오늘 2월 7일 수요일 오후 6시부터 멋쟁이빌더 사전 설명회가 유튜브 Live로 진행됩니다. 알림 신청을 하면서 남겨 주셨던 사전 질문에 대해서도 멋쟁이사자처럼 CEO, CPO가 직접 모두 답변해드릴 예정이니, 잠시 후 6시, 멋쟁이사자처럼 유튜브 채널에서 만나요~! 멋쟁이빌더 지원 페이지의 브라우저 타이틀 문구를 보면, 멋쟁이빌더 | 지옥의 혹한기 철야 창업 프로젝트 라고 되어 있다. 멋쟁이빌더라는 명칭은 가재로 보이나 창업 프로젝트의 일종으로 보인다. 월 팀당 30만원의 활동비를 지원해주기도 하고, 멋쟁이사자처럼의 교육 테킷 부트캠프 출신들을 대상으로 하는 6주짜리 단기 프로젝트인데 궁금한게 좀 있어서 유튜브 라이브 사전 설명회에 참여한..