Bin's Blog

1. 팩토리 패턴이란? 팩토리 패턴은 마치 공장에서 물건을 생성하는 것처럼, 객체를 생성하는 방법이다. 사용자가 원하는 객체를 쉽게 만들 수 있게 하는 것이 목적이다. 코드에서 객체 생성 부분을 떼어내 추상화한 패턴이자 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴이다. 상위 클래스와 하위 클래스가 분리되기 때문에 느슨한 결합을 가지며 상위 클래스에서는 인스턴스 생성 방식에 대해 전혀 알 필요가 없기 때문에 더 많은 유연성을 가지고 객체 생성 로직이 따로 떼어져 있어서 코드를 리팩터링해도 한 곳만 고치면 되니 유지 보수성이 증가한다. 예를 들어 친구들과 함께 학교에서 간식을 먹고 싶다. 간식 종류가 너무 많아서 어떤..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ▶ 문제 요약 1. 철수와 동생은 케이크의 잘린 조각들의 크기와 올려진 토핑의 개수에 상관없이 각 조각에 동일한 가짓수의 토핑이 올라가면 공평하게 나누어진 것으로 판단 2. 철수랑 동생은 동일한 토핑의 개수를 맛봐야 한다. 3. 공평하게 자르는 방법의 수를 찾아라. ▶ 실패 코드 function set(number) { let set = new Set(number); return set; } function solution(topping) { let answer = 0; let left = 0; let rig..

1. 타입스크립트란? 기존 자바스크립트는 Dynamic Typing이 가능해서 5 - "3"을 하면 문자가 숫자로 바뀌어서 5-3= 2가 된다. 프로젝트가 크면 단점이다. 코드 길게 짤 땐 자유도 & 유연성은 떨어진다. TypeScript는 타입 엄격히 검사해준다. TypeScript는 에러메시지 퀄리티가 오진다. 그냥 코드 에디터 부가기능 역할로 봐도 된다. 2. 기본타입 // 문자 let 이름 :string = "kim"; // 숫자 let 나이 :number = 30; // 불린 let 밥은먹었니 :boolean = true; // 값이 없어 let 낼밥은 :undefined = undefined; // 값이 비어있어 let 용돈은 :null = null; // 배열 사용시 왼쪽에 배열에 들어갈 타..

map() 무엇인가? map() 함수는 배열의 각 항목에 대해 특정 작업을 수행하고, 그 결과를 모아 새로운 배열을 만드는 기능을 가진 도구이다. // map()형태 const newArray = oldArray.map(콜백함수); 전문 용어로 각 요소에 대해 콜백 함수를 실행하는데 콜백 함수가 뭘까? 다른 함수에 인자로 전달되어, 나중에 실행되는 함수이다. 예를 들어, 친구 A가 과제를 도와줄 때, 친구 B에게 전화를 걸어서 도움을 요청하고, 친구 B가 도와주면 친구 A는 도움을 받을 수 있다. 여기서 친구 B가 도움을 주는 역할을 하는 것이 콜백함수이다. map()을 예시를 통해서 접근해보자. 예를 들어, 친구들과 함께 스티커를 모으고 있다고 가정해보자. 각각의 스티커를 두 배로 키우고 싶다고 생각해..

1. 디자인 패턴이란? 디자인 패턴은 프로그래밍에서 자주 발생하는 문제를 해결하기 위한 효과적인 방법이다. 이해하기 쉽게 말하자면, 레고 블록을 생각해보자. 레고 블록은 서로 다른 모양과 크기를 가지고 있다.. 이 블록들을 조합하면 다양한 물건이나 건물을 만들 수 있다. 디자인 패턴도 이렇게 프로그래밍 문제를 해결하는 데 도움이 되는 틀이다. 디자인 패턴은 많은 사람들이 이미 사용해본 아이디어들이기 때문에, 다른 사람들이 이해하기도 쉽고, 코드가 더 깔끔해진다. 예를 들어, 초등학생들이 수학 문제집을 풀 때, 같은 유형의 문제를 여러 번 풀면서 더 잘 이해하고 해결할 수 있다. 디자인 패턴도 비슷하다. 프로그래머들이 이 패턴을 사용하면, 비슷한 문제를 더 쉽게 해결할 수 있다. 1.1.1 싱글톤 패턴 싱..

1. 라이브러리 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미한다. 폴더명, 파일명 등에 대한 규칙이 없고 프레임워크에 비해 자유롭다. 여러 가지 기능을 제공하는 함수들의 집합이고, 프로그램 개발 시, 라이브러리를 사용하면 일부 기능을 손쉽게 구현할 수 있다. 예를 들어, 수학 계산을 위한 라이브러리를 사용하면 사람이 직접, 계산할 필요 없이 라이브러리 함수를 호출하여 결과를 얻을 수 있다. 개발자가 필요한 기능을 보완하여 개발을 용이하게 해주는 역할을 한다. 코드의 가독성도 높여준다. 대표적인 라이브러리 JQuery HTML 문서의 요소를 선택하고 조작하는 기능을 제공하는 라이브러리 다양한 브라우저에서 일관된 방식으로 동작하도록 개발되어 있습니다. React UI(User Interfac..

1. 불변값 변수(참조형)와 상수(기본형)를 구분하는 성질은 변경 가능성이다. 바꿀 수 있으면 변수, 바꿀 수 없으면 상수이다. 변수는 변경 가능한 데이터를 달길 수 있는 공간이고, 식별자는 그 변수의 이름이다. 변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역 메모리이다. 변수 공간에 다른 데이터를 재할당할 수 있는지 여부가 중요하다. 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리이다. 기본형 데이터는 숫자, 문자열, boolean, undfined, Symbol은 모두 불변값이다. let a = "abc"; a = a + "def"; 변수 a에 문자열 "abc"를 할당했다가 뒤에 "def"를 추가하면 기존의 "abc"가 "abcdef"로 바뀌는 것이 아니라 새로운 문자열 ..

1. State - state는 왜 필요해? 어떤 자료를 잠깐 저장하고 싶을 때 사용한다. - 사용방법 useState를 import한다. 내가 잠시 맡길 자료를 useState()안에 저장한다. 보통 let [자료, 자료 변경 도우미(함수)]의 구조의 형태를 가진다. - 일반 변수 vs state 일반 변수는 값이 변경되면 html에 자동으로 반영되지 않는다. 반면에 state는 갑자기 값이 변경되면 html에 자동으로 반영된다.(재렌더링) 결론 자주 아무때나 state 사용하지 말고 어떤 값이 자꾸 변경되는 부분만 사용하자. - state 함수 사용법(3가지 중에 하나 선택) event handler = { 함수 } event handler = { 함수() { console.log(1) }} even..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ▶ 문제 요약 1. 트럭 여러 대가 일차선 다리를 정해진 순으로 건너려한다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내라. 2. 다리에는 최대 bridge_legnth대 올라갈 수 있으며, 다리는 weight 이하까지의 무게를 견딜 수 있다. 3. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 return해라. ▶ 코드 function solution(bridge_length, weight, truck_weights) { // 다리 = [트럭무게, 트럭이 나갈 시간] let time = ..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ▶ 문제 요약 1. 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 2. [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]을 만들 수 있고, 이중 가장 큰 수는 6210이다. 3. 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return하도록 작성 ▶ 코드 function solution(numbers) { // 내림차순 정렬 후 문자열로 변환 let answer = numbers.sort((a, b) ..