시작하는 중

3줄 정리 1. scripts의 key에 해당하는 것을 입력하면 value에 해당하는 것을 CLI에서 실행시켜준다. 2. scripts는 시스템 환경 변수부터 참조하여 node_modules/.bin의 명령어까지 참조하여 실행시킨다. 3. concurrently 모듈을 통해서 편하게 한 터미널에서 실행시킬 수 있다. // package.json ... "scripts": { "dev": "concurrently \"yarn vite\" \"npx tailwindcss -i ./src/index.css -o ./src/output.css --watch\"", "build": "vite build", "preview": "vite preview" }, ... tailwind css를 도입하니까 css 쪽 관..

div 안의 버튼 4개에 이벤트 리스너를 달아두고 버튼을 누를때마다 class를 조정하며 글자와 테두리를 파란색으로 바꿔줘야하는 상황이었다. // in component const [cookingTime, setCookingTime] = useState(null); const cookingTimeRefArr = [ useRef(null), useRef(null), useRef(null), useRef(null), ]; const cookingTimeBtnHandler = (idx) => { cookingTimeRefArr.forEach((ref) => { ref.current.classList.remove("border-#2F80ED"); ref.current.classList.remove("text-#..

이전 글에서 JS의 비동기 처리에 대해 정리했다. https://mystacks.tistory.com/71 Javascript의 비동기 처리 JS 그 자체는 싱글 스레드 언어라고 하지만, 우리는 흔히들 아는 Promise나 axios, setTimeout등을 통해 비동기 처리를 하고 있다. 어떻게 할 수 있을까? JS의 런타임 환경 JS의 비동기 로직을 알아보기 위 mystacks.tistory.com 하지만, 나는 JS가 완전한 비동기일까 궁금해서 더 파보기로 했다. 처음 생긴 궁금증은 Task 큐에 대기 중인 함수가 있고, 콜 스택이 비어있는 상황에서 JS의 코드에서 다음 함수가 실행될 타이밍이라고 하면, 누가 우선일까? 다음의 예시를 보면, setTimeout(() => console.log("Ti..

JS는 그 자체는 싱글 스레드 언어이다. 흔히들 검색하면 나오는 그런 그림을 생각하지 않고 JS 엔진 그 자체만 본다면 JS에는 stack과 heap 메모리만 존재한다. 힙은 객체가 할당되는 영역이니까 이벤트 루프와 런타임에선 생각하지 않아도 되어 제외한다면, 스택 하나만 남는다. 스택은 후입선출의 구조를 지녔으며 스택에 쌓이는 것은 호출되는 함수이다. 함수가 실행될 수 영역은 스택 하나이니까 싱글스레드 언어라고 하는 것이다. function funcA() { console.log("2 step"); funcB(); console.log("4 step"); }; function funcB() { console.log("3 step"); }; console.log("1 step"); funcA(); 이 코..