유쾌하고, 유익하게

문제출처 : 코드스테이츠 코플 ✅문제 접근 및 회고 우선 주의사항에 나눗셈과 나머지 연산자 사용이 금지된다고 한다. 이에 나눗셈은 빼기의 연속이기에 빼기 연산자를 이용해야 된다고 생각했다! (근데 반복은 어떻게 하지?) 👈여기서 막혀버렸다.. MDN에서 반복문을 찾아보다가 while문을 발견! 비슷해보이는 느낌에 적용해보려고 하는데 어떻게 적용해야 할지 잘 모르겠다... 결국.. 레퍼런스의 도움을 받아 코드를 작성하고, 디버깅해보았다. 왜 내가 칠때는 막막한데... 레퍼런스 코드를 보면 이해가 되는거지;; 반복문을 for문 주로 사용하다보니, while문의 반복이 생소한 느낌이었다. 반복은 어떤 요소의 길이가 있는 것에만 적용할 수 있다는 고정관념을 벗어야 할 것 같다. https://developer...

문제 출처 : 코드스테이츠 URCLASS 코플릿 풀이 코드 function joinArrayOfArrays(arr) { return arr.reduce((acc, cur) => acc.concat(cur)) } 배열끼리만 합쳐지는 것이라고 생각했었는데, 값도 기존 배열에 합쳐진다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat Array.prototype.concat() - JavaScript | MDN concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. developer.mozilla.org

문제 출처 : 코드스테이츠 URCLASS 코플릿 - 고차함수 문제 코드 function getIndex(arr, num) { return arr.filter((el) => el

SEB_FE_45 Section 2. Unit 2. 객체지향 프로그래밍 과제 beesbeesbees ✅ 과제에서 학습해야 할 개념 클래스, 인스턴스, 프로토타입 this 키워드 클래스 생성자(constructor) 상속(extends, super 키워드) 1️⃣클래스와 인스턴스 클래스 : 특정 객체를 표현하기 위한 객체의 구조(틀 또는 템플릿)이며, 객체 내 속성과 메서드를 정의하는 역할을 하며, 클래스는 함수이다. 클래스의 코드 구조는 아래와 같다. class 클래스 () { method1 () { prop1 prop2 ... } method1 () {...} method1 () {...} . . . } //클래스 - 메서드 묶음, 메서드 - 속성 묶음 인스턴스 : 클래스 구조에 데이터 값을 입력한 객..

// 풀어보려고 했던 코드 function removeExtremes(arr) { let result = []; for(let i = 0; i < arr.length; i++){ // arr[i].length와 arr[i+1].length를 비교해서 치환을 해야하나 생각함. // 그리고 막힘.. 결국 레퍼런스의 힘으로 풀어냄..ㅜㅜ 회고 우선, 볼때는 이해가 간다. 그리고 개발자 도구로 디버거를 돌려보면서 어떻게 작동하는지도 알겠다. 다만.... 다음에 다시 풀면 풀수 있을까?ㅎㅎ 공부하자! 문제 출처 : 코드스테이츠 URCLASS 코플릿 - 데일리코딩

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)를 의미한다. 모든 인스턴스는 오직 클래스에서 정의된 범위 내에서만 작동하며 런타임에 그 ..