DalpangLOG

Vue를 사용하여 리스트에 접근하기 위해서는 v-for 옵션을 사용하게 된다. main.js 파일의 소스코드를 보면, details라는 리스트를 생성해놨다. const app = Vue.createApp({ data() { return { product: 'Socks', image: './assets/images/socks_blue.jpg', inStock: true, details: ['50% cotton', '30% wool', '20% polyester'] } } }) 이 리스트 내부 요소를 출력하기 위해 html파일 ul, li 태그에 v-for 옵션을 추가해 다음의 라인을 추가하면, 바로 밑의 실행 사진과 같이 for 루프를 돌면서 내부 요소를 출력해준다. {{ detail }} v-for에 옵..

Programming/FrontEnd 2022. 10. 13. 03:10

Vue.js의 조건문 상품 상세 정보를 출력하려 한다. 조건문을 사용해 만약 제품의 재고가 있다면 "In Stock"을 출력하고, 재고가 없다면 "Out of Stock"을 출력하게 할 것. v-if & v-else js파일에 instock이라는 속성을 불린 값 true와 함께 추가해주고, html 파일에 v-if, v-else 즉, vue 조건문을 추가해줬다. Tips! v-if문을 사용할 때, 꼭 v-else문과 함께 짝을 지을 필요는 없다. 만약 if문 하나만 필요하다면 하나만 사용 가능! v-show v-show는 v-if문과 비슷하지만, 스위치처럼 토글 방식으로 작동하는 조건문이다. true인 경우 출력되고 아닌 경우 해당 태그의 style이 display:none 되어 안 보이게 처리된다. 더..

Programming/FrontEnd 2022. 9. 29. 13:14

튜토리얼 3번째 강의 - Attribute Binding [강의 목표] 이미지 표시하기 작업 Branch 변경하기 해당 튜토리얼에 사용될 코드를 가져오기 위해, vs code 터미널을 켜고 다음의 커맨드를 실행했다. git checkout --track origin/L3-start 이 커맨드를 쪼개 보면 git checkout은 브랜치 변경을 위한 것, --track 옵션을 통해 로컬에 자동으로 해당 이름의 브랜치를 생성하고 origin 은 원격에 있는 브랜치를 의미 L3-start는 리포지토리 fork시에 함께 포크 된 여러 브랜 치중 L3-start라는 이름의 브랜치를 선택하겠다는 의미. 더보기 [참고] https://dev-su.tistory.com/83 브랜치 변경 후 index.html 파일을 ..

Programming/FrontEnd 2022. 9. 29. 12:47

Vue를 사용하기 위해 CDN 연결을 설정해준다. 튜토리얼에서는 Vue3 베타 버전을 사용했으므로 해당 CDN링크를 변경해야 한다. https://vuejs.org/guide/quick-start.html#using-vue-from-cdn Quick Start | Vue.js Free Weekend 1st & 2nd of October Get Access to ALL Vue School premium courses vuejs.org 위의 링크를 통하거나 vuejs.org 홈페이지에서 Quick Start로 이동하면 CDN 링크를 복사할 수 있다. [ index.html 파일 CDN 링크 변경 후 ] index.html 파일 아래쪽을 보면 main.js파일을 import 하고 있는 것을 확인할 수 있다. ..

Programming/FrontEnd 2022. 9. 28. 17:51

Vue를 배우려는 이유! Vue.js는 React, Angular등과 더불어 현재 가장 많이 쓰이는 프론트엔드 프레임워크이다. 어떤 게 제일 좋다고 단정 지어 얘기할 수는 없지만 초심자가 처음에 배우기에 가장 쉬운 편인 프레임워크가 Vue.js라고 많이 얘기한다. 가장 큰 이유는 Vue.js같은 경우 각각 문제에 대한 정답이 정해져 있는 것처럼 코드를 짤 수 있기에, 개발자의 자유도는 낮을수 있지만, 대신 다른 사람이 짠 코드를 읽었을 때 이해하기 쉽고, 협업 시에 원활한 소통이 가능하다는 장점이 있다. 때문에 다른 프레임워크들을 다뤄 보기에 앞서 가장 처음으로 Vue.js학습을 하게 되었다. 실습은 Vue Mastery 사이트에서 제공하는 Vue intro 코스가 있어 이를 따라 실습해 보기로! Int..

Programming/FrontEnd 2022. 9. 28. 15:57

Git은 그래도 좀 써봤는데, Git-Flow는 대체 무엇일까? Git-Flow란 여러 사람이 함께 작업할 때 Git 브랜치를 어떤 식으로 나누어 작업하는 것이 좋은지 정해놓은 일종의 약속이자 표준과 같이 쓰이는 방법론이다. Vincent Driessen이 블로그에 작성한 것이 널리 퍼지게 되어 표준과 같이 사용되게 되었고, 경우에 따라 약간 수정하여 사용할 수 있다고 한다. Git-Flow 기본 형태는 총 다섯 개의 브랜치로 구성된다. [ Master ] 사용자에게 배포되는 최종 버전. [ Develop ] 개발을 위해 사용되는 메인 브랜치. 개발자들이 각각 작성한 프로그램을 전부 이곳에 머지하여 통합한 후 최종적으로 Master에 머지하게 된다. [ Feature] 개발시 각각 단위별로 따로 feat..

개발공부/개발공부 2022. 9. 23. 10:30

Serverless, 서버리스가 뭘까? -> 서버가 없는 것이 아니라 개발자가 서버를 직접 관리할 필요가 없이 클라우드 서비스 제공사에서 대신 관리해주는 서버이다. 클라우드 서비스에서 서버리스로 아마존 AWS, MS Azure 같은 IaaS(Infrastructure as a Service) 서비스의 경우 필요한 리소스를 빌리고 사용한다. 필요에 따라 사용 후 사용한 만큼만 비용을 지불하는 것은 특히 규모가 작은 소규모 회사들이나, 스타트업에게 유리한 서비스이다. 하지만, 여전히 클라우드 서비스를 사용할 때 사용하는 서버에 대한 관리는 사용자의 몫이다. 때문에 서버리스 서비스는 여기서 한 발자국 더 나아가 클라우드 서비스 제공사인 Amazon, MicroSoft, Google 등의 회사에서 직접 서버 관..

개발공부/개발공부 2022. 9. 23. 00:09

Amazon Web Services(AWS)란? AWS를 통한 클라우드 컴퓨팅 Amazon Web Services(AWS)는 전 세계적으로 분포한 데이터 센터에서 200개가 넘는 완벽한 기능의 서비스를 제공하는, 세계적으로 가장 포괄적이며, 널리 채택되고 있는 클라우드 플랫폼입니다. 빠르게 성장하는 스타트업, 가장 큰 규모의 엔터프라이즈, 주요 정부 기관을 포함하여 수백만 명의 고객이 AWS를 사용하여 비용을 절감하고, 민첩성을 향상하고 더 빠르게 혁신하고 있습니다. 내가 직접 서버를 만들지 않아도, 필요에 따라 필요한 만큼만 돈을 내고 컴퓨팅 파워를 대여하는 클라우드 IaaS 서비스의 대표 격인 서비스로, 아마존 사에서 제공하며 전 세계적으로 많은 기업들이 현재 AWS를 사용하여 서비스 제공을 하고 있..

개발공부/개발공부 2022. 9. 22. 18:03

CI ( Continuous Integration ) 지속적 통합 코드 변경시 변경된 코드의 빌드, 테스트, 머지를 자동화하고, 작은 변화에도 지속적인 머지를 통해 코드를 통합시키는 프로세스. 여러 개발자가 같은 서비스에 대해 작업을 하다가 코드를 머지하게 되면 충돌이 나는 경우가 많아 해결을 위해 적지 않은 시간을 들이게 된다. 특히나 하루에도 몇번씩 코드 작성 후 머지를 하게 된다면 실제 작업보다 충돌 해결에 더 오랜 시간을 보내게 될 수도있다. CI 를 사용하는 이유는 이러한 기회비용을 줄이기 위해서이다. CI를 통해 자동으로 빌드, 테스트, 머지가 이뤄지게 할 경우 다음과 같은 장점이 있다. 자동화를 통한 생산성 향상 - CI를 사용하면 새로 작성된 코드를 자동으로 머지해주고, 제대로 빌드가 되었..

개발공부/개발공부 2022. 9. 22. 16:06

Monolithic 모놀리식 전통적인 애플리케이션 구축 방식. 제공하는 모든 서비스들이 하나의 애플리케이션에 통합되어 있는 방식 장점 : 모든 서비스가 하나의 큰 틀안에서 통합되어 있어 서비스 흐름에 따라 테스트하기 편하고 통합 관리가 쉽다. 다른 서비스의 호출이 쉽다(같은 시스템 안에서 서비스만 호출하면 돼서 쉬운 편.) 단점 : 서비스가 커질수록 새로운 기능을 추가하고 수정하기 어려워진다는 단점이 있다. MicroServices 마이크로 서비스 서비스, 기능 별로 개발하는 애플리케이션 구축 방식. 장점 : 독립적으로 작성되어 개발, 수정을 전체 서비스와 무관하게 따로 작업 가능. 서비스 별로 다른 프레임워크나 언어로 작성 가능. 전체 서비스에 대해 고려해야 하는 모놀리식 방식보다 상대적으로 수정 시 ..

개발공부/개발공부 2022. 9. 21. 15:38

파이썬을 위해 알고리즘 테스트 시 성능을 측정하기 위해선 time 모듈을 import 해 사용한다. time.time()을 사용하면 실행될 당시의 시간을 반환해 주므로 해당 시간을 각각 start_time, end_time과 같이 직관적인 변수에 저장해주면 총시간을 계산할 때 사용하기 편하다. import time start_time = time.time() #측정 시작 #프로그램 소스코드 작성 위치 end_time = time.time() #측정 끝 print('수행시간 : ', end_time-start_time) #총 실행시간 출력 위의 소스코드에서는 end_time에서 start_time 즉 종료 시점에서 시작 시점을 빼 총 duration을 계산 후 출력한다. 필요에 따라 duration에 대한..

Programming/코테 공부 2022. 9. 21. 14:12

※ 종합 연습 문제 ※ [문제 6081] 16진수 구구단 출력하기 num = int(input('A~F입력:'), 16) for i in range (1, 16): print("%X"%num, '*%X'%i, '=%X'%(num*i),sep='') 16 진수로 입력받기 위해 입력받을 때 int 형으로 형 변환하면서 16진수로 저장하라고 명시해주었다. 또한, for in문을 사용해서 출력할때, 16진수로 출력해달라는 의미로 '% X' 표시를 해주고 그 뒤에 실제 값에 해당하는 변수를 적어주었다. sep=''를 적어준 이유는, 기본 출력 형태의 경우 쉼표를 기준으로 띄어쓰기가 삽입되는데, 이 불필요한 띄어쓰기를 없애주는 역할을 한다. 예를 들어 위의 경우 'A *1 =A'와 같이 띄어쓰기가 자동 삽입된 부분..

Programming/코테 공부 2022. 9. 7. 00:23

※ 종합 연습 문제 ※ 문제 1) 짝수 합 구하기 정수 1~100사이 값을 입력받아 1부터 입력값 사이의 짝수 값들의 합을 구하는 프로그램 user_input = int(input('0에서 100사이의 수 입력 : ')) n = 0 #0부터 입력값까지 while loop 사용을 위해 사용할 변수 total = 0 #짝수 값들의 총합을 더해 저장할 변수 while (n

Programming/코테 공부 2022. 8. 29. 23:30

※ 선택 실행 구조 ※ ex 1) 정수 3개 입력 받아 짝수만 출력하기 map1 = map(int, input().split()) #사용자 입력값을 공백 기준으로 나누어 숫자로 입력받아 맵으로 변수에저장 for n in map1: #map의 내부 요소들에 대해 if(n%2==0): #짝수라면 print(n) #출력하기 ex 2)정수 3개 입력받아 짝/홀 출력하기 #정수 3개 입력받아 짝/홀 출력하기 map1 = map(int, input().split()) for n in map1: print("even") if(n % 2 == 0 ) else print("odd") -> 저번 시간에 배운 삼항 조건식 if 문을 활용해봄. 기본 형태 : 참일경우 if(조건문) else 거짓일경우 ex 3) 정수 1개 입..

Programming/코테 공부 2022. 8. 29. 18:13

※ 산술 연산 ※ ex 1) 정수 2개 입력받아 빼기 a, b = input().split() a, b = int(a), int(b) print(a-b) 혹은 다음과 같이 map을 이용해 바로 int()로 형 변환한 후 a, b 변수에 입력도 가능하다. a, b = map(int, input().split()) print(a-b) 단순히 int()로 변환해주는 첫번째 소스코드의 두 번째 라인을 한 줄의 코드로 변환시켜줄 수 있어 더 효율적인 듯하다. ex 2) 실수 2개 입력받아 곱하기 f1, f2 = map(float, input().split()) print(f1 * f2) ex 3) 단어, 반복 횟수 입력받아 반복 횟수만큼 단어 출력하기 w, n = input().split() print(w*int..

Programming/코테 공부 2022. 8. 25. 23:19

※ 목차 ※ 1. % 서식 기호 사용법 2. f-string 사용법 3. format함수 사용법 1. % 서식기호 사용법 출력문의 재사용성을 높이기 위해 사용할 수 있다. #리스트를 활용한 출력예제 names = ['kim','lee','hwang','pyung'] for name in names: print('My name is %s' % name) #실수를 이용한 출력예제 pi = 3.1415 print('value of pi is %f' % pi) 문자열 : %s, 정수: %d, 실수: %f float 자릿수 설정 시 #실수의 자릿수 지정시 print("실수: %20.5f" % 1234.567890123) 출력문 : 실수: 1234.56789 ▶ 출력에 사용할 변숫값이 많을 경우 name = 'ho..

Programming/코테 공부 2022. 8. 25. 16:01