코딩의숲

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를 바인딩 해줄 수 있다...

코딩하면서 가장~~ 필요하지만 가장~~~~ 귀찮은 과정 디버깅.. console.log를 하나하나 찍어가며 테스트 하기 번거로웠는가!?!? vscode 내장 스니펫에 console.log() 를 저장하여 단축키를 사용 했는가?! 이제 더이상 그럴 필요 없다. 내가 원하는 변수, 아름 답게 console.log로 찍어보자. 확장프로그램으로 가서 Turbo Console Log를 설치해준다 설명을 보면, 원하는 변수를 호버링 한 뒤에, window 의 경우 ctrl + alt + L을, mac 의 경우 ctrl + option + L을 눌러주면 된다고 한다. 근데 아마 window는 안될 거다. 다른 단축키들과 겹쳐있기 때문에 ctrl + alt + L을 눌렀는데 아무 변화가 생기지 않는다면, 단축키를 바꾸..

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

https://kimforest.tistory.com/21 docker에서 gitlab, gitlab-runner 세팅하기(도메인 변경) 도커 내부에 git lab과 회사 내에서 사용하는 관리도구, vue.js 프로젝트를 넣어 사용 할 예정이다. 책임님이 도커에 예쁘게 담아주셨으므로! 나는 파일을 받아 다시 곱게 펼쳐서 사용하도록 한다. kimforest.tistory.com -현재 상태 도커에 컨테이너, 이미지 세팅은 끝났으며 git lab 도메인주소와 gitlab runner 도메인 주소 변경을 마침. 1. 컨테이너에서 git clone 하기 그 전에, 컨테이너 내의 폴더 구조가 어떻게 되어있는지 알아야 한다. - 관리도구는 /var/www/html 에 - vue 프로젝트는 /var/www/html2..

도커 내부에 git lab과 회사 내에서 사용하는 관리도구, vue.js 프로젝트를 넣어 사용 할 예정이다. 책임님이 도커에 예쁘게 담아주셨으므로! 나는 파일을 받아 다시 곱게 펼쳐서 사용하도록 한다. 컨테이너, 이미지 세팅은 아래의 url에서 보기 https://kimforest.tistory.com/8 docker images/container 세팅하기 ** 파일질라같은 ftp 클라이언트를 활용해서 sftp로 로그인 한 뒤에 .tar 파일 다운로드 받은 후 진행 세팅하기 1. load ubuntu apm ** tar 파일 있는 디렉토리 접근 dir //디렉토리 내용 확인 docker load -i //tar kimforest.tistory.com -현재 상태 도커 파일이 newdocker 라는 폴더 ..

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 를 변형하기 보낼..

1. 피니아란? - 피니아라고 읽음. - composition API 방식으로 사용하는 store 라이브러리. - vuex4와는 약간 차이 있으나, vuex5와 거의 대부분 동일하기 떄문에 pinia를 vue.js 에서 공식지원 하기로 했다. - 아래의 예시에서도 vue2, options API 방식이 아니라 Vue3, Composition API 방식으로 사용 하도록 한다. 2. 설치하기 yarn add pinia # 또는 npm으로 npm install pinia 3. 세팅하기 3.1. main.js 세팅 import { createPinia } from 'pinia' const app = createApp(App) const pinia = createPinia() use(pinia) 3.2 stor..