728x90
반응형
- [개발자의품격][부트캠프][1기][30차시] Node.js #1 | 정의, 특징 | 내장 객체2022-04-06 19:00:28| Node.js 정의 Node.js는 Chrome V8 javaScript 엔진으로 빌드된 JavaScript 런타임 환경이다. | Node.js 특징 논블로킹(Non-blocking) I/O 기본적으로 JavaScript는 블로킹 I/O이다. 예를 들어 블로킹 I/O로 파일 쓰기를 한다면 "파일 쓰기 요청 > (파일 쓰기 함수 호출) 파일 쓰기 실행> 파일 쓰기 완료 > 다음 코드 실행"과 같이 진행된다. 반면 논블로킹 I/O로 파일 쓰기를 한다면 "파일 쓰기 요청 > (파일 쓰기 함수 호출) 파일 쓰기 실행> 다음 코드 실행"으로 진행되며 이 과정에서 파일 쓰기가 완료되면 Callback 함수를 호출해서 파일 쓰기가 완료되었음을 알려준다. 즉, 논블로킹은 함수를 호출한 후 호출된 함수가 실행되는 중..
- [개발자의품격][부트캠프][1기][29차시] MySQL #3 서비스 분석을 통한 데이터베이스 이해 | 당근마켓 분석 및 DB 생성2022-04-04 17:16:22| 당근마켓 분석 당근마켓 서비스의 상세페이지를 분석하여 테이블과 컬럼을 작성해보았다. | DB 생성 분석 결과를 토대로 MySQL에서 [그림 1]과 같이 DB를 생성하였다. ※ [그림 2]의 Foreign Key Name은 다른 테이블에서 동일하게 사용 할 수 없었다.
- [개발자의품격][부트캠프][1기][20차시] Vue.js #19 | slot을 이용한 Modal2022-04-02 22:15:50부트캠프 20차시에서 Vue.js의 slot 기능을 적용한 Modal 구현을 실습하였는데 그 내용을 다음과 같이 정리하였다. 자식 컴포넌트를 부트스트랩 디자인의 Modal 컴포넌트로 만들고 부모 컴포넌트에서 자식 컴포넌트를 이용해 하나 이상의 Modal을 구현하고자 한다. | 자식 컴포넌트 부트스트랩 적용 components의 fragments 폴더에 SlotModal.vue 파일을 생성한 후 태그 안에 "부트스트랩 > Components > Live demo"에서 이하를 copy 하여 붙여 넣는다. Modal title ... Close Save changes slot 및 v-bind 적용 부모 컴포넌트에서 하나 이상의 Modal을 생성하기 위해서 id를 props의 modalId와 바인딩한다. mod..
- [개발자의품격][부트캠프][1기][28차시] MySQL #2 | SQL 문법, SQL script Export, Table Data Export2022-03-31 15:47:10| w3schools.com에서 SELECT 연습 Tutorials > Learn MySQL > MySQL HOME > Try it Yourself https://www.w3schools.com/mysql/trymysql.asp?filename=trysql_select_all MySQL Tryit Editor v1.0 WebSQL stores a Database locally, on the user's computer. Each user gets their own Database object. WebSQL is supported in Chrome, Safari, and Opera. If you use another browser you will still be able to use our Try SQL ..
- [개발자의품격][부트캠프][1기][27차시] MySQL #1 | 테이블 생성, ERD2022-03-30 18:21:5127차시에서는 데이터베이스에 대한 기본 개념과 MySQL에서의 테이블, ERD 생성 실습을 진행하였다. 이에 대한 주요 내용을 다음과 같이 정리하였다. 1. 테이블 생성 Column Name은 소문자 스네이크 표기법을 사용한다. Primary Key의 경우 [그림 1]과 같이 Column 플래그를 PK, NN, UN, AI를 선택한다. (UN은 양수만 사용한다.) ※ Column 플래그(https://dev.mysql.com/doc/workbench/en/wb-table-editor-columns-tab.html) PK: PRIMARY KEY NN: NOT NULL UQ: UNIQUE INDEX BIN: BINARY UN: UNSIGNED ZF: ZEROFILL AI: AUTO_INCREMENT G: G..
- [개발자의품격][부트캠프][1기][24차시] Vue.js #18 | Footer(Bootstrap, Font Awesome의 Font icon)2022-03-21 16:09:29Footer 생성 [그림 1]과 같이 Bootstrap > Examples > Footers(https://getbootstrap.com/docs/5.1/examples/footers/)에서 원하는 코드 일부를 복붙 하여 FooterLayout.vue를 생성한다. © 2021 Company, Inc // App.vue ... ... ... import FooterLayout from '@/components/layouts/FooterLayout.vue' export default { components: { HeaderLayout, FooterLayout } } ... Font icon 적용 [그림 2]의 Footer에는 아이콘이 표시되지 않고 있다. 아이콘이 이미지 파일인 경우 이미지의 수만큼 서버와 ..
- [개발자의품격][부트캠프][1기][24차시] Vue.js #17 | 로그인 기능(vuex-persistedstate, vue-cookies 등 사용)2022-03-20 20:51:42로그인 기능 src/views/LoginView.vue 컴포넌트를 생성한 후 src/router/index.js에 경로 설정을 한다. vuex 관련 코드는 일단 주석 처리한다. // src/router/index.js ... import LoginView from '../views/LoginView.vue' // import store from '../store' ... const routes = [ ... { path: '/login', name: 'LoginView', component: LoginView }, ... // router.beforeEach((to, from, next) => { // if (to.path === '/') { // next() // } else if (to.path ==..
- [개발자의품격][부트캠프][1기][23차시] Vue.js #16 | Vuex2022-03-19 03:26:04Vuex https://vuex.vuejs.org/ vuex 라이브러리를 반드시 써야 하는 것은 아니다. (한 번도 안 쓰는 프로젝트도 있다.) Vue 프로젝트 생성 시 Vuex를 사용하는 것으로 선택하면 src 폴더 내에 store폴더와 index.js 파일이 자동으로 생성되고 main.js에 store 폴더가 import 된다. Vuex는 상태를 관리하기 위한 패턴 라이브러리이다. 애플리케이션 내 모든 컴포넌트의 중앙 집중식 데이터 저장소로서 역할을 한다. 각 컴포넌트에는 그 컴포넌트에서만 사용할 수 있는 data()를 정의할 수 있다. 이때 어떤 데이터는 다른 컴포넌트들이 그 데이터에 빈번하게 접근해야 하는 경우가 있다. 이런 데이터는 중앙에서 관리하는 것이 효율적이다. Vuex는 이런 데이터를 효..
728x90
반응형