코딩의숲

1.'q'가 입력될 때까지 입력한 문자를 계속 출력하는 프로그램을 작성해보자. function solution(...params) { let index = params.indexOf('q'); const removed = params.splice(index); console.log(params); } solution('x', 'b', 'k', 'd', 'i', 'q', 'a', 'c'); 배열로 출력된다. rest 파라미터가 매우유용한 것같다. indexOf 는 특정 값과 일치하는 '첫번째' element의 index 값을 반환한다. 그런데, 찾으려는 값이 없을 때는 -1을 리턴한다.(배열의 인덱스는 0부터 시작하므로) splice는 배열에서 특정 인덱스 값을 가진 요소를 제거하는 역할을 한다.splic..

1. 평가 입력받아 다르게 출력하기 문자열을 입력받아서 각각의 문자마다 출력을 달리 한다. 문제에서 제시한 예시는 다음과 같다. 평가 : 내용 A : best!!! B : good!! C : run! D : slowly~ 나머지 문자들 : what? 1-1 ) switch 문을 사용하도록 한다. function solution(word) { var result; switch(word) { case 'A': result = 'best!!' break; case 'B': result = 'good!!' break; case 'C': result = 'run!!' break; case 'D': result = 'slowly~' break; default: result = 'what????????' break;..

code up 에는 js 문제가 없지만 js 버전으로 치환해서 풀어보도록 한다. 그래도 뭐 별문제 없어보임. 오늘의 문제. 1. 삼항연산자를 이용해서 정수 3개 입력받아 가장 큰 수 출력하기 function solution(n, m, l) { var result = (n > m) ? n : m; result = (result > l) ? result : l; console.log(result); } solution(1, 91, 0); 근데 뭔가.................................. 좀 이상한 것 같다. 왜냐하면, 파라미터로 세개를 받아왔으니 두번 비교를 해서 출력하긴 했는데, 만약에... 파라미터가 한 200개 된다면.. 우짜지..? 그렇게 코드를 짜는 경우가 있을까만은........

객체를 가지고 놀아보자. 객체의 key나 value 등등을 배열로 어찌저찌 담는데 목적이 있다. 1. Object.keys() Object.keys는 객체의 key를 순서대로 배열에 담아서 반환해준다. var object = { Red : 5, Orange : 4, Green : 3, Blue : 2, Yellow : 1 }; var objectKeys = Object.keys(object); console.log("🚀 ~ file: codeup.html:158 ~ objectKeys:", objectKeys); ** 출력내용 ** 2. Object.values() 그렇다면 Object.values()는 value만 배열에 담아주겠지? var object = { Red : 5, Orange : 4, Gr..

code Up 홈페이지에서 알고리즘 문제풀이를 하다가 reduce 를 만났다. 언뜻 이해가 가지 않아서 정리를 해보려고 한다. 근데 reduce만 하기는 심심하니까 map 하고 filter를 함꼐 살펴보도록 한다. 사실 책임님이 이 세가지는 잘 알아두라고 해두신적이 있어서 이참에 확실히 알아두는게 좋을거라고 생각 하기도 했다. 하하. 말씀하실 때 진작할걸. 게으른 신입이는 뒤늦게 자신을 책망한다. 자그럼 시작!!! 1. map map 은 배열의 모든 요소를 호출해서 새로운 배열을 만들어낸다. 기본적인 파라미터는 currentValue, index, arr로 세가지 이다. 새로운 배열을 또 만든다니? 무슨말인지 와닿지 않는다. 이럴땐 역시 콘솔찍기. var array = ['Red ', 'Orange ',..

버튼을 클릭 했을 때, 배경색상이 바뀌도록 하고 싶다. 아마 버튼을 클릭 했을 때, class를 추가해달라고 부탁할 것이고, class가 추가되면 css 가 변경되는 방식으로 코딩 했을 것이다. 기존의 방식은 '클릭한 걔'에 초점을 맞추어 이벤트를 감지하도록 하는 것이었다. 예시 코드는 이렇다. **템플릿** 초록으로 핑크로 초록으로 핑크로 초록으로 핑크로 ** js(script setup) ** const test = (index, event) => { event.target.closest('.static').classList.add('active'); } const cancel = (index, event) => { event.target.closest('.static').classList.remov..

vue.js 강의를 듣거나 vue.js로 과제를 수행하다보면 가장 처음 접하게 되는 것이 v-for 일 것이다. v-for 은 리스트 렌더링을 위해 쓰게 되는 명령어다. 배열 혹은 객체의 밸류 갯수 만큼 컴포넌트에 렌더링을 하고싶을 때, 퓨어 js 에서는 element를 forEach를 사용해서 반복해줘야 하는 번거로움이 있었다. vue나 react 같은 프레임워크에서는 이런 과정을 생략하고 컴포넌트 내에서 간략하게 표현 할 수 있다. 1. 배열에서 v-for 사용하기 testArr 를 사용해서 li를 랜더링 할 것이다. 코드는 다음과 같다. testArr로 v-for 연습 {{ `${index} / ${value}` }} v-for 안에도 똑같이 value, key, index를 바인딩 해줄 수 있다...

최근 처음보는 문법(?)을 만났다. 조건문이 아닌 것 같은데 js 구문에 ?. 가 포함되어있는 것. 최근에 추가된 js 문법구조체 라는 것을 알게 되었다. 1. ?. 의 의미 - 프로퍼티가 없는 중첩객체를 에러 없이 안전하게 접근 할 수 있도록 하는 문법 구조체이다. - 쉽게 말하면 null, undefined 값으로 읽혀 error메시지가 뜨는 상황을 undefined로 처리하여 에러메시지 없이 처리할 수 있도록 해주는 것이다. 예시를 보자. let values = null; console.log(values.value); console.log('hello'); values 라는 변수에 임의로 null 값을 넣었다. 그런데, 내가 values라는 객체에 있지도 않은 value 키값을 읽어와 달라고 하면..

1. v-html template 내에서 직접 html 코드를 작성하는 방법도 있지만, a태그 및 콘텐츠 자체를 url이라는 변수에 담아 template에서 출력하려는 것이다. 보간법(일명 콧수염 {{ }})을 사용하여 출력하면 a태그를 선언하는 < 부터 모두 출력 된다. v-html을 사용하여 출력하면 template 내에서 a 태그를 해석하여 랜더링 해준다. ** 출력내용 ** 2. v-bind 속성을 바인딩해서 쓴다는 것은,,, html 태그 내에서 사용하는 atrribute 값을 어디에선가 가져와서 쓰겠다는 뜻이다. v-bind: 로 시작하는 구문을 줄여서 : 로 표현하곤 한다. ** temtplate ** {{ background }} ** ** const background = 'pink'; ..

참고링크 https://vuejs.org/guide/components/v-model.html Component v-model | Vue.js vuejs.org v-model은 컴포넌트간 양방향 데이터 바인딩을 구현하는데 사용할 수 있다. 그리고, form 태그 안에서 사용할 수 있다. 이런데서 안통함 데이터를 보낼 컴포넌트 $emit 을 통해서 input 이벤트에 속해있는 props를 정의 함. modelValue는 고정되어있는 props이기 때문에 바꾸면 안됨 데이터를 받을 컴포넌트 {{ searchText }} 호출한 컴포넌트 안에서 v-model을 사용하여 데이터를 지켜본다. 지켜본 데이터(바뀌는 데이터는 ref('')라는 반응형 데이터로 정의 해둔다. 결과물 modelValue 를 변형하기 보낼..