공삼
article thumbnail
프리티어, ESLint
Front-End 2023. 9. 5. 19:54

프리티어 (Prettier) 프리티어는 코드 포맷팅 도구로, 코드 스타일, 들여쓰기, 줄바꿈 및 기타 서식을 자동으로 표준화해주는 역할을 한다 코드 포맷팅의 주요 목적은 코드의 일관성을 유지하고, 가독성을 향상시키며, 협업을 더 효율적으로 만들어준다. 프리티어는 주로 코드베이스에 적용되며, 코드를 저장하거나 커밋할 때 자동으로 코드를 정리한다. 프리티어 설정 예시 // .prettierrc 파일 { "singleQuote": true, // 작은따옴표(') 사용 "semi": true, // 세미콜론(;) 사용 "trailingComma": "all", // 후행 콤마 사용 (예: { a: 1, b: 2, }) "tabWidth": 2, // 탭 너비 "printWidth": 80 // 줄 바꿈 문자 수..

article thumbnail
웹 비동기 통신 라이브러리 종류 (AJAX, FETCH, Axios)
CS/Web 2023. 5. 2. 22:08

Application을 만들때 가장 중요한 통신에는 동기와 비동기가 있다. 그의 차이점은 여기서 확인하자. https://strap.tistory.com/75 동기, 비동기란? 동기(Synchronous) 동기방식은 어떠한 일을 처리하는 동안 다음 작업이 수행하지 못하고 첫번째 작업이 끝난 후 다음동작이 가능한 것을 말한다. 순서대로 하나씩 작업을 처리할 수 있는 방식을 말 strap.tistory.com 웹 비동기 통신 종류중 JS에서 사용되는 HTTP 통신을 알아보자. Ajax (Asynchronous JavaScript And XML) Ajax는 JavaScript를 사용하여 서버로 데이터를 보내고, 서버에서는 XML, JSON 등의 데이터 형식으로 응답한다. 이 데이터를 사용하여 웹 페이지의 일부..

article thumbnail
라이브러리 설치된 목록 확인하기
Front-End 2023. 3. 21. 00:01

💬 들어가며 VScode 내에서 NPM을 이용해 라이브러리들을 설치하며 프로젝트 진행중, 잘못 설치한 비슷한 라이브러리, 이제 이용하지 않아 삭제해야하는 라이브러리들을 고민하다가 찾아보게 되었다. NPM(Node Package Manager) 프로젝트들을 진행하며 대부분 패키지 매니저를 이용해 라이브러리 설치를 해보았을텐데 대표적으로 NPM, yarn 등이 있다. 난 지금 NPM을 사용하고 있기 때문에 NPM을 간단히 설명해보자면 Node.js 환경에서 패키지를 관리하기 위한 툴로 Node.js는 JavaScript를 이용하여 서버 사이드 애플리케이션을 개발할 수 있는 런타임 환경이며, npm은 이러한 Node.js 애플리케이션에서 사용되는 모듈을 관리하는 도구이다. 쉽게 말해 모듈을 검색하고 설치한다,..

article thumbnail
(JavaScript)NPM과 NPX에 대해 쉽고 얕게 이해하기
Front-End/JavaScript 2022. 12. 27. 22:56

NPM (Node Package Manger) 기본적으로 자바 스크립트를 배우기위해서는 다들 Node.js를 설치했을 것이다. 그 때 보는 Node로 이를 이용하여 다양한 자바스크립트 애플리케이션을 실행할 수 있고, 서버에 주로 사용한다. 자바스크립트는 웹상에서 사용하거나 node.js를 설치하여 로컬환경에서 사용할 수 있다. 자바스크립트로 작성된 오픈소스나 라이브러리 등을 가져와서 사용하려면 npm을 사용한다. 재밌는 범쌤의 이야기를 인용해보자. 자바스크립트로 작성된 오픈소스, 라이브러리가 작성된 도서관이 있다. 이곳에서 책을 빌리기전 먼저 해야하는 것은 npm init npm init -y git init 처럼 제일 처음 기본값을 생성한다고 생각하면 된다. 이를 수행하면 package.json 파일이..

article thumbnail
(swiper)이미지 슬라이드 만들기
Front-End/JavaScript 2022. 12. 18. 10:25

Swiper Demos 위와 같이 HTML/CSS 이미지 슬라이드를 만들어보자! 먼저 사이트에 접속한다. https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 디자인 예시를 보면서 원하는걸 선택해 준다. 빨간색으로 밑줄친 Core에 들어가서 먼저 붙여넣을 것들을 붙여넣어준다 Core 에 들어가면 html 파일이 작성된걸 볼 수 있는데 10번째 줄에 있는 link를 Head 영역안에 붙여넣어준다 영역안에 붙여넣고 제일 아래에 보이는 두가지