요약 windows powershell 로 git 터미널을 사용하다 보면 여러 상황에서 에러를 맞이하게 됩니다. 저같은 경우는 .gitignore을 설정하기 위해 터미널 명령어 echo를 통해 작성했으나 파워쉘에서 텍스트 인코딩이 utf-8이 아닌 utf-16lf로 기본 설정이 되어있어 5시간동안 고민을 하며 무엇이 문제인지 구글링을 해야만 했습니다. 결과적으로 빠른 해결책은 .gitignore 파일은 utf-8로 작성이 되어져야 인식을 하기 때문에 파워쉘에서의 설정을 변경해주면 됩니다. (posh-default: utf-16lf) 그러기 위해 파워쉘에서 기본 설정을 변경해줘야 합니다. 문제 상황 저는 windows 운영체제를 사용중이고, 터미널은 파워쉘을 사용하고 있습니다. 파일을 아예 새로 만든 상황..
이벤트 캡처링과 버블링 이벤트는 캡처링단계와 버블링 단계를 밟으며 감지가 됩니다. JSFiddle 내부 Result 탭에서 box나 button을 누르면 alert기능이 캡처링과 버블링 과정을 거치며 발생합니다. 발생할 때마다 모든 요소에 alert기능을 집어넣었기 때문에 Button을 자칫 클릭하실 경우 alert를 10번이나 누르셔야 하니 주의하시기 바랍니다 ㅋㅋ 가장 내부의 Button을 클릭하면 발생하는 일은 body -> html -> form -> div -> button 순으로 캡처링이 발생하고, button -> div -> form -> html -> body 캡처링과 역순으로 버블링이 발생합니다. el.addEventListener('click', () => alert(`capturin..
스크롤 상태바 적용 https://kevinj0695.github.io/portfolio/ M0J4의 포트폴리오 웹사이트 안녕하세요 프론트엔드 개발자 M0J4입니다. 이 사이트는 개인 포트폴리오 웹사이트 입니다. kevinj0695.github.io Tistory 고인물들은 보통 hELLO 스킨을 많이 사용하는데, hELLO 스킨의 특징 중 하나로는 스크롤 상태바가 상단에 예쁘게 보여진다는 점입니다. 이 기능이 되게 신기해서 저도 직접 만들어 보고 싶었는데 구글링과 드림코딩으로 공부해서 결국 만들어 볼 수 있게 되었습니다. 이번 글에서는 저의 포트폴리오에서 상단 네비게이션바에 적용한 코드 중 스크롤바 상태창에 관련된 부분을 작성해보도록 하겠습니다. 소스 공유 (성능 개선 x) See the Pen Unt..
https://kevinj0695.github.io/portfolio/ M0J4의 포트폴리오 웹사이트 안녕하세요 프론트엔드 개발자 M0J4입니다. 이 사이트는 개인 포트폴리오 웹사이트 입니다. kevinj0695.github.io 저의 포트폴리오 웹사이트를 구경하세요! 다만 완벽하게 처리한 것은 아니고, 공개용으로 만든 포트폴리오이기 때문에 아직 상세 내용은 비워두었습니다. 포트폴리오 관련 github 주소입니다. https://github.com/kevinj0695/portfolio GitHub - kevinj0695/portfolio: 개인 반응형 웹사이트 포트폴리오 개인 반응형 웹사이트 포트폴리오. Contribute to kevinj0695/portfolio development by creati..
BEM (Block Element Modifier) BEM (Block Element Modifier) 구조에 대한 소개 html 문서를 작성해야 하는데 클래스명을 작명할 때, 클래스 이름이 겹치면 곤란하고 또 안 겹치게 하자니 정리가 안되는 상황을 겪어보신 적이 있으신가요? 이럴 땐 BEM 방법론을 적당히 사용하면 유용합니다. BEM방법론 이라는 것은 위와 같은 상황의 어려움을 해결하고자 만들어진 css 방법론입니다. 물론 css 전처리기라는 것을 이용하면서 BEM방법론을 채택하면 더 효율적으로 css 파일을 관리할 수 있습니다. 그렇다면 BEM방법론의 구조는 어떻게 되어 있을까요? Block__Element--Modifier 형태로 되어져 있는 BEM방법론은 Block을 제일 앞에 두고 Element..
🔶 vs @import 🔸 edge 브라우저에서 css @import가 안되나요? - 이젠 왠만해선 잘 됩니다 블로그 글들을 찾아보면 edge에서 @import를 하면 edge 브라우저는 @import를 인식하지 못하여 css가 깨진다고 설명이된 글들이 몇 개 있습니다. 이러한 오해는 오래된 edge 브라우저 버전에서 @import를 지원하지 않았기 때문에 발생한 문제입니다. mdn 사이트를 근거로 말씀을 드리겠습니다. MDN에서 정리한 브라우저 호환성 표에 따르면 MS Edge 브라우저에서는 12버전, 2015에 @import 기능 지원이 안정화 되었다는 것을 알 수 있습니다. 오래된 브라우저를 사용하는 유저들에게 까지 지원할 것이 아니라면 CSS에서 별도로 필요한 경우 @import기능을 사용하시면 ..
The Open Graph Protocol ❓ 오픈그래프는 무엇인가요? 우리는 이미 일상 생활에서 '공유' 버튼을 통해 오픈그래프를 자주 접하고 있습니다. 이런 공유 버튼들을 통해서 여러분들은 무엇을 전송하게 되나요? 보통 해당 경로로 접속할 수 있는 url, 링크를 전송하게 됩니다. 공유를 하게 될 서비스들 sns, 카카오톡 등에 링크를 전송하게 되면 해당 링크에 대한 부가적인 정보가 동봉되어 추가가 되는데요, 그것이 바로 오픈그래프의 특징입니다. https://www.inflearn.com/ 인프런 - 미래의 동료들과 함께 성장하는 곳 | IT 정보 플랫폼 프로그래밍, 인공지능, 데이터, 마케팅, 디자인, 엑셀 실무 등 입문부터 실전까지 업계 최고 선배들에게 배울 수 있는 곳. 우리는 성장 기회의 평..
Favicon의 특성을 알아보기 ✔️ Favicon은 무엇인가요? Favicon은 웹 페이지 상단의 탭에 보여지는 조그마한 아이콘입니다. 저의 구글 북마크 지정한 사이트들인데요 흔히 북마크를 지정하거나 즐겨찾기를 활용하면 같이 표시되는 작은 아이콘인데, 특정 웹 사이트를 방문할 때 브라우저가 웹 사이트의 루트 디렉토리에서 favicon.ico 파일을 찾아서 이 아이콘을 표시합니다. ✔️ Favicon을 HTML에서 사용하는 법 브라우저가 이것을 자동으로 찾기 때문에 우리는 루트 디렉토리에서 찾을 수 있도록 favicon.ico 파일만 잘 등록해주고, 따로 html에서 등록할 필요가 없습니다. html에서 따로 등록할 필요는 없지만, 자신이 원하는 이미지 파일로 대체해서 올릴 수 있는 방식이 있습니다. l..
이미 공부한 내용을 빠르게 복기하기 위한 노트로, 이 글을 작성하였다. 먼저 이 글은 Arrow function은 다루지 않는데, Arrow Function은 this 바인딩과 함께 깊게 다루고 싶은 내용이기 때문에 일단 제꼈다. 글의 목차 더보기 1. 함수 파라미터 파라미터 기본값 rest 파라미터 2. 콜백 함수 일급 객체, 일급 함수, 고차 함수 3. 객체에서 함수 정의 객체에서 key와 함수 매개변수가 일치하는 경우 4. 생성자 함수 생성자 함수 생성 방법 5. 즉시 실행 함수 즉시 실행 함수의 실행 방법 1. 함수 파라미터 파라미터 기본값 function add(a = 1, b = 1) { return a + b; } add(); // 2 각 매개변수에 값을 설정할 수 있다. 기본값을 설정하지 ..
