본문 바로가기

Programming230

[코드트리 챌린지] 1주차 학습 진단 결과 안녕하세요. 혀코입니다. 1주차 학습 진단 결과 입니다. 총 5문제 중에 3문제 풀었습니다. 2번째 문제에서 1차 배열을 좀 헷갈려해서 느리게 코딩한게 좀 아쉬웠습니다. 배열을 더 공부해봐야겠네요. 그래도 점수는 0주차 253점에 비해서 140점 정도 올랐네요. 그리고 0주차 학습내용 진행 상황으로 연산자 부분을 진행하고 있다. https://www.codetree.ai/missions/4/problems/square-width-after-length-change?&utm_source=clipboard&utm_medium=text list1 = list(map(int, input().split(' '))) # 가로와 세로의 값을 받는다 width = list1[0] # 입력 받은 가로값 저장 height.. 2023. 9. 8.
[코드트리 챌린지] 0주차 학습 진단 결과 안녕하세요. 혀코입니다. 오늘은 코드트리 블로그 챌린지에 앞서 실력을 평가해 봤습니다. 총 4문제 중에 3문제 풀었습니다. 숫자 입력받는 것을 헷갈려서 시간 초과로 두번째 문제를 놓친게 아쉬었습니다. 두개의 숫자를 입력 받을 때는 다음 코드를 사용해서 입력 받아야 하는 것을 알았습니다. numbers = list(map(int, input().split(' '))) 다음은 학습 진단 결과입니다. 다음에는 더 높은 점수를 받을 수 있도록 더 공부해야겠네요. 2023. 9. 1.
JavaScript 날짜 시간 출력하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript로 날짜와 시간을 출력하기 위한 Date Class의 사용법에 대해서 알아보겠습니다. 현재 시간 정보를 얻기 위해서는 다음 코드를 사용해서 클래스를 이용해서 인스턴스를 생성합니다. const date = new Date() console.log 를 사용해서 변수 date를 출력하면 다음과 같이 출력됩니다. console.log(date) // Wed Aug 16 2023 11:28:43 GMT+0900 (한국 표준시) 다음은 년도, 월, 일, 요일, 시간, 분, 초, 밀리초를 구하는 방법입니다. date.getFullYear() // 년도를 출력한다. // 2023 date.getMonth() // 월을 출력한다. // 7 // getMonth().. 2023. 8. 16.
[Python] 변수값이 숫자로 변환가능한지 확인하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 변수값이 숫자로 변환 가능한지 여부를 확인하는 방법에 대해서 알아보겠습니다. 변수값이 숫자로 변환 가능한지 여부는 isdigit() 메서드를 사용하면 쉽게 확인이 가능합니다. strings = "456" print(strings.isdigit()) # True 이 방법을 활용해서 문자와 숫자가 혼합된 문자열에서 숫자의 값만 더한 값을 구해 보자면 다음과 같이 구할 수 있습니다. strings = "cd2eft8aze23" answer = 0 for str1 in strings: if str1.isdigit() == True: answer += int(str1) print(answer) # 15 주어진 문자열을 for loop `for str1 in strings` .. 2023. 7. 18.
Python에서 list 복사하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Python에서 list를 복사하는 방법에 대해서 알아보겠습니다. Python에서 list를 복사할 때 주의 사항이 있습니다. 만약 aList 와 bList 가 있을 때 aList = bList 가 같다고 하고 bList를 변경하면 aList도 동일하게 변경되는 것을 확인할 수 있습니다. aList = [] bList = [1,2,3] aList = bList for i in range(len(bList)): bList[i] += 1 print(f'aList = {aList}') # [2,3,4] print(f'bList = {bList}') # [2,3,4] 이러한 이슈를 방지하기 위해서 Python에서 list를 복사할 때 [:]를 사용해서 어느 한 List가 .. 2023. 7. 14.
Python 라이브러리 없이 기약분수 구하는 방법 이번 시간에는 Python 라이브러리를 사용하지 않고 기약분수를 구하는 방법에 대해서 알아보겠습니다. 10/8 의 분수가 있다고 가정합니다. 분자는 10, 분모는 8 이라 해당 분수는 기약 분수가 아닙니다. 기약분수로 나타내려면 분자와 분모의 최대공약수를 분자와 분모에 나눠줘서 표현해 줘야 합니다. 최대공약수를 구하기 위해서는 유클리드 호제법을 사용합니다. 예를 들어 분자를 분모로 나눈 나머지 값이 0이면 해당 분모는 최대공약수가 됩니다. 만약 나머지 값이 0이 아니면 분모를 나머지 값으로 다시 나눠줍니다. 이렇게 반복해서 나머지 값이 0이 나올 때의 나눈 값이 최대 공약수가 됩니다. 만약 나머지 값이 이전의 나머지 값과 같다면 최대공약수가 존재하지 않습니다. 10을 8로 나누면 2가 남습니다. 0이 아.. 2023. 7. 5.
Canvas 태그 사용시 고해상도 모니터 대응하는 방법 canvas를 사용할 때에는 사용자의 모니터가 평범한 모니터인지 고해상도 모니터인지 고려해야 합니다. 평범한 모니터의 1px이 1px로 구성되어 있다면 고해상도 모니터의 경우 평범한 모니터에서 1px이 차지하는 면적이 4px로 구성되어 있습니다. 그래서 고해상도 모니터에서 보다 더 선명한 화면을 볼 수 있습니다. 그래서 고해상도 모니터에서 더욱 선명한 화면을 볼 수 있도록 대응을 해줘야 합니다. 다음 코드를 사용하면 사용자 컴퓨터의 화면해상도의 값을 구할 수 있습니다. const dpr = window.devicePixelRatio 고해상도 모니터를 사용한다면, window.devicePixelRatio 값이 2가 되고, 평범한 모니터를 사용한다면 window.devicePixelRatio 값이 1이 됩.. 2023. 6. 12.
Canvas 위에 네모 그리는 방법 HTML의 canvas 태그를 사용해서 웹사이트에 네모를 그리는 방법에 대해서 알아보겠습니다. Index.html 파일을 다음과 같이 작성합니다. body 태그 안에 canvas 태그를 넣어주고 수정할 CSS 파일과 JS 파일을 head 태그 안에 작성해 줍니다. style.css 파일을 다음과 같이 작성해서 canvas에 배경색을 넣어줍니다. 너비와 높이 따로 지정을 하지 않아도 표시가 됩니다. 기본값은 가로 150 그리고 세모 100입니다. nemo.js 파일을 다음과 같이 작성해서 네모를 그려줍니다. const canvas = document.querySelector('canvas') const ctx = canvas.getContext('2d') ctx.fillRect(10, 10, 50, 50).. 2023. 6. 9.
[TypeScript] 업데이트 자동 감지 및 컴파일 하는 방법 안녕하세요. 이번 시간에는 TypeScript 파일이 업데이트 되면 자동으로 업데이트를 감지해서 JavaScript 파일로 컴파일 할 수 있도록 하는 방법에 대해서 알아보겠습니다. TypeScript 파일의 업데이트를 자동 감지해서 JavaScript 파일로 컴파일 하려면 다음 명령어를 사용합니다. $ tsc app.ts -w 위 명령어는 하나의 파일 app.ts에서만 동작하게 됩니다. 만약 여러개의 typescript 파일이 있다면 다음 명령어를 사용해서 해당 프로젝트 전체의 typescript 파일들을 자동 컴파일 해줍니다. $ tsc --init 이 명령어를 사용하면 tsconfig.json 파일이 생성됩니다. 따로 설정할 필요는 없으며 다음으로 모든 typescript 파일들을 자동 감지해서 ja.. 2023. 1. 2.
[JavaScript] HTML 페이지에 JavaScript 를 사용하는 방법 안녕하세요. 오늘은 HTML 페이지에 JavaScript를 사용하는 방법에 대해서 알아보겠습니다. HTML페이지에 JavaScript를 사용하는 방법은 크게 두가지가 있습니다. 인라인 스크립트로 사용하는 방법이 있고, 외부 스크립트를 임포트해서 사용하는 방법이 있습니다. 인라인 스크립트를 사용하는 방법 다음과 같이 HTML 템플릿이 있습니다. Welcome to Hyukho's Blog JavaScript를 사용하기 위해서는 외부 스크립트를 사용하는 방법 외부의 JavaScript로 만들어진 파일을 가져와서 사용하는 방법은 아래와 같이 사용하면 됩니다. Welcome to Hyukho Blog Welcome to Hyukho Blog 외부 스크립트와 인라인 스크립트를 함께 사용하는 방법은 외부 스크립트를.. 2022. 12. 29.
[TypeScript] type을 변수로 지정하여 사용하는 방법 안녕하세요. 이번 시간에는 Type을 변수로 선언해서 사용하는 방법에 대해서 알아보겠습니다. JavaScript에서 변수를 선언할 때 var, let, const를 사용했듯이 TypeScript에서 변수를 선언할 때 type을 사용하면, 해당 변수의 type을 여러번 재사용 할 수 있습니다. 예를 들어 변수의 타입이 number 또는 string 일때, 이 변수의 타입을 다음과 같이 선언할 수 있습니다. type DataType = number | string const user1: DataType = 30 const car1: DataType = 'Hyundai' 위와같이 DataType이라는 Type 변수를 선언해서 사용해서 다른 변수의 타입을 더욱 간결하게 지정할 수 있습니다. 이렇게 Type을 변.. 2022. 12. 29.
[TypeScript] TypeScript의 Type 종류 안녕하세요. 이번 시간에는 TypeScript의 Type 종류에 대해서 알아보겠습니다. TypeScript에는 다음의 Type 들이 있습니다. number string boolean object array tuple enum any union literal unkown never number 모든 정수, 실수를 포함한 모든 숫자의 타입입니다. 사용하는 방법은 num1: number 형식으로 사용합니다. string 작은따옴표(''), 큰따옴표(""), 백틱(``)을 포함한 모든 문자열의 타입입니다. 사용하는 방법은 str1: string 형식으로 사용합니다. boolean True와 False를 나타내는 타입입니다. 사용하는 방법은 isChecked: boolean 형식으로 사용합니다. object {k.. 2022. 12. 29.
[TypeScript] TypeScript를 JavaScript로 컴파일 하는 방법 안녕하세요. TypeScript는 Microsoft에서 개발한 언어로 JavaScript를 포함하는 언어이지만 브라우저에서 작동하지 않기에 JavaScript로 컴파일해줘야 합니다. 그래서 이번 시간에는 TypeScript를 JavaScript로 컴파일 하는 방법에 대해서 알아보겠습니다. 우선 다음 명령어를 사용해서 TypeScript를 전역으로 설치합니다. $ npm install -g typescript 프로젝트 폴더에 index.html 파일을 만들고 app.js를 불러올 수 있도록 코드를 작성합니다. 그리고 app.ts 파일을 생성합니다. 여기서 만든 app.ts 파일을 컴파일해서 app.js 파일로 만들어서 사용할 겁니다. console.log("Hello World") 글 처음에 언급했듯이, .. 2022. 12. 28.
[Vue] Vue의 Key Modifier란? 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Key Modifier에 대해서 알아보겠습니다. javascript로 이벤트의 키값을 받을 때 사용하는 것을 Vue의 Key Modifier 문법을 통해서 쉽게 제어할 수 있습니다. Vue의 event binding 으로 keydown 이벤트를 실행해서 handler 라는 함수를 실행시켜 enter키가 눌러졌는지 확인하는 코드를 작성해 보겠습니다. 이것을 key modifier .enter를 사용해서 다시 작성하면 다음과 같습니다. enter 키 뿐만 아니라 다른 키들도 사용 가능합니다. 다음은 f 키를 눌렀을때 'key F is pressed!' 라고 출력해 보겠습니다. 텍스트 입력 폼 안에 알파벳 아무 키를 입력하다가 F가 입력되면 콘솔창에 'Key F.. 2022. 9. 9.
[Vue] Vue의 Event Modifier 란? 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Event Modifier에 대해서 알아보겠습니다. Event Modifier는 click 이벤트를 받을 때 흔하게 사용하는 JavaScript를 Vue의 문법을 통해서 쉽게 제어할 수 있도록 하는 기능입니다. Event Modifier에는 다음과 같은 종류가 있습니다. .stop .prevent .self .capture .once .passive 태그에 .prevent event modifier가 사용되었다면, html 기본 기능인 hyperlink가 동작하지 않게 됩니다. 태그에 .once event modifier가 사용되었다면, html 기본 기능인 hyperlink가 동작하지만 연결된 함수가 단 한번 실행되고 다시는 실행되지 않습니다. 태그에 ... 2022. 9. 8.
[Vue] Vue에서 event를 다루는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 event를 다루는 방법에 대해서 알아보겠습니다. 클릭해서 숫자가 1씩 증가하는 프로그램을 만들어 보겠습니다. {{ count }} 이때, v-on 은 이벤트 바인딩할 때 사용하는 것으로 약어로 다음과 같이 @click으로 대체해서 사용할 수 있습니다. {{ count }} 다음으로 버튼을 클릭했을 때 버튼의 text를 출력해 보도록 하겠습니다. Hello World 이벤트 객체 e를 받아서 해당 버튼 태그의 textContent 즉 텍스트를 출력할 수 있습니다. 또한, click 이벤트를 받아서 함수를 실행할때 parameter 값을 지정해서 넘겨줄 수 있습니다. {{ count }} +1 +2 그리고 클릭 이벤트를 받아서 parameter 값과 eve.. 2022. 9. 7.
[NPM] shortid package 사용방법 안녕하세요. 혀코입니다. 이번 시간에는 shortid npm package를 사용하는 방법에 대해서 알아보겠습니다. 설치하는 방법 npm install -D shortid Vue.js에서 다음과 같이 사용합니다. Company {{ name }} 태그에서 shortid package를 가져와서 shortid로 사용합니다. id 값으로 shortid.generate() 지정하면 랜덤한 id가 생성됩니다. 이렇게 shortid npm package를 사용하는 방법에 대해서 알아봤습니다. 해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 9. 6.
[Vue] v-if와 v-show의 차이점 안녕하세요. 혀코입니다. 이번 시간에는 v-if와 v-show의 차이점에 대해서 알아보겠습니다. 먼저 v-if에 대해서 보겠습니다. Counter with v-if and v-else show paragraph1 paragraph2 Chrome DevTool을 열어서 확인해 보면, v-if 로 지정된 것은 주석처리가 되어있어 렌더링 되지 않습니다. 다음으로 v-show에 대해서 보겠습니다. Counter with v-if and v-else show paragraph1 paragraph2 v-if를 v-show로 변경하고 버튼을 클릭해도 paragraph1과 paragraph2를 출력하지 않습니다. 그 이유는 v-show가 태그에서 동작하지 않기 때문입니다. 다시 태그를 로 바꿔줍니다. Counter w.. 2022. 9. 3.
[Vue] Vue에서 인라인 style 다루는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 인라인 style 다루는 방법에 대해서 알아보겠습니다. Style Attribute {{ message }} 인라인 style을 사용할 때는 key, value 쌍으로 이뤄진 객체를 사용합니다. 이때, key 값으로 camelCase를 주로 사용하며, kebab-case를 사용할 때는 'font-size'와 같이 따움표를 사용합니다. 그리고 value 부분은 기본적으로 따움표를 사용합니다. 그리고 class attribute를 다룰때 처럼, script에서 객체 데이터를 만들어 style에 객체명만 지정해서 사용할 수 있습니다. Style Attribute {{ message }} 그리고, methods를 사용해서 styleObject의 값을 변경하면 스.. 2022. 9. 2.
[Vue] class attribute 다루는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 class attribute를 다루는 방법에 대해서 알아보겠습니다. 이전에 v-bind로 attribute를 다루면서 아래와 같이 class를 변경하는 방법에 대해서 알아봤습니다. Class Attribute {{ message }} Change Change 버튼을 클릭하면, class 가 변경되면서 글자 색상이 녹색에서 빨간색으로 변경됩니다. class 값으로 true, false 값을 가지는 객체 데이터 값을 넣어주면 더욱 활용도가 높아집니다. Class Attribute {{ message }} ({{isActive}}) Change 여기서 isActive 값이 true 일때만, active class가 적용되어 Change 버튼을 눌렀을때 텍스트 .. 2022. 9. 2.
[Vue] Vue에서 데이터 변경 감시하는 방법(feat. watch) 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 데이터 변경 감시하는 방법에 대해서 알아보겠습니다. 다음은 message를 Hello World! 에서 Smile World!로 바꾸는 코드입니다. Watch Message {{ message }} Change 여기서 변경되는 데이터를 감시하려면, watch property를 사용해야 합니다. Watch Message {{ message }} Change watch property를 추가하고, 감시할 데이터 message에 함수를 실행하는 형식으로 적어주는데 message: function() 을 줄여 message() 로 적고, message의 데이터 값을 console.log을 사용해서 출력해 주면 됩니다. 이때, watch의 매개변수를 value로 .. 2022. 9. 1.
[Vue] Computed Properties의 Getter, Setter 사용방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Getter와 Setter에 대해서 알아보겠습니다. 지난 시간에 배운 Vue의 computed property는 cashing 기능이 있어서 읽기 전용인 상수의 특성을 띈다고 했습니다. 이때 Getter와 Setter를 사용해서 이 computed property의 함수의 결과값을 바꿀 수 있습니다. App.vue Reverse Message {{ message }} {{ reversedMessage }} Add 위 코드를 실행하면, 제공된 문자열과 뒤집어진 문자열이 있고, Add 버튼을 누르면 제공된 문자열의 마지막에 느낌표가 추가되고 이 느낌표가 추가된 문자열을 뒤집어 뒤집어진 문자열을 출력하고 있습니다. 여기서 methods property의 add .. 2022. 9. 1.
[Vue] Computed Properties 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 computed 속성에 대해서 알아보겠습니다. 우선 components 폴더 안에 Company.vue 파일을 다음과 같이 작성하고 App.vue에서 Company.vue 파일을 불러와서 Company 목록을 출력해 보도록 하겠습니다. /components/Company.vue {{ company }} App.vue 아래와 같이 출력 되었습니다. 여기서 Companies.vue에서 companies 배열을 삭제하면 v-if directive 조건 companies.length가 0이 되므로 화면상에 아무것도 출력하지 않습니다. 여기서 v-if에 바로 조건식을 적는 대신 computed property를 사용하면 다음과 같습니다. {{ company }} c.. 2022. 8. 31.
[Vue] Vue의 Attribute Binding 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Attribute Binding에 대해서 알아보겠습니다. v-bind 속성값으로 Vue의 데이터 값을 넣어줄 때는 이중괄호를 사용할 수 없습니다. 따라서 이때에는 v-bind directive를 사용합니다. {{msg}} 앱이 처음 실행될때 텍스트가 빨간색이였다가 클릭하면 녹색으로 변경하도록 코드를 짜보았습니다. 여기서 v-bind는 가장 흔하게 사용되는 directive로 다음과 같이 :로 축약해서 사용할 수 있습니다. {{msg}} class 속성값을 동적으로 추가하려면 다음과 같이 중괄호 [ ] 으로 작성해 줍니다. {{msg}} 이렇게 하면, 여러 가지의 속성을 다이나믹하게 동적으로 추가할 수 있는 장점이 있습니다. 또한 지금까지 사용했던 @ 기호는.. 2022. 8. 31.
[Vue] Raw HTML 사용방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에 데이터 값으로 Raw HTML을 사용하는 방법에 대해서 알아보겠습니다. Vue에서 데이터 값을 표시하려면 {{}} 이중 중괄호를 사용합니다. 그런데 이 데이터가 Raw HTML이라면 이 Raw HTML도 String 값으로 읽어 다음과 같이 그대로 표시하게 됩니다. {{ msg }} 이 값을 실제 HTML 로 표시하려면 v-html directive를 사용해줘야 합니다. 이렇게 Vue에 데이터 값으로 Raw HTML을 사용하는 방법에 대해서 알아보겠습니다. 해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 8. 30.
[Vue] Vue의 Interpolation(보간법) 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Interpolation (보간법)에 대해서 알아보겠습니다. Vue에서 데이터를 표시할 때 이중 중괄호를 사용합니다. Vue의 문법 중에서 App이 생성될때 이 이중 중괄호 안의 데이터가 딱 한번 렌더링되고 나서 데이터의 변함이 없게 하는 것을 Interpolation (보간법)이라 합니다. 다음 코드를 보면, Hello World 문자열을 클릭할 때마다, 느낌표가 뒤에 더해서 출력이 됩니다. {{ msg }}, friend 이 코드에서 h1에 v-once directive를 추가해 주면, 처음 렌더링 후에 클릭을 해줘도 느낌표가 추가되지 않는 것을 확인하실 수 있습니다. {{ msg }}, friend 이렇게 Vue의 Interpolation (보간법)에.. 2022. 8. 30.
[Vue] Vue의 Lifecycle 안녕하세요. 혀코입니다. 이번 시간에는 Vue Lifecycle에 대해서 알아보겠습니다. Vue Lifecycle 은 다음과 같습니다. Vue의 Lifecycle 다음과 같은 것 있습니다. beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted 이 중에서 beforeCreate, created, beforeMount, mounted의 차이점을 코드를 통해 알아보겠습니다. {{ count }} 5보다 큽니다! 코드를 실행시키면 다음과 같이 출력합니다. App이 생성되기 전에 beforeCreate 을 실행했을 때 변수가 undefined이고 HTML에 연결이 되지않아 null 값을 가지고, created li.. 2022. 8. 29.
[Vue] Style 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 style을 사용하는 방법에 대해서 알아보겠습니다. 위 태그에서 해당 컴포넌트에 h1 태그가 없음에도 불구하고 h1 색상을 빨간색으로 지정했습니다. 그리고 style 태그에 scoped 속성이 없습니다. 그러면 다른 component에 있는 h1 태그의 색상이 빨간색으로 지정됩니다. 그래서 위 코드는 다음과 같이 사용되어야 합니다. {{ name }} Component에 해당하는 태그의 속성에만 스타일을 정의하고 scoped 속성을 추가해 주도록 합니다. 그리고 style 종류에는 css 와 scss가 있습니다. scss는 중첩 문법을 사용할 수 있기에 개발 속도를 높일 수 있습니다. scss를 사용하려면 lang 속성을 추가해주고 lang 속성의 값은 .. 2022. 8. 29.
[Vue] Component 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 Component를 사용하는 방법에 대해서 알아보겠습니다. 지난 시간에 Company 리스트를 반복문 v-for 를 사용해서 출력해봤습니다. 이 코드를 Component로 변경해서 사용하는 방법에 대해서 알아보겠습니다. Company {{ company }} src/components 폴더에 Company.vue 파일을 만들어서 코드를 다음과 같이 작성합니다. {{ name }} 태그 안에 name 데이터가 있고, props를 사용해서 name 데이터에 대한 타입을 String으로 지정해 줍니다. 이 데이터에는 항상 default 값이 들어가 있어야 하기 때문에 default를 빈 문자열로 지정해줍니다. 그리고, App.vue 파일을 다음과 같이 업데이트.. 2022. 8. 28.
[Vue] 반복문 v-for 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 반복문 v-for 를 사용하는 방법에 대해서 알아보겠습니다. Vue 에서 리스트 형태의 데이터를 반복문을 통해 출력하려면 v-for을 사용합니다. Company {{ company }} data에 companies라는 리스트 형태의 데이터가 있고, 이것을 html의 ul li에 v-for 반복문을 사용하여 리스트 형태로 출력하면 다음과 같은 결과를 볼 수 있습니다. 다음으로 배열의 index 값도 함께 출력할 수 있도록 소스코드를 변경해 보겠습니다. Company {{ company }} - {{index}} company in companies 를 company, index in companies로 변경해서 index 값을 추출해서 출력할 때 사용했습니.. 2022. 8. 28.

티스토리툴바