Thing about programming (30) 썸네일형 리스트형 [WEB / NOTE] HTML / CSS / JavaScript HTML HTML Tags Page Structure Semantic Tags SEO Accessibility CSS Styling Layouts Responsive Design Animation JavaScript ES6+ Syntax Basic let, const if, for, switch, while function object Advanced Prototype Hoisting Scope Closure Browser APIs DOM Manipulation Events Fetch API(Async) [ Git ] 브랜치 2개 병합 삽질 기록. 으쌰으쌰 1. git rebase --onto origin/main origin/origin 했다가 까임. 오류메시지는 기억 안 남. origin 뒤에 뭐가 더 있다구 그거 날아갈 수 있으니까 커밋해놓으라구 안내 2. 그래서 git status 명령어로 working directory에 저장 안 된거 커밋해둠. (origin/origin이랑 같이 있던 origin이 새 커밋 만들어지며 상위로 올라감.) 3. 그 다음 git checkout main으로 이동함. (HEAD -> origin 에서 HEAD-> Main이 됨.) 4. git push origin 했다가 까임. ( 이 목적은 뭐였냐면 )( 왜 까였냐면 5. git push origin:HEAD로 함 (명령어 목적은 현재 HEAD가 가리키는게 main이어.. [CSS] SASS 그리고 SCSS 1. 정의 CSS (Cascading Style Sheet) SASS (Syntatically Awesome Style Sheets) SCSS (Sassy Cascated Style Sheets) : 처음에 축약어 뜻 보고 잘못된 정보인 줄 알았습니다. ㅋㅋㅋ Awesome, Sassy 등이 이름으로 들어가는게 아, 공식이름이 아닌가? 했는데 맞았네요. 새 스크립트에 대한 애정과 유머가 느껴져서 좋았습니다. 2. 비교 SASS와 SCSS가 CSS를 보완해서 변수나 함수 사용, 중첩 관계, 믹스인 설정 등을 한다는 것 정도만 알고 있었습니다. CSS보다 많은 기능을 하니 배우고자 하는데, 그런데 SASS와 SCSS의 차이에 대해서는 모르고 있었습니다. 어떤 것을 익히는 게 좋을 지 결정하기 위해, 차이점을.. Fetch: Abort Fetch는 Promise를 리턴합니다. 그런데 Javascirpt에는 Promise에 사실 "Aborting"개념이 따로 없습니다. 그러면 우리는 진행 중인 Fetch를 어떻게 중단/취소 할 수 있을까요? 더는 fetch가 필요없어졌을때처럼요. 이런 목적을 위해 특별한 빌트인 객체가 있습니다. 바로 AbortController입니다. 해당 객체는 fetch뿐만 아니라 비동기적인 모든 작업에 사용할 수도 있습니다. 사용법은 매우 직관적입니다. let controller = new AbortController(); : abort() 라는 메서드 하나만 가지고 있습니다. : signal이라는 프로퍼티 하나만 가지고 있습니다. 이벤트리스너를 등록할 수 있는 것입니다. abort( ) 가 만약 호출되면, : c.. Fetch: Download Progress fetch메서드는 다운로드 진행사항을 추적할 수 있습니다. upload진행사항은 추적 불가능한데, 이건 추후에 배울XMLHttopRequest로 보완 가능합니다. 다운로드 진행사항 추적을 위해 response.body의 프로퍼티를 사용할 수 있습니다. ReadableStream입니다. body를 받을 때, 그것을 청크별로 나눠 받을 수 있는 특별한 객체입니다. Readable-stream자체에 대한 설명은 Streams API에서 읽으면 됩니다. response.text(), response.json()과 다르게 response.body에서는 읽는 과정에서 모든 통제권을 가질 수 있어서 ,어느때건 그것이 얼마나 사용되었는지 확인 가능합니다. //예시 const reader = reponse.body.ge.. [HTML] HTML data-* 속성 / dataset Javascipt https://ko.javascript.info/event-delegation 이벤트 위임 ko.javascript.info 위의 링크에서 이벤트 위임을 공부하며 그다지 친숙하지 않은 속성을 마주하게 되었습니다. 저장하기 // Javascript let action = event.target.dataset.action; 이런 식의 예제였습니다. 부가 설명으로 .action-save 와 같은 클래스를 이용하는 것보다 data-action속성을 사용하는게 의미론적으로 더 좋고 CSS속성도 사용할 수 있는 장점이 있다고 덧붙이셨습니다. 아! 좋아보인다 그러면. 이라는 생각에 더 검색하며 알아보았습니다. 우선 MDN 사이트에 들어가 살펴보았습니다. https://developer.mozilla.org/en-US.. [Git] LF와 CRLF 해당 단어를 접한 건 git에서 merge를 하며 만난 warning message 때문이었습니다. warning: LF will be replaced by CRLF in merge. '앗.. merge할 때 LF가 CRLF로 대체되는구나.. 근데 그것들이 뭔데?' * MDN에서의 설명입니다. * CR = Carriage Return (\r, 0x0D in hexadecimal, 13 in decimal) — moves the cursor to the beginning of the line without advancing to the next line. LF = Line Feed (\n, 0x0A in hexadecimal, 10 in decimal) — moves the cursor down to th.. [CSS] textContent vs innerText vs innerHTML 1. textContent https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent Node.textContent - Web APIs | MDN The textContent property of the Node interface represents the text content of the node and its descendants. developer.mozilla.org - textContent 는 node와 node의 자식node들의 textContent를 나타냅니다. - textContent의 값은 string / null 입니다. - textContent의 값이 null인 경우는 그 node가 doctype이나 document일 때 입.. [Git] 로컬 폴더 - 깃허브 레포 연결 몇 번을 해도 프로젝트 시작할 때마다 번번히 헷갈리는 것 같습니다. 정리하고자 작성합니다. 사실 command에서 > git 을 작성하고 나오는 명령어들이 거의 핵심이라서 그것들 위주로 익혀만 둬도 기본 기능들을 유용하게 사용할 수 있습니다. start a working area (see also: git help tutorial) clone Clone a repository into a new directory init Create an empty Git repository or reinitialize an existing one 이게 그런 식으로 들어갔을 때 안내하는 명령어들입니다. 위의 start a working area 관련된 명령어들 사용 방식입니다. 1. github 페이지에 들어가서 Rep.. call / apply, 데코레이팅, 포워딩 https://ko.javascript.info/call-apply-decorators call/apply와 데코레이터, 포워딩 ko.javascript.info 해당 개념을 공부하면서 과제를 풀이했는데, 풀 수 없더군요. 이해가 미숙한 느낌이 들어서 확실이 배워서 익히고 정리하고자 이 글을 씁니다. 글의 내용 정리 1. 함수의 변경 없이 wrapper함수로 해당 함수를 감싸 기능 추가하기. 기존 함수를 func이라고 쳤을 때, func을 받아와 새 함수(wrapper)를 리턴합니다. 이 함수는 목적에 따라 기존 func을 그대로 수행하거나 다른 기능을 추가해 수행합니다. 2. wrapper함수로 사용하기 위해 가져온 함수가 어떤 객체의 메서드라면 그냥 받아와서 수행하면 안 됩니다. wrapper함수는 .. 이전 1 2 3 다음
