본문 바로가기

Dev

 (10)
개인프로젝트 1-5 리퀘스트 처리를 위한 WAS 서버 구축 Node.js 서버 환경 설정필요한 패키지 설치$ npm install express mysql body-parser bcryptjsexpress: 서버를 구성하는 데 사용mysql: MySQL 데이터베이스 연결을 위해 사용body-parser: POST 요청의 본문을 파싱bcryptjs: 비밀번호를 암호화하고 비교하는 데 사용 웹서버 코드 작성이것도 chatgpt한테 시킴. 편안함과 동시에 느껴지는 위기감 (편안함 승)// server.jsconst express = require('express');const mysql = require('mysql');const bodyParser = require('body-parser');const bcrypt = require('bcryptjs');const ..
개인프로젝트 1-4 화면구성 Vue.js 구성 및 동작 원리를 잘 몰라서 간단히 공부할 필요가 있었다그치만 아키텍쳐 위주로 프로젝트를 진행하는 거라 내부 프론트 백 코드를 상세하게 짚고 간다기보다는 목표로 한 서비스를 빠르게 만들 수 있을 정도로만 훑었고 아래 글들에 설명이 잘 되어있었다. 🔗 재그지그의 개발 블로그 - Vue 라이프사이클 이해하기https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html 🔗 개발자의 품격 - 한 시간만에 끝내는 Vue.js 입문https://www.youtube.com/watch?v=sqH0u8wN4Rs 🔗 워냐의 개발일기 - vue 모바일 웹 설정https://wonya-dev.tistory.com/9 🔗 npm..
개인프로젝트 1-3 S3에 Vue.js static 리소스 올리기 (v0.dev) 정적 리소스 S3에 업로드개발을 다 완전히 마치고 올리면 좋겠지만, 그래도 AWS 사용법을 익히며 개발하는 것이 나에게 더 도움되기 때문에 기본으로 제공되는 index 파일을 S3에 올려보려고 한다.Vue.js는 클라이언트 사이드 렌더링 방식이어서, 정적 리소스들을 S3에 올려 웹서버가 클라이언트의 요청이 있을 때마다 제공하고, 그 뒷단의 다른 동적인 액션들은 웹 애플리케이션 서버가 처리하도록 한다.관련 내용을 이전 포스트에서 다룬 적이 있다.  Server-side rendering Vs. Client-side rendering nolzaheo.tistory.com Vue.js를 S3에 올리는 단계까지를 설명해주는 블로그들은 많다. 이거보고 참고했다.  Vue2를 AWS S3에 배포하고 운영해보자Vue..
개인프로젝트 1-2 환경 구축 깃헙 스토리지 생성QuietTime vue 설치m1환경이라 node도 특정 버전 이상을 써야했고homebrew설치, nvm 설치부터 다 다시함챗 지피티가 친절하게 알려줌chromedriver도 최신으로 다시 설치하고 별짓다함 설치 도중 마주하는 문제들은 chatgpt한테 물어보면 됨$ sudo chown -R $(whoami) ~/.npm $ npm install -g @vue/cli$ npm i -g @vue/cli-init$ vue init webpack qtime$ nvm install 14.19.3$ nvm alias default 14.19.3 AWS 계정 설정정석을 따르기 위해 루트 사용자와 IAM 사용자를 분리 [AWS] AWS 계정 관리(ROOT, IAM)AWS 계정 관리에 대해 나중에 까..
개인프로젝트 1-1 - Vue.js를 활용한 Q.T용 웹앱 만들기 앱 구현은 사용자가 불편하다고 느낄 수 있을 것 같아 웹앱으로 구현한다. 기술 스택MEVN(MySQL, Express.js, Vue.js, Node.js) 개발배경 AWS 공부를 위해 AWS에 올릴 서비스가 필요했고, 3-tier architecture를 복습할겸 마침 교회에 필요한 말씀 묵상 공유 서비스를 만들면 좋겠다고 생각함.개발목표기간: 2024/10/24~2024/11/30(has been delayed)기능: 카카오 로그인, 큐티방 생성, 묵상 작성, 묵상 캘린더, 댓글 UI(업로드 예정) 아키텍쳐처음에는 익숙한대로 인스턴스 단위로 구성할까 했지만, AWS 공부를 위한 프로젝트인 만큼 AWS의 S3, lambda, RDS를 활용해보려한다.- 정적 리소스를 S3에 호스팅- VPC, EC2, RD..
Server-side rendering Vs. Client-side rendering
Iris project 👀 Front end using Vue.js 홍채인식 기반 부정행위 감지기능 대표적인 프론트엔드 개발 프레임워크 3가지 React, Angular, Vue 중 Vue를 사용할 예정 ∵재사용성이 높고 직관적이며 배우기 쉬움. Angular의 장점(양방향 데이터바인딩)과 React의 장점(Virtual Dom)을 모두 갖고있음 Node.js : 확장성 있는 네트워크 애플리케이션(서버 프로그램) 개발을 자바스크립트로 구현할 수 있도록하는 자바스크립트 런타임 환경. 원래 자바스크립트는 클라이언트에서 동작하는 언어이지만 Node.js는 chrome의 V8엔진을 이용하여 브라우저에서 자바스크립트가 동작하듯이 서버에서 자바스크립트를 동작할 수 있도록 해줌. Vue로 클라이언트 프로그램을 개발하기 위해 설치하는 라이브러리 패키지를 빠르게 설치하고 적용하기 위해 ..
Python Flask url_for() url을 다른 url로 리다이렉트 할 때 사용한다. 따라서 url을 동적으로 처리하는데 유용하다. 기본적으로 `url_for`함수는 엔드포인트 함수명을 인자로 받는다. 따라서 이동하고자 하는 라우트의 함수 이름을 url_for() 내에 적어줘야한다. @app.route('/index') def index(): return render_template('index.html', posts=posts) Flask 블로그 이 때 인자 전달도 가능하다. @app.route('/guest/') def hello(guest): return 'guest name :%s' % guest redirect(url_for('hello', guest=name)) 또한 `url_for`함수로 `static` 폴더 내에 있는 리소..

티스토리툴바