Flex Box에 대해서 공부하는 파트입니다. 기본 코드를 열고 아래의 코드를 추가해줍니다. (...은 기존에 추가되어 있던 코드를 의미합니다.) .panels { ... display: flex; } .panel { ... flex: 1; justify-content: center; display: flex; flex-direction: column; } 위의 css 코드를 추가하면 panels는 flex box로 변경이 되어 밑으로 나열되어 있던 panel 들이 옆으로 나열되게 됩니다. 그리고 panel들은 전부 같은 공간을 할당받기 위해 flex를 1로 설정하였으며 panel 안에 있는 텍스트를 중앙으로 배치하기 위해 값들을 추가하였습니다. 이번에는 아래의 코드를 추가해보겠습니다. .panel > ..
자바스크립트의 배열에 대해서 공부하는 파트입니다. 1. Filter the list of inventors for those who were born in the 1500's (1500년대에 태어난 발명가들을 필터링하라.) let fifteen = inventors.filter((inventor) => (inventor.year >= 1500 && inventor.year < 1600)); console.table(fifteen); console.table로 출력하면 데이터가 테이블 형태로 나옵니다. 2. Give us an array of the inventors' first and last names (발명가의 이름과 성으로 구성된 배열을 제공하라.) let fullNames = inventors.m..
원문 코드는 아래로 들어가시면 있습니다. 필요하신분들은 클론해서 쓰시면 됩니다. 출처 : https://github.com/wesbos/JavaScript30/tree/master/03%20-%20CSS%20Variables wesbos/JavaScript30 30 Day Vanilla JS Challenge. Contribute to wesbos/JavaScript30 development by creating an account on GitHub. github.com Javascript30의 세 번째 프로젝트는 css 변수입니다. css에서 변수를 사용할 수 있는데 사용법은 간단합니다. :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } style ..
원문 코드는 아래로 들어가시면 있습니다. 필요하신분들은 클론해서 쓰시면 됩니다. 출처 : https://github.com/wesbos/JavaScript30/tree/master/02%20-%20JS%20and%20CSS%20Clock wesbos/JavaScript30 30 Day Vanilla JS Challenge. Contribute to wesbos/JavaScript30 development by creating an account on GitHub. github.com Javascript30의 두 번째 프로젝트는 js와 css로 시계 만들기입니다. 트랜지션에 대해 잘 몰라 다음의 블로그를 참고하였습니다. 출처 : https://takeuu.tistory.com/42 2. CSS + JS C..
원문 코드는 아래로 들어가시면 있습니다. 필요하신분들은 클론해서 쓰시면 됩니다. 출처 : https://github.com/wesbos/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit wesbos/JavaScript30 30 Day Vanilla JS Challenge. Contribute to wesbos/JavaScript30 development by creating an account on GitHub. github.com Javascript30의 첫 프로젝트는 자바스크립트로 드럼만들기입니다. 첫 프로젝트를 열어보면 아래의 구조로 이루어져 있습니다. 이번 프로젝트에서 필요한 사운드가 들어있는 폴더와 스타일이 정의된 styles.css이 있으며..
테스트 환경 셋팅하기 # 프로젝트 init npm init -y # 필수 라이브러리 및 프레임워크 설치하기 npm i --save express npm i --save-dev chai chai-http mocha # 아래와같이 package.json 파일을 수정 "scripts": { "test": "./node_modules/mocha/bin/mocha" }, main.js 파일을 생성 const express = require('express') const bodyParser = require('body-parser') const app = express() app.use(bodyParser.json()) app.use(bodyParser.urlencoded({extended:true})) app.g..
1. Flask-Script 설치하기 pip install Flask-Script 로 Flask-Script를 설치합니다. Flask-Script는 manage.py를 만들어 커맨드를 관리하기 위해 설치하였습니다. 2. 디렉토리 구조 설명 이번 글로 완성되는 디렉토리 구조는 다음과 같습니다. project ├── app │ ├── __init__.py │ └── config.py └── manage.py3. manage.py 파일 작성 아래와 같이 작성합니다. # manage.py import os from flask_script import Manager from app import create_app app = create_app(os.getenv("TEST_APP") or "dev") manager..
1. Flask란? 웹을 개발하기 위해 파이썬을 사용하고자 한다면 주로 장고를 떠올립니다. 장고는 좋은 프레임워크지만 조금 무겁다는 특징을 가지고 있습니다. 그에 비해 플라스크는 매우 심플하면서 가볍다는 특징을 가지고 있습니다. 처음 시작할때는 개인에따라 장고보다 쉬울수도 어려울수도 있습니다. 저는 개인적으로 장고보단 시작하기는 어려웠던것 같습니다. 2. Flask 기본 디렉토리 생성하기 먼저 기본 디렉토리 구조는 다음과 같습니다. project └─app └─__init__.py 3. Flask 설치하기 pip install flask 로 설치합니다. 4. Flask 기본 코드 작성하기 이제 __init__.py 파일을 열어 아래와 같이 작성합니다. # __init__.py from flask impo..
파이썬은 추상 클래스를 지원합니다. 추상 클래스는 기본적인 틀을 만들어두고 상속받는 클래스에서 그 구현을 강제하는 클래스입니다. 파이썬에서는 추상 클래스를 abc(abstract base class)라는 모듈을 임포트해서 사용할 수 있습니다. 저는 여기서 Animal이라는 클래스를 추상클래스로 생성해보고 say라는 메소드를 구현하도록 강제해 보겠습니다. 예제는 아래와 같습니다. from abc import ABCMeta, abstractmethod class Animal(metaclass=ABCMeta): @abstractmethod def say(self): pass 위와 같이 Animal이라는 객체를 생성해주면 이제 Animal을 상속받는 클래스는 무조건 say 메소드를 구현을 하여야만 객체의 생성이..
제목과 같은 문제가 자꾸 발생해서 짜증이 나던중 해결법을 찾아보았습니다. 당연하게도 또한 다행이지만 저와 같은 문제를 겪고 해결을 하고자 하신 분들이 많았습니다. 그중에서 가장 좋다고 생각하는 방법을 공유합니다. 아래의 블로그를 들어가보시면 아시겠지만 cmd창에서 아래와 같은 내용을 쳐보시기 바랍니다. set LC_ALL=ko_KR.UTF-8 만약 위와 같은 내용을 치고 문제가 해결이 되었다면 간단합니다. 이제 환경 변수에 위의 내용을 입력하면 됩니다. 방법은 다음과 같습니다. 먼저 시스템 속성 > 고급 탭으로 이동하여 하단의 환경 변수를 클릭합니다. 다음으로 아래 보이는 이미지와 같은 창에서 시스템 변수의 새로 만들기를 클릭합니다. 아래와 같이 입력하시고 계속 확인을 눌러 열려진 창을 모두 꺼주시면 해..
- Total
- Today
- Yesterday
- 한글깨짐
- git log
- 안드로이드
- 한글 깨짐
- cmd
- 심플 팩토리 패턴
- Windwos
- 플라스크
- Apache
- 파이썬
- 깨짐
- 한글
- 팩토리 패턴
- flask
- 구글맵
- Windows
- 팩토리 메소드 패턴
- 추상 클래스
- Google Map
- django
- 웹
- 구글 맵
- Git
- Python
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |