분류 전체보기

1. 자바스크립트의 클래스(Class)란?자바스크립트의 클래스는 객체를 만드는 설계도입니다. 쉽게 말해, 클래스가 붕어빵 틀이라면 클래스로 만든 객체는 그 틀로 만든 붕어빵입니다. 클래스는 객체지향 프로그래밍의 개념을 지원하며, 여러 객체를 생성할 때 공통되는 속성과 메서드를 정의할 수 있습니다. 자바스크립트의 클래스는 ES6(ECMAScript 2015)에서 도입되었습니다. 2. 클래스와 인스턴스, 붕어빵 틀과 붕어빵 관계 클래스는 붕어빵 틀처럼 어떤 물건을 찍어내는 틀이라고 생각할 수 있습니다. 그 틀에는 붕어빵의 모양과 재료(속성) 등이 정의되어 있습니다. 예를 들어, 붕어빵 틀에는 크기, 모양, 안에 팥이나 슈크림 같은 내용물이 무엇인지가 정해져 있습니다.객체는 그 틀로 찍어낸 붕어빵입니다. 같은..

Next.js 앱라우터를 사용한 블로그 프로젝트에서 오픈 그래프에 대해 알아보고, 적용하면 도움이 많이 될 것 같아 실제 프로젝트에서 적용했습니다. 저의 목표는 다음과 같았습니다.검색 엔진 최적화(SEO)와 메타데이터 OG 태그에 대한 이해하기블로그 특성을 고려해 SEO 동적 페이지 메타데이터를 생성하는 법 배우기 블로그 특성상 검색 엔진 최적화(SEO)와 동적 페이지의 메타데이터 생성이 매우 중요합니다. SEO는 검색 엔진에서 웹사이트가 더 잘 노출되도록 하는 방법으로, 메타 태그를 활용해 웹사이트의 정보와 내용을 검색 엔진에 전달함으로써 중요한 역할을 합니다.검색엔진최적화 (SEO)SEO는 Search Engine Optimization의 약자로, 검색 엔진에서 웹사이트의 가시성을 높이기 위한 다양..

문제https://www.acmicpc.net/problem/25206 인하대학교 컴퓨터공학과를 졸업하기 위해서는, 전공평점이 3.3 이상이거나 졸업고사를 통과해야 한다. 그런데 아뿔싸, 치훈이는 깜빡하고 졸업고사를 응시하지 않았다는 사실을 깨달았다!치훈이의 전공평점을 계산해주는 프로그램을 작성해보자.전공평점은 전공과목별 (학점 × 과목평점)의 합을 학점의 총합으로 나눈 값이다.인하대학교 컴퓨터공학과의 등급에 따른 과목평점은 다음 표와 같다.A+4.5A04.0B+3.5B03.0C+2.5C02.0D+1.5D01.0F0 P/F 과목의 경우 등급이 P또는 F로 표시되는데, 등급이 P인 과목은 계산에서 제외해야 한다.과연 치훈이는 무사히 졸업할 수 있을까? 정답const fs = require("fs");con..

📌 useRef로 DOM 요소 접근Ref를 사용하면 DOM 요소에 접근할 수 있는데, 이는 Document querySelector()과 비슷한 기능을 합니다. input 태그로 예제 코드를 먼저 작성해보겠습니다.const App = () => { return ( 로그인 );};export default App;  input을 클릭하면 input이 활성화되는데, 이 상태를 input이 focus 상태가 되었다고 합니다. focus를 자동으로 시켜주는 로직을 구현하려면 DOM 요소에 직접적으로 접근해야 합니다. 이를 useRef로 쉽게 구현할 수 있습니다. 로그인 페이지에 들어갔을 때, input을 클릭하지 않아도 focus 상태가 되도록 만들어보겠습니다. ref 속..

📌 useRef란?함수형 컴포넌트에서 useRef를 호출하면 ref Object를 반환합니다. ref Object의 형태는 다음과 같습니다.{ current: value }인자로 넣어준 초기값이 저장이 됩니다.수정이 가능하기 때문에 언제든 원하는 값으로 변경 가능합니다.컴포넌트가 렌더링이 되어도 언마운트 되기 전까지는 값을 계속 유지할 수 있습니다.📌 언제 useRef를 사용하나요?1. ref는 state와 비슷하게 값을 저장해두는 저장 공간으로 사용이 됩니다.state가 변경이 되면 리렌더링이 되고 함수가 다시 호출되기 때문에 컴포넌트 내부 변수들을 초기화합니다. 그래서 원하지 않는 렌더링 때문에 곤란해지는 경우가 생깁니다.ref가 변화해도 컴포넌트가 리렌더링이 되지 않습니다. 따라서 변수들의 값이..

📌 언제 useEffect를 사용하나요?어떤 컴포넌트가Mount 되었을 때 (화면에 첫 렌더링)Update 되었을 때 (다시 렌더링)Unmount 되었을 때 (화면에서 사라짐)useEffect 를 사용합니다. 📌 useEffect 사용 방법[빈 배열] useEffect는 인자로 콜백함수를 사용합니다.useEffect(()=>{ // 작업}); 이런 형태로 사용한다면 컴포넌트가 마운트, 업데이트될 때 실행됩니다. [의존성 배열]useEffect(()=>{ // 작업}, [value]); 이렇게 인자로 배열을 전달한다면, 매번 렌더링이 될 때마다 실행되지 않고 마운트될 때와 배열 value 값이 바뀔 때 마다 실행됩니다. 만약 빈 배열을 넣으면 컴포넌트가 맨 처음 화면에 렌더링될 때만 실행됩니..

문제https://www.acmicpc.net/problem/1152 영어 대소문자와 공백으로 이루어진 문자열이 주어진다. 이 문자열에는 몇 개의 단어가 있을까? 이를 구하는 프로그램을 작성하시오. 단, 한 단어가 여러 번 등장하면 등장한 횟수만큼 모두 세어야 한다.  정답 난이도가 쉬워 보였으나, 생각보다 정답 비율이 낮아 의문이 생겼습니다. 처음 접근할 때 input을 받아 split(" ")을 통해 공백을 기준으로 배열을 잘라주고 그 배열의 길이를 출력하면 된다고 생각했습니다. console.log(input.length); 하지만 주의할 점이 있는데, 공백만 존재할 경우입니다. 아무것도 입력받지 않아도 배열에 공백이 추가되어 1이 출력됩니다. 그래서 첫 번째 요소인 공백일 때의 조건을 추가하여 배..

공부 목적알고리즘 공부를 하다가 배열 문제에서 slice와 splice를 자주 사용했습니다. 자주 사용하는 만큼 개념을 정리하면 좋을 것 같아 정리했습니다. Array.prototype.slice()기본 문법slice() 메소드는 배열의 일부분을 추출하여 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다. 사용법은 다음과 같습니다.array.slice(start, end) start: 추출을 시작할 인덱스 번호- 추출할 때 이 시작 인덱스가 포함됩니다.- 음수 값을 넣으면 배열의 끝에서부터 역방향으로 계산합니다.- 생략 시 start 값은 0으로 간주합니다. end: 추출을 종료할 인덱스 번호- 추출할 때 이 종료 인덱스는 포함되지 않습니다. end 번호 앞까지 추출합니다.- 음수 값을 넣으면 s..