전체 글
-
React Life Cycle스터디노트/Front-end 2021. 11. 25. 20:15
class 컴포넌트의 life cycle Mount 컴포넌트가 처음 실행될 때 componentWillMount 호출 -> render로 DOM에 컴포넌트 부착 후 Mount가 완료되면 componentDidMount 호출 componentWillMount에서는 props나 state를 변경하면 안된다. componentDidMount에서 DOM에 접근 가능(setTimeout 등) 함수 컴포넌트의 life cycle useEffect 데이터의 개수에 따라 여러번 사용 // state가 변경 될 때마다 실행 useEffect(() => { // something }, [// state]); // 마운트 될 때 처음 한번만 실행 useEffect(() => { // something }, []); // 컴..
-
replace into vs insert into스터디노트/DB 2021. 11. 24. 13:01
replace into MySQL이나 MariaDB에서 테이블에 데이터를 insert하는 명령어 테이블의 키를 기준으로 해서 동일한 키를 입력하면 해당 데이터는 삭제하고 넣으려는 데이터로 대체하여 insert한다. Primary Key 기준으로 작동 예제 이름 : 김태호, 급여 : 10의 데이터를 -> 이름 : 김태호, 급여 : 20으로 변경해보기 create table salary ( name varchar(50) not null comment '이름' primary key, salary int null comment '급여' ) comment '샐러리'; INSERT INTO salary (name, alary) VALUES ('김태호', 10..
-
웹 문서화면 이미지 다운로드 (dom-to-image)스터디노트/Front-end 2021. 11. 23. 15:32
dom-to-image 웹에서 일부 내용을 이미지 파일로 내보낼 수 있게 해주는 라이브러리 DOM요소를 벡터나 레스터 이미지로 변환하는데 사용 사용법 domtoimage.toBlob(document.getElementById('태그 Id')) .then((blob) => { window.saveAs(blob, 'xxx.png'); }) 참고자료 https://www.npmjs.com/package/dom-to-image https://github.com/tsayen/dom-to-image
-
Java - Abstract, Interface스터디노트/Back-end 2021. 11. 19. 15:14
Abstract class란?? 추상 메서드를 포함하는 클래스 객체를 만들 수 없다. 추상 메서드 구현을 위한 서브 클래스가 필요하다 Interface란?? 상수 + 추상 메서드의 집합 변수를 가질 수 없다. 모든 메서드는 public 모든 메서드는 추상 메서드 extends 부모 클래스에서 선언/정의를 하고 자식 클래스에서 메서드/변수를 그대로 사용할 수 있다. implements 부모는 객체만 선언하며 정의는 자식 클래스에서 오버라이딩한다. abstract extends + implements 일부는 재정의, 일부는 그대로 사용
-
UUID스터디노트/알게된 내용 정리하기 2021. 11. 18. 13:08
UUID란?? 네트워크 상에서 고유성이 보장되는 id를 만들기 위한 표준 규약 128비트 숫자, 32자리의 16진수로 표현 8-4-4-4-12 글자마다 하이픈으로 5개의 그룹으로 구분한다. 중앙관리시스템이 있는 환경이라면 각 세션에 일련번호를 부여함으로 유일성을 보장할 수 있지만 분산 환경에서는 개별 시스템이 id를 발급하더라도 유일성이 보장되야한다. 범용고유식별자 UUID (Universally Unique IDentifier) UUID in JavaScript let uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random()*16|0, v = c == 'x' ? ..
-
Redux스터디노트/Front-end 2021. 11. 18. 11:00
Redux란?? 컴포넌트들이 state를 쉽게 공유할 수 있게 해주는 방식 A -> B -> C -> D -> E -> F로 접근 후 F -> E -> D -> C -> B -> A로 돌아오는 패턴을 A -> Store -> F 처럼 효율적인 접근을 가능하게 해준다. 2021-11-11 기준 Weekly Downloads 500백만건으로 인기 많다 Action 하나의 객체 State에 변화가 필요할 때 Action을 발생시킨다. type이라는 필드를 가지고 있어야한다. type : 어떤 동작인지 명시 (ex) "NUMBER_COUNT", "CHANGE_INPUT"...) Action Creator Action을 객체로 만들어주는 함수 export const changeType = (type) => { r..
-
Mocha VS Jest스터디노트/알게된 내용 정리하기 2021. 11. 8. 17:15
Mocha란? Node.js에서 유닛, 통합 및 end-to-end 테스트와 같은 다양한 유현의 테스트를 위함 Jest란? 페이스북 개발자들이 만듦(페이스북은 거의 다 만드네..) 유닛 테스트에 초점 다른 JS 라이브러리 및 프레임워크에도 적용할 수 있지만 React를 위한 강력한 프레임워크 Mocha, Jest 비교 Mocha Jest 테스트 러너 테스트 framework 사전 라이브러리 필요 사전 구성 불필요 개발에 관련한 유연성에 초점 Simplicity에 초점 Node.js를 위해 디자인 됨 React를 위해 디자인 됨 참고자료 https://www.merixstudio.com/blog/mocha-vs-jest/
-
Bitbucket스터디노트/알게된 내용 정리하기 2021. 11. 2. 14:12
Bitbucket이란? Atlassian이 소유한 웹 기반 호스팅 서비스 Mercurial 또는 Git 개정 관리 시스템을 사용하는 소스 코드 및 개발 프로젝트에 사용. 요약 Gitlab : 저장소(public : 제한없음, private : 제한없음) Bitbucket : 저장소(public : 제한없음, private : 5유저 이내) Github : 저장소(public : 제한없음, private : 과금) 참고자료 https://lazyjihong.wordpress.com/2015/02/03/git%EC%9C%BC%EB%A1%9C-%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0gitlab-bitbu..