Bin's Blog

함수란 길고 복잡한 코드 한 단어로 축약 가능 숫자 집어넣으면 다른 숫자 나오는 블랙박스 역할 파라미터 (숫자 input역할) return할 값(output되는 값 = 뱉어주세요) 파라미터 만드는게 변수 작명이랑 똑같음 변수만 만들면 :any 자동할당된다. 함수는 파라미터, return 값 타입지정가능 // 파라미터로 들어올 수 있는 수는 숫자 // return 되어야하는 값도 숫자 function 함수(x : number) :number { return x * 2 } 함수(4) void 타입 void 타입(텅 비었다는 뜻)을 쓰면 실수로 뭔가 return하는 것을 사전에 막을 수 있다. function 함수(x : number) :void { return x * 2 } 옵션파라미터 타입스크립트가 기존 ..

1. map 왼쪽 배열 자료만큼 내부코드 실행해준다. 함수의 파라미터는 array 안에 있던 자료다. return에 뭐 적으면 array로 담아준다. 소괄호 안에 들어가는거 다 콜백함수 같은 html 반복생성하는 법 { // a는 배열에 안에 데이터이므로 파라미터 안에 아무거나 넣고 중괄호 안에 넣어주면 차례대로 배열에 있던 데이터가 출력된다. // i는 반복문을 돌 때마다 1씩 증가하는 정수 글제목.map(function(a, i) { return ( // 반복문으로 html 생성하면 key={ html마다 다른숫자 } 추가해야한다. { 글제목[i] } { 따봉변경(따봉+1) } }>👍 { 따봉 } 2월 17일 발행 ) }) } 해당 글제목을 눌렀시에 따봉 +1을 하는법 state을 글제목 개수만큼 넣..

1.1.4 옵저버 패턴 옵저버 패턴은 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다. 여기서 주체란 객체의 상태 변화를 보고 있는 관찰자이며, 옵저버들은 이 객체의 상태 변화에 따라 전달되는 메서드 드을 기반으로 "추가 변화 사항"이 생기는 객체들을 의미한다. 예를 들어, 내가 공부하고 있을 때 엄마가 저녁 준비를 하고 있다. 엄마가 저녁 준비가 다 되면 "밥 먹어"라고 외친다. 그럼 관찰자인 나는 주체인 엄마가 얘기를 하니까 공부하는 것을 멈추고 식탁으로 가서 저녁을 먹는다. 주체와 객체를 따로 두지 않고 상태가 변경되는 객체를 기반으로 구축하기도 한다. 예를 들어, 트위터의 경우에는 내가 어떤 사람..

1. undefined undefined는 자바스크립트에서 "없음"을 나타내는 값 중에 하나이다. 사용자가 명시적으로 지정할 수도 있지만 값이 존재하지 않을 때 다음 세 경우에 undefined를 반환하다. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때 return 문이 없거나 호출되지 않는 함수의 실행 결과 자동으로 undefined를 부여하는 경우 // 자동으로 undefined가 할당되는 것이 아니라 // 아무것도 할당하지 안혹 끝난다. 접근할 때 undefined을 반환한다. let a; // 값을 대입하지 않은 변수에 접근: undefined; console.log(a); let obj = { ..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ▶ 문제 요약 1. 정수 n이 매개변수로 주어진다. 밑변의 길이와 높이가 n인 삼각형에서 맨 위 꼭짓점부터 반시계 방향으로 달팽이 채우기를 진행한 후 2. 첫 행부터 마지막 행까지 모두 순서대로 합친 새로운 배열을 만들어라. ▶ 정답 코드 function solution(n) { let answer = []; // n * n배열 만들고 0을 채우기 let array = new Array(n).fill().map(() => new Array(n).fill(0)); // 방향 설정(아래, 우측, 대각) const..

타입을 미리 정하기 애매할 때 Union Type(타입 2개 이상 합친 새로운 타입 만들기) // Union Type(타입 2개 이상 합친 새로운 타입 만들기) let 회원 :(number | string | boolean) = 123; 회원 = 123; // 숫자 or 문자가 가능한 array 타입지정 let 회원들 : (number | string)[] = [1, "2", 3]; // 숫자 or 문자가 가능한 object 타입지정 let 오브젝트: {data : string | number} = { data : '123' }; // 왜 타입맞는데 +1이 안 되니? // 타입은 엄격한 거 좋아한다고 했다. // union type은 허용하지 않는다. (새로운 타입을 만드는 거니까) // string ..

1. Component 더러운 html을 깔끔하게 한 단어로 축약하고 싶을때 componenet를 사용 첨보는 사람들도 이해할 수 있다 컴포넌트 만드는 법 function 만들고 다른 function 바깥에 만들자 영어 대문자로 시작 return()안에 html 담기 하나의 태그로 시작해서 하나의 태그로 끝나야한다. 병렬로 집어넣는게 안 돼 만약에 병렬기입하려면 div 두 개로 묶은 부분을 하나 더 크게 div로 묶는다. 의미없는 대신 사용가능 전문용어로 fragment라고 한다. 쓰기 이렇게도 사용 가능하다. 컴포넌트 언제 쓰면 좋은가? 반복적인 html 축약할 때 큰 페이지(페이지 전환시) 자주변경되는 UI && html 들 컴포넌트의 단점 State를 가져다 쓸 때 문제 생긴다. 다른 함수에 있을때..

1. 전략 패턴이란? 정책 패턴이라고도 하며, 행위를 바꾸고 싶은 경우 "직접" 수정하지 않고 전략이라고 부르는 "캡슐화한 알고리즘"을 컨텍스트 안에서 바꿔주면서 상호 교체가 가능하게 만드는 패턴이다. 예를 들어, 우리는 학교에 가는 방법으로 걷기, 자전거 타기, 버스 타기 등 여러 가지 방법을 선택할 수 있다. 전략 패턴은 이렇게 여러 가지 방법 중 하나를 선택해서 사용할 수 있도록 도와주는 도구이다. 이렇게 전략 패턴을 사용하면, 프로그램이 실행되는 도중에 어떤 작업을 어떻게 할지 바꿀 수 있어서 유연하게 대처할 수 있다. * 캡슐화? 데이터와 그 데이터를 처리하는 함수를 하나의 "캡슐"처럼 묶는 것을 말한다. 이렇게 하면 데이터와 관련된 기능들이 서로 관계가 있기 때문에 코드를 이해하고 유지보수하..

1. Map() 객체란? Map() 객체는 키-값 쌍을 저장하는 데이터 구조이다. ECMAScript 6(ES6-2015)에 도입됐다. 객체와 비슷하게 동작하지만 몇 가지 다른 특징이 존재한다. 2. Map() 객체의 특징 키의 다양성: 기존 객체에서는 문자열 또는 심볼만 키로 사용할 수 있었다. Map 객체는 다양한 데이터 타입을 키로 사용할 수 있다. 객체, 함수, 원시 타입(문자열, 숫자, boolean 등) 모두 가능하다. 순서 보존: Map 객체는 삽입 순서를 유지한다. 즉, 키-값 쌍을 순회할 때 삽입된 순서대로 처리된다. 기존의 객체는 원래 순서를 유지하지 않고 있다가 ES6부터는 대부분 자바스크립트 엔진에서 객체의 속성을 정의한 순서대로 속성을 순회한다. 단, 이는 문자열 키를 갖는 속성에..

1. 불변 객체란 이전에 참조형 데이터에 대해서 살펴봤을 때, 참조형 데이터의 가변은 데이터 자체가 아닌 내부 프로퍼티를 변경할 때만 성립한다. 데이터 자체를 변경하려고 하면 기본형 데이터와 마찬가지로 기존 데이터는 변하지 않는다. 불변성을 확보할 필요가 있을 경우에 불변 객체를 취급하고, 그렇지 않은 경우에 기존 방식대로 사용하는 식으로 상황에 따라 대처한다. 불변 객체가 필요한 경우는 값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우가 종종 발생한다. 객체의 가변성에 따른 문제점 let user = { name: "Jaenam", gender: "male" }; let changeName = (user, newName) => { let newUser = user; newU..