토스 es-toolkit 한입 먹기 토스에서 만들어낸 es-toolkit이라는 "라이브러리"가 있다. 토스의 es-toolkit 공식 페이지에는 다음과 같이 라이브러리를 정의하고 있다.es-toolkit.현대적인 JavaScript 유틸리티 라이브러리 더 정확히는 일상적인 개발에서 사용하는 다양한 함수를 모아둔 라이브러리라고 생각하면 된다.공식 홈 페이지https://es-toolkit.slash.page/ko/ es-toolkites-toolkit 현대적인 JavaScript 유틸리티 라이브러리es-toolkit.slash.page공식 홈 페이지는 위 링크를 따라가면 된다. 오른쪽 맨 위 사이드에는 관련 깃허브와 npm, jsr, 디스코드가 있다. 참고하자.toss 공식 문서 내용 lodash와 같은 다른 라이브러리와 비교했을 때, e.. 2025. 3. 14. 메뉴 밑줄 슬라이딩 애니메이션 헤더에 주는 메뉴 밑줄 슬라이딩 애니메이션을 만드는 법을 알고 싶다면 밑의 링크를 참고하자.https://youtu.be/O54PjSD9BUg?si=_SLLCsgV66BhdfYHhttps://hackmd.io/@oW_dDxdsRoSpl0M64Tfg2g/SyujQp2L(핵심은 결국 자바스크립트 문법이다.)리액트에서는 자바스크립트 파일을 만든 이후, 함수로 묶어서 함수를 부르는 방향으로 진행해도 괜찮을 듯하다.아니면 jsx 파일 안에다가 바로 구현하는 방법도 있다. 이러면 useState를 써야 할 것. 2025. 1. 14. 모달 창 구현하는 방법 모달 팝업이란일반 팝업처럼 새로운 윈도우를 여는 것이 아닌 현재 윈도우의 레이어를 쌓아서 보여주는 형식의 팝업을 의미한다. (웹과 앱에 꽤 많이 쓰인다.) - 팝업 창 구현하는 것도 추후에 작성하겠다.자바스크립트를 기반으로 웹/앱 Dom을 조작하거나 직접 CSS style을 수정하는 방식이다.즉, css의 display 상태를 자바스크립트의 DOM요소로 제어하는 것.디테일한 부분은 다음 글들을 참고하자.https://velog.io/@seungmimi/javascript%EB%AA%A8%EB%8B%AC-%ED%8C%9D%EC%97%85-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 [javascript]모달 팝업 구현하기🧐 모달 팝업이란일반 팝업처럼 새로운 윈도우를 여는 것이 아닌 .. 2024. 12. 23. 알아두면 좋은 자바스크립트 애니메이션 라이브러리 (드림코딩을 참고함)https://www.youtube.com/watch?v=wbDpZwDRgRk 이런 라이브러리 등, 애니메이션을 주면 뭔가 있어보이는 사이트가 탄생한다...+ (리액트에서도 잘 적용하게 만들 수 있다. 리액트는 자바스크립트을 잘 빌딩하기 위한 "라이브러리"라는 것을 기억해두자. 그건 알아서 구글링하고, 사이트를 참고해보자.) - (리액트의 풀 네임은 React.js임 ㅇㅇ) 2024. 9. 3. 자바스크립트 - Intersection Observer(무한스크롤) 자바스크립트에서 스크롤 관련 이벤트 함수를 복기함.(스크롤에 따라 특정 이벤트를 발생시킴, 무한스크롤을 만들 수 있고, 이벤트가 일어나는 시간, 지연 시간도 전부 컨트롤할 수 있게 됨.)https://youtu.be/OrG1wGgGfcI?si=D5850ERYMdg-OtJF(자세한 건 영상을 참고하자.) 2024. 9. 3. 자바스크립트 복습 (심화버전) - 모듈 시스템 / 버블링&캡쳐링 모듈 시스템모듈(Module) 이란?개발하는 애플리케이션의 규모가 커지면 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 하나의 파일을 모듈(module)이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 여러 개의 함수를 포함하는 라이브러리로 구성되어 있다. 이 모듈을 이용해서 코드를 효율적으로 제어할 수 있게 된다.모듈 장점유지보수용이 - 기능들이 모듈화가 잘 되어 있는 경우, 의존성을 줄일 수 있기 때문에 기능을 개선이나 수정이 용이.네임스페이스화 - 코드의 양이 많아질수록 전역스코프에 존재하는 변수명이 겹치는 경우가 존재. 이때 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제를 해결할 수 있음.재사용성 - 같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 .. 2024. 8. 29. 자바스크립트 복습 (심화버전) - npm / webpack NPM이 무엇인가 NPM(Node Package Manager)은 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저이라고 정의할 수 있다. 이 패키지 매니저를 이용해서 자주 쓰는 기능을 모듈화 해서 사용하게 된다. 재사용성도 높아지고 관리도 쉬워지기에 정말 많은 개발자들이 사용한다.왜 npm을 사용해야 하는가?프로젝트에서 필요한 라이브러리를 쉽게 다운받을 수 있다. (npm install로 프로젝트에서 필요한 라이브러리를 한꺼번에 다운로드한다.)프로젝트에서 사용하는 많은 라이브러리의 버전과 의존성 관리가 편하다.필요한 라이브러리를 CDN 보다 편하게, npm 명령어를 통해 프로젝트 로컬 환경 및 전역 환경에 쉽게 설치하고 관리할 수 있다.빌드하는 명령어를 자동화해 프로젝트를 관리할.. 2024. 8. 24. 자바스크립트 복습 (심화버전) - bom / dom / this / defer 오랜만에 자바스크립트를 복습하였다.자바스크립트에서는 여러 문법을 지원하지만, 오늘은 다음과 같은 내용을 복습하였다.BOM / DOM / 자바스크립트 파일 효과적으로 가져오기 / ThisBOMBOM이란 브라우저 객체 모델을 뜻한다. 브라우저 객체 모델이란 브라우저를 객체처럼 여기는 것을 말한다.연산자는 " . "이다. 가장 많이 쓰는 것은 document이다. 자세한 부분은 영상을 참고하자.https://youtu.be/3c4xp8U3jjM?si=9DXZHx1Ly6YAWI-A참고로 window가 가장 최상위 객체이다. BOM은 그 밑에 존재하는 객체다. 이 부분을 헷갈려하지 말자.DOMDOM이란 문서 객체 모델을 뜻한다. 문서 객체 모델이란 "문서를 객체화"한 것을 말한다. 스크립트 언어로 브라우저를 해.. 2024. 8. 18. JavaScript 무료 풀강의 프론트엔드는 기본적으로 HTML / CSS / JavaScipt 이 기본 베이스이며 이에 더해 여러 라이브러리와 프레임워크가 결합된 것이라고 생각하면 됨. 이 때에 자바스크립트는 정말 많은 역할은 해줌. (사실상 메인) 또한 앞에 HTML / CSS는 "마크업 언어"라서 실질적인 코딩 언어라고 부르기 어렵지만, 자바스크립트는 "고급 언어"임. 다음은 자바스크립트 강의 목록임. 이 밖에도 많은 강의들이 존재한다.https://www.youtube.com/watch?v=ZOVG7_41kJE&list=PLLqUmIoAEUCRlPhypkA-k-5Dgw-NiR_wz&index=72024 버전https://www.youtube.com/playlist?list=PLlaP-jSd-nK-nRWstWs_MvCWhVHb7A.. 2024. 7. 12. 이전 1 다음
