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

자바스크립트의 함수 함수는 여기저기 중복된 유사한 코드를 묶어서 이름을 붙여주어, 해당 기능이 필요할 때 간편하게 가져다가 쓸 수 있는 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 확장 프..

내가 궁금해서 찾아보고 다른 사람도 궁금해 할 수 있다고 생각해서 글을 쓴다. 현대 정기 코딩 인증평가(Hyundai SW Aptitude Test, HSAT)의 역대 일정을 정리했다. 년도 차수 접수기간 평가 지원자수 2021 1차 06/16 13:00 ~ 06/23 23:59 06/26 13:00 ~ 15:00 279 2021 2차 08/09 13:00 ~ 08/25 23:59 08/28 13:00 ~ 15:00 483 2021 3차 12/06 00:00 ~ 12/20 17:00 12/21 17:00 ~ 20:00 501 2022 4차 08/24 10:00 ~ 09/04 23:00 09/06 17:00 ~ 20:00 453 2022 5차 11/18 10:00 ~ 12/04 23:00 12/06 17:..

오늘은 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주짜리 단기 프로젝트인데 궁금한게 좀 있어서 유튜브 라이브 사전 설명회에 참여한..

+) 2024.02.16 해당 내용으로 지원한 결과 떨어졌습니다. 😭 멋쟁이빌더 선발 기준와 질문 항목 선발 대상과 방식에 대해 다시 한 번 안내드립니다! [선발 대상] 테킷 스쿨을 '수료한' 멋쟁이라면 누구나 지원 가능! (현재 '수강 중'이신 분들은 다음 기수에 도전해주세요 🙏) [선발 방식] - UX, iOS, Android, 프론트엔드, 백엔드 중 지원할 직무를 선택하고 필요 자료를 제출해주세요. - UX 직무는 포트폴리오 필수 제출, 개발 직군의 선택사항으로는 GitHub 링크 제출도 가능합니다. 질문1. 멋쟁이사자처럼 - 테킷에서 진행하는 부트캠프 중 수료한 스쿨명과 기수를 입력해주세요. e.g. 프론트엔드 스쿨 1기 프론트엔드 스쿨 7기 질문2. 멋쟁이필더에 지원한 동기를 설명해 주세요. (..

타입스크립트(TypeScript, TS) 튜플(tuple) 타입에 대해 다뤄본다. JavaScript의 타입(Type) JavaScript는 동적 타입 언어(Dynamic Type Language)이기 때문에 정적 언어와 달리 자료형을 정의할 필요가 없다. 즉, 컴파일 과정이 아닌 런타임(코드 실행) 도중에 JavaScript Engine이 자료형을 확인한다. 변수의 경우 변숫값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정된다. 이런 JavaScript에서는 총 8개의 타입(type) 또는 자료형이 있다. 7개는 불변한 원시 값(Primitive values)으로 문자열(String), 숫자형(Number), 논리형(Boolean), Undefined, Null, Symbol, BigInt 까지..