전체 글
-
React - 생활코딩(8) State관리 + Props (key)HTTP 웹/React 2021. 4. 25. 19:11
■ Data State로 전달받기 > Component 가 data를 받는 것을 다음과 같이 작성할 수 있음 ※ 완벽히 적절한 데이터 전달방식인 것인지 모르겠으나, 아래와 같이 array안의 object들로 받음 ■ Component 내부 여기서는 TOC 컴포넌트를 예시로 들고 왔음 ※ 특이한 점 : 1) push할 데이터 자체를 JSX로 해도 무방 ( [흰색 박스] 안을 string으로 주면 변환이 안되고 그대로 string으로 전달 됨. JSX로 줄 것) 2) [주황색 박스]HTML element를 직접 생성할 때는, key 값을 주어야 React 내부적으로 오류가 생기지 않음 ■ State와 Props 사용의 장점 모듈단위로 분리가 되고, 그 값을 state에서 주입하므로써 재사용성 용이해지고, H..
-
React - 생활코딩(7) State관리 + PropsHTTP 웹/React 2021. 4. 25. 18:00
■ 사용자 & 구현자 1) State : 구현자가 사용자를 위한 system의 상태관리를 위한 것 2) Props : 사용자 입장에서 보여지는 component API를 조작하기 위한 것 ■ Component를 state로 관리하기 > State는 App.js 등에서 주는 값으로 치환 > Component라는 class + props를 한 객체로 바라보고, state에서 props로 가지는 값을 하위 component에 주입하는 방식 > 상위 App의 State를 하위 Component로 전달하는 방식 ※ Props + component 활용된 부분 ■ Class의 Super란? 1) 정의 : 클래스를 생성할 때, 부모 클래스의 기능을 활용해서 메서드나 변수를 선언할 때 super를 사용 2) 사용 : ..
-
React - 생활코딩(6) Component 관리(class 파일 분리)HTTP 웹/React 2021. 4. 24. 23:11
■ Component 파일관리 > 수천개의 component들을 모아서 관리하고 싶을 때 (원래는 index.js에 모여있는 등 관리 안되면 어려움) 1) 위와 같이 JS 파일로 분리 2) class defenition을 해당 JS에서 한후 export default Subject; 로 외부에 전달 3) App.js에서 import 하여 render 해줌 참조 : www.youtube.com/watch?v=8hGqznPGVc0&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=15
-
AWS - EC2배포 자동화 [AWS Code Deploy & AWS S3]서버 & Dev ops 인프라/AWS 2021. 4. 23. 14:50
■ Code Deploy 계정 생성 연동한 Travis 계정에서 사용할 수 있는 계정을 생성 1) iam AWS 콘솔에서 검색 2) 계정 추가 선택 3) 사용자 + 유형 선택 4) 정책 설정 + 권한 > Travis용 계정 생성 완료 ■ AWS S3 버킷 생성 > Build된 코드 보관용 S3 버킷을 만들기 위함 > 이 프로젝트의 경우 jar / React build가 해당 1) S3 콘솔에서 검색 2) bucket 생성 ※ region은 EC2에서 설정한 값 ■ IAM 롤 추가 1) 콘솔 IAM에서 다음 버튼을 클릭 2) EC2 선택 3) 정책 선택 4) EC2용 Role 생성 5) CodeDeploy 선택 - 2번째 role 추가 6) 정책 선택 7) CodeDeploy용 role 생성 ■ 생성된 r..
-
AWS - EC2배포 ubuntu [git pull + travis]서버 & Dev ops 인프라/AWS 2021. 4. 23. 11:32
■ Jekins Jekins 사용하면 좋겠지만, AWS에서는 EC2 하나 더 사용해야 한다고 함 > CID는 github + Travis 사용 예정 ■ Ububtu JDK 8 설치 (Ubuntu는 기본 7 설치, 없는 경우 SKIP!) 추가 참조 : blog.naver.com/PostView.nhn?blogId=dudrb523&logNo=221475876695 [자동설정법] 1) sudo update-alternatives --config java 2) 자바 옵션 선택 후 Enter [수동설정법] 1) sudo apt-get install openjdk-8-jdk 2) java -version > 설치된 자바 버전확인 3) sudo vi /usr/bin/java8 (a)아래 내용 추가 ( linuxize..
-
JS (ES6 & above) - 배열자바스크립트 Study 2021. 4. 23. 01:16
■ JS 배열 > index를 가지고 있음 > 동일한 type의 자료들을 묶어서 가지고 있는 것이 일반적 ■ 선언 방법 > 다음의 두가지가 있음 const arr1 = new Array(); const arr2 = [1, 2]; ■ Index position > Object에 key값으로 value에 접근할 수 있는 것 처럼, index 값으로 array 값에 접근 가능 const fruits = ['🍅', '🍓']; console.log(fruits); console.log(fruits.length); // first , second index console.log(fruits[0], fruits[1]); console.log(fruits[2]); // undefined console.log(fruit..
-
내 코테 문제 github / notion link코테문제풀기 2021. 4. 22. 19:31
■ github 링크 github.com/didghwns0514/PS_save didghwns0514/PS_save to maintain record of Problem Solving using notion - didghwns0514/PS_save github.com ■ Notion 링크 www.notion.so/Code-review-fe36b140008e4fe4b89d208a44b63012 Code review - 코르시카 A new tool for teams & individuals that blends everyday work apps into one. www.notion.so
-
다익스트라알고리즘/탐색 2021. 4. 22. 18:54
■ 다익스트라 알고리즘 1) 정의 : 자료구조로 graph 사용, " 노드 + 가중치를 가진 간선 "을 이용하여 최단경로를 계산 2) graph 자료구조 참조 참조 : korshika.tistory.com/42?category=957674 3) 시간복잡도 : O( E * log(E) ) ≒ O( E * log( V) ) > "최대의 경우" 모든 간선 E에 대해서 dist_history= [ ]가 한번씩 계산이 되기 때문에 간선을 queue에 작업하는 평균 시간 복잡도 O( log(E) )를 곱하면 최대 O( E * log(E) ) 에 비례, > 일반적으로 노드는 간선보다 적기 때문에, O( E * log( V) ) 라고 쓸 수도 있다 ■ 코드 구현 1) 코드 이해코드 설명 참조 : Link 2) 코드 -..