1월부터 입과하여 프로그래밍에 대해 배움을 얻고있던 "삼성 청년 SW 아카데미(SSAFY)"가 6월 한달 간 계절학기, 잡페어 기간을 가지면서 시간적 여유가 조금 생겨 Python 이외에 다룰 수 있는 프로그래밍 언어를 늘려보고자 Java 공부를 시작해보기로 했습니다. 0. VScode 세팅 Eclipse IDE 를 설치한 후 Eclipse에서 학습을 진행할까 고민하다 좀 더 익숙한 VScode를 사용하기로 하였음. 1. 명령 팔레트 창 (ctrl + shift + p) 을 열어 "Java: Create Java Project..." 를 선택 이후 "No build tools" 선택 2. 자바 프로젝트를 생성할 폴더 선택 후 "Select the project location" 선택 3. 생성할 프로젝트..

📒 Vuex로 관리중인 상태를 로컬에 저장하기 지금까지 학습한 Vue로 제작한 앱은 재실행하거나 새로고침을 하면 초기 값으로 돌아간다. 📎 Window.localStorage 란? 브라우저의 내장 객체 중 하나 Key-Value 형태로 데이터를 저장할 수 있는 저장소 localStorage에 저장된 데이터는 브라우저를 종료해도 계속해서 유지 됨 단, 보안과 관련된 중요한 정보를 저장하기에는 적합하지 않음 📎 Window.localStorage setItem(key, value) key, value 형태로 데이터 저장 데이터 저장 시 문자열 형태로 저장됨에 주의 getItem(key) key 값으로 저장된 데이터 불러오기 데이터 저장 시 문자열 형태로 저장하였으므로, 불러올때도 문자열로 불러옴 JSON.s..

📒 Data in component 📎 Data in component 우리는 정적 웹페이지가 아닌, 동적 웹페이지를 만들고 있음 (다뤄야 할 데이터가 등장) 한 페이지 내에서 같은 데이터를 공유해야 함 하지만 페이지들은 각각의 component로 구분이 되어있음 Data를 필요한 컴포넌트끼리 주고받을 경우? 데이터의 흐름을 파악하기 힘듦 개발 속도 저하 유지보수 난이도 증가 컴포넌트는 부모-자식 관계를 가지므로, 부모-자식 관계만 데이터를 주고 받게해야함 데이터의 프름 파악 용이 유지 보수하기 쉬움 pass props & emit event 부모 => 자식으로의 데이터의 흐름 pass props 방식 자식 => 부모로의 데이터의 흐름 emit event 방식 📎 Pass Props 요소의 속성(prop..

📒 Vue CLI 프로젝트 구조 📎 Module 개발하는 애플리케이션의 크기가 커지고 복잡해지며 파일 하나에 모든 기능을 담기가 어려워졌다. 따라서 자연스럽게 파일을 여러 개로 분리하여 관리하게 되었고, 이때 분리된 파일 각각이 모듈(module) 즉, js 파일 하나가 하나의 모듈이다. 모듈은 대개 기능 단위로 분리하며, 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다. 여러 모듈 시스템 ( ESM, AMD, CommonJS, UMD ) 📎 Webpack 모듈의 수가 많아지고 라이브러리 혹은 모듈 간의 의존성(연결성)이 깊어지면서 특정한 곳에서 발생한 문제가 어떤 모듈 간의 문제인지 파악하기 어려워짐 Webpack은 이러한 모듈 간의 의존성 문제를 해결하기 위한 도..

📒 Syntax 기초 📎 Template Syntax 렌더링 된 DOM을 기본 Vue instance의 data에 선언적으로 바인딩 할 수 있는 HTML 기반 template syntax를 사용 렌더링 된 DOM : 브라우저에 의해 보기 좋게 그려질 HTML 코드 HTML 기반 template syntax : HTML 코드에 직접 작성할 수 있는 문법 제공 선언적으로 바인딩 : Vue instance와 DOM을 연결 📎 Directives 기본 구성 v-접두사가 있는 특수 속성에는 값을 할당 할 수 있음 directive의 역할은 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 것 `:` 을 통해 전달인자를 받을 수 있음 `.` 으로 표시되는 특수 접미사 - directive를 특별한 방법으로 바인..

📒 Front - end 개발 📎 Vue 란? Front-end 개발 효율성을 높이고, Web App의 복잡성을 관리하기 위한 라이브러리 📎 Web App 란? 웹 브라우저에서 실행되는 어플리케이션 소프트웨어 웹 페이지가 그대로 보이는 것이 아닌 디바이스에 설치된 App처럼 보이는 것 📎 SPA (Single Page Application) Web App 과 함께 자주 등장할 용어 CSR (Client Side Rendering) 방식으로 요청을 처리 필요한 페이지를 서버에 AJAX로 요청 서버는 화면을 그리기 위해 필요한 데이터를 JSON 방식으로 전달 JSON 데이터를 JavaScript 로 처리, DOM 트리에 반영 (렌더링) 📒 Vue 📎 Vue 를 배우는 이유 타 Framework에 비해 입문자..