메로그

console.log 스타일 적용하기 console.log 를 입력하여 콘솔에 나오는 로그에 스타일을 입힐 수 있습니다. 예를 들어, 티스토리 같은 사이트에 들어가면 아래와 같이 로그에 크게 TISTORY 라고 나오는 것을 볼 수 있다. 우리도 한 번 직접 만들어보자! 일반적으로 console.log 를 입력하면 우리가 아는 일반적인 로그가 찍히게 된다. 여기서 스타일을 입히기 위해서는 %c 를 사용하여 CSS 에서 사용한 스타일을 전달해줍니다. // 일반 console.log("티스토리"); // 스타일 적용 console.log("%c티스토리", "color:#ff7f00; font-size:84px;font-weight:bold;"); // 여러개 스타일 적용 console.log("%c티스토리 %..

mysql 설치 mac 에서 HomeBrew 를 이용하여 mysql 을 설치해보자. brew install mysql설치 후, brew list 를 입력하여 mysql 있는지 확인합니다. mysql 셋팅 및 실행 mysql 셋팅을 위해 서버를 실행시켜줍니다. mysql.server startSuccess! 가 나오면 성공적으로 실행된 것. mysql 설정을 위해 아래 명령어를 입력해줍니다. mysql_secure_installation아래와 같은 순서로 설정작업이 진행됩니다. 1. 비밀번호 복잡성 유무 - Y: 복잡하게, N: 단순하게 2. 비밀번호 설정 - 원하는 비밀번호를 설정해줍니다. 3. 사용자 설정 - Y: -u 사용, N: -u 사용 안함 4. 원격 접속 설정 - Y: 원격 접속 불가능, N:..

HomeBrew mac OS 전용 패키지 매니저 입니다. mac 에 필요한 툴 또는 무언가를 설치할 때 간단하게 설치할 수 있도록 도와줍니다. 아래 url 로 접속하여 가장 처음있는 설치하기 커맨드를 복사하여 터미널에 붙여넣기 해줍니다. https://brew.sh/index_ko 붙여넣기 후, 패스워드를 입력하라고 나온다면 맥북의 비밀번호를 입력해주시고 return 을 해주시면 됩니다. 오류 발생 M1 칩이 있는 맥북에서 다운로드시 다음과 같은 경고문이 나오는 것을 볼 수 있습니다. (/opt/homebrew/bin is not in your PATH) 그런 경우에는 커맨드에서 오류에 대한 정보를 공유해 줄 것입니다. Next Steps: => 로 해서 아래와 같이 나오는 것을 복사해서 실행시켜주면 됩..

git stash git 을 이용하여 작업을 하는 와중에 급하게 다른 요청이 들어오거나, 간단한 분석 후 프로토 타입을 만들 때 굳이 커밋까지 필요하지 않다면, stash 를 사용하여 임시 보관소를 만들어 저장할 수 있다. 물론 브랜치를 새로 하나 파서 임시 커밋을 하는 방법도 있지만, 나중에 정리할 때 Rebase, Merge 를 해야 함으로 그것 또한 귀찮은 일이다. 우리는 귀찮지 않게 하는 방법을 사용하길 권장하기 때문에 stash 를 적극 써보자. 개인적으로 정말 브랜치 별로 관리해야할 정도의 다른 기능, 버전이 아니면 개인적으로 하나의 브랜치에서 작업할 때 stash 를 자주 쓰는 편이다. 명령어 git stash // git stash 임시 저장 git stash list // 저장한 리스트 ..

성능 탭 화면단의 개발을 하다보면, 페이지의 동작이 어떠한 순서를 가지고 있는지, 성능이 얼마나 나오는지 확인하고 싶은 경우가 생긴다. 그럴 때는 개발자 도구의 성능 탭을 사용을 하면 되는데, 성능 탭은 자동으로 페이지를 분석하는 것이 아닌, 기록 버튼을 눌러 해당 페이지의 동작을 녹화 한 뒤, 녹화된 내용을 토대로 분석한 기록들이 나오게 됩니다. F12 를 눌러 개발자 도구를 열고 성능 탭을 누르면, 아래와 같은 화면을 볼 수 있을 것 입니다. 왼쪽 위의 녹화 표시로 되어있는 것을 누르면 페이지의 녹화가 시작되고 거기서 일어난 동작들을 분석(플로우, 렌더링 속도)합니다. 우리가 자주 쓰는 네이버 페이지에서 한 번 해보자. 녹화를 끝내면 아래와 같이 네트워크, 프레임, 기본 등등 해서 분석된 내용이 나오..

classList, className classList, className 을 이용하여 요소에 적용된 클래스를 조회할 수 있습니다. classList 는 요소의 적용된 클래스를 리스트 형식으로 반환해주는 속성입니다. className 는 classList 를 공백으로 구분시킨 문자열입니다. 추가, 삭제 classList 의 add, remove 함수를 이용하여 클래스를 동적으로 추가하고 제거할 수 있습니다. classList.add("className"): 지정한 클래스를 추가해줍니다. classList.remove("className"): 지정한 클래스를 제거합니다. 간단한 예제를 아래와 같이 만들 수 있습니다. classList.contains 를 이용하여 클래스가 있는 경우에는 제거하고 없는 경우에..