Persistence

HTML로 카드 만들기 - 1 구현하고자 하는 것 구현 기능 카드의 배경색 및 테두리색 지정 카드에 스티커 추가(드래그 앤 드롭 기능) 스티커 크기 선택 가능(S,M,L) Canvas API 사용 카드에 메세지 추가 컬러 및 폰트 크기 변경 가능 카드 세이브 및 읽어오기 기능 카드 지우기(백지화) 기능 Further Issues UI :) ... 전체 지우기 기능 말고, 바로 직전의 행동 삭제하는 기능 추가 기능별 Code 전체 코드 카드의 배경색 및 테두리색 지정 // javascript var bgBtn = document.getElementById("bgBtn"); var brBtn = document.getElementById("brBtn"); var canvas = document.getElem..

Today I Learned HTML DOM eventhandler + canvas api + etc... Today was 정말 하~루종일 DOM을 붙잡고 있었는데, 에러도 안나는데 기능은 구현이 안돼서 도대체 어디가 잘못된 것인지 모르겠다 ㅠㅠ 간단한 드래그앤드롭인데 왜 드래그오버 이벤트가 실행이 안되는거지...? 아무리 구글링을 해도 도대체 어디서 잘못된 건지 모르겠다. 진짜 도대체 왜 뭐때문에 안되는지 너무 궁금하다.

Today I Learned Hackerranck Java Practice React-Redux 컨테이너 생성 액션 생성자

Today I Learned React 유튜브 api 예제 정리 및 포스팅 Redux 리덕스의 개념 container 만들고 있는 중 Today was 리덕스 좀 더 공부해야 되는데 두통...

유튜브 Data API(v3)를 활용한 비디오 렌더링 video_list.js import React from 'react'; import VideoListItem from './video_list_item'; const VideoList = ({videos, onVideoSelect}) => { const videoItems = videos.map((video) => { return ( ) }) return ( {videoItems} ) } export default VideoList; 비디오 리스트 컴포넌트 구조 함수형 컴포넌트 스테이트가 필요없기 때문에 함수형 컴포넌트이다. 비디오 리시트 컴포넌트의 특이한 점은 VideoListItem으로 각 아이템을 보내기 위한 중간 역할을 한다는 것이다. vid..

유튜브 Data API(v3)를 활용한 비디오 렌더링 search_bar.js import React, {Component} from 'react'; class SearchBar extends Component { constructor(props) { super(props); this.state = { term: '' } } render() { return ( this.onInputChange(event.target.value)} /> ) } onInputChange(term) { this.setState({term}); this.props.onSearchTermChange(term); } } export default SearchBar; 서치바 컴포넌트 구조 클래스 컴포넌트 - 사용자가 search한 ..

유튜브 Data API(v3)를 활용한 비디오 렌더링 index.js import _ from 'lodash'; import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import SearchBar from './components/search_bar'; import VideoList from './components/video_list'; import VideoDetail from './components/video_detail'; import YTsearch from 'youtube-api-search'; /* 보안상 이유로 비공개 */ const API_KEY = ''; class App extends Component..

Today I Learned Java LinkedList React video selection, complete search-bar, search term manage(using lodash) Today was 리액트는 각 컴포넌트 별로 다 파일이 나누어져 있어서 글로 작성하기가 쉽지 않다. 그래서 저번에 디플로이한 것도 거의 포스팅으로 남긴 것이 없다. 그래도 이번에 연습한건 그것보다 훨씬 구조가 간단한 예제라서 포스팅으로 남겨놓아야...

LinkedList package LinkedList; // 노드는 data와 다음 오브젝트를 가리킬 next variable로 구성됨 public class Node { int data; Node next = null; } public class App { public static void main(String[] args) { // 노드 인스턴스 생성 및 데이터 삽입 Node nodeA = new Node(); nodeA.data = 3; Node nodeB = new Node(); nodeB.data = 5; Node nodeC = new Node(); nodeC.data = 7; Node nodeD = new Node(); nodeD.data = 9; // 노드 인스턴스끼리의 연결 nodeA.ne..

Today I Learned Hackerrank Java Practice Java Comparator Generics, 와일드카드

제네릭스(Generics) - 2 와일드카드 매개변수에 과일박스(FruitBox)를 대입하면 주스를 만들어서 반환하는 Jucier 클래스가 있다고 하자. 이 클래스에는 과일을 주스로 만들어 반환하는 makeJuice()라는 static 메서드가 있다. class Juicer { static Juice makeJuice(FruitBox box) { String tmp = ""; for(Fruit f : box.getList()) { tmp += f + " "; } return new Juice(tmp); } } 이 메서드의 패러미터 타입을 Fruit타입의 FruitBox 객체로 제한하였기 때문에, Fruit 이외의 타입 은 들어갈 수 없다. (Juicer는 제네릭 클래스도 아니고, 제네릭 클래스라고 하여도..

제네릭스 문제로 이해하기 문제 int와 String 어레이를 아규먼트로 받아서 출력하는 single 메서드를 작성하시오. 제네릭스를 사용하지 않고 문제 풀기 캐스팅을 이용한 코드 import java.io.IOException; import java.lang.reflect.Method; class Printer { void printArray(Object[] arr) { try { for(Object i : arr) { System.out.println((String)i); } return; } catch (Exception e) { for(Object i : arr) { System.out.println((Integer)i); } } } } public class Solution { public sta..

Today I Learned 자바 제네릭스 Hackerrank Java Practice Today was 아니 생각해보니까 TIL은 매일 작성하는 건데, 글쓰기할 때 이 폼이 자동으로 세팅되게 할 수 없나? 내일 좀 찾아봐야겠다 알고리즘, 알고리즘했는데 언어를 쓸 줄 알아야 그걸로 알고리즘을 풀지.. ㅠ 자바는 정말 생각보다 어렵다. 으아아아아

제네릭스(Generics) - 1 제네릭스란? 다양한 타입의 객체를 다루는 메서드나 컬렉션 클래스에 컴파일 시의 타입 체크(compile-time type check)를 해주는 기능이다. 제네릭 타입은 클래스와 메서드에 선언할 수 있다. 제네릭스의 장점? 객체의 타입을 컴파일 시에 체크하기 때문에 객체의 타입 안정성이 높아지고, 형변환의 번거로움이 줄어든다. 제네릭 클래스 선언 // 일반적인 클래스 class Box { Object item; void setItem(Object item) {this.item = item;} Object getItem() {return item;} } // 제네릭 클래스 class Box { T item; void setItem(T item) {this.item = ite..

Today I Learned 알고리즘 hackerrank 문제 n개(몇 개 풀었는진 정확히...) CSS 실습 Today was 그날그날 올려야 하는데 자꾸 까먹...