Bin's Blog

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을 사..