DevYoon

Vuex 1️⃣ Vuex란? Vue 상태관리 라이브러리 state(상태)를 전역 저장소로 관리할 수 있도록 지원 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 상태가 예측 가능한 방식으로만 변경 컴포넌트의 공유된 상태를 추출 ➡️ 전역에서 관리 컴포넌트는 커다란 view가 되며, 모든 컴포넌트는 트리에 상관없이 상태에 액세스하거나 동작을 트리거 할 수 있음 2️⃣ Props&Emit VS Vuex Props&Emit props&Emit은 단반향 흐름, 부모 ➡️ 자식 간의 전달만 가능 장점 : 데이터의 흐름 직관적으로 파악 가능 단점 : 컴포넌트 중첩이 깊어지면 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우 데이터 전달이 매우 복잡해짐 단방향 데이터 흐름 state : 앱을 작동하는 원본 소..

link 🔗 https://www.acmicpc.net/problem/10026 10026번: 적록색약 적록색약은 빨간색과 초록색의 차이를 거의 느끼지 못한다. 따라서, 적록색약인 사람이 보는 그림은 아닌 사람이 보는 그림과는 좀 다를 수 있다. 크기가 N×N인 그리드의 각 칸에 R(빨강), G(초록) www.acmicpc.net ✏️ BFS 적록색약인 사람이 보았을 때와 적록색약이 아닌 사람이 보았을 때의 구역 수를 구하는 문제 적록색약일 때와 아닐 때를 구분하여 2개의 visit 배열과 count, BFS 함수를 만들어 주었다. 이중for문으로 visit에 체크가 되지 않았을 때 BFS를 돌리는데, rgBfs(적록색약 BFS)는 색이 R이거나 G일 때만 돌려주었다. 만약 현재 색상이 "B"라면 적록색..

Java 객체지향 1️⃣ 인스턴스 생성 클래스명 변수명 = new 클래스명();2️⃣ 인스턴스 접근 인스턴스에 접근하기 ➡️ 인스턴스 변수 사용해서만 가능 class Print{ public String delimiter = ""; public void A(){ ~~~~~~~ } } Public class Main{ public static void main(String[], args){ Print p2 = new Print(); p2.A(); } } 2️⃣ static 변수나 메소드 앞에 static ➡️ 클래스 소속 변수 static을 제거하고 인스턴스 소속으로 만들면 클래스에서 접근이 불가능 class Foo{ public static String classVar = "I class var"; pu..

🔥 주요 Keypoint ❕ 상위 컴포넌트 - 하위 컴포넌트 연결 / props & emit 1️⃣ App App.vue 💫 searchBar로부터 이벤트 청취 ➡️ 입력값과 API KEY로 params 구성 ➡️ axios로 요청 💫 요청 결과 전달 받은 영상들을 videos 배열에 넣어주기 ➡️ 하위 컴포넌트인 VideoList에 props로 전달 💫 VideoList로부터 이벤트 청취 ➡️ 선택한 비디오 props로 VideoDetail에 전달 2️⃣ searchBar 검색 💫 input 박스에 작성 후 엔터 ➡️ 부모 컴포넌트(App)에게 이벤트로 입력한 값 전달 3️⃣ VideoList VideoList 💫 VideoListItem의 이벤트 청취 ➡️ App으로 이벤트 전달 💫 하위 컴포넌트인 ..

1️⃣ App.vue 라우터 경로 설정 Lunch | Lotto 🔥 router-link to = '/lunch' 🔥 router-link :to = '{name:'lunch'}' ➡️ Named Routes 2️⃣ index.js routes 설정 const routes = [ { path: '/lunch', name: 'lunch', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: lunch }, { path:'/lotto/:lottoNum', name: 'lotto..

HTML 수정 {% if user in article.like_users.all %} {% else %} {% endif %} {{ article.like_users.all|length }} 명이 이 글을 좋아합니다. Script form을 통해 넘겨주던 POST 요청을 axios를 이용해 넘겨주었다. addEventListener로 i태그의 하트를 클릭하면 POST 요청이 갈 수 있게 해주었고, 요청이 성공하면 좋아요 수, 하트 색상 등을 조정해주었다. View @require_POST def likes(request, article_pk): # CODE HERE if request.user.is_authenticated: article = get_object_or_404(Article, pk=arti..

link 🔗 https://www.acmicpc.net/problem/1535 1535번: 안녕 첫째 줄에 사람의 수 N(≤ 20)이 들어온다. 둘째 줄에는 각각의 사람에게 인사를 할 때, 잃는 체력이 1번 사람부터 순서대로 들어오고, 셋째 줄에는 각각의 사람에게 인사를 할 때, 얻는 기쁨이 1번 www.acmicpc.net ✏️ DP 알고리즘 잘 풀리지 않아서 고전하다가, 잘 정리된 글(https://gsmesie692.tistory.com/113)을 발견하여 참고할 수 있었다. 2차원 배열로 문제를 해결하는데, 체력이 j보다 작으면 연락 불가능하므로 윗 배열의 값을 가져오고 체력이 j보다 크거나 같으면 새로운 값과 윗 배열의 값을 max 비교한다. 이때, j-power[i]는 앞서 연락을 취해 기쁨을..

link 🔗 https://www.acmicpc.net/problem/2491 2491번: 수열 0에서부터 9까지의 숫자로 이루어진 N개의 숫자가 나열된 수열이 있다. 그 수열 안에서 연속해서 커지거나(같은 것 포함), 혹은 연속해서 작아지는(같은 것 포함) 수열 중 가장 길이가 긴 것을 찾 www.acmicpc.net 1️⃣ DP를 활용하는 문제 2️⃣ 증가할 때와 감소할 때를 나누어 배열을 만들어서 증가하는 상태에서는 증가배열에 더해주고, 감소하는 상태에서는 감소배열에 더해주었다. 3️⃣ 이전 값과 같은 상태에는 증가와 감소 양쪽 모두에 더해주었다. n = int(input()) arr = list(map(int, input().split())) isTrue = [1]*n isFalse = [1]*n..

this 1️⃣ this의 정의 자기 참조 변수 2️⃣ this의 목적 객체 에서 내 가 프로퍼티나 메서드 참조 3️⃣ 호출 1️⃣ 일반 함수로 호출 function callthis(){ return this } ➡️ this는 전역객체(window) 2️⃣ 메서드로 호출 const obj = { callobj: function(){ console.log(this) } } ➡️ this는 해당 메서드를 보유한 객체, 객체.메서드() 3️⃣ 생성자 함수로 호출 function Teacher(name){ this.name = name // 미래에 생성될 인스턴스의 name 프로퍼티에 바인딩 } const test = new Teacher('이름') ➡️ this는 미래에 생성될 인스턴스

Java 제어문 1️⃣ 조건문 if (조건){ 실행될 구문 } else if { 실행될 구문 } else { 실행될 구문 }2️⃣ 비교연산자(==과 equals의 차이점) 원시 데이터 타입은 == 사용해서 비교 원시 데이터가 아닌 것은 equals 사용해서 비교 // 원시 데이터 타입 => == int p1 = 1; int p2 = 1; System.out.println(p1==p2); // true String o3 = "Java2"; String o4 = "Java2"; System.out.println(o3==o4); // true // 원시 데이터 타입이 아닌 것 => equals String o1 = "java"; String o2 = new String "java"; System.out.pri..