Web 기초8 [Git] 희대의 난제 커밋 메시지 😅 리팩토링 to-do-app을 Refactoring 했습니다. 그런데 커밋메시지 남기는게 너무 어렵네요. 거기다 제 깃 히스토리를 보면 정말 마음에 안드는게 한 두가지가 아닙니다. 깃 로그 문제 첫번째, 깃 로그를 봐도 뭘 했는지 시멘틱하게 알아볼 수 없습니다. Refactoring을 했다는데 어떤 부분에 손을 댔는지 어떤 생각으로 했는지 왜 했는지 이런 이야기가 전혀 없고, 그냥 Refactoring을 했다고 적어뒀네요. 여기에다가 rebase까지 해버리니까 소스코드의 이곳 저곳을 다 조금씩 고쳤는데 이거 진짜 난장판이네요 😭 깃 관리를 할 때 cli와 VSCODE만으로는 내가 어떤 코드를 수정했는지, 제대로 된 형상관리가 쉽지 않습니다. 물론 신경쓰면 당연히 가능하겠지만 git-fork client 툴.. 2022. 10. 26. [Javascript] 동기와 비동기 헷갈림을 없애준 한 문장 동기 비동기 많이 헷갈리더라구요. 물론 저도 설명은 많이 들어서 알고 있었습니다. 동기적인 코드는 위에어 아래로 순차적으로 실행되지만 비동기적인 처리는 (setTImeout, fetch)같은 함수는 해당 라인 실행이 끝나지 않았지만 아래 코드들이 실행이 된다. 이것이 비동기다.... 물론 다 맞는 말입니다. .. 맞는데.... 다 아는데... 설명도 어렵고, 실제로 제대로 이해했다고 말하기가 애매하더라구요... 그래서 정말 많이 찾아봤습니다. 비동기란 무엇인지, async의 뜻이 뭔지, promise 객체가 뭔지, then이 뭔지... 이 모든 고민을 해결해 준 단 한 문장. 근데 이 모든 고민을 해결해 준 단 한 문장이 있었습니다. 동기란 "응답"과 "요청"이 동시에 일어나는 것 비동기란 "응답"과 ".. 2022. 8. 11. remote에 있는 branch 가져오는 방법 (git pull 대신) 깃 정말 어려워요 😭 깃, 깃헙을 개인 레포와 잔디 찍기용(?)으로만 사용하다 부트캠프에서 협업을 위해 제대로 사용하다 보니 정말 익숙해지는 것이 힘들다는걸 느끼고 있습니다. 😭😭 오늘은 리모트에 있는 브랜치를 git pull 없이 깨끗하게 있는 그대로! 가져오는 방법을 적으려 합니다. 이 글은 다른 사람들을 위한 글이라기 보단 제 자신이 다시 보기 위한 글이므로 더 퀄리티가 좋은 이 글 을 보시면 됩니다. 클릭! git fetch remote에 있는 "review/chaedie" 브랜치를 땡겨 오고 싶을 때 (로컬엔 해당 브랜치가 없는 상태) $ git fetch origin review/chaedie 위 명령어를 치면 리모트에 있는 브랜치를 당겨와서 "FETCH_HEAD"라는 브랜치로 저장됩니다. $.. 2022. 8. 11. [javascript] form 태그를 이용한 input event listener form 태그를 활용한 리팩토링 주석 처리한 코드가 이전 코드였던 부분입니다. 아래는 이전 코드에서의 이벤트 리슨 상황입니다. input창에 keydown 이벤트가 발생 (keyCode가 "Enter, NumpadEnter"일 때) Button태그에 Click이벤트 이 코드를 div를 form 태그로 바꿔주어 form태그를 리슨하면 훨씬 간결하게 바꿀 수 있습니다. form태그에 submit이 일어나는지 리슨 (Enter Press, NumpadEnter Press, Click 3가지 케이스 전부 콜백펑션을 호출합니다.) // 태그 선택 // const inputComment = document.querySelector('.articleInputComment input'); // const submitC.. 2022. 7. 28. [Javascript] addEventListener에서 event 넘기는 방법 (콜백펑션이 함수 선언식일 때) 알고 보면 굉장히 간단한 문제인데, 한참을 헤매었습니다. 콜백펑션에서 event는 어떻게? commentForm.addEventListener('submit', addComment); function addComment(e) { e.preventDefault(); ... ... } 위와 같이 콜백 펑션에 함수 선언식 형태로 넣어주고 싶은데, 아시다시피 콜백펑션에서 괄호를 넣어주면 안됩니다. ❌❌❌ commentForm.addEventListener('submit', addComment(e)); ❌❌❌ 그렇다고 애로우 펑션을 활용해서 익명함수 형태로 넣으면 함수 재사용이 불가능해 코드가 더러워지게 됩니다.이럴땐 어떻게 해야할까요??? 이럴 땐 애로우 펑션으로 익명함수를 만들어 주되, 미리 선언한 함수 선언.. 2022. 7. 28. [css] block, inline, inline-block block block은 레이아웃을 잡는데 기본이 되는 요소이다. div를 필두로, h1 ~ h6, form, header, aside, article, address, table, 등등이 block이 기본인 요소들이다. Block의 특징 block의 특징은 width, height, margin, padding 설정이 가능 하다는 것이다. 또한 block 내부에 다른 block이나 inline등을 배치하고 레이아웃을 지정해주는 역할 또한 가능하다. inline inline은 block과 반대되는 개념이다, span, a, img, input, label, button 등이 inline이 기본인 요소이다. inline의 특징 inline은 width, height 지정이 불가하며, 컨텐츠의 영역이 크기로 .. 2022. 7. 19. [css] Layout 잡기 1 (position 속성 - relative, absolute, fixed) 오늘은 CSS에서 가장 중요한 "레이아웃"을 잡기 위해 사용되는 position 속성에 대해 포스팅한다. position : fixed; { position : fixed; } 는 상단 바 (nav bar)나 aside bar를 만들기 위해 보통 사용하는 CSS속성이다. 이름에서 유추할 수 있듯, 위치를 고정시키기 때문에 스크롤을 아래로 내려도 상단에 nav bar가 유지되는 걸 구현할 수 있다. 빠르게 코드와 결과물을 보도록 하자. Relative, Absolute { position : relative; } 는 left, right, top, bottom 과 함께 사용하여 위치를 지정할 수 있다. { position : absolute } 는 부모 중에 position이 relative, fixed,.. 2022. 7. 19. Simentic Web이란? (img태그와 background-image의 차이) HTML / CSS 기초를 다시 훑는 중 "Simentic Web, Simentic Tag란 무엇일까?" 라는 질문에 답하기 위해 포스팅합니다. 한 줄 정리 시멘틱 웹은 "컴퓨터가 이해할 수 있는 웹", "사람이 이해하기 쉬운 웹"이고 이를 가능하게 해주는 방법이 "시멘틱 태그"를 사용하는 것이다. Simentic Web Simentic Web을 직역하면 "의미론적인 웹"이란 뜻이다. 이를 한국어로 제대로 번역하면 1) 기계도 이해할수 있는 웹, 2) 개발자가 한층 더 이해하기 쉬운 웹 이라고 번역하면 될것 같다. 예를 들면 과거에는 태그 하나로 모든 HTML 문서를 작성 하다 보니 HTML 한 페이지 안에 div태그만 수십개가 존재했고, 이를 해결하기 위해 "id, class" 등의 attributes.. 2022. 7. 18. 이전 1 다음
