코딩 프로그래밍94 Vue Bootstrap cdn 적용 간단하게 Vue 학습하면서 디자인을 편하게 관리하기 위해서 Bootstrap CDN을 적용하면 좋습니다. 나중에는 원하는 것을 찾아서 적용하는 방법을 하기 전에 일단 cdn을 통해서 편하게 적용해 보세요. Vue 프로젝트 폴더 안에 public 폴더 안에 index.html 파일 안에 cdn 주소를 넣으면 됩니다. 주소를 확인하기 위해서 https://www.bootstrapcdn.com 사이트에 접속해 보세요. Quick Start에 아래 있는 html 부분에 있는 화살표를 누르면 코드를 복사할 수 있어요. link rel 부터 있는 부분을 index.html 부분에 붙여 넣기 하세요. 2023. 4. 3. Vue 함수 Vue에서 함수 활용하는 방법 연습해 봐요. name에 있는 문자를 그냥 template에 표시했었는데요. greeting 함수를 만들어서 출력하는 함수를 만들어 보면서 함수 생성 방법을 연습해 보세요. template 안에서 함수를 사용하려면 return 에 포함시켜 줘야 합니다. {{ greeting(name) }} 함수 생성을 연습해 봤다면 다른 함수를 호출하는 함수를 생성하는 것도 해볼 수 있습니다. 파라미터 없이 다른 함수를 실행해서 결과를 저장해 놓는 변수를 설정해 보세요. {{ greet }} 간단한 함수 작성으로 느낌을 익혀보세요. 2023. 4. 3. Vue 파일 구조 Vue 구조를 파악하기 위해서 vue create 했을 때 기본 생성된 구조를 참조해도 좋습니다. 복잡해 보이면 단숙하게 만들어 놓고 살펴보는 것도 좋습니다. App.vue 파일이 있을텐데요. 들어있던 내용을 모두 지우고 화면에 표시되는 부분인 template 부분만 남기고 모두 지워보세요. Hello Vue localhost:8080 웹페이지에 Hello Vue 내용이 그대로 보일 것입니다. 이번에는 script 부분을 추가해보세요. name 부분의 오른쪽에 있는 값을 변경할 때마다 바뀌는 것을 알 수 있을 것입니다. 이런 부분을 활용해소 자바스크립트를 이용해서 값을 동적으로 할당 가능해집니다. Hello {{ name }} 시각적인 부분으로 style을 지정해보세요. 글자 색이 바뀌는 것을 알 수 있.. 2023. 4. 3. vue 3 구성하기 vue는 node 기반입니다. node가 이미 있어야 합니다. node는 버전이 자주 올라가니 nvm과 같은 도구를 같이 활용하시는 것이 좋습니다. vue를 구성하기 전에 nvm이 없다면 nvm 먼저 구성해 보세요. 우분투에서 nvm 설치하기 - Windows에서 nvm 설치하기 가장 먼저 vue를 활용하기 위해서 vue cli가 필요해요. vue cli를 설치하세요. vue cli에 대한 공식문서 참고해보면 좋습니다. npm install -g @vue/cli 설치가 끝나면 vue 개발할 때 사용할 폴더로 이동해서 vue 프로젝트 생성 명령어를 실행합니다. 예제에서는 vue-project 폴더를 만들면서 프로젝트를 생성합니다. vue create vue-project Vue 버전을 선택하는 것이 나오는.. 2023. 4. 3. 윈도우 nvm 노드 관리자 설치 node 사용할 때 nvm 을 통해서 관리하는 것이 여러 버전을 사용해야 하는 경우 좋습니다. 파이썬에 있는 pyenv하고 비슷하다고 볼 수 있어요. 이 글은 윈도우에서 설치하는 방법에 대한 글입니다. 우분투에 설치하는 방법은 여기를 참고해보세요. 설치 방법은 어려울 것이 없어요. 이미 노드가 설치되어 있지만 삭제하고 진행하는 것을 추천합니다. 그러나 진행하던 개발환경이 문제 될 수 있으니 잘 백업해 두고 시간적인 여유가 있을 때 하세요. node 관련된 것이 안 무겠도 없는 상태에서 설치하는 것은 상관없어요. 설치는 윈도우 전용 nvm 설치 파일이 있는 곳에 접속해서 설치 파일을 다운로드하여 설치하세요. https://github.com/coreybutler/nvm-windows/releases 접속해.. 2023. 4. 3. sqlalchemy 테이블 컬럼 목록 파이썬에서 데이터베이스 활용할 때 sqlalchemy 사용해서 데이터를 가져올 수 있는데요. sqlalchemy 를 통해 테이블이나 컬럼 목록을 가져올 수 있어요. 물론 all_tables 나 information_schema.tables 같은 테이블을 조회할 수도 있지만 DB 상관없이 동작하도록 하려면 쿼리보다는 sqlalchemy 에서 제공하는 기능을 이용하면 DB 상관하지 않고 사용할 수 있는 코드를 만들 수 있어요. from sqlalchemy import create_engine from sqlalchemy import inspect from sqlalchemy.pool import NullPool url = "postgresql://아이디:비번@서버:포트/디비" engine = create_e.. 2023. 3. 30. FastAPI 데이터베이스 연동 sqlalchemy FastAPI 같은 백엔드 작업하면 데이터베이스 연동은 거의 필수적이라고 할 수 있는데요. RDB 접속하는 경우에는 sqlalchemy 많이 이용하고 있어요. 처음부터 파일을 여러 개 만들어서 나누는 경우 조금 헷갈릴 수 있어요. 돌아가는 과정을 파악하기 위해서 단순화해서 만들어보는 것이 좋습니다. mysql을 가지고 테스트 합니다. DB 접근에 필요한 sqlalchemy를 설치합니다. pip install sqlalchemy DB를 mysql을 사용할 것이라서 필요한 pymysql을 설치합니다. pip install pymysql main.py 파일 하나만 가지고 테이블을 만들고 입력하고 조회하는 부분을 만들었습니다. 최대한 간단하게 하려고 했는데 만들다 보니 길어졌네요. 주석을 넣어두기는 했어요. f.. 2023. 3. 29. vscode 파일 목록에서 __pycache__ 안보이게 하기 vscode 사용하다가 특정 패턴을 가진 파일 목록이 안 보이게 하고 싶은 경우가 있어요. 개발할 때 자동으로 생기거나 설치되어 있지만 수정할 일은 없는 폴더와 파일 같은 것들이요. 보이면 성가시기도 할 때가 있어요. 그럴 때 그냥 안 보이게 설정할 수 있어요. 이 설정을 알고 있으면 반대로 분명 있는데 보이지 않는 파일이나 디렉터리가 있다면 이 설정이 되어 있는 것은 아닌지 확인해 보세요. vscode에서 단축키 ctrl + , 를 누르면 설정하는 화면이 나와요. 거기서 files.exclude를 검색해 보면 설장 할 수 있는 부분이 나와요. .git이나 Thumbs.db 등이 추가되어 있는데요. 원하는 것을 추가하거나 제거할 수 있습니다. 저는 **/__pycache__ 라고 추가해서 보이지 않게 했.. 2023. 3. 29. 이전 1 2 3 4 5 6 7 ··· 12 다음 반응형
