일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- three.js
- State
- 기본 문법
- 구현
- 토이 프로젝트
- 개발 회고
- react-three/fiber
- 코딩일기
- 자료 구조
- 브루트포스
- js
- 오블완
- poiemaweb
- 프론트엔드
- REACT
- 자바
- JavaScript
- 티스토리챌린지
- 시뮬레이션
- 세그먼트 트리
- 자바스크립트
- 해시를 사용한 집합과 맵
- Next.js
- HTML5
- 수학
- 백준
- 모던 자바스크립트 튜토리얼
- styled-components
- 회고
- playwright
- Today
- Total
목록전체 글 (87)
코딩하는 고릴라

🦍 문제 4673번: 셀프 넘버 셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다. 양의 정수 n이 주어졌을 때, www.acmicpc.net 🐈 문제 풀이 1. 무엇을 구해야 할까? - 문제에 주어진 규칙에 따라, 생성자가 없는 숫자를 셀프 넘버라고 하며, 1 ~ 10,000 까지의 숫자 중 셀프넘버인 숫자들만 한 줄에 하나씩 출력해야 한다. 2. 어떻게 구해야 할까? - 시간 제한은 1초이며, 1부터 10,000까지 반복문을 돌린다 하더라고 시간제한의 우려는 없다. - 1부터 10,000까지 반복문을 돌며, 해당 숫자를 생성자로 가지는 숫자..

1. Queue 클래스 선언 및 생성자 Line 1: Queue라는 이름으로 클래스를 선언 Line 2 : 생성자를 이용해 기본 구조 설정 Line 3 : Queue 내부에 값을 저장할 객체를 선언 - 배열이 아니라 객체를 선언한 이유는 메모리 낭비를 방지하기 위함입니다. - 후에 구현하게 될 push, poll의 방법으로는 push와 poll을 반복하다보면 배열의 앞부분에 값이 남아있지만 접근할 방법이 사라져 해당 메모리 공간이 낭비되기 때문에 객체로 선언해 이를 보완했습니다. Line 4 : Queue의 앞부분 Line 5 : Queue의 끝부분 2. isEmpty() 구현 Line 2 : rear와 front의 값이 일치하면 이는 Queue 내부에 아무런 값도 저장되어 있지 않음을 의미 Line 4..

fs모듈을 이용하는 방법과 readline을 이용하는 방법이 존재하는데, 이번 게시글은 fs모듈에 대해 다룹니다. 1. VSCode 파일 설정 VSCode를 킨 후, 한 폴더 내에 다음과 같이 example.txt 파일과 index.js 파일을 준비한다. - example.txt : 백준에서 예제 입력값들을 넣어 둘 파일 - index.js : 문제풀이를 위해 코드를 작성할 파일 2. 'CodeRunner' Extension 설치하기 - VSCode의 좌측 Extension 메뉴에서 'Code Runner'를 검색 후, 위 사진에서 최상단에 위치한 Code Runner Extension을 설치한다. - index.js에서 코드를 작성후 Ctrl + Alt + N 을 누르면 코드를 실행, 그 결과값을 확인..

🦥 Text 입력값 받아 활용하기 1. input값에 따라 시시각각 값이 업데이트될 state 선언 2. input 태그에 onChange 속성 넣어주기 3. onChange시, 앞에서 선언한 state 값에 변화 주기 - e.target.value : input 태그 내 입력될 값의 value - setTitleInput : 선언된 state인 titleInput의 값을 e.target.value로 변화시켜 준다 4. 등록 버튼 눌렀을 시 작동할 함수 작성하기 - Line 3 : titleInput이 공백인 경우는 게시글 등록을 하지 않기 위한 코드 - Line 4 : 기존 게시글 제목들을 담아놓은 state인 title의 값을 복사 - Line 5 : 복사된 배열에 새로 입력된 게시글 제목 추가 - ..

하위 컴포넌트에 props 전달하기 1) 하위 컴포넌트 요소에 전달할 속성 명시 - Modal 컴포넌트에 title 이라는 이름으로 title state를 전달 - Modal 컴포넌트에 idx 라는 이름으로 modalIdx state를 전달 2) 하위 컴포넌트에서 받아주기 - Modal 컴포넌트에서 props 라는 이름으로 속성 받기 - props 안에 있는 title을 꺼내 사용하기 위해 {props.title} 사용 - props 안에 있는 idx를 꺼내 사용하기 위해 props.idx 사용 3) 작동 예 - 각 Title의 제목을 누르면 화면 중단 아래에 해당 제목을 출력

map 함수를 사용해 줄이기 - 아래 코드를 살펴보면, className이 "list"인 가 여러번 반복됨을 확인할 수 있다. - 위와 같은 코드의 반복을 줄이기 위해 게시글의 제목이 담긴 state인 title와 map함수를 사용할 수 있다. - Line 2 : title state의 각 요소들(Title1, Title2, Title3)을 element라는 이름으로 받아온다. - Line 5 : 기존에 title[0], title[1], title[2]로 하드코딩된 부분을 {element}로 바꿔 title에 담겨져 있던 요소들을 꺼내 해당 위치에 넣어 사용할 수 있다.