본문 바로가기

웹프로그래밍

 (29)
flask 개발환경 구축하기 flask를 설치하기 위해선 pip가 필요합니다. pip는 Pip Installs Packages의 약자로서 파이썬 패키지를 설치하고 관리하는 패키지 관리자입니다. pip는 python3.4+를 설치하면 함께 설치됩니다. 설치순서1. python 설치(pip설치)2. flask 설치 1. python 설치https://www.python.org/ 사이트로 접속하여 다운로드에서 원하는 버전을 다운로드합니다. 저는 3.7.1버전을 다운로드 했습니다. 3.7.1 버전을 선택하여 들어가서 쭉 내려보면 윈도우 64비트에 해당하는 설치파일들입니다. 셋 중 하나를 택하여 설치하면 됩니다. python 설치 성공 시의 모습입니다. python --version, pip --version 명령어로 테스트 할 수 있습니다..
Angular 개발환경 구축하기 Angular를 사용하기 위해서는 NPM의 설치가 필요합니다. NPM은 Node Package Manager 의 줄임말으로서 NodeJS를 설치하면 함께 설치됩니다..NodeJS 설치 후, Angular CLI를 설치합니다.Angular CLI는 편리하게 프로젝트를 생성하고 관리하도록 도와줍니다. 설치순서1. NodeJS 설치(NPM)2. Angular CLI 설치3. visual studio code(툴) 설치 1. NodeJS 설치https://nodejs.org/ko/로 접속하여 LTS버전을 다운로드합니다.(최신버전을 받아도 상관없으나, 저는 조금 더 안전한 LTS버전을 선호합니다)아래는 설치가 성공했을 때의 모습입니다. node --version, npm --version 명령시 이러한 반응이 있..
Pookle 프로젝트 - DB 설계 Database : MongoDB(NoSQL)Database Name : Pookle_dbcollections : user, timeline_post, board_post user collections : _id : object_iduser_name : stringuser_pw : stringuser_que : stringuser_ans : stringuser_nickname : string // 기본값은 user_name과 동일하게 넣되, 변경해서 사용할 수 있도록.user_fav_timeline : object = {timeline_id : object_id,timeline_title : string // 유저에게 미리 보여주기 용} user_like_board : object = {board_id ..
Angular 설치 1. nodejs 설치nodejs(https://nodejs.org/ko/) 페이지로 이동하여 맞는 운영체제의 LTS버전을 다운로드합니다. 2. angular cli 설치 npm install -g @angular/cli3. 프로젝트 생성ng new myfirstproject4. 해당 디렉토리로 이동 후, 프로젝트 실행ng serve웹브라우저에서 localhost:4200 로 이동다음과 같은 화면이 보이면 성공입니다.
myFtp - 개발 3일차 오늘 한 일 다운로드 기능을 구현하고자 했다.ftp.js의 res.download가 경로에 맞게 잘 동작하는 것은 확인했다. 그러고보니 아직 setting 컴포넌트의 ui를 만들지 않아서 이 작업을 했다.왼쪽에는 server의 assets폴더의 파일을 나열하고 다운로드 버튼을 만든다. 각 파일에는 체크박스가 붙어서 일괄적인 다운로드가 가능하다.오른쪽에는 client의 로컬폴더를 보여주고 싶다. 관련 모듈을 찾아보자. 안되면 그냥 업로드만 하기. 내일 할 일setting 컴포넌트 ui 완성하기.
myFtp - 개발 2일차(getImage) 오늘 한 일뼈대 생성(?)우선 myFtp 프로젝트의 angular 부분에서의 뼈대가 되는 부분들을 생성했다. ( service, router, component ...)그 과정에서 service에서 http모듈을 import하여 썼는데, app.module의 import에 추가하지 않아서 에러가 발생했다. 사소한 문제로 에러가 발생하지 않도록 조심하자. getImage어제까지는 틀만 잡은 터라, image의 이름을 angular에 직접 타이핑하여서 html에서 부르도록 경로를 설정했었다.이를 직접 assets폴더를 참조하여 파일을 탐색하고 불러오도록 수정했다. server/routes/ftp.js 파일은/fpt/img를 get으로 접속하면 npm fs 모듈로 .../assets/image 폴더의 파일리스..
myFtp - 개발 1일차 오늘 한 일1. 기획처음에 기획없이 막무가내로 '틀만 짜자!' 이런 생각으로 키보드를 두드렸다. 하지만 열심히 두드리는 것도 잠시, 금방 무엇을 해야할지 갈피를 잡지 못했다. 이로 인해 기획의 소중함을 깨달았고, 30분정도 투자하여 간단하게나마 그림을 그리고나니 무엇을 해야할지 명확하게 알 수 있었다. 2. 컴포넌트 생성기획을 바탕으로 컴포넌트와 라우터를 한 번에 생성했다. 하나의 컴포넌트를 작성하고, 다른 컴포넌트가 필요할 때에 생성했던 지난 프로젝트와는 사뭇 다른 느낌이며, 훨씬 깔끔하게 일이 진행되는 기분이다. 3. 이미지 업로드여태까지 Angular를 계속해서 다뤄왔음에도 불구하고, 초반에 이미지를 몇 번 띄우려고 시도하다가 포기했다. 자꾸 엑박만 떠서...하지만 구글링은 역시 훌륭했다. 전에도 ..
웹 FTP 기획 주제 : FTP프로토콜을 이용한 파일전송과, 전송된 이미지 파일의 나열 - 페이지 기획/:page : 가장 위에 헤더 헤더 아래에 가운데 우측 정렬로 id, pw textbox, 로그인 버튼, 회원가입 버튼 생성, 로그인 했을 시에는 관리 로그아웃과 관리 버튼 생성(admin일 경우에만) 아래에는 사진을 1줄에 3장씩 3줄, 총 9장을 보여주고 9장을 초과할시에는 페이징 기능으로 관리 /join : 헤더는 고정. id, pw, pwc, grade(radioBox : guest, admin) 항목을 입력하는 회원가입 페이지 /setting : 가로로 공간을 반으로 분할하여, 좌측에는 서버 폴더, 우측에는 클라이언트 폴더를 게시하여 드래그 앤 드롭이나, 업로드/다운로드 버튼을 이용하여 파일을 주고받는 기능 ..

티스토리툴바