정현'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. Vue 1. 이번주 배운 내용 1) api 연동할 때 특정 부분에서는 default값 지정이 필요하다. 2) 체크박스 로직 구현.(수신동의 & 수신거부) 2. Trouble Shooting 1-1) 발단 - Api 연동 시 fetchItem 써서 데이터를 가져왔음. 콘솔 노출도 해보고 절대 undefined 하지 않은데 페이지 로딩 때 자꾸 undefined 하다고 나옴. - mounted 디렉티브로 데이터 가져왔는데 페이지가 그려질 때 데이터가 없다보니 undefined라고 뜨는 거임. - created 디렉티브로 해봤으나 역시 안됨. - 총 2번 읽는데 처음 읽을 때 'undefined error' 발생하고 그 다음 Get error, 404 error 발생. 1-2) 해결 - 라이프사이클 훅 ..

1. border-radius 적용 후 여백처리 background: transparent !important; css 적용하면 된다. (나중에 설정한 값 무시하고 바로 해당속성 적용해야 할 때 !important 사용) 해결된다. 2. 자간조절 .page-wrapper { letter-spacing: 0.09vw; } letter-spacing 활용.

width: 100vw; margin-left: calc(-50vw + 50%); 출처: https://skout90.github.io/2017/09/01/CSS/full-width-ignore-parent/

안녕하세요 오늘 나의 인간과 멍뭉이를 알아볼까요? BEM 규칙을 따라 블록__요소--변경자 로 구성. 내가 원했던 것은, class="label"로 명명한 부분의 글자크기와 폰트를 최대한 재사용하고 싶었음. 이럴 땐 변경자를 활용해주면 좋다. 단, 변경자 클래스를 선언할 때 default가 되는 클래스 이름을 꼭 같이 써줘야 함. ex) label이 default고 label--blue와 label--purple에 폰트, 글자 크기를 전달하고 싶을 경우 label--blue와 label--purple 클래스 명에 label을 같이 써주면 됨. class="label label--blue"

1. brew 설치 https://brew.sh/ Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 맥 터미널에서 다음을 입력 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ※ Formulae와 Casks -> Furmulae는 콘솔용 패키지. Cask는 데스크탑용 패키지(LaunchPad에 추가된다) ※ brew 명령어 -> brew search [검색할 패키지명] brew install [--cask (*cask의 경우)] [설치할 패키지명] brew remove [삭제할 패키지명] 2. iTerm 설치 (다..

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) => {..