전체 글 (47) 썸네일형 리스트형 시맨틱 태그(Semantic Tag) 시맨틱 태그란? 시맨틱 태그란 의미가 있는 태그이다. header, main, footer, section, article과 같은 태그 자체에 의미가 담긴 태그를 말한다. 시맨틱 태그를 왜 사용해야 할까? - 검색엔진 최적화(SEO) 검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석한다. 그럴 때, 의미있는 태그를 사용하면 좀 더 정확한 구조로 분석할 수 있도록 도울 수 있다. - 쉬운 소스코드 구조화 브라우저가 웹 문서의 소스 코드를 보고 어느 부분이 헤더인지, 어느 부분이 본문인지를 쉽게 알아낼 수 있다. 웹 문서를 분석하는 서비스 (ex. 스크린 리더기) 같은 것들이 있을 때 분석하기 용이해진다. - 코드 가독성 향상 여러 사람과 함께.. 모던 자바스크립트 Deep Dive 스터디 부족한 CS지식을 채우고자 책 모던 자바스크립트 Deep Dive를 읽고 있다. 찾아보니 인프런에 관련 무료 강의가 있어 함께 공부한다. 들어가며 자바스크립트는 웬만해서 에러 없이 실행되며, 작은 실수는 알아서 대응해 주는 등, 자바스크립트 엔진 내부에서 암묵적으로 처리해주기도 하는 친절한 언어다. 이러한 자바스크립트의 태생적 특징은 편리한 경우도 있지만, 내부 동작을 이해하기 어렵게 만든다. 프로그래머의 역할은 요구사항을 기반으로 문제를 해결하기 위한 방안을 고안하고 코드로 구현하는 것이다. 구현된 코드는 의도한 대로 정확히 동작해서 문제를 해결해야 한다. 이때 자신이 구현한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측 가능해야 하며, 이를 명확히 설명할 수 있어야 한다. 그러자면 프로그래밍 언어.. 디자인 패턴 - 1 디자인 패턴에 대해 자세히 설명해주는 사이트를 발견해 정리해보고자 한다. https://refactoring.guru/ko/design-patterns/what-is-pattern 디자인 패턴이란? 디자인 패턴이란? 디자인 패턴은 소프트웨어 디자인 과정에서 자주 발생하는 문제들에 대한 전형적인 해결책입니다. 이는 코드에서 반복되는 디자인 문제들을 해결하기 위해 맞춤화할 수 있는 refactoring.guru 디자인 패턴이란? 디자인 패턴은 소프트웨어 디자인 과정에서 자주 발생하는 문제들에 대한 전형적인 해결책이다. 이는 코드에서 반복되는 디자인 문제들을 해결하기 위해 맞춤화할 수 있는 미리 만들어진 청사진과 비슷하다. 표준화된 라이브러리들이나 함수들을 코드에 복사해 사용하는 것처럼 패턴들을 붙여넣기식으로.. 이벤트 버블링(Event Bubbling)과 캡처링(Event Capture) 이벤트 등록 웹 어플리케이션에서 사용자의 입력을 받기 위해 필요한 기능이다. 대표적으로 addEventListener()는 웹 개발자들이 화면에 동적인 기능을 추가하기 위해 자연스럽게 접하게 디는 기본적인 기능이다. // 이벤트 등록 add one item 이벤트 버블링(Event Bubbling) 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. // 이벤트 버블링 위의 예제 코드를 실행하고 를 클릭하여 이벤트를 발생시키면 아래와 같은 결과가 콘솔창에 찍힌다. 한 개의 div 태그만 클릭했는데 왜 3개의 이벤트가 발생할까? 그 이유는 브라우저가 이벤트를 감지하는 방식 때문이다. 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를.. .gitignore가 적용되지 않을 때! .gitignore 파일은 Git의 root 디렉토리에 저장되어, Git Repository나 Staging Area에 추가되지 말아야하는 폴더나 파일을 정의하는 파일이다. .gitignore에 정의된 파일이나 폴더는 Staging 되지 않기 때문에 tracking 되지도 않는다. 그래서 git status를 이용했을 때 보이지 않는다. 가끔 .gitignore를 설정해도 작동하지 않을 때가 있다. ignore처리된 파일이 자꾸 changes에 나온다. 이때는 git의 캐시를 삭제하고 커밋, 푸시하면 정리가 된다. $ git rm -r --cached . $ git add . $ git commit -m "fixed untracked files" 참조 https://git-scm.com/docs/giti.. 새로운 MacOS Ventura와 git error.... MacOS가 업데이트 되었습니다. 그런줄도 모르고 살다가 방금 설치했는데요. 그러고 나자 missing xcrn 에러를 만났습니다. VSCode에서 깃이 없다고 다시 설치하래요.... 후아... git을 다시 설치를 해도, sudo를 아무리 입력해도 error메세지만 남긴 채 내 품에서 git이 떠나버렸다니... 이러한 메세지만 남기고 아아 님은 갔습니다. xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun missing xcrun 에러, 찾아보니 MacOS가 새로운 버전으로 업데이트 될 .. promise.all() 입사 동기가 비동기 로직에 promise all을 사용하여 한꺼번에 받아야 할 api 요청들을 병렬로 처리하도록 로직을 수정하였다. 오... 속도 개선에 효과가 있었다. 나도 다음에 써먹어봐야겠다. https://merrily-code.tistory.com/214 Promise.all 로 비동기 로직 개선하기 아주 오랜 옛날부터, 전설로 내려오는 코드가 있습니다. (3학년 1학기에 수행했던 산학프로젝트 코드입니다.) 이 코드는 간단한 그룹 매칭 서비스에서 그룹을 생성하는 역할인데요, 여러 비동기 merrily-code.tistory.com Vue.js 라이프사이클 feat. ssr 회사에서 Nuxt.js와 Vue.js를 쓴다고 한다. 빠르게 공부해서 일하자! https://doda.dev/posts/vuejs-lifecycle Vue.js의 라이프사이클 이해 Vue.js의 라이프사이클을 알아보자 doda.dev https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4 Vue.js 2.0 라이프사이클 이해하기 최근 사내에서 Vue.js로 프로젝트를 진행하고 있다. 차근차근 꼼꼼히 프레임웤을 이해하며 시작하지 않으니 여러 우여곡절이 많았다. 정리 차원에서 하나씩 포스팅하면 좋을것 같다는 생각을 .. 이전 1 2 3 4 ··· 6 다음
