차마시는 개발자

😸 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'도 된다. }); $..

🤔 고양이 사진첩 만들기 !!! 들어가기 전에 완성본 영상을 보고 가겠습니다. 폴더 파일 구조 📦src ┣ 📂components ┃ ┣ 📜app.js ┃ ┣ 📜breadCrumb.js //경로 나타내는 곳(경로 선택 가능) ┃ ┣ 📜catNode.js //파일, 폴더 나타내는 곳(파일,폴더 선택가능) ┃ ┣ 📜imageViewer.js //파일 선택시 그림 보여주는 곳 ┃ ┗ 📜loading.js //loading 중 인 상황 ┣ 📂constants ┃ ┗ 📜constants.js ┣ 📂utils ┃ ┣ 📜api.js ┃ ┣ 📜backEvent.js ┃ ┣ 📜fetchCat.js ┃ ┗ 📜returnHTML.js ┗ 📜main.js 뭔가 허접하게 했습니다. 이 것을 3시간 안에 다 끝내야 하는데 생각해보..

TIL Done it 실행, 선언 구별(app.js, main.js) 강사님이 왜 이런지 생각을 해보라고 하셨습니다. 이전에 저의 생각은 실행, 선언 구별같이 정확한 생각보다 C언어에 있는 main처럼 그냥 구별하려 해 놓는 것이라고 생각을 했었습니다. 그런데... 여러개의 죻은 점이 있었습니다. 여러개의 app.js를 생성 할 수 있다. 이 말은 선언부분을 많이 실행 할 수 있는 장점이 있는 것 같습니다. 선언, 실행 부분을 분리하기 위함 이게 주된 이유인 것 같습니다. 다음과 같이 C언어에서도 main.c로 다음과 같이 실행 부분을 나눕니다. int main(int argc, char *argv[]) { } C로 코딩 많이 했는데 이런 사소한 이유도 파악하지 못 한 것이 정말... 슬픕니다. ㅜㅜ 그..

VSCode Prettier & ESLint Setting 와 진짜 드디어 MAC을 구매하게 되었습니다. 그래서 기본 Setting만 해도 하 세월이 걸리는 것 같아서 다음 번에는 보다 빨리하기 위해 오늘의 실패를 토대로 잘 작성을 해보려고 합니다. 우선 기본적인 node, npx를 설치 완료 했다는 가정하에 진행을 하도록 하겠습니다. :) 아.. 시작전에 앞서 간단 명령어 tip을 써볼려고 합니다. 이것으로 인해 필요 없는 것을 확실하게 없앨 수 있게 되었습니다. ㅎㅎㅎㅎ > npm list npm에 설치 되어 있는 것들을 볼 수 있습니다. > npm list //workspace의 list > npm list -g //global의 list> npm uninstall [list에서 본 이름] npm에..

Window 사용자.... 멘토님들이 답변을 주셨는데 간단히 정리를 하고 경험을 쌓은 다음 이 글을 토대로 해결해 나갈려고 작성하는 글 입니다. 현재 간단한 협업에서는 크게 문제가 되지 않다고 하셨습니다. + WSL2를 더 많이 사용하자 문제점 및 해결 1. 개행 문자 차이 옵션이나 Prettier 설정을 잘 하면 괜찮다. https://www.lesstif.com/gitbook/git-crlf-20776404.html git 에서 CRLF 개행 문자 차이로 인한 문제 해결하기 www.lesstif.com 2. 대소문자 차이 Mac 인 경우 대소문자를 구분하기 때문에 대소문자를 잘 구분 해야 합니다. 마치며 Window를 사용하면서 WSL2 세팅과 Window 환경 설정을 하면서 멘탈이 많이 갈리고 있는..

Notion 제작 및 문제해결!! 프로젝트를 한 순서대로 글을 작성하는데 자잘한 문제보다는 큰 문제 위주로 회고를 작성한 것 입니다. 편하게 읽어주세요 :) 처음 들어가기 앞서 실행 영상을 보고 가도록 하겠습니다. !!! 주위에서 처음에 밤을 새워야 한다라고 겁을 너무 많이 주셔서 겁을 많이 먹었던 것 같아서 내가 할 수 있을 까?? 라는 의문점을 가지고 시작을 했습니다. 📦public ┣ 📂api ┃ ┗ 📜kdt-api.js ┣ 📂components ┃ ┣ 📜app.js ┃ ┣ 📜editor.js ┃ ┣ 📜linkButton.js ┃ ┣ 📜postEditPage.js ┃ ┣ 📜postList.js ┃ ┣ 📜postPage.js ┃ ┗ 📜postRootList.js ┣ 📂constants ┃ ┣ 📜con..