FrontJin

클래스클래스와 인스턴스의 개념클래스는 어떤 사물의 공통 속성을 모아 정의한 추상적인 개념인스턴스 클래스의 속성을 지니는 구체적인 사례프로토타입 메서드와 스태틱 메서드의 개념프로토타입 메서드는 prototype 내부에 정의된 메서드이며 인스턴스가 자신의 것처럼 호출할 수 있음스태틱 메서드는 클래스에 직접 정의한 메서드이며 인스턴스에서 직접 접근 할수 없고 클래스에 의해서만 호출할 수 있음클래스가 구체적인 데이터를 지니지 않게 하는 방법만들고 나서 프로퍼티들을 일일이 지우고 더는 새로운 프로퍼티를 추가할 수 없게 하는 것빈함수를 활용하는 방법Object.create 를 활용constructor 복구하기앞의 세 방법에서 SubClass.prototype.constructor = Subclass 를 추가해 원래..

프로토타입객체 지향 언어: 클래스 기반 vs. 프로토타입 기반프로토타입의 개념(prototype, __proto__ , constructor등)어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스가 생성된다.이때 instance에는 __proto__라는 프로퍼티가 자동으로 부여되는데,이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 그대로 참조한다.가급적 __proto__를 사용하지 않기를 권장, 대신 Object.getPrototypeOf()/ Object.create()등을 이용.__proto__는 생략가능하기 때문에, 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스에서도..

콜백함수콜백함수의 정의와 예시다른 코드의 인자로 넘겨주는 함수로써, 제어권을 함께 위임한 함수를 가지고 있습니다.ex) 알람..콜백함수에서의 제어권호출시점 : 콜백 함수의 제어권을 넘겨받은 함수가 언제 콜백을 실행할지 결정인자 : 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권을 갖는다.this : 기본적으로 this 가 전역객체를 참조하지만 제어권을 가진 함수가 this를 특정 객체로 지정할 수 있음콜백함수를 사용하는 이유비동기를 다루기 위해서 → 특정 조건이 달성되면 → 함수를 실행하여 → 실행한 결과 or 값 을 반환콜백함수에 this 를 바인딩하는 방법bind, call, apply 메서드 사용, 화살표 함수 사용콜백지옥이란,..

This자바스크립트에서의 this는 무엇인가요?class가 없는 JS(ES6이전, ES6부터는 class 외)에서 class처럼 자신만의 속성을 주기 위해 this 사용? → 함수 객채 내에서의 현재의 실행 컨텍스트를 참조하는 키워드by GPT동적 객체 참조: this를 사용하면 동일한 함수가 다양한 객체에서 호출되더라도 그 객체를 참조하도록 함으로써 코드 재사용성을 높일 수 있습니다.객체의 컨텍스트 유지: 메서드나 이벤트 핸들러 등에서 객체 내부의 데이터를 사용할 때 this를 통해 객체 자체에 대한 참조를 유지할 수 있습니다.객체 지향 스타일: this는 생성자 함수나 클래스에서 객체의 속성이나 메서드를 쉽게 참조할 수 있게 하여 객체 지향 프로그래밍을 가능하게 해줍니다.this를 사용하는 이유thi..

undefined와 nullundefined와 null의 차이undefined 는 JS에서 데이터가 없을때 내보내고 null 은 개발자가 값이 없음을 명시하기 위해서 사용null만 쓰셈내가 할당한 undefined와 자바스크립트가 자동으로 할당해준 undefined의 차이내가 할당한 undefined : ‘undefined’ 라는 값(null과 비슷)자바스크립트가 할당한 undefined : 없다 라는 뜻의 undefinedempty와 undefined의 차이콜백함수에서 다뤄지는 유무 empty → X, undefined → O어떤 변수의 값이 null인지를 판별하게 위한 방법일치연산자(===)typeof null 은 object실행 컨텍스트스택과 큐의 차이점스택은 들어온 순서와 나가는 순서가 반대, 큐..

기본형과 참조형기본형과 참조형의 구분 기준은 무엇인가요?불변성과 가변성불변성은 메모리 안의 데이터가 변경되지 않음가변성은 메모리 안의 데이터가 변경 됨https://velog.io/@darong_/기본형-데이터와-참조형-데이터자바스크립트에서 변수와 식별자의 차이는 무엇인가요?변수 = 변할 수 있는 데이터를 담는 그릇식별자 = 변수를 구분할 수 있는 이름 (변수명)자바스크립트에서 데이터를 할당하는 원리? 방식?변수를 선언하고 메모리에 해당 변수와 값을 할당하여 저장한다.메모리를 효율적으로 관리하기 위해 변수와 데이터를 따로 저장하여 변수의 값은 데이터를 참조한다.변수가 메모리에 할당되는 과정과 메모리에 대해 설명해보세요. ⇒ js 관점에서변수와 데이터를 저장하고 관리하는 공간.코드를 작성할 때 불변성이 중..

오늘은 Anima 플러그인을 이용하여 Figma 디자인을 Tailwind css로 자동 변환하는 법을 설명하려고 한다. https://www.animaapp.com/figma Figma to Code - Export React, HTML & Vue from any Figma designCreate responsive prototypes, export HTML & CSS, React or Vue, or publish live websites from your design. Use Anima for Figma for free!www.animaapp.com 사용법준비물 : 디자인이 된 피그마 1. 피그마 하단의 플러그인 아이콘 클릭2. plugins&widgets 탭에서 Anima 검색, Run 3. 로그인하..

"use client";import { useSession } from "@/hooks/useUserProfile";import supabase from "../../../utils/supabase/client";import { useEffect, useState } from "react";import { Database, Tables } from "../../../../database.types";const ApplyStudyList = () => { const [studyApplyList, setStudyApplyList] = useState([]); //유저 정보 가져오기 const { data: user } = useSession(); console.log(user); useEffect(..