😸 CSS TIL 😽 Done it 😼 Grid container :2차원 layout에서 사용 justify-content: normal : column 위치 조작 align-content: normal : row 위치 조작 (normal == stretch) 명시적 딱 정해 놓고 있는 부분 grid-template-rows, grid-template-columns 암시적 명시적 이외의 부분 grid-auto-rows, grid-auto-columns grid-auto-flow grid-auto-flow: row: row 방향으로 쌓이게 만들겠다. grid-auto-flow: column: column 방향으로 쌓이게 만들겠다. grid-auto-flow: (row) dense: 빈공간 제거하며 row..
😸 CSS TIL 😽 Done it 😼 Float : 뜨다라는 의미이며 웹 page에서 어떻게 띄어서 텍스트와 함께 배치할 것 인가에 대한 속성(대부분 block요소로 변경(flex, grid 제외)) => 각 item에 float속성을 넣은 후 마지막 item의 형제에서 float요소를 해제 해줘야지 container가 item을 제어 할 수 있다. float control 마지막 item을 만들어 float이 없는 곳에다가 clear를 주어 float 요소 제거 .container에 overflow:hidden을 준다. (근본 없음) ::after로 가상으로 item을 만들어서 clear:both(flaot의 left, right 속성 제거)를 부여 .container 부분에 추가 flaot요소가 해..
TIL Done it drag & drop 처음 한 보게 된 부분이라서 신기한 부분이었습니다. 여기서 가장 중요한 부분은 결국 다시 rendering을 해줘야 한다는 것이었습니다. dragstart -dragover-> drop 이런 느낌입니다. 자세히 코드를 보면 요런 느낌입니다. $.addEventListener('dragstart', (e) => { e.preventDefault(); //drag이외의 event를 막기 위해 꼭!! 사용 e.dataTransfer.setData('~'); }); $.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; //'copy'도 된다. }); $..
TIL Done it 실행, 선언 구별(app.js, main.js) 강사님이 왜 이런지 생각을 해보라고 하셨습니다. 이전에 저의 생각은 실행, 선언 구별같이 정확한 생각보다 C언어에 있는 main처럼 그냥 구별하려 해 놓는 것이라고 생각을 했었습니다. 그런데... 여러개의 죻은 점이 있었습니다. 여러개의 app.js를 생성 할 수 있다. 이 말은 선언부분을 많이 실행 할 수 있는 장점이 있는 것 같습니다. 선언, 실행 부분을 분리하기 위함 이게 주된 이유인 것 같습니다. 다음과 같이 C언어에서도 main.c로 다음과 같이 실행 부분을 나눕니다. int main(int argc, char *argv[]) { } C로 코딩 많이 했는데 이런 사소한 이유도 파악하지 못 한 것이 정말... 슬픕니다. ㅜㅜ 그..
TIL Done it 낙관적 API 서버 실행이 늦는 경우 update 된 api가 잘 될 것이다라고 생각하여 서버 실행 완료 전에 먼저 update된 값들을 Client에서 표시하고 서버 실행이 완료되면 다시 Client에 표시해주는 방법 Debounce Event를 지연하다가 일정 시간 지났을 때 event 실행하여 성능 최적화 하는 법 ex) 1초내에 글을 작성 중 일때 event가 지연되고 수정 끝나고 1초 후에 event가 실행한다. let timer = null; new Editor({}) { onEdit: (post) => { clearTimeout(timer);//timer 날리기 timer = setTimeout(() => { //타이핑 저장 } 5000); } } js false und..
TIL Done it history api 너무 중요한게 많아서 블로그에 정리했습니다. :) Feeling 과제를 진행하고 PR을 날리는데 과제를 진행할때 단계별로 계속 commit을 날리다 보니 commit이 엄청 많아지고 이것을 다 정리해서 PR을 날리는 것이 절말 어렵고 효율적인 방법이 없나 고민하게 됩니다. 그래서 우선 최종본을 넣고 큰 틀에서만 링크를 걸어 넣고 있는데 뭔가 아쉬운 느낌이 듭니다. ㅜㅜ 그래도 이번 과제는 많이 발전 할 수 있는 기회가 된 것 같아서 매우 좋았습니다. 아직 더 익숙해 져야 하지만 과제가 나오면 빨리 만들고 refactoring을 하는 식으로 하는 것이 엄청 좋은 방법인 것 같습니다. :) REF https://gwpaeng.tistory.com/389
TIL Done it fetch api XMLHTTPRequest를 대체하며 Promise기반으로 동작하는 비동기 API => Promise + reject = fetch HTTP Error가 발생해도 reject 되지 않고 then으로 떨어집니다. (.status, .ok(.ok: 200 ~ 299인 경우만) 확인 하기) URL ? query를 실행하거나 database에 대한 작업을 수행하는 구분 기호 https://google.com?q=paeng 인 경우 google.com으로 이동하고 검색 상자에 paeng넣는다. # 페이지에서 이동할 위치를 나타낸다. 즉, URL 끝에 #paeng이 있으면 id="paeng"이 포함된 페이지를 검색한 후 해당 지점으로 이동 & 쿼리 문자열이 2개 이상인 경우 ..
TIL Done it 비동기: 특정 코드의 연산이 끝날 때 까지 기다리지 않고 다음 코드를 먼저 실행 addEventListener: 인자로 들어오는 함수를 addEventListener동작 후 사용 setTimeout, setInterval: 시간 후 함수 동작 XMLHttpRequest(XHR): 데이터를 비동기로 요청하고, 요청 후의 동작을 비동기로 처리 제작 tip this.state : 들어오는 데이터 상황 this.setState: Update를 위해 필요한 부분 this.render: 실행 부분 을 기본으로 알고 Component별로 데이터가 어떻게 들어오는 지 잘 알아야 하며 Object형 데이터를 잘 사용하도록 연습해야 합니다. Promise : 비동기 작업을 Chaining 식으로 제어..