열이의 개발블로그

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

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

✏️ Diffusion 모델 간단 원리 원본 이미지와 이미지를 설명하는 프롬프트를 주고 이미지가 흐려지는 노이즈를 추가해 다시 노이즈를 해석하면서 원본 이미지로 돌아가는 것을 학습하는 모델 이를 통해 원본 이미지 없이 노이즈와 프롬프트를 통해 데이터가 없는 새로운 이미지 생성이 가능 ✅ stability.ai 이 기업에서 Diffusion 모델을 만들었고 오픈소스로 배포하였고 Hugging Face에서 사용 가능 ✅ Stable Diffusion web UI Stable Diffusion 모델을 사용하여 이미지를 생성하는 것을 web UI로 만들어 사용자들에게 제공해 주는 무료 오픈소스가 있음 https://github.com/AUTOMATIC1111/stable-diffusion-webui GitHub..

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"라는 오류로 템플릿에서는 하나의 태그를 루트로 가진다. 라고 나와있다. ✅ 해결 이런 식으로 하나의 태그를 만들어 안에 다른 태그들을 넣어주면 된다.

https://www.acmicpc.net/problem/9996 9996번: 한국이 그리울 땐 서버에 접속하지 총 N개의 줄에 걸쳐서, 입력으로 주어진 i번째 파일 이름이 패턴과 일치하면 "DA", 일치하지 않으면 "NE"를 출력한다. 참고로, "DA"는 크로아티어어로 "YES"를, "NE"는 "NO"를 의미한다. www.acmicpc.net 문제 분석 패턴과 파일 이름의 일치 여부를 판단하여 "DA", "NE"를 출력하는 문제이다. 패턴은 "a*d"와 같이 문자열과 별표로 이루어져 있고 별표는 하나, 문자열의 길이는 100을 넘지 않는다. 즉, 패턴은 "abc*abc"와 같이 별표의 앞뒤로 총 길이가 100을 넘지 않는 길이를 가진 문자열이 오게 된다. 별표에는 공백, 한 문자, 문자열 등 있거나 없..

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

IP 주소를 사람들이 기억하고 사용하기 쉽게 도메인 주소로 대체하여 사용합니다. 하지만 결국 사용되는 것은 IP 주소이기 때문에 도메인과 IP 주소 간의 핸드셰이크가 일어납니다. 이 때, dns-prefetch는 해당 도메인에 대해 미리 핸드셰이크를 해놓아 속도를 조금 더 빠르게 하는 기능입니다. 브라우저에 도메인의 DNS 확인을 미리 수행하도록 요청합니다. 보통 하나의 웹 사이트는 외부 API 또는 이미지 등을 가져오는데 브라우저가 새로운 도메인에 연결할 때 DNS 확인을 수행해야 합니다. HTML 문서의 헤더에 아래의 코드를 추가해 dns-prefetch를 적용할 수 있습니다. 너무 많은 도메인을 설정하면 오히려 속도가 느려질 수 있습니다. 페이지 뷰가 낮은 웹 사이트의 경우 dns-prefetch ..

웹 브라우저에서 https://naver.com과 같은 URL을 입력하면 브라우저는 인터넷에서 사이트를 호스팅하는 서버를 파악해야 합니다. 이는 naver.com 도메인을 검색하여 주소를 찾는 것입니다. 서버, 휴대폰, 스마트 냉장고 등 인터넷의 각 디바이스에는 모두 IP 주소라는 4개의 숫자로 이루어진 고유 주소가 있습니다. 하지만 이러한 숫자는 기억하기 어렵기 때문에 도메인 이름 시스템(DNS)을 통해 쉽게 도메인 이름으로 서버의 IP 주소를 찾을 수 있습니다. 빅스비 혹은 시리에게 '홍길동에게 전화해줘'라고 했을 때 '홍길동'은 DNS 조회를 수행하기 위한 도메인 이름이 되고 '홍길동'에 해당하는 전화번호가 IP 주소가 된다. ✏️ 1. 웹 브라우저에 URL을 입력하고 Enter 키 입력 https..

Vue3에서 등장한 composition api에서 사용하는 데이터를 반응형으로 만드는 방법 ✏️ composition api가 등장한 배경 Vue2에서는 options api를 사용하고 있었음 객체 내에 다양한 속성을 사용하고 있는 형태 라이프 사이클을 제어하기 위해 사용하는 created, mounted, updated 그리고 컴포넌트 내에서 여러 메서드(methods)들을 정의하고 데이터(data)들을 참조할 때 정해진 속성에 정의해 사용 ✏️ options api 사용 예시 // 태그 안 export default { components: { // 컴포넌트 정의 }, data() { return { // 데이터 정의 } }, created() { // created 시점 정의 }, methods(..

https://www.acmicpc.net/problem/1402 1402번: 아무래도이문제는A번난이도인것같다 첫째 줄에는 테스트 케이스의 개수 T(1 ≤ T ≤ 100)이 주어진다. 테스트 케이스마다 두 정수 A, B(-231 ≤ A, B ≤ 231-1)가 주어진다. www.acmicpc.net 문제 분석 처음 문제를 읽었을 때는 경우의 수가 엄청 많다고 생각했다. 일단 소인수분해를 해서 합이 되는 경우를 모두 계산해서 저장해두어야 하나? 입력 범위가 크니 작은 수부터 경우를 구해서 DP를 이용해야 하나? 근데 음수는 어떻게 판단하지? 많은 고민들이 있었던 것 같다. 하지만 정말 어이없게도 문제는 너무 간단했다.. A = a1 * a2 * a3 * ... * an으로 했을 때 A' = a1 + a2 +..