정현's 블로그

1. 얕은 복사 -> 객체를 얕은복사하면 객체의 원소 중 원시타입이 아닌 객체에 대해 참조를 공유한다. 참조에 대해 먼저 알아보자 1) 컨테이너에 대한 참조 ※ 컨테이너: 원본 객체 그 자체 const obj = {a:1, b:2, c:{d:7. e:8}} 자바스크립트에서는 변수 obj에 무언가를 대입하면 이 변수를 참조 방식으로 가리킨다. 2) 참조의 좋은 점 const obj = {a:1, b:2, c:{d:7, e:8}} // 원본 const obj_copy = obj; obj_copy['d'] = 99; console.log(obj); // {a:1, b:2, c:{d:7, e:8}, d: 99} console.log(obj_copy); // {a:1, b:2, c:{d:7, e:8}, d:99}..

※ 익명함수, 유명함수, 즉시실행함수 / 클로저 1. 일급함수 - 함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현한다. 일급 함수를 가진 언어에서는 함수를 다른 함수에 인수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있다.(함수가 다른 일급 객체와 동일하게 다루어 질때, 일급 함수라고 지칭한다.) const foo = function() { console.log("foobar"); } // 변수를 사용해 호출 foo(); 함수를 인자로 전달하는 예시 function sayHello() { return "Hello, "; } function greeting(helloMessage, name) { console.log(helloMessage() + name);..

1. Array: map, filter, reduce, push, pop, slice 1) map() - 콜백함수의 리턴을 모아서 새로운 배열을 만들 수 있다. - 요소를 일괄적으로 변경하는 데 효과적임 배열.map(function(현재값[, index[, array]])[, thisArg]); Callback: 새로운 배열요소를 생성하는 함수로 다음 세가지 인수를 가진다. currentValue: 처리할 현재 요소 index(optional): 처리할 현재 요소의 인덱스 array(optional): map()을 호출할 배열 thisArg(optional) : callback을 실행할때 this로 사용될 값 리턴값: 배열의 각 요소의 callback 결과를 모은 새로운 배열 ex) // 문자열 배열에서..

1. Vue js 1) 에러 발생 - 화면 하단 버튼에 조건식(삼항연산자) 사용. 사진이 있는 경우만 나타나게 끔 설정. 그런데 컴퓨터에서는 잘 나타나는데 모바일에서는 사진이 없는데도 나타남. 2) 해결 - store 내 값과 page 내 값을 일치시켜줌. 3) 원인 photo.js const getDefaultState = () => { return { imageAfter: Array.from({ length: 4 }, () => undefined), // undefined } } pageX.vue created () { this.isUploaded = this.photoStore.getImageAfter() !== null // null } -> store(photo.js)에서는 undefined 인..

1. 프로그래머스 - '#1037' 1) 문제 양수 A가 N의 진짜 약수가 되려면, N이 A의 배수이고, A가 1과 N이 아니어야 한다. 어떤 수 N의 진짜 약수가 모두 주어질 때, N을 구하는 프로그램을 작성하시오. 2) 입출력 예 2 4 2 3) 출력 예 8 4) 코드 function sol(input) { const divisors = input[1].split(" ").sort((a, b) => a - b); return divisors[0] * divisors[divisors.length - 1]; } const input = []; require("readline") .createInterface(process.stdin, process.stdout) .on("line", (line) => {..

1. 백준 - '#1158' 1) 문제 요세푸스 문제는 다음과 같다. 1번부터 N번까지 N명의 사람이 원을 이루면서 앉아있고, 양의 정수 K(≤ N)가 주어진다. 이제 순서대로 K번째 사람을 제거한다. 한 사람이 제거되면 남은 사람들로 이루어진 원을 따라 이 과정을 계속해 나간다. 이 과정은 N명의 사람이 모두 제거될 때까지 계속된다. 원에서 사람들이 제거되는 순서를 (N, K)-요세푸스 순열이라고 한다. 예를 들어 (7, 3)-요세푸스 순열은 이다. N과 K가 주어지면 (N, K)-요세푸스 순열을 구하는 프로그램을 작성하시오. 2) 입출력 예 입력 출력 7 3 3) 코드 consft fs = require("fs"); const readFileSyncAddress = "input.txt"; const ..

문제: 세계는 균형이 잘 잡혀있어야 한다. 양과 음, 빛과 어둠 그리고 왼쪽 괄호와 오른쪽 괄호처럼 말이다. 정민이의 임무는 어떤 문자열이 주어졌을 때, 괄호들의 균형이 잘 맞춰져 있는지 판단하는 프로그램을 짜는 것이다. 문자열에 포함되는 괄호는 소괄호("()") 와 대괄호("[]")로 2종류이고, 문자열이 균형을 이루는 조건은 아래와 같다. 모든 왼쪽 소괄호("(")는 오른쪽 소괄호(")")와만 짝을 이뤄야 한다. 모든 왼쪽 대괄호("[")는 오른쪽 대괄호("]")와만 짝을 이뤄야 한다. 모든 오른쪽 괄호들은 자신과 짝을 이룰 수 있는 왼쪽 괄호가 존재한다. 모든 괄호들의 짝은 1:1 매칭만 가능하다. 즉, 괄호 하나가 둘 이상의 괄호와 짝지어지지 않는다. 짝을 이루는 두 괄호가 있을 때, 그 사이에 ..

출처: https://velog.io/@jengyoung/%EC%97%AC%EB%9F%AC-%EA%B0%9C%EC%9D%98-input%EC%9D%B4-%EC%9E%88%EC%9D%84-%EB%95%8C-useState%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C%EB%8B%A4%EB%A9%B4 import React, { useState } from 'react' const EventPractice = () => { const [form, setForm] = useState({ username: '', message: '' }) const {username, message} = form; const onChange = e => { const nextForm = { ...form, ..

1. 프로그래머스 - '방금그곡' 1) 문제 네오는 자신이 기억한 멜로디를 가지고 방금그곡을 이용해 음악을 찾는다. 그런데 라디오 방송에서는 한 음악을 반복해서 재생할 때도 있어서 네오가 기억하고 있는 멜로디는 음악 끝부분과 처음 부분이 이어서 재생된 멜로디일 수도 있다. 반대로, 한 음악을 중간에 끊을 경우 원본 음악에는 네오가 기억한 멜로디가 들어있다 해도 그 곡이 네오가 들은 곡이 아닐 수도 있다. 그렇기 때문에 네오는 기억한 멜로디를 재생 시간과 제공된 악보를 직접 보면서 비교하려고 한다. 다음과 같은 가정을 할 때 네오가 찾으려는 음악의 제목을 구하여라. 방금그곡 서비스에서는 음악 제목, 재생이 시작되고 끝난 시각, 악보를 제공한다. 네오가 기억한 멜로디와 악보에 사용되는 음은 C, C#, D,..

1. CSS 1) 1분코딩 https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com CSS 필수 참고 사이트 2. React 3. Javascript 1) 알고리즘 1-1) 프로그래머스 1-2) 백준 2) 코딩 2-2-1) HTML 특수문자 리스트 http://kor.pe.kr/util/4/charmap2.htm HTML 특수문자 리스트 ßßßSmall sharp s, German (sz ligature) kor.pe.kr 4. Re..