Develop_NOTE

xampp? wamp와 마찬가지로 웹개발에 필요한 프로그램을 한 번에 설치 할 수 있는 통합 프로그램이다. [php] WAMP 개발 환경 구축. AMP - Apache, MySQL, PHP를 함께 설치하며 이것을 AMP라고 부른다. WAMP - AMP를 Windows(윈도우) 환경에서 설치하면 WAMP라고 부른다. AMP를 각각 다운받기에는 난이도가 높음으로 Bitnami를 통해 설치 하겠음. 1 joroki.tistory.com 그러나 현재 일자(2023.11.14)에는 wamp는 서비스 종료가 되어 기존에 설치가 되어있는게 아닌 이상 신규로는 더이상 설치가 불가능하다. 그것을 대체 할 수 있는 프로그램이 xampp다. 프론트를 다루는 개발자에 한해서 php기반의 사이트의 view단을 개발하기 위해서는..

커스텀 이벤트? 지난 포스트에서 부모 컴포넌트가 가진 자식 컴포넌트에게 전달하고 받아올때 props를 사용했었다. [Vue.js] 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전송하는 문법 props 웹 애플리케이션을 제작할 때 재사용 가능한 부분을 독립적으로 구축 할 수 있게 해주는 것을 컴포넌트라고 부른다. [Vue.js] 컴포넌트(Component) Vue.js 컴포넌트(Component)? 웹앱을 제작할때 재사용 가 joroki.tistory.com 여기서 props는 'read-only'와 같은 개념이기 때문에 부모 컴포넌트에서 전송받은 데이터를 자식 컴포넌트에서 데이터값을 함부로 변경해서는 안된다. 자식 컴포넌트에서 데이터 값을 변경했을때는 웹 애플리케이션의 규모가 커졌을때 많은 부작용이 생겨 ..

웹 애플리케이션을 제작할 때 재사용 가능한 부분을 독립적으로 구축 할 수 있게 해주는 것을 컴포넌트라고 부른다. [Vue.js] 컴포넌트(Component) Vue.js 컴포넌트(Component)? 웹앱을 제작할때 재사용 가능한 부분을 독립적으로 구축할 수 있게 해주는 핵심 개념이다. 컴포넌트를 사용하면 작은 부분을 독립적으로 구축하고, 이를 조합하여 큰 웹 joroki.tistory.com App.vue 파일에서 Child.vue 컴포넌트를 등록하면 Child.vue의 부모 컴포넌트는 App.vue가 되는 것이다. 이때, 부모 컴포넌트(App.vue)에 등록된 데이터를 자식 컴포넌트(Child.vue)가 사용 하고 싶을 부모에서 데이터를 자식 컴포넌트에 데이터를 전송해주고, 자식 컴포넌트에서 전송한 ..

input type="date"? 이전에 개발자들은 웹 애플리케이션에서 달력을 구현하기 위해서 JQuery UI의 Datepicker 플러그인을 사용해야만 했다. Datepicker | jQuery UI Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (b jqueryui.com 그러나, 2022년 6월 ..

Vue3, Vue Router, axios를 활용하여 간단하게 로그인 & 로그아웃 기능을 구현해보고자 한다. 기능정의는 아래와 같다. 1. 사용자가 로그인 정보 입력 후 Login 버튼 클릭시 axios를 활용하여 post요청 2. 로그인 성공시 다른페이지로 route 이동 & 로그인 실패시 alert 3. 로그인 성공 후 새로고침해도 로그인 정보 값이 유지되기 위해 로그인 상태값을 생성하여 로컬스토리지에 저장 4. 로컬스토리지에 로그인 상태값이 없을시 로그인 페이지로 리디렉션 & 다른 url 접근은 불가. *) 단순 기능 기록 목적을 위한 것 이기 때문에 props,emit을 이용한 데이터 처리 or Vuex를 활용한 코드는 스킵 1. Login.vue 에서 로그인 기능 작업 - id,비밀번호 inpu..

Postman? postman은 API개발을 보다 빠르고 쉽게 구현 할 수 있도록 도와주는 툴이다. 개발된 API를 찍어보며 테스트하여 문서화하고 협업간 공유 할 수 있도록 도와주는 플랫폼이다. Postman은 모든 API를 다루는 관련 개발자들을 위해 다양한 기능을 제공한다. 변수 및 환경, Request, 테스트 및 사전 요청에 필요한 스크립트 작성 등, 워크 플로우를 더욱 효과적으로 만들 수 있도록 고안되었다. Postman을 사용해야하는 이유? API URL을 통해서 1~100까지 테스트 하는 것은 한계가 있다. 실제 화면단에서 프론트 개발자가 개발 테스트 화면을 구현하기 위해서는, 동작하기위한 버튼을 만들고, 이벤트 로직을 만들고, 버튼에 이벤트를 등록하고, 버튼을 눌렀을때 이벤트를 실행하도록 ..

Vue.js 문법을 활용한 조건부로 class를 요소에 부착 이 문법은 인터렉션 뿐 아니라 사용자 동작과 부착된 데이터에 따라 class를 요소에 부착 할 수 있기 때문에 유저 인터페이스 측면에서 매우 유용하게 쓸 수 있는 문법이다. 단계별로 보자면 아래의 단계로 코드를 작성한다. 1. 조건부 클래스 바인딩이 true & false인 상태일 때의 class를 디자인하기 2. 원하는 요소에 원하는 타이밍으로 UI 동작 관련 class를 부착 1. Fade로 토글되는 모달 창 만들기 위의 단계를 거쳐가며 Fade IN & OUT 되고, 토글 기능이 있는 코드는 아래와 같이 작성할 수 있다. // class 'active'는 조건부 클래스 바인딩. 모달 박스 모달 토글 위의 코드에서 조건부 클래스 바인딩을 동..

CRUD? CRUD는 데이터를 다루는 기본적인 작업에 대한 약어로, Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 의미한다. CRUD는 주로 데이터베이스 및 웹 애플리케이션에서 데이터를 관리하고 조작하는데 사용되는 개념이다. 1. Create - 생성 새로운 데이터를 생성하거나 추가하는 작업을 의미한다. 예를 들면, 데이터베이스에 새로운 레코드를 추가하거나 웹 양식에 따라 새로운 항목을 만드는 작업이 Create에 해당된다. 2. Read - 읽기 데이터를 조회하고 읽는 작업을 의미한다. 예를 들면, 데이터베이스에서 특정 레코드를 검색하거나, 웹 애플리케이션에서 데이터를 화면에 표시하는 작업이 Read에 해당된다. 3. Update - 갱신 데이터의 내용을 수정하거나,..

css에서는 background에 그라디어언트를 줄 수 있는 속성이 존재한다. 1. linear-gradient 2. radial-gradient 이 두가지 속성을 활용하면 백그라운드에 원하는 형태로 그라디언트를 삽입 할 수 있는데, 다른 속성과 결합하면 텍스트에도 그라디언트 효과를 줄 수 있다. 그전에 우선 css로 그라디언트를 만들고자 할 때 유용한 툴을 소개하고자한다. CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media ..

비동기 함수( Asynchronous Function )? 비동기 함수는 작업을 동기적으로 기다리지 않고, 다른 작업을 동시에 수행할 수 있도록 해주는 함수이다. 즉, 비동기 함수는 어떠한 작업을 시작한 이후 그 작업이 완료 될 때 까지 기다리는 것이 아니라 다른 작업을 실행 할 수 있도록 도와준다. 비동기 함수는 서버측에 요청, 로딩, 타이머, 이벤트 처리 등과 같은 시간이 걸리는 작업을 처리하는데 있어 유용하며, App의 반응성을 향상 시킬 수 있다. 비동기 통신을 위한 주요 키워드 1. async 함수 앞에 'async' 키워드를 붙이면 async 키워드가 붙은 함수는 비동기 함수로 표시된다. 아래 3번 항목에서 나올 await 을 사용 할 수 있게 해주는 비동기 통신 수행을 위해 가장 먼저 첫번째..