Bin's Blog

Promise는 자바스크립트에서 비동기를 처리하기 위한 객체이다. Promise는 어떤 작업이 완료되었을 때 그 결과를 처리하는 방법을 제공한다. Promise는 3가지 상태를 가질 수 있다. 1. Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태 2. Fulfilled(이행): 비동기 처리가 성공적으로 완료된 상태 3. Rejected(거부): 비동기 처리가 실패하거나 오류가 발생한 상태 예를 들어서, pending이라는 것은 친구의 생일이 오지 않아서 선물을 주지 않은 상태를 의미하고, Fulfilled는 친구의 생일날 선물을 준다. 이것이 약속을 지킨 것이다. Rejected는 어떤 이유로든 선물을 줄 수 없다. 이것이 약속을 어긴 것이다. let promise = new Prom..

1.1 객체지향 프로그래밍이란? 객체지향 프로그래밍은 프로그래밍의 한 방식이다. 객체들의 집합으로 프로그램의 상호 작용을 포현하며 데티어를 개체로 취급하여 객체 내부에 선언된 메서드를 활용하는 방식이다. 쉽게 설명하면, 집을 지을 때와 비교해보자. 집을 지을 때는, 미리 설계도를 그린다. 그 설계도에는 방의 크기, 창문의 위치, 문의 개수 등 여러가지 정보가 포함되어 있다. 이 설계도를 바탕으로 실제 집을 지어간다. 객체지향 프로그래밍에도 클래스라는 것이 있는데 마치 집을 지을 때 설계도와 같다. 클래스에서는 속성과 메서드가 포함되어 있다. 속성은 클래스가 가지는 특징이나 상태를 나타내고, 메서드는 클래스가 할 수 있는 행동을 나타낸다. 강아지라는 클래스가 있다면 클래스의 속성은 이름, 나이, 털, 색상..

비동기란, "동시에 일어나지 않는다"는 의미이다. 자바스크립트는 본래 싱글 스레드 언어이다. 싱글 스레드는 쉽게 말해 실을 생각해보자. 실은 다 풀려야 끝이 난다. 한 번에 하나의 작업만 처리할 수 있다. 예를 들어, 서버에서 데이터를 가져오는 작업을 하는데. 작업 시간이 오래 걸린다고 하는데 이 작업이 동기적으로 처리된다면, 데이터를 가져올 때까지 아무것도 할 수가 없어 사용자는 웹 페이지에서 아무런 반응을 볼 수 없게 된다. 하지만 비동기적으로 처리되면, 서버에서 데이터를 가져오는 동안에도 다른 작업들을 처리할 수 있다. 즉, 데이터를 요청하고 그 결과를 기다리는 동안에 다른 작업들을 계속 진행할 수 있다. 이렇게 함으로써, 싱글 스레드인 자바스크립트에서도 사용자가 웹 페이지와 상호작용하는 동안에도 ..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ▶ 문제 요약 1. 모든 참가자들에게는 숫자들과 3가지의 연산문자(+, -, *)만으로 이루어진 연산 수식이 전달되고 전달받은 수식에 포함된 연산자의 우선순위를 자유롭게 재정의하여 만들 수 있는 가장 큰 숫자를 제출해라. 2. 연산자의 우선순위 정할 때 같은 순위의 연산자는 없어야한다. 6개의 조합을 가지고 계산하라. 3. 계산된 결과가 음수라면 해당 숫자의 절댓값으로 변환하여 제출하며 제출한 숫자가 가장 큰 참가를 우승자로 선정한다. ▶ 정답 코드 // 숫자 연산 함수 function calculation(..

프로그래밍 패러다임이란 프로그래머가 프로그래밍을 어떻게 접근하고 생각하는지에 대한 방법론이나 관점이다. 1.1 선언형 프로그래밍 어떻게 문제를 해결하는지보다 무엇을 해결하려는지에 집중하는 패러다임이다. 예를 들어) 레고 조립도면을 보는 것과 같다. 조립도면은 우리가 최종적으로 어떤 모양의 레고를 만들어야 하는지 알려준다. 그러나 어떻게 조합해야 하는지는 알려주지 않는다. 1.2 함수형 프로그래밍 입력과 출력 간의 관계를 설명하고, 프로그램은 이 선언에 따라 동작하게 된다. 마치 레고 조립도면에서 "이 블록이 이 블록 위에 오면, 이런 모양이 된다"는 규칙을 선언하는 것과 비슷하다. const list = [1, 2, 3, 4, 5, 6, 7]; const ret = list.reduce((max, num..

this는 함수와 객체의 구분의 느슨한 자바스크립트에서 실질적으로 이 둘을 구분하는 유일한 기능이다. 어떤 객체 내부에서 사용될 때 그 객체를 가리키는 역할을 한다. 만약 어떤 객체의 함수에서 this를 사용한다면, 그 this는 그 함수가 속한 객체를 가리킨다. 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. this는 함수를 호출할 때 결정된다. 1.1.1 전역 공간에서의 this 전역 공간에서 this는 전역 객체를 가리킨다. 자바스크립트 런타임 환경에 따른 다른 이름과 정보를 가지고 있다. 브라우저 환경에서 전역객체는 window이고 Node.js환경에서는 global이다. * 전역 공간에서의 this(브라우저 환경) // { alert: f(), atob: f()..

1. MVC 패턴이란? Model-View-Controller의 줄임말로, 프로그램을 세 가지 부분, 즉 모델, 뷰, 컨트롤러로 나눠 편리하게 관리한다. 1.1. 모델: 데이터와 관련된 부분을 담당한다. 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻한다. 예를 들어, 게임에서 캐릭터의 정보나 점수 등을 관리하거나, 쇼핑 사이트에서 상품정보를 관리하는 부분이 모델이다. 1.2. 뷰: 사용자에게 보여지는 화면(인터페이스)를 담당한다. 사용자가 보는 화면을 구성하고, 모델이 가진 데이터를 화면에 표시하는 역할을 한다. 예를 들어, 게임의 그래픽이나, 쇼핑 사이트의 상품 목록 페이지 등이 뷰에 해당한다. 변경이 일어나면 컨트롤러에 이를 전달해야 한다. 1.3. 컨트롤러: 사용자의 입력을 받아 처리하..

1. URL 파라미터로 상세페이지 만들기 - Function APP에서 detail 컴포넌트로 전송하려면 Q. detail 컴포넌트 안에 shoes라는 state를 만들면 되지 않을까? A. 그러면 나중에 수정사항이 생길 때 두 곳을 수정해야하니 불편하다. Q. detail 상품이 여러개라면 상세페이지 100개가 필요하다면? A. :URL 파라미터를 써도 된다. (이렇게하면 상세페이지를 수백만개 만들 수 있다) Q. 페이지는 여러개인데 보이는 내용이 똑같으면? A. props를 활용하면 컴포넌트 1개로 각각 다른 내용이 가능하다. {props.shoes[현재url에 입력한 숫자].title} 유저가 URL파라미터에 입력한 거 가져오려면(useparams())을 사용하자. Q. 상품의 영구번호가 0인 상품..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ▶ 문제 요약 1. 방금그곡 서비스에 음악 제목, 재생이 시작되고 끝난 시각, 악보를 제공한다. 2. 네오가 기억한 멜로디와 악보에 사용되는 음은 C, C#, D, D#, E, F, F#, G, G#, A, A#, B 12개이다. 3. 각 음은 1분에 1개씩 재생된다. 음악은 반드시 첨부터 재생되며 음악 길이보다 재생된 시간이 길 때는 음악이 끊김 없이 처음부터 반복해서 재생된다. 음악 길이보다 재생된 길이가 짧을 때는 처음부터 재생 시간만큼만 재생된다. 4. 조건이 일치하는 음악이 여러 개일 때에는 라디오에..

1. Navigate, nested routes, outlet - useNavigate() -훅(use로 시작하는 것들, 유용한 것들이 들어있는 함수) import { Routes, Route, Link, useNavigate} from "react-router-dom"; { navigate(-1) }}>Home { navigate("/detail") }}>Detail - 404 페이지 생성 // *을 쓰면 위에 만든 라우터를 제외한 모든것 - Nested Routes(route 작성 약간 간단해진다.) //(about/member), (/about/location) - Nested route 접속시엔 위에처럼 element가 2개이면 2개 보이니까 어디 보여줄지 작성해야 한다. 그래서 outlet을 사..