Web 검색 결과

해당 글 36건

[Vue.js] Vuex 상태 관리 패턴

입사 후 첫 업무로 Vue를 활용한 프로젝트에 투입되었는데 이미 짜여져있는 상태 저장소들의 구조와 흐름을 이해하기 위해 개인적인 학습을 진행하며 정리한 내용입니당. 01. Vuex란? Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리로 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경 가능하다. 상태 관리 패턴을 통해 단방향 데이터 흐름의 문제점을 해결 가능하다. 01-1. 단방향 데이터 흐름 단방향 데이터 흐름에는 상태, 뷰, 액션 세가지 개념이 존재한다. 상태는 앱을 작동하는 원본 소스 뷰는 상태의 선언적 매핑 액션은 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법 이러한 데이터의 흐름은 공통의 상태를 공유하는 컴포넌트가 많아지..
Web/Vue.js 2020. 10. 22. 10:58

[Laravel] Basic route 이해하기

프로젝트에 Laravel을 활용하면서 정리한 내용입니다. 01. 기본 라우팅 가장 기본적인 라우트는 URI와 클로저를 전달 받아 정의합니다. ExampleRoute::Get('foo', function(){ return 'Hello World'; }); 02. 기본 라우트 파일 모든 라라벨의 라우트는 route디렉토리 안에 들어 있는 라우트 파일에 정의되어 있습니다. 이 파일들은 프레임워크에 의해서 자동으로 로드됩니다. routes/web.php : 웹 인터페이스를 위한 라우트들을 정의 routes/api.php : stateless하고 api미들웨어 그룹이 할당 routes/web.php 에 정의된 라우트는 브라우저를 통해서 유입되는 라우트 URL을 정의하는데 사용됩니다. 03. 라우터 메소드 01) ..
Web/Laravel 2020. 8. 10. 17:56

[Laravel] Directory 구조 이해하기

프로젝트에 Laravel을 활용하면서 정리한 내용입니다. 01. Root 디렉토리 Root ├─app ---------------- 애플리케이션 핵심 코드가 들어있음 ├─bootstrap ---------- 프레임워크의 부트스트래핑을 담당하는 app.php파일 포함 ├─config ------------- 애플리케이션 설정 파일 포함 ├─database ----------- 데이터베이스 마이그레이션, 모델 팩토리, 시딩 파일 포함 ├─public ------------- 애플리케이션에 진입하는 모든 request-요청들에 대한 진입점 역할과 │ 오토로딩을 설정하는 index.php 파일 포함 │ (이미지, 자바스크립트, CSS와 같은 asset파일들을 포함) │ ├─routes ------------- ..
Web/Laravel 2020. 8. 10. 17:49

[Laravel] 프로젝트 시작하기 설치 및 세팅

프로젝트에 Laravel을 활용하면서 정리한 내용입니다. 01. 개발 환경 php php MySQL Laravel 버전 7.4.7 8.0.20 7.x 2. 설치 과정 1) Bitnami WAMP 설치 (웹 서버 세팅이 필요하다면 선택적으로 진행합니다) php, mysql, apache환경을 간단하게 설치 가능 설치 링크: Bitnami WAMP Download 2) Composer 설치 php 의존성 관리 도구로 Composer를 설치합니다. 설치 링크: Composer Download 3) Laravel 설치 터미널에 아래와 같이 명령어를 입력해 라라벨 인스톨러를 다운로드 합니다. composer global require laravel/installer composer global require la..
Web/Laravel 2020. 8. 10. 17:45

[Vue.js] Vue CLI 3.x 프로젝트로 Github Page 만들기

포폴 사이트를 만들기위해서 Vue CLI를 활용해 보았는데요 ㅇㅅㅇ Github Page로 배포하는것까지 정리해봅니다~ 깃헙 페이지를 만들때 master 브랜치를 활용하는 방법과 master /docs 폴더를 활용하는 방법, gh-pages 브랜치를 활용하는 방법 세가지가 있습니다. 저는 gh-pages 브랜치를 활용하는 방법으로 배포를 했습니다. 먼저 Vue CLI 프로젝트로 이래저래 페이지를 만들어두었다는 전제하에 진행하겠습니다. 1. vue.config.js 파일 생성 깃허브 저장소 이름으로 publicPath 지정해줌 module.exports = { publicPath: '/Repository-Name/' } 2. 'gh-pages' 로컬 브랜치 생성 (부모 커밋이 없는 브랜치 생성을 위해 --..
Web/Vue.js 2020. 4. 20. 21:35

[Node.js] Express+MongoDB, API 서버 구현하기(1)

'Node.js 교과서 - 조현영 저'를 활용해 공부했습니다. 0. 목표 사용자 정보를 등록, 조회하고 특정 사용자에 해당하는 댓글을 조회, 등록, 수정, 삭제가능하게 서버를 구현하고 간단하게 뷰를 구현해 웹으로 확인해본다. 1. API 구성 1) Users 유형 라우트 설명 GET /users 전체 사용자 정보 조회 POST /users 사용자 추가 2) Comments 유형 라우트 설명 GET /comments/:id id 사용자의 댓글 목록 조회 POST /comments 댓글 추가 PATCH /comments/:id ObjectId가 일치하는 댓글 수정 DELETE /comments/:id ObjectId가 일치하는 댓글 삭제 2. 스키마 모델링 3. 프로젝트 생성하기 $ express learn..
Web/Node.js 2020. 4. 1. 20:11

[Node.js] Express 구조 이해하기

express-generator를 활용해 프로젝트를 생성했을 때 생성되는 파일들의 역할과 express 서버의 구조 및 동작원리를 이해하기 위해 작성하는 포스트입니다. 엄청 길지만 공부한걸 정리해보려고 작성 ㅜ 1. 핵심 파일 분석 1) bin/www www 파일은 http 모듈에 express 모듈을 연결하고, 포트를 지정하는 부분입니다. 확장자가 붙어있지 않은데 파일 첫 줄에 #!/usr/bin/env node 라는 주석을 활용해 콘솔 명령어가 됩니다. 주요 코드 var app = require('../app'); var debug = require('debug')('express-test:server'); var http = require('http'); var port = normalizePort..
Web/Node.js 2020. 3. 15. 19:03

[Node.js] Express 시작하기

1. Express 설치 터미널 창에 Express-generator를 전역 설치 합니다. (Express-generator가 콘솔 명령어이므로 전역설치 합니다.) npm install -g express-generator 2. 프로젝트 생성 프로젝트를 생성할 폴더로 이동해 프로젝트를 생성합니다. 명령어 -> express express learn-express --view=pug 만들어진 프로젝트 폴더로 이동해서 npm 모듈들을 설치합니다. cd express-test && npm install 프로젝트 폴더 안에 파일들이 생성되면 완료 3. 프로젝트 디렉토리 구조 bin > www : 서버를 실행하는 스크립트 public : 이미지, javascript, css와 같은 정적파일이 들어 있는 폴더 ro..
Web/Node.js 2020. 3. 15. 01:37