TIL (52) 썸네일형 리스트형 200105(일) TIL Shortly Sprint 구조 Shortly Sprint 구조 1. server/ 실선은 디렉토리 구조, 점선은 화살표 시작점이 끝나는 파일을 require해서 사용하는 관계를 나타냄! 2. DB 2-1. urls table Column Name Type id integer primary key, not null, auto increment url string baseUrl string code string title string visits integer not null, default: 0 createdAt date not null updatedAt date not null 2-2. user table Column Name Type id integer primary key, not null, auto increment email .. 200103(금) TIL. Authentication and Full Stack Development Sprint Review 2주 프로젝트: join써보기 행동 기반 testcase bdd(behavior driven development) teardown, setup Authentication and Full Stack Development 인증, 로그인 관련 이슈 보안 클라이언트, DB, server를 다 만들어 보기. 1. Hashing 1-1. No Authentication 보안상 issue가 발생! 1-2. Authentication(Plaintext) email: 공개된 data password: 유저만 알고 있어야 함 -> DB에 암호화해서 저장해야 함. 1-3. Encryption 암호화는 일련의 정보를 임의의 방식을 사용하여 다른 형태로 변환하여 해당 방식에 대한 정보를 소유한 사람을.. 191229(일) TIL. DB SQL-2 SQL-2 1. Joins 두 개 이상의 테이블에서 칼럼을 중심으로 테이블의 행을 결합함. (INNER) JOIN: 겹치는 값만 return함 LEFT (OUTER) JOIN: 모든 왼쪽 table의 값, 겹치는 값을 return RIGHT (OUTER) JOIN: 모든 오른쪽 table의 값, 겹치는 값을 return FULL (OUTER) JOIN: 모든 값 return 다음의 사이트에서 SQL명령어를 입력하면 직접 해 볼 수 있다: https://www.w3schools.com/sql/trysql.asp?filename=trysql_select_all SELECT * FROM orders; SELECT * FROM customers; SELECT orders.orderID, customers.cus.. 191227(금) TIL. DB SQL-1 DB를 사용하는 이유 In-memory 끄면 데이터가 없어짐 File I/O 원하는 데이터만 가져올 수 없고 항상 모든 데이터를 가져온 뒤 서버에서 필터링 필요 DB 데이터 관리, 필터링 등 데이터에 특화된 여러 기능들을 가지고 있는 서버 https://www.w3schools.com/sql/default.asp 1. SQL Intro 1-1. SQL SQL (Structured Query Language): 구조화된 Query 언어 DB에 접속하고 처리할 수 있게 해줌 데이터베이스용 프로그래밍 언어 DB에 query를 보내 원하는 데이터만을 가져올 수 있음. Query: (질의문)저장되어있는 정보를 필터하기 위한 질문 1-2. RDBMS RDBMS (Relational Database Managemen.. 191223(월) TIL. Promise 1. Async 비동기는 제어하기 힘들다. const printString = (string) => { setTimeout( () => { console.log(string) }, Math.floor(Math.random() * 100) + 1 ) } const printAll = () => { printString("A") printString("B") printString("C") } printAll() //"A", "B", "C"가 뒤죽박죽 출력됨 2. Callback callback을 통해서 비동기 실행을 제어할 수 있음. const printString = (string, callback) => { setTimeout( () => { console.log(string) callback() }, .. 191222(일)TIL. React refs, Todo list 5, Ant design Ref와 DOM https://ko.reactjs.org/docs/refs-and-the-dom.html 1. Ref를 사용해야 할 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양하세요. 2. Ref 생성하기 Ref는 React.createRef()를 통해 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착됩니다. 보통, 컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로서 추가하고, 그럼으로서 컴포넌트의 인스턴스의 어느 곳에서도 Ref에 접근할 수 있게 합니다. class MyComponent extends React.Com.. 191220(금) TIL React Todo list 4 todo추가 시 여러 줄 입력 가능 enter버튼을 누르면 입력이 되고, shift+enter를 동시에 누르면 입력창이 한 줄 늘어난다. todo를 추가하는 component function AddTodo({ nowTitle, handleAddTodo, handleIsAddingTodo }) { function handleKeyDown(e) { if (e.shiftKey) { //shift키가 눌러졌을 경우 바로 아무 일도 하지 않는다. // =>shift + Enter의 경우에도 아래의 else if문을 돌지 않고 바로 return return; } else if (e.keyCode === 13) { handleAddTodo(nowTitle, e.target.value); handleIsAddingTo.. 191219(목) TIL React Todo list 3 [ Todo list 기능 추가 ] 새 목록 추가 시 다른 영역 클릭하면 바로 저장 & input text 사라짐 TitleList에서 관리하던 isAddingTitle(isAddingTitle이 true일 경우 input text가 생기며, 그 input text에 입력되는 값을 새 목록으로 만든다) state를 App으로 올려서 관리. (엔터 누른 게 아니고 다른 영역을 클릭한 것임) App의 클릭 핸들러에 클릭 시 클릭한 영역의 id를 토대로 input text가 아닌 곳이 클릭된 것을 판별한다. 아래는 해당 클릭 핸들러 함수. watchAppClick(e) { if (this.state.isAddingTitle) { //현재 새 title 입력 중 if (e.target.id !== "AddTit.. 이전 1 2 3 4 5 6 7 다음
