아이디벨 블로그

프론트엔드 개발자로서 새로운 프로젝트를 시작하거나 프로토타입을 빠르게 개발해야 할 때, 백엔드 서버 없이 데이터 API를 간단하게 모의하고 테스트가 필요할 때가 있다. 이럴 때 효과적으로 JSON Server를 이용하여 도움을 받을 수 있다. JSON Server는 가상 RESTful API를 생성하고 관리하는 데 사용되는 강력한 도구로, 데이터베이스 없이도 모의 데이터를 제공하고 CRUD (Create, Read, Update, Delete) 작업을 수행할 수 있다. JSON Server를 먼저 알기전에 RESTful API에 관해서 알아 보고 가자!! RESTful API는 “Representational State Transfer”의 약자로 자원의 이름으로 구분해해당 자원의 상태를 주고받는 것을 말..

개발 2023. 9. 5. 19:39

두개의 디바이스가 케이블 등을 통해서 데이터를 서로 주고 받는 현상은 잘 생각해보면 신기하기만 하다. 케이블과 디바이스에서는 어떤 전기적인 상황이 발생하는 것일까? 이 현상을 자세한 설명까지는 아니어도 러프하게 그려볼 수는 있을 것이다. 먼저 두개의 디바이스가 케이블을 통해서 서로 전기가 통하는 상태여야 한다. 케이블 선은 전기가 통하는 상태(1)이거나 통하지 않는 상태(0)이다 만약 전기신호를 보내는 사람이 받는 사람에게 전기가 통하다가 통하지 않게 한다면 전기신호를 받는 쪽에서는 신호가 1-0 이라고 생각할 것이다. 그런데 사실은 보내는 사람은 1-1-0-0을 찍은 것이라면 어떨까? 받는 사람은 전기신호를 잘못 해석한 것이다. 이런 실수를 없애려면 서로 규칙을 정해야 한다. 가령 보내는 사람은 진짜신..

개발 2023. 9. 3. 19:52

Vue3: 2020년 09월 18일 릴리즈된 vue코어 라이브러리 1. Vue3 의 특징 ● 강화된 타입스크립트 지원 (세부적 type 선언 가능) ● 코드 재사용 가능한 setup api 사용 ● 기존 optional api 방식과 composition api 방식 모두 사용 가능 * composition api: 데이터,로직별로 분리 가능, reactive보다는 ref지향 2. Vue2 와의 차이점 ◎ 2.0버전: ●컴포넌트의 옵션을 data, computed, methods, watch 등으로 구분하여 사용 ● creaetd, Mounted , updated 등의 메소드 사용 ● 템플릿 (template) 안에 루트 엘리먼트 하나만 종속 가능 ◎ 3.0버전: ● 컴포넌트 옵션과 beforeCreat..

개발 2023. 8. 25. 17:31

소개: 네이버 로그인 API는 사용자가 네이버 아이디로 간편하게 로그인하고 서드파티 애플리케이션에 접근할 수 있도록 도와주는 강력한 도구입니다. 이 기술 블로그에서는 네이버 로그인 API의 기본 개념과 사용 방법을 설명하고, 간단한 예제 코드를 통해 실제 구현 방법을 안내하겠습니다. 네이버 로그인 API란? 네이버 로그인 API는 네이버 계정을 활용하여 다른 웹사이트나 앱에 손쉽게 로그인하고 인증할 수 있는 서비스입니다. 이를 통해 사용자는 새로운 계정을 생성하거나 번거로운 비밀번호를 관리할 필요 없이 간단하게 로그인할 수 있습니다. 네이버 로그인 API 사용 단계: 아래의 사이트에서 네이버 로그인을 진행해 줍니다. https://developers.naver.com/apps/#/register?api=..

개발 2023. 8. 14. 14:20

1. ESLint란 ESLint는 코드의 일관성을 높이고 버그를 방지하기 위해 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 도구입니다. 쉽게 말해 코드 분석 도구! ESLint를 사용할 경우 코드 스타일 문제, 버그, 취약점 등을 찾고 수정하는데에 도움을 주어 개발자들이 일관된 코드 스타일을 유지할 수 있고 더 나은 코드 품질을 유지하는데 도움이 됩니다. 2. Prettier란 Prettier란 코드 포맷터로 여러 프로그래밍 언어의 코드 스타일을 자동으로 정리해주는 오픈 소스 도구입니다. Prettier는 코드 스타일을 일관되고 읽기 쉽게 만들어 주며 주로 줄 바꿈, 공백, 들여 쓰기 등 코드 포맷팅과 관련된 것들을 자동으로 적용합니다. eslint는 '코드 구현 방식..

개발 2023. 8. 4. 16:21

최근에 리눅스 마스터 공부를 하면서 부쩍 리눅스에 대한 흥미가 생겼다. 책 보면서 하는 공부보다 직접 경험을 해야 머리에 들어오는 스타일이라 어떻게 해야 재미있게 리눅스를 익힐 수 있을까 고민했다. 긴 고민 끝에 라즈베리파이4B라는 새로운 장난감을 장만했다. 키트로 구매하면 라즈베리파이를 사용하는데 필요한 모든 것이 온다. 그중에서도 제일 중요한 친구는 이것! 여기에 방열판 붙이고 케이스에 끼우고 밑에 sd카드를 끼우면 준비는 끝! 처음에 세팅하기 전에는 블루투스와 와이파이 사용이 불가하기 때문에 모니터와 키보드, 마우스를 유선으로 연결해준다. 라즈베리파이에는 리눅스 환경만 설치할 수 있다고 한다. 나는 데비안 리눅스 계열의 라즈비안OS를 설치했다. 설치하는 방법은 간단하다. 원래 쓰던 내 윈도우 컴퓨터..

개발 2023. 7. 28. 12:59

새로 도입된 CSS기능들 중 작업할 때 많이 사용이 될 것 같은 기능들을 정리해 보았다. 의사 클래스(pseudo-class) 이론적으로 CSS에서 의사 클래스는 선택하고자 하는 HTML 요소, 아이디, 클래스 선택자에게 특별한 상태를 명시할 때 사용한다. 실무에서 사용하면서 의사클래스는 css작성 할 때 사용법만 잘 터득하고 있으면 코드의 길이를 간결하게 만들어 주는 거 같다. 대표적인 의사 클래스 동적 의사클래스 :link, :visited, :hover, :active, :focus 상태 의사 클래스 :checked, :enabled, :disabled 구조 의사 클래스 :first-child, :nth-child, :first-of-type, :nth-of-type 기타 의사 클래스 :not, :..

개발 2023. 7. 19. 18:59

소개: 데이터베이스(Database)는 현대 소프트웨어 시스템에서 핵심적인 역할을 수행하는 기술입니다. 데이터베이스는 데이터를 구조화하고 저장하며, 효율적인 데이터 액세스와 관리를 제공합니다. 그러한 데이터베이스의 작동원리를 이해해봅시다. 데이터베이스의 개념: 데이터베이스는 체계적으로 구성된 데이터의 모임으로, 조직이나 업무에 필요한 정보를 효율적으로 저장하고 관리하는 시스템입니다. 예를 들어, 온라인 쇼핑몰에서 상품 정보, 주문 내역, 회원 정보 등이 데이터베이스에 저장됩니다. 이러한 기본적인 DB를 시작해서 채팅이나 이미지 업로드 와같은 데이터들도 DB에 저장이됩니다. 데이터베이스 관리 시스템(DBMS): DBMS는 데이터베이스를 관리하는 소프트웨어입니다. DBMS는 데이터베이스 생성, 수정, 삭제 ..

개발 2023. 7. 14. 16:34