728x90

실전 오류 해결 팁 8

[Python] 소수점 자릿수 제한법

알고리즘 문제를 풀거나, 혹은 할인된 가격 등을 계산할 때 정수가 아닌 실수 형태로 나타나는 경우가 있다. 이럴 때 가끔 자릿수를 제한하여 소수점 이하 첫째 자리, 둘째 자리 등등 조건이 붙게 된다. 이를 위해 Python에서 소수점 자릿수를 제한하여 출력하는 방법에 대해 알아봅시다. ✅ round 함수 사용 round 함수는 round(x)와 같은 형태로 x의 값을 반올림하는데 사용합니다. 추가로 round 함수는 두 번째 인자를 갖을 수 있고 round(x, 3)이라는 형태를 가질 경우 넷째 자리에서 반올림하여 소수점 이하 셋째 자리까지 출력하게 됩니다. a = 1.23456 print(round(a, 0)) # 1.0 print(round(a, 1)) # 1.2 print(round(a, 2)) #..

[Python] 패킹과 언패킹

✅ 패킹 여러 개의 데이터를 하나로 묶어 변수에 대입하는 것 nums = (1, 2, 3, 4, 5) ✅ 언패킹 여러 개의 데이터를 하나로 묶은 컬렉션을 여러 개의 변수로 나누어 담는 것 (a, b, c, d, e) = nums print(a, b, c, d, e) # 1 2 3 4 5 ✅ 남은 요소 대입받기 좌변의 변수 중 하나의 변수에 별 기호( * : Asterisk)를 붙이면 남은 요소 전체를 리스트에 담아 대입한다. ✏️ 슬라이싱으로 분리 a = nums[0] b = nums[1] arr = nums[2:] print(a, b, arr) # 1 2 (3, 4, 5) ✏️ 별 기호( * : Asterisk) a, b, *arr = nums print(a, b, arr) # 1 2 [3, 4, 5]..

[Vue] 새로고침 시 데이터 유지

Vue는 자바스크립트 레벨에서 데이터를 취급하기 때문에 페이지를 새로고침하면 값이 사라집니다. 데이터를 새로고침 시에도 유지를 하고 싶다면 localStorage 혹은 sessionStorage를 사용해야 합니다. ✅ 로컬스토리지(localStorage) 사용자 세션 데이터 유지 가능 브라우저를 닫았다가 다시 열어도 유지 가능 탭을 여러 개 열어도 공유됨 삭제될 때까지 지속 ✅ 세션스토리지(sessionStorage) 브라우저 세션 기간 동안만 사용 가능 탭이나 창을 닫으면 삭제 새로고침을 해도 유지 영원한 저장이 필요 없을 경우 사용 ✏️ 사용 예시 // App.vue methods: { selectCountry(country) { this.country = country; localStorage.se..

[Vue] 이벤트 발생(emit)

✅ 프로젝트의 구성 큰 틀로 App.vue 안에 router-view를 사용하여 CountryView.vue를 보여주거나 PlaceView.vue를 보여주는 구조로 되어있습니다. "country", "place" 변수가 CountryView.vue에서도 쓰이고 PlaceView.vue에서도 쓰이기 때문에 부모 컴포넌트에서 선언하여 자식 컴포넌트로 넘겨줘야겠다고 생각했습니다. v-bind를 사용하여 데이터를 주고받는 것은 가능했지만 부모 컴포넌트의 데이터를 변화시킬 수는 없었습니다. 자식 컴포넌트에서 변화된 데이터를 부모 컴포넌트에서 변화를 주기 위해서는 이벤트를 발생시켜 부모 컴포넌트에 정의된 메소드를 호출해 부모 컴포넌트의 데이터를 변화시켜야 합니다. ✅ 부모 컴포넌트 부모 컴포넌트의 구조를 보면 태그..

[Vue] no-multiple-template-root

https://eslint.vuejs.org/rules/no-multiple-template-root.html vue/no-multiple-template-root | eslint-plugin-vue eslint.vuejs.org Vue 2에서는 템플릿 내에서 여러 개의 루트 노드를 가지면 안된다. 즉, 하나의 태그(루트 태그) 안에 다른 태그를 작성해야 오류를 막을 수 있다. 🚨 오류 위의 코드를 예로 3번째 줄에 오류가 생긴 것을 확인할 수 있다. 오류를 찾아서 확인해보면 위와 같이 "no-multiple-template-root"라는 오류로 템플릿에서는 하나의 태그를 루트로 가진다. 라고 나와있다. ✅ 해결 이런 식으로 하나의 태그를 만들어 안에 다른 태그들을 넣어주면 된다.

[Vue] 라우터(Router)

✏️ 라우터를 사용하기 전, Vue.js에 대해서 알아보자. Vue.js는 SPA(Single Page Application) 개발을 위한 프레임워크이다. SPA, 즉 Single Page Application이란 단일 페이지 애플리케이션으로 페이지 하나에서 동작하는 애플리케이션을 의미합니다. 가장 처음 웹 사이트를 접속했을 때, 웹 사이트 전체에 필요한 자원들을 모두 서버로부터 가져와 로딩하여 페이지를 나타냅니다. 그 후 페이지의 변경이 있을 경우 페이지 전체가 변경되는 것이 아닌 필요한 부분만 바뀌게 되는 것입니다. SPA에서는 CSR(Client Side Rendering), 즉 클라이언트 사이드 렌더링을 통해 클라이언트인 브라우저가 렌더링을 처리하는 방식으로 동작합니다. CSR과 반대되는 MPA(..

[Vue] 컴포넌트 생성 시 이름 규칙

뷰 컴포넌트를 생성할 때 컴포넌트의 이름은 반드시 여러 개의 단어를 사용해야 한다. 프로젝트를 생성한 뒤 프로젝트/src/components 안에 컴포넌트를 하나 생성해 보자! Test라는 이름을 가진 컴포넌트를 하나 생성하면 이렇게 빨간색으로 오류가 뜨게 된다. 이유는 무엇일까? 위의 오류를 읽어보면 "Test"라는 컴포넌트는 반드시 여러 개의 단어를 조합해 이름을 지어야 한다고 한다. 그렇다면 위와 같이 이름의 규칙은 어떤게 있을까? ✅ 컴포넌트 이름 규칙 컴포넌트 이름은 항상 여러 문자로 지어야 한다. 하지만 루트 컴포넌트인 App과 기본으로 제공되는 또는 와 같은 것은 제외한다. 이는 이미 존재하거나 미래에 존재할 HTML 요소들과의 충돌을 막기 위함이다. (HTML 요소는 한 단어이기 때문) 자..

[Vue] 프로젝트 생성

Vue를 사용하여 프로젝트를 생성해보자! 우선 터미널에 아래와 같은 코드를 입력하자. $ vue create test 필자는 Vue CLI 5.0.8버전을 사용하고 있다. create 명령어를 입력했다면 위와 같은 화면을 볼 수 있다. 이때 Vue의 버전을 골라 선택해주면 된다. [Vue 2]를 사용하여 프로젝트를 생성해보도록 하자. 위와 같은 코드가 나타나며 프로젝트가 생성되었다!! 생성된 프로젝트는 위와 같다. 이제 Vue를 이용하여 프로젝트를 진행해보자

728x90