프론트엔드 개발자 로드맵을 통해 공부해보고자 만들었다. 인터넷은 어떻게 동작하는가? : 개발자로써 인터넷은 무엇이며 어떻게 동작하는지 확실히 이해하는 것이 중요하다. 인터넷 소개 인터넷을 배우기 전에 네트워크가 무엇인지 이해가 필요하다. > 네트워크: 서로 연

어떤 개발자를 원하는가? "개발에 관심이 많고 열정있는 개발자" 개발에 관심 많은 개발자란? 개발이 너무 재미있어 미치겠고.. 내 깃허브 꾸미는 것 마저도 재미있어서 더 꾸미고 싶고.. 기술도 이것저것 너무 다 재밌어서 다 배워서 써먹어보고 싶고.. 이런 모습이

2012년 구글 I/O 2012에서 발표한 JS의 성능에 관련된 발표가 있다

CBD(Component-Based Development) 방법론을 기반으로 하는 SPA가 대중화되면서 Angular, React, Vue.js, Svelte 등 다양한 SPA 프레임워크/라이브러리 또한 많은 사용자 층을 확보하고 있다. 오랜만에 '모던 자바스크립트

나는 '여우와 두루미' 예시를 참 좋아한다. 너무 오래되서 내용의 전체 줄거리는 기억이 안나지만 여우와 두루미가 자기만의 표현 방식으로 상대를 자신의 퍼즐에 끼워 맞추려고 했을 때, 서로 기분만 안좋아진다는 그런 내용 말이다. 이번에 회사에서 객체 지향에 대해서 설명하

JavaScript의 메인쓰레드인 이벤트 루프가 싱글 쓰레드이다.하지만 '이벤트 루프'만 독립적으로 실행되는 것이 아닌 웹 브라우저나 NodeJs 같은 멀티쓰레드 환경에서 실행되고 이를 적절하게 사용함으로써 멀티쓰레드처럼 사용이 가능하다.JavaScript 엔진은 자바

youtube "Normaltic Place" 채널 라이브 강의

문득 프레임워크 없는 프론트엔드 개발이라는 책을 읽으면서 가상 돔에 대해서 정리하고자 작성하게 되었다.리액트에 의해 가상 DOM의 개념은 선언적 렌더링 엔진의 성능을 개선시키는 방법이 되었다.출력된 UI는 메모리에 유지되고, 실제 DOM과 동기화 되며, 가능한 적은 작

youtube "Normaltic Place" 채널 라이브 강의

npm install -g eslintyarn add eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks --dev

깃 커밋 시 무분별한 커밋을 방지하기 위해 프로젝트에 삽입.프로젝트 최상단에 commitlint.config.js 생성

npm i -g npm-check-updatesncu -unpm install출처 : https://stackoverflow.com/questions/16073603/how-to-update-each-dependency-in-package-json-to-the

yarn add @dnd-kit/core yarn add @dnd-kit/sortable yarn add @dnd-kit/utilities

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"brew install caskbrew --cask visual-studio-code링크b

npx create-react-app 프로젝트이름 --template typescriptyarn add -D eslint prettieryarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parseryarn

역할 문자 검색(search) 문자 대체(replace) 문자 추출(extract) 테스트 사이트 https://regexr.com 정규식 생성 예제 문자 메소드 메소드 | 문법 | 설명 --|--|-- test | 정규식.test(문자열) | 일치 여부(

바쁘신 분들은 아래 코드 복사해서 붙여 넣으면 될 것 같다.(출처: developer.mozilla.org)글자를 쓰다보면 길이가 길어져 width의 길이보다 길어져서 2줄이 되는 현상이 생기는데 white-space: nowrap; 은 2줄이 되는 현상을 막고, 한

VSCode yarn Error

어제부터 QA 부장님께서 자신의 로컬 환경에서 돌아가지 않는다며, 자기 자리까지 찾아오라고 하셨다. 처음보는 에러인데, 내 자리에서도 그것을 구현하기 까지가 너무나 힘든 여정이었다.어제, 나한테 "먼저 퇴근해볼께요. 내일 오전까지 고쳐놓으세요." 라고 말씀해주셨다. 솔

하...어제 갑자기 메일이 왔다. 어느 한 모듈에서 선택 화면을 캡쳐해주면서, 스크롤이 안되서 아래의 내용을 확인 및 선택을 할 수 없다고 하였다.어이가 없었다. 그런데, 정말 안되었다.다른 웹 모듈은 다 되는데, 왜 여기만 안될까?div 가 문제일까?select it