joycie416 님의 블로그

[JS] 프로토타입 Prototype

※ 본 내용은 코어 자바스크립트 (정재남)의 내용을 정리한 글입니다. 앞서 정리한 프로토타입 기반 객체 지향 언어인 JS에 대해 이어서 이야기해보자. 01 프로토타입 개념프로토타입(prototype)은 단어 그 자체처럼 원형, 원조로 생각하면 된다. 상속된다는 느낌보다 대를 잇는 느낌으로 보면 된다. 01-1 Constructor, Instance, Prototype프로토타입을 이해할 때 중요한 개념은 생성자(constructor) 함수, 프로토타입(prototype), 인스턴스(instance)와 `__proto__`이다. '코어 자바스크립트'에서는 아래 삼각형으로 그 관계를 설명하고 있다.  JS의 함수는 본래 prototype 속성을 가지고 있고, new 키워드를 통해 생성된 인스턴스는 `__pro..

인공지능에 대한 관심이 커지면서 파이썬 사용이 늘어났다. 그러면서 많이 들었던 말 중 하나로 '파이썬은 객체 지향 언어'가 있다. 파이썬 외에도 Java, C++ 등도 객체 지향 언어이고, 웹 개발에 많이 쓰이는 JavaScript도 객체 지향 언어이다. 그런데 파이썬, Java, C++과 JS은 완전히 같은 객체 지향 언어는 아니다. 먼저 JS는 프로토타입 기반이고 파이썬, Java, C++은 클래스 기반 객체 지향 언어(Object-Oriented Programming, OOP)이다. 01 객체 지향 프로그래밍 (OOP) vs. 절차 지향 프로그래밍 (Procedural Programming)객체 지향 프로그래밍은 프로그램이 해결해야할 문제를 작은 부분들로 나누고, 각 부분을 데이터(속성)와 그 데이..

※ 본 내용은 코어 자바스크립트 (정재남)의 내용을 정리한 글입니다. JS를 공부하다보면 많이들 혼란스러워하는 개념 중 하나로 `this`가 있다. this는 상황에 따라 가리키는 대상이 달라져 매우 혼란스럽기 때문이다. 이에 대해서 정리해보려고 한다. 01 상황에 따라 달라지는 this실행 컨텍스트가 생성될 때 VariableEnvironment와 LexicalEnvironment가 생성되며 하나의 일을 더 한다. 그것이 바로 thisBinding이다. this가 가리키는 대상을 결정해준다. this는 함수를 호출할 때 결정된다. 함수를 어떤 방식으로 호출하냐에 따라 값이 달라진다. 01-1 전역 공간에서의 this전역 공간에서 this는 전역 객체를 가리킨다. 즉 브라우저에서 실행하면 window, ..

https://school.programmers.co.kr/learn/courses/30/lessons/42883 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해완전 탐색하려면 너무 시간이 오래 걸려서 다른 방법을 사용해야할 것 같았다. 조금 더 패턴을 찾기 위해 예시를 들여다보니 앞 자리에서부터 크기 비교를 통해 큰 수를 만들 수 있었고, 원하는 만큼 숫자를 제거했을 때 종료하면 될 것 같았다.다음이 키 포인트이다.현 위치 숫자가 오른쪽 숫자보다 작으면 현 위치를 제거! 먼저 String의 `slice` 메소드를 사용하는 방법을 사용했지만 한 케이스..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해이 문제는 주어진 숫자를 잘 조합해서 가장 큰 수를 만드는 문제이다. 그래서 기본적으로 내림차순 정렬을 해야하지만, 320과 32이 주어진 경우 32320이 32032보다 더 크다는 것에 유의해야 한다. 그래서 이 문제는 sorting을 조금 더 효율적으로 다룰 수 있는지 확인할 수 있는 문제인 것 같다. 먼저 내 첫 풀이는 맞는 풀이인 것 같지만 너무 시간이 오래 걸려서 시간 초과로 실패했다. 그래서 다른 사람 코드를 참고했다. 다른 분들 풀이를 보니 아이디어가 대단해보였다. ㅜ 방법 1이 방법은 위에 ..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해처음 문제를 보자마자 재귀함수를 써야겠다고 생각했다. 아니면 JS의 재귀함수 횟수를 고려해서 배열을 써야겠다고 생각했다. 그래서 DFS와 BFS를 각각 재귀함수와 배열로 구현했는데, 시간이 초과되어 검색해볼 수 밖에 없었고 DP를 써야한다는 것을 알게 되었다. 방법 1 - DFS먼저 가장 먼저 시도한 깊이 우선 탐색(DFS) 코드는 다음과 같다. 가장 값이 크게 변할 것 같은 연산부터 진행했다.function solution0(x, y, n) { let answer = null; const DFS = ..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 이해모든 경우를 탐색해야 한다. 탐험할 수 있는 최대 길이를 구하는 문제이므로 DFS를 사용해야 할 것 같다. 아직도 DFS를 구현하는 것이 힘들어서 다른 사람 코드를 참고했다.ㅜ 방법깊이 우선 탐색은 방문한 것은 스택으로, 방문해야할 것을 큐로 저장해야한다.왜냐하면 노드를 타고 최대한 깊게 들어간 후, 다시 경로를 타고 올라와서(스택) 다음 경로로 가야하기(큐) 때문이다. function solution(k, dungeons) { let answer = 0; // 방문했는지 확인하기 위한 배열 con..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 이해이 문제에서 키 포인트는 이름이 같은 의상은 없다는 것이다. 결국 가지고 있는 의상의 종류 마다의 개수를 세서 다 곱한 후에 아무 것도 착용하지 않은 경우를 빼주면 된다. 방법 1아래에 나올 방법 2와 따지고 보면 같은 방법이지만 아직 `reduce` 메소드를 자유롭게 다룰 수 있는 수준은 아니라서 기록해본다. 먼저 말했듯이 언급된 의상을 종류별로 카운트하기만 하면 된다. 늘 했듯이 빈 객체를 만들고 `undefined`가 아니면 +1, `undefined`이면 value가 1이 되도록 key-value..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 이해서로 다른 세 가지 괄호가 올바르게 정렬되어야 한다. 괄호가 한 종류만 있는 문제와 달리 다른 종류의 괄호를 어떻게 처리할 것인가 고민해봐야 한다.한 종류만 있는 경우 `(`을 `1`과 대응하고 `)`을 `-1`과 대응시켜 중간에 합이 음수가 되지 않도록하면 됐지만 이번에는 괄호가 여러 종류가 있어 다른 접근방법을 생각해봐야 한다. 방법 1 - 숫자와 대응하기위에 이야기한 것처럼 숫자와 대응시켜보았다. 문자열의 길이가 최대 1000이므로 1000배씩 차이나면 겹치치 않을 것이라 생각해 `( - 1, { ..

이미 supabase Docs에서 친절하게 설명해주고 있지만 정리해보려고 한다. Table데이터 저장하기먼저 Table에 데이터를 추가하려면 아래와 같이 코드를 작성하면 된다. const addData = async (post) => { const { error } = await supabase.from().insert(); if (error) { throw error; } else { console.log("add data succeed"); } }; 데이터 불러오기아래 코드는 첫 렌더링 후에만 불러와야하는 과정 중에 있다고 가정했을 때의 코드이다. 따라서 `useEffect`를 사용하고 의존성 배열(dependency array)을 아래와 같이 작성했다. ..