개발
-
[자바의 정석] 6장 객체지향 언어 1. 1~3 변수와 메서드개발/JAVA 2023. 3. 7. 23:43
아래 내용은 자바의 정석 강의&책을 보면서 정리한 내용입니다. 들어가기 전에 자바 공부 방식 공부 방식은 아래와 같습니다. 객체지향 개념: 자바의 정석 6, 7장 보기 → 내가 이해한 개념을 A4용지에 2장으로 정리하여 암기하기! 공부 순서: 자바 기초&자바의 정석 ⇒ jsp, spring ⇒ 설계(디자인 패턴, 객체지향) 자바의 정석 6장 내용 리스트 이번 시간에는 아래 내용 중 객체지향언어 ~변수와 메서드 부분을 정리하겠습니다. 1. 객체 지향 언어 객체지향은 기존에 있는 프로그래밍 언어에 객체지향 개념만 추가된 것이다. ⭐ 객체지향언어: 프로그래밍 언어 + 객체지향 개념(규칙)[암기 필요] OOP(객체 지향 프로그래밍) 핵심 개념 캡슐화 상속 추상화 ⭐️ 다형성: 가장 중요! 객체지향언어 특징 코드..
-
개발자에게 선물로 좋은 도커(docker) 각티슈 케이스💙개발/Etc 2023. 3. 6. 22:20
개발 블로그하면서 처음으로 협찬이 들어왔습니다 😎 도커를 블로그에 많이 올리기도 하고 많이 사용해서 그런지 협찬을 받아서 너무 좋았습니다!! 개발자라면 정말 가지고 싶은 티슈 케이스입니다!! 빨리 배포하고 싶은 마음이 드네요... 개발자 친구가 있다면 선물 받으면 좋아할 것 같아요 💙 컨테이너를 조립하기 전 구성품입니다. 빨리 조립을 하고 싶네요! 조립을 못하는 저에게도 간편하게 조립 가능하고 티슈만 넣으면 완성!!! 😎 완성된 모습의 정면 사진입니다. 위에는 컨테이너 옆면 모습입니다. 회사에 가져가서 쓰고 싶네요. 동기들이 부러워할 것 같아요 😆 구매는 아래 사이트에서 구매할 수 있습니다~ https://incatos.cafe24.com/product/%EB%8F%84%EC%BB%A4-%EC%BB%A8..
-
Vue 데이터 바인딩 실습 - TODO 앱 구현하기개발/Front-end 2021. 9. 15. 22:28
이번 시간에는 이를 이용할 TODO 앱을 만들어보겠습니다. 0. 프로젝트 소개 및 컴포넌트 설계 0-1. 프로젝트 소개 이번에 실습할 프로젝트는 아래와 같습니다. (gif라서 약간 이미지가 깨집니다...) 0-2. 컴포넌트 구성 컴포넌트를 작게하는 경우 재사용성이 높아집니다. 따라서 아래와 같은 컴포넌트로 구성하겠습니다. TodoHeader: 제목 TodoInput: 할일 목록 추가 할일 목록 타이핑하여 + 버튼 클릭 시, localStorage에 추가(할 일 목록에 추가) 할 일 목록 입력 후 엔터 클릭 시 할 일 목록에 추가 TodoList: 할일 리스트 localStorage에서 할 일 목록 데이터를 가져와서 보여주기 완료 유무 체크, 리스트 삭제 TodoFooter: 모든 리스트를 없애는 버튼 0..
-
Vue HTTP 통신 라이브러리 - axios개발/Front-end 2021. 9. 3. 15:44
이번 시간에는 http 통신 라이브러리 axios를 이용하여 API를 호출하여 서버 데이터 바인딩을 하는 방법을 알아봅니다. 1. Axios란? axios는 서버와 데이터를 송수신할 수 있는 HTTP 비동기 통신 라이브러리입니다. Vue.js 개발 시 서버와 통신을 위해 가장 많이 사용되는 라이브러리입니다. 이는 Promise 기반의 HTTP 통신 라이브러리입니다. 아래 사이트에서 설치 방법, 사용법 등에 대해서 확인 가능합니니다. GitHub - axios/axios: Promise based HTTP client for the browser and node.js GitHub - axios/axios: Promise based HTTP client for the browser and node.js Pr..
-
Vue 데이터 바인딩개발/Front-end 2021. 8. 25. 15:32
이번 시간에는 HTML 입력 폼 객체에 따른 데이터 바인딩 방법을 알아보겠습니다. 1. 데이터 바인딩이란? Vue는 Angular와 마찬가지로 양방향 데이터 바인딩을 지원합니다. 아래 MVVM 패턴 그림을 봅니다. 뷰 모델에 있는 데이터 바인딩은 양방향 데이터 바인딩이 이뤄집니다. 모델과 뷰 중 어느 한쪽에 변경이 일어나면 다른 한쪽에 반영됩니다. MVVM 패턴: Model-View-ViewModel 약자로 프로그래밍 로직과 화면에 해당하는 View를 분리해서 개발하기 위해 설계된 패턴입니다. 모델: 데이터를 담은 용기. 서버에서 가져온 데이터를 js 객체로 저장 뷰: 사용자 화면 뷰 모델(Vue): 뷰와 모델의 중간 영역으로 돔 리스너와 데이터 바인딩을 제공 돔 리스너: 돔의 변경 내용을 즉각적으로 반..
-
Vue 컴포넌트 Basic개발/Front-end 2021. 8. 24. 23:42
이번 시간에는 vue 컴포넌트 개발을 위한 기본 문법에 대해서 알아봅니다. 컴포넌트에 대한 이해와 Vue 컴포넌트 코드 구조를 이해합니다. 1. 컴포넌트란? 웹 사이트 화면에서 하나하나가 수많은 웹 요소로 구성되어 있습니다. 예를 들어 버튼, input, 이미지 등으로 구성되어 있습니다. 이런 작은 단위의 여러 개 View 중에는 다른 화면에서도 사용됩니다. 이런 단위의 View를 재사용할 수 있는 구조로 개발하는 것을 컴포넌트라고 합니다. Vue로 개발된 파일(.vue)가 모두 컴포넌트입니다. Vue CLI를 이용해서 프로젝트를 최초 생성했을 때 src 폴더 밑에 components와 views(vue-router 설치 시 생성)이 존재합니다. 해당 역할은 아래와 같이 사용됩니다. views 폴더: 페..
-
Vue Lazy Load(비동기 컴포넌트)란?개발/Front-end 2021. 8. 24. 23:12
1. Lazy Load 사용하는 목적 Vue CLI를 통해 빌드하면 소스 코드가 하나의 파일로 합쳐집니다. 이때 큰 프로젝트는 파일 용량이 매우 커집니다. 이 때문에 사용자는 웹 사이트 처음 접속 시 큰 파일을 다운로드하느라 초기 랜더링 시간이 오래 걸리게 되며 랜더링 속도가 너무 늦어지게 됩니다. 즉 현재 보고 있는 화면과 무관한 내용까지 받아서 오래 걸리게됩니다. 따라서 Lazy Load를 이용하여 리소스를 컴포넌트 단위로 분리하여 필요한 것들만 그때그때 라우트 단위 혹은 컴포넌트 단위로 다운로드할 수 있게 하는 방법입니다. Lazy Load는 Lazy '가능한 길게 일을 미루는 행위'란 의미에 Load 단어를 합쳐 페이지 내에서 실제로 필요할 때까지 리소스 로딩을 미루는 것입니다. 2. prefet..
-
Vue Lazy load 적용하기개발/Front-end 2021. 8. 24. 20:45
이번 시간에는 Vue Router 설정 중 Lazy Loading Routes를 사용하는 실습을 진행하겠습니다. 해당 실습은 vuejs 가이드 문서를 참고해서 만들었습니다. 만약 Lazy Load에 대한 개념이 어렵다면 이전 게시물인 Vue Lazy Load(비동기 컴포넌트)란? 에 대한 포스팅을 읽고 오시는 것을 추천합니다. 1. Vue 기본 CLI 세팅 1-1. Vue CLI 설치 아래는 vue cli를 설치하는 명령어입니다. $ npm install -g @vue/cli 1-2. Default 옵션으로 프로젝트 설치하기 해당 옵션으로 프로젝트를 생성하는 경우 기본적으로 설정된 값으로 설치가 됩니다. 1-2-1. vue 프로젝트 생성 vue create [프로젝트 명] 명령어를 실행합니다. 여기서 프..