728x90

2024/06 61

[JS] 구조 분해 할당(Destructuring assignment)

구조 분해 할당은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.* 이터러블: 반복 가능한 객체. 배열, 문자열, Map, Set 등 배열 구조 분해 할당var arr = [1, 2, 3]var one = arr[0]var two = arr[1]var three = arr[2]console.log(one, two, three);1 2 3 ES6의 배열 구조 분해 할당은 배열의 각 요소를 배열로부터 추출해 1개 이상의 변수에 할당한다. 할당의 대상(우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다. const arr = [1, 2, 3]const [one, two, three] = arrconsole.log(one, two, three)..

Javascript 2024.06.14

[백준 자바] 31428번(엘리스 트랙 매칭)

난이도 - 브론즈 4 문제엘리스 트랙은 2020년부터 시작한 KDT(K-Digital Training) 교육이며 Cloud 트랙, SW 엔지니어 트랙, IOT 트랙, AI 트랙 총 4가지 트랙이 있다.헬로빗은 이러한 엘리스 트랙에 매력을 느껴 친구들 𝑁$N$명을 모아 같이 엘리스 트랙에 지원하려 한다. 헬로빗의 친구들과 헬로빗이 지원하는 트랙에 대한 정보가 주어질 때, 헬로빗이 지원하는 트랙과 같은 트랙을 지원하는 헬로빗의 친구들은 총 몇 명이 있는지 출력하는 프로그램을 작성해 보자.입력첫 번째 줄에 친구들의 수를 의미하는 정수 𝑁$N$이 주어진다. (1≤𝑁≤10000)$(1 \leq N \leq 10 \, 000)$ 두 번째 줄에 헬로빗의 친구들이 지원하는 엘리스 트랙에 대한 정보 𝑁$N$개가 ..

백준/Java 2024.06.14

[React] TicTacToe앱 만들기(1) - 컴포넌트 생성, props, state

1. 기본 설정택택톡 앱은 크게 게임판 부분과 게임 정보 부분으로 구성된다.App.jsfunction App() {  return (          div className="game">        div className="game-board">        div>        div className="game-info">        div>      div>      );}export default App; App.css.game{  display: flex;  flex-direction: row;}.game-info {  margin-left: 20px;} index.cssbody {  font: 14px "Century Gothic", Futura, sans-serif;  margin: ..

Frontend/React 2024.06.14

[React] 번들러 | 리액트 컴포넌트 | JSX

2024.06.12 - [Frontend/React] - [React] 리액트 프로젝트 생성(create-react-app) [React] 리액트 프로젝트 생성(create-react-app)editor: vs code 1. Node.js, npm 설치 2. create-react-appcreate-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 간편하게 프로젝트 작업 환경을 구축해준다.터미gamzaggang7.tistory.com 저번에 생성한 프로젝트에서 App.js 파일을 열어본다. 1. 번들러import logo from './logo.svg';import './App.css';상단에 특정 파일들을 불러오고 있다. 번들러 도구를 사용하면 impo..

Frontend/React 2024.06.12

[React] 리액트 프로젝트 생성(create-react-app)

editor: vs code 1. Node.js, npm 설치 2. create-react-appcreate-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 간편하게 프로젝트 작업 환경을 구축해준다.터미널에서 원하는 디렉터리로 이동 후 명령어를 입력한다. npx create-react-app npx는 노드 패키지 실행을 도와주는 도구 그럼 바탕화면에 프로젝트 폴더가 생성됨 3. 프로젝트 기본 구조public: 정적 파일을 저장하는 곳. public 내부의 파일만 public/index.html에서 사용할 수 있다.src: 리액트 컴포넌트와 애플리케이션 로직이 들어있는 곳. Webpack은 여기 있는 파일만 보기 때문에 이 폴더 외에 넣은 것은 Webpa..

Frontend/React 2024.06.12

[백준 자바] 5691번(평균 중앙값 문제)

난이도 - 브론즈 3 문제세 정수 A, B, C의 평균은 (A+B+C)/3이다. 세 정수의 중앙값은 수의 크기가 증가하는 순서로 정렬했을 때, 가운데 있는 값이다.두 정수 A와 B가 주어진다. 이때, A, B, C의 평균과 중앙값을 같게 만드는 가장 작은 정수 C를 찾는 프로그램을 작성하시오.입력입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 테스트 케이스는 한 줄로 이루어져 있고, A와 B가 주어진다. (1 ≤ A ≤ B ≤ 109) 입력의 마지막 줄에는 0이 두 개 주어진다. 출력각 테스트 케이스에 대한 정답을 한 줄에 하나씩 출력한다.  A는 B보다 작거나 같다. 세 수를 크기순으로 정렬했을 때 나올 수 있는 결과는 아래 3가지이다.A B CA C B C A B평균과 중앙값을 같게 만드는 수 ..

백준/Java 2024.06.10

[Canvas] 불꽃놀이 만들기

2024.05.24 - [Canvas] - [Canvas] 보일러 플레이트 작성 (캔버스 클래스) [Canvas] 보일러 플레이트 작성 (캔버스 클래스)index.js  CanvasOption.jsexport default class canvasOption { constructor() { this.canvas = document.querySelector('canvas') this.ctx = this.canvas.getContext('2d') this.dpr = window.devicePixelRatio this.fps = 60 this.interval = 1000 / this.fps this.canvagamzaggang7.tistory.com 1. 파티클 생성js 폴더 내에 Particle.js 을 만들..

Frontend/Canvas 2024.06.10

[주간 회고] 6/3 ~ 6/9

Vue.jstodo App 제작 footer - 전체 삭제 버튼기존 구조 개선(props, 이벤트 전달) - 입력 시 목록 자동 갱신, clear all 버튼 자동 갱신뷰 애니메이션 추가뷰 모달 추가Canvas불꽃놀이 - 꼬리, 스파크 효과, 다듬기JLPT한자 표기pp.76~78 암기pp.79~84 문풀문맥규정pp.86~89, 97~100, 111~113 암기유의 표현pp.120~123, 129~131 암기용법pp.157~159, 166~168 암기문법1~21(조사), 22~51(필수 문법) 암기pp.262~263 문풀단어 테스트 11회

카테고리 없음 2024.06.10

[Vue CLI] 할 일 관리 앱 만들기(2)

애플리케이션 구조 개선현재 todoApp은 데이터를 입력했을 때 목록에 바로 반영되지 않으며, clear all 버튼을 눌렀을 때로 목록에 바로 반영되지 않는다. 4개의 컴포넌트로 분리했기 때문에 한 영역에서의 처리 결과를 다른 영역에서 감지하지 못하는 것이다. 그렇다고 하나의 컴포넌트 안에서 데이터 저장, 조회, 삭제를 모두 처리하는 것은 비효율적이다. TodoInput의 newTodoItem과 TodoList의 todoItems은 모두 '할 일' 이라는 같은 데이터 속성을 사용한다. 최상위 컴포넌트인 App 컴포넌트에서 '할 일' 데이터를 정의하고 하위 컴포넌트에 props로 전달한다면 위의 문제점들을 해결할 수 있다. App 컴포넌트에서 데이터 조화, 추가, 삭제를 하고 하위 컴포넌트들은 요청(이벤..

Frontend/Vue.js 2024.06.08

[Vue CLI] 할 일 관리 앱 만들기(1)

프로젝트 생성 및 초기 설정vue create [프로젝트명]으로 프로젝트 생성 awesome icon 사용 (index.html)link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 컴포넌트 생성할 일 관리 앱의 컴포넌트 구조는 헤더, 입력, 목록, 푸터로 구성된다. 컴포넌트 폴더에 To..

Frontend/Vue.js 2024.06.05
728x90