HAN STORY

✔️ Lifecycle Diagram Vue.js 의 Lifecycle 은 CREATE 단계 → MOUNT 단계 → 컴포넌트 생성   → UPDATE 단계   → UNMOUNT 단계  를 거친다. 이 중간에 hook 을 걸어서 액션을 취할 수도 있다. 예를 들어서 배너 하나가 띄워진 후에 mount 된 2초 후에 배너를 없애고 싶다면  data() { return { onerooms_original: [...data], onerooms: data, user_clicked: 0, modal_status: false, discount_status: true, menus: ['Home', 'Shop', 'About'], warn_count:..

✔️ UI 애니메이션 주기.start { opacity: 0; transition: all 1s;}.end { opacity: 1;} start 와 end css 코드를 작성해놓고  위처럼 Modal Component 를 div 로 감싸 초기 class 상태를 start 로 만들어주고, :class 를 활용해 modal_status 가 true 일 때만 end class 를 붙여주도록 조건부를 달아줄 수 있다. vue 에서 제공하는 태그가 있는데,  이렇게 transition 태그로 감싸주고 name 에 작명을 해준다. 이후 아래에 style 태그에서.fade-enter-from { 시작 시 스타일}.fade-enter-active { 동작}.fade-enter-to {..

✔️ 사용자의 input 을 받는 법 data() { return { month : 1 } 데이터에 input 에 입력받을 변수를 추가하고,   input 에 값이 입력되면 자동으로 그 값이 month 변수에 저장되도록 설정을 할 수 있다.  더 축약해서 위처럼 줄일 수 있다. textarea, select 태그 등에도 사용할 수 있다. ※ data 에서 초기값에 따라서 해당 변수에 어떤 값이 들어올지 정하는 것이기 때문에, 지금 상황에서 input 태그 안에 문자를 넣으면 인식을 안한다. v-model.number 를 사용해서 숫자로 취급할 수 있다.✔️ watch 를 사용해 데이터 감시데이터가 올바른 값이 들어왔는지 검사하기 위해 watch 를 사용한다. ..

💡 Component 만들기Component 를 만들어서 코드를 간결화 시킬 수 있다.파일 분리를 통해 유지보수가 더 쉬워진다.하지만 Component 를 만들면 기존에 data 를 바인딩 하는 과정에서 필연적으로 더 복잡해질 수 밖에 없다는 단점이 있다.  1. Discount.vue 이름으로 파일을 만들어준다.  지금 결제하면 20% 할인  기본 템플릿을 이 vue 파일에 역시 만들어준 후에 template 태그 안에 넣고 싶은 HTML 코드를 넣어준다. export default 안에 name 도 설정을 해준다.  2. App.vue 설정하기 import Discount from './components/Discount.vue'; 해당 Discount 파일을 사용하기 위해..

💡 데이터 바인딩 위와 같이 script 태그 안에 data() 중괄호 안에 return 중괄호 안에 변수명과 값을 넣어준다. {{ products[0] }} {{ price1 }} 만원  그럼 위에 태그에서 {{ }} 를 이용해서 데이터를 넣어줄 수 있다.앞에 : 를 붙여서 style, id 역시 데이터 바인딩으로 넣을 수 있다.💡 반복문 Home  v-for 을 이용하면 되는데 html 태그 뒤에 위와 같은 방법으로 넣어줄 수 있다.key 를 넣지 않으면 에러가 발생한다.(반복문을 돌면서 변화하는 변수) {{menu}}  만약 3 자리에 array 나 object 를 넣으면 그 개수만큼 반복한다.💡 Event Handler허위매물 신고 신고 수 : {{cou..

오늘도골대FC 리뉴얼을 위해서 프론트 기술스택도 기존에 비해 레벨업을 할 필요가 있었다.페이지가 새로고침되지 않고 부드럽게 전환되는 web-app 으로 만들고자 했다. React 와 Vue.js 중에 고민하다가 나에게 맞는 기술 스택은 Vue.js 라고 판단했다. 1. 상대적으로 쉬운 난이도 Vue 가 더 깔끔하고 난이도가 쉽다고 판단했다. 2. 정답이 있다.React 에서 for 반복문 하나만 쓰려고 해도 map, forEach, for in, for of 등 많은 반복문을 이용할 수 있으며 언제 어디서 쓸 지도 자유도가 있다.하지만 Vue 는 그냥 v-for 하나만 존재한다.협업을 한다면 이 역시 큰 장점 중 하나라고 생각이 들지만, 필자는 협업을 하기 위해 Vue 를 선택했다기 보다는 다른 선택지를..

Baekjoon Bronze 2,3 을 풀면서 알게된 작은 정보들 메모 💡 그대로 출력while(sc.hasNextLine()) { System.out.println(sc.nextLine());}다음 줄 입력이 있을 때 까지 반복문을 돌면서 입력받은 것을 그대로 출력시킨다. 💡 자료구조 SetSet mySet = new HashSet();mySet.add(temp);System.out.println(mySet.size());중복을 피하기 때문에 다 다른 값들만 저장시킬 수 있음. 💡 N제곱Math.pow(x, y); Math 의 pow 를 사용해서 x  의 y 제곱을 구할 수 있다. 💡 N진수 변환String hex = sc.next();int result = Integer.parseInt(..

package CLUB_99.Day250114;import java.util.Scanner;public class BOJ1654 { // 랜선 자르기 public static void main(String[] args) { Scanner sc = new Scanner(System.in); // 입력 int K = sc.nextInt(); // 가지고 있는 랜선의 개수 int N = sc.nextInt(); // 필요한 랜선의 개수 long[] cables = new long[K]; long max = 0; // 랜선의 최대 길이 for (int i = 0; i = N) { resu..

💡 나의 답package baekjoon.Bronze3.Day250113;import java.util.Scanner;public class BOJ2776 { // 암기왕 public static void main(String[] args) { Scanner sc = new Scanner(System.in); int T = sc.nextInt(); for (int i=0; i💡 개선 답package baekjoon.Bronze3.Day250113;import java.util.HashSet;import java.util.Scanner;public class BOJ2776 { public static void main(String[] args) { ..

Baekjoon Bronze 4 를 풀면서 알게된 작은 정보들 메모 💡 BufferedReader, BufferedWriter, StringTokenizerpublic class BOJ15552 { // 빠른 A+B public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out)); int T = Integer.parseInt(br.readLine())..