유쾌하고, 유익하게

SEB _ FE _ 45 Section 3. Unit 1. [자료구조/알고리즘] 재귀 코드스테이츠 부트캠프 참여한지 벌써 2달이 지났다? 시간이 참 빠른 것 같다. section2는 정신없이 유닛이 진행되어 "어어~!? " 하는 사이에 끝나버린 것 같아.. 제대로 된 이해를 위해 복습하면서 블로깅을 하도록 해야겠다. Section3 는 그날 배운 내용을 바로 복습 블로깅을 목표로 해보도록 하겠다!(이미 하루 늦음..) section3 첫 유닛은 재귀다! 재귀(recursion)란 사전적의미로 원래의 자리로 되돌아가거나 되돌아옴을 의미하는 단어이다. 재귀를 잘 사용하려면 재귀적 사고가 필요하다. 재귀 함수의 입력 값 출력 값 정의하기 가장 추상적으로 또는 가장 단순하게 정의하기 ex ) A 함수 : 입력값..

SEB_FE_45 Section 2. Unit 1. [JavaScript] 고차함수 코드스테이츠 부트캠프 Section2도 이번주면 종료가 된다. 그 말은 벌써 부트캠프 참여 후 2달이 되었다는 이야기! 시간 진짜 빠르다.... 앞으로의 포스팅에서는 블로깅에 소홀해져서 작성하지 못했던 Section 2를 다뤄보도록 하겠다. Section 2는 첫 유닛부터 너무 힘들었던 기억이라 블로깅을 할정도의 에너지가 되지 않았다. 이에 이제라도 작성해보고자 한다! 시작! 일급객체란? 자바스크립트 내에서 특별한 대우를 받는 객체이며, 대표적인 일급객체는 함수(function)가 있다. 일급객체인 함수에게 주어진 특별한 대우? 변수에 할당(assignment)할 수 있다. 다른 함수의 전달인자(argument)로 전달될..

SEB_FE_45 Section 2. Unit 8. REST API REST API 에대해 블로깅을 하라고 하는데, 이해의 영역이 아닌건가 아니면 뇌가 받아들이질 못하는건가..? REST API 란?? 우선, 강의 교안인 URCLASS에서는 REST API를 아래와 같이 정의하였다. 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 다음은 챗 GPT에게 REST API에 대해 정의를 물어본 내용이다. REST API는 Representational State Transfer API의 약어로, 웹 애플리케이션 간에 데이터를 주고받기 위한 표준화된 방법입니다. 이 방법은 HTTP를 기반으로 하며, 자원 식별, HTTP 메소드,..

수도코드 - 2차원 배열? : 내부 요소가 배열로 구성된 배열 - 외부 배열의 요소인 내부 배열의 요소를 이용하여 객체 만들기 - 외부 배열의 길이가 0인 경우에는 무시하기 - 중복되는 키는 가장 처음 만나는 값을 사용하기 - 빈배열을 입력 받으면 빈 객체를 반환하기 1. 함수 내부에 빈 객체(반환할 데이터)를 선언하고 할당한다. 2. 2차원 배열의 요소를 순회하는 반복문을 만든다. 3. 내부 배열의 길이가 0보다 클때 작동해야 한다. 4. 중복되는 키를 방지할 수 있는 조건을 작성해야 한다. 5. 배열의 요소들을 객체의 키와 값으로 설정한다. 위의 내용을 코드로 작성해보면, 아래와 같다. function convertListToObject(arr) { let obj = {} for(let i = 0; ..

SEB_FE_45 Section2. Unit4. React Intro React의 3가지 특징 선언적(Declarative) : 선언적 방식으로 UI 구성할 수 있으며, 수동으로 DOM을 조작할 필요가 없기 때문에 가독성과 유지보수성이 향상됨. 이에 개발자는 어떻게 화면을 그릴지에 집중할 수 있음 컴포넌트 기반(Component-based) : 컴포넌트 기반 아키텍처(하나의 기능 구현을 위한 여러 종류의 코드 묶음)를 사용하여 UI 구성함. 컴포넌트는 재사용성과 독립성을 가짐. 개발자는 애플리케이션을 작은 단위로 나눠 개발할 수 있음 범용성(Learn Once, Write Anywhere) : 라이브러리인 리액트는 어느 프로젝트에나 사용이 가능함. 많은 개발자들이 사용하고 있기 때문에 유지보수성이 좋음...

변수 변수는 어떤 값을 식별하기 위한 저장소에 붙인 이름이다. 변수의 선언, 할당, 종류, 호이스팅 //변수는 아래와 같이 선언한다. let nickName; // 변수가 선언되었다. console.log(nickName) // -> undefiend // 값을 할당하지 않았지만, JS에서 undefiend를 할당하여 초기화 //변수에 값을 할당하는 방법은 아래와 같다. nickName = YongTree; console.log(nickName) // -> YongTree // 닉네임에 용트리 값이 할당되었다. //변수를 선언할 수 있는 키워드 let, const, var /* let, const는 ES6 부터 도입된 변수 선언 키워드이다. const는 상수를 의미하며, 해당 키워드로 선언하는 경우, 원..

arr[ i ] //배열은 대괄호 [] 안에 요소(값)이 있는 형태이다. let arr = [1, 'two', true, function(){}, {key : value}, [1, 2, 3, 4]] //위와 같이 배열 안에는 모든 타입의 데이터가 요소로 포함될 수 있다. //배열은 왼쪽부터 오른쪽으로 순서를 갖는다. 이를 index라고 한다. //배열의 인덱스는 0부터 시작한다. //배열의 요소의 인덱스는 아래와 같이 조회한다. arr[0] // -> 1 arr[1] // -> 'two' arr[2] // -> true arr[3] // -> function(){} arr[4] // -> {key : value} arr[5] // -> [1,2,3,4] arr.length //배열은 길이가 있다. //배..

SEB_FE_45 Section 2. Unit 2. 객체지향프로그래밍(프로토타입과 클래스) 프로토타입 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있으며, 객체 지향의 상속 개념과 같이 부모 객체의 속성과 매서드를 상속받아 사용할 수 있다. 이러한 부모 객체를 프로토타입 객체 또는 프로토타입이라 부른다. 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체(인스턴스)를 생성할 수 있다. 자바스크립트는 흔히 프로토타입 기반 객체지향 프로그래밍 언어라 불린다. ES6문법을 통해 클래스 개념이 도입되었다. 프로토타입 체인이란 객체간의 연결을 의미하며, 이를 바탕으로 부모 객체의 속성과 매서드를 상속받아 사용할 수 있게하는 근간이다. .prototype 함수 객체만 가지고 있..

SEB_FE_45 Section 2. Unit 2. 객체지향 프로그래밍 객체지향 프로그래밍 객체지향 프로그래밍은 데이터(속성)와 기능(메서드)을 의미하는 코드를 하나의 단위(객체)로 묶으며, 이러한 단위들의 집합으로 프로그램을 표현하는 방식이다. 객체는 한번 만들고 나면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지된다. 클래스는 세부 사항(속성)이 들어가지 않은 청사진으로, 세부사항을 입력하면 객체(인스턴스)가 된다. 객체의 속성은 클래스(실체)의 고유한 세부사항(또는 특성)(예. 자동차 -> 브랜드, 모델명, 가격, 색상 등)이며, 구체적인 속성은 특정 클래스를 다른 것들과 구별하여 인식할 수 있게 한다. 객체의 매서드는 해당 클래스의 기능(또는 동작)(예. 자동차 -> 전진, 후진, 조향..

SEB_FE_45 Section2. Unit 2. 클래스와 인스턴스 in 객체지향 프로그래밍 클래스(class)란? 자바스크립트에서 클래스는 ES6에서 도입되었다. 자바스크립트는 프로토타입의 객체지향 프로그래밍 언어이다. 클래스란 특정 객체를 생성하기 위해 변수와 매서드를 정의하는 틀(template)이며, 이는 같은 종류의 집단(객체, object)에 속하는 속성(변수)과 행위(매서드)를 정의하는 것이다. 클래스는 같은 종류의 집단(객체) 생성에 사용되는 패턴 혹은 청사진(blueprint)이다. 인스턴스(instance)? 인스턴스는 클래스(청사진, blueprint)를 바탕으로 한 객체(오브젝트, object)를 의미한다. 모든 인스턴스는 오직 클래스에서 정의된 범위 내에서만 작동하며 런타임에 그 ..

코드스테이츠 프론트엔드 부트캠프 45기 Section1 회고 부트캠프를 시작하고 한달이 지났다. 커리큘럼을 따라오다 보니 여기까지 와있네!? 시간 참 빠르다~! 오늘의 커리큘럼이었던 section.1 회고 블로깅! KPT(KEEP / PROBLEM / TRY) 방식으로 노션페이지에 블로깅을 진행하였다. 블로깅 후에는 동기들의 글도 서로 보면서 응원하는 시간도 가져서 의미있는 시간이었다. 온라인에 비대면 수업이라 함께한다는 느낌을 받기 어려운데, 코드스테이츠는 페어프로그램이나 그룹회고 그리고 이런 블로깅에 서로 응원해주시 등을 통해 함께 한다는 느낌을 받게 해주는 것 같다. 아래는 노션페이지에 작성한 나의 1달간의 회고 내용이다. ※ 초기 목표! 수업 출석률 95%달성하기 건강 관리하기(10kg 체중 감량..

SEB_FE_45 Section1. Unit.9 JavaScript 핵심 개념과 문법(Koans) JavaScript에서 호이스팅(hoisting)이란? 출처 : https://developer.mozilla.org/ko/docs/Glossary/Hoisting 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생한다. 함수 선언식으로 작성한 함수에서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 단, 선언과 초기화를 함께 수..

SEB_FE_45 Section1. Unit.9 JavaScript 핵심 개념과 주요문법 1. 스코프(Scope) 스코프란 변수 접근 규칙에 따른 유효 범위를 의미한다. 가. 변수접근 규칙 ① 안쪽 스코프에서 바깥쪽 스코프로는 접근 가능하나, 바깥쪽에서 안쪽으로는 접근 불가능하다. ② 스코프는 중첩이 가능(스코프 === 중첩된 울타리)하다. 가장 바깥쪽 스코프를 전역스코프(Global Scope)라고 하며, 이하 스코프는 모두 지역 스코프(Local Scope)라고 한다. 지역 스코프에서 선언한 변수는 지역변수라고 하면, 전역 스코프에서 선언한 변수는 전역변수라고 한다. ③ 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다. 전역 스코프의 변수와 지역 스코프의 변수의 이름이 동일하다면, 지역 스코프의..

SEB_FE_45 Section.1 Unit.9 JavaScript 핵심 개요와 주요문법 1 - 코드스테이츠 1. 원시자료형과 참조자료형 구분 원시자료형 참조자료형 값(value)의 종류(type) number, string, boolean, null, undefined, Symbol 배열(array), 객체(object), 함수(function) 변수 할당 메모리공간에 값 저장 메모리공간에 주소값 저장 다른 변수에 할당 원시값 자체가 복사됨 주소값이 복사됨 변경가능 여부 변경불가(immutable) 생성된 원시값은 읽기전용 값임 변경가능(mutable)한 값 복사 값 자체를 복사 (대체로 값의 크기가 일정하기 때문에 새로운 공간확보 및 복사 용이) 주소값을 복사 (값의 크기가 일정하지 않기 때문에 매번..

SEB_FE_45 Section.1 Unit.8 배열과 객체 2 1. 객체 가. 객체의 개념 객체란 회원주소록과 같이 하나의 변수(회원 정보)에 의미있는 데이터들(이름, 주소, 연락처, 생년월일 등)을 묶음으로 관리할 수 있는 데이터 타입이다. 객체의 구성은 아래 코드블럭과 같다. //객체의 구조 let object = { property1 : value, property2 : value, ..., propertyn : value } // {} : 중괄호로 묶여있다. // 속성(property)과 값(value)로 나눠져있다. // 속성 : 값의 묶음을 쌍이라 한다. // 속성과 값의 구분은 콜론(:) 으로 한다. // 여러 (속성값)쌍이 있는 경우에는 쉼표(,)로 구분한다. 만약 회원 정보를 배열로 작..

SEB_FE_45 Section.1_Unit.8 배열과 객체 1. 배열 가. 배열의 개념 배열이란 대량의 데이터를 쉽게 다룰 수 있게 해주는 데이터 타입이다. 배열은 순서(index)가 있는 값(요소, element)이다. 요소를 할당할 때에는 [대괄호]를 사용한다. let a = [1, 2, 3, 4, 5] //[1,2,3,4,5] 는 값(element)이다. //각 값에는 순서(index)가 존재하며, index는 0부터 센다. a[1] === 2 // 배열변수[인덱스]로 해당 인덱스의 요소를 조회할 수 있다. a[1] = 1 // 1번째 요소를 1로 바꾼다. // a=[1,1,3,4,5] 가 된다. a.length === 5 // 배열변수의 길이를 확인할 수 있다. 나. 다양한 매서드 매서드 설명 ..

SEB_FE_45 Section1. Unit5. JavaScript 기초(함수) 학습 목표 함수표현식, 함수선언문으로 함수를 정의하고 호출할 수 있다. 매개변수와 전달인자에 대해 설명할 수 있다. 함수에 return문이 필요한 이유를 이해한다. 함수를 이용해 구구단 n단을 출력하는 재사용이 가능한 코드를 작성할 수 있다. 1. 함수 함수란 논리적인 일련의 작업을 하는 하나의 단위이다. 함수의 사용은 코드실행 과정을 하나의 묶음으로 묶어서 필요할 때마다 호출하여 실행하는 것이다. 이때, 특정한 코드실행 과정을 묶어서 함수를 생성하는 것을 '함수를 정의한다.'고 한다. 1) 함수 선언문 2) 함수 표현식 : 함수를 변수에 할당하는 형태 3) 호출 함수 내부에 있는 코드를 실행하기 위해서는 호출이 필요하다. ..

SEB_FE_45 Section1. Unit.5 JavaScript 기초 1. 조건문 가. if문 개요 주어진 조건식의 참(true) / 거짓(false) 여부에 따라 실행이 결정된다. 참과 거짓을 판단하기 위한 자바스크립트 타입은 Boolean(불리언) 타입이다. 조건식은 결과가 불리언타입이 되도록 작성해야 한다. 1) 동치연산자(=== / !==) ===은 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환한다. !==은 반대로 동일하지 않으면 true, 동일하면 false를 반환한다. let name = 'choco'; if (name === 'choco') { console.log('중복된 이름입니다.'); // '중복된 이름입니다.' } let name = 'banana'; if ..