차근차근 생활 & 코딩

우린 미리 정해놓은 item에 창, 방패, 총이라는 항목만 넣고 싶다는 가정을 해봅니다. 하지만 누군가 저기에 수기로 작성하다 보면 다른 것들을 넣을 수 있는 경우가 있습니다. 그럼 그걸 방지할 수 있도록 유효성 검사를 통하여 다른 값을 넣지 못하도록 하겠습니다. 데이터 > 데이터 유효성 검사 여기 경로를 통해 팝업 창을 뛰우도록 하겠습니다. 정상적으로 잘 작동 했다면 아래와 같이 데이터 유효성 팝업창이 뜨게 됩니다. 우린 유효성 조건에서 모든 값을 클릭하면 목록이라고 콤보 박스가 펼쳐지게 됩니다. 그럼 목록을 선택해주도록 하겠습니다. 목록을 잘 선택하셨다면 아래와 같은 화면이 나오게 됩니다. 그럼 우리가 아까 창, 방패, 총 이렇게 입력할 수 있도록 값을 넣어 보도록 하겠습니다. 원본 input상자 안..

이번 시간에는 Django(장고)의 마이그레이션 기능에 대해 알려드리도록 하겠습니다. 마이그레이션(migration)이란? : 테이블 및 필드의 생성, 삭제, 변경 등과 같이 데이터베이스에 대한 변경사항을 알려주는 것이라고 합니다. 데이터베이스 TABLE 신규 생성, 테이블 변경 등 이를 데이터베이스에 실제로 반영해주는 작업을 해야 합니다. Django(장고)는 이러한 작업을 우선적으로 해주어 사용자의 편의성을 도모한 것 같습니다. 하지만 처음 접하는 입장에서 보면 도대체 무슨 말을 하는지 알 수 없습니다. 저 또한 그냥 클래스 모델을 만들고 makemigration, migrate 명령어를 두 개를 그냥 순차적으로 입력해 주면 된다고 외워서 개발을 했던 기억이 있습니다. 하지만 개념만 잘 알고 가시면 ..

이번 시간에는 절대 경로 설정 방법에 대해 알려드리도록 하겠습니다. 처음 절대 경로를 설정하지 않으면 상대 경로를 이용하여 개발을 진행합니다. 상대경로로 이용하면 굳이 코드를 건드리지 않고 작업하기 편하니까요. 하지만..../../../ 이런 무한적인 반복으로 인해 먼가 잘못되었다는 것을 깨닫습니다. 처음부터 설정하고 작업을 진행 할 것이라는 슬픈 생각에 빠지게 됩니다. 절대 경로를 무조건 설정해야 하는 것은 아닙니다. 상대 경로든 절대 경로든 여러분들께서 편하신 방법대로 하시면 됩니다. 절대경로에 설정은 너무 너무 쉬우니 걱정하지 않으셔도 됩니다. } Step 1. NPM 라이브러리 설치하기 절대 경로를 편하게 지정하기 위해 만들어져 있는 라이브러리를 사용하도록 하겠습니다. $ npm install -..

이번 시간에는 장고 CSS, JS, Font, 이미지 이런 정적 파일에 대한 관리 및 설정 방법에 대해 알려드리도록 하겠습니다. Step 1. static 폴더 경로 지정하기 settings.py 파일을 수정하도록 하겠습니다. static 폴더의 경로를 지정해 주는 작업을 하였습니다. #mysite/settings.py import os from pathlib import Path BASE_DIR = Path(__file__).resolve().parent.parent STATIC_URL = '/static/' STATIC_DIR = os.path.join(BASE_DIR, 'static') STATICFILES_DIRS = [ STATIC_DIR, ] STATIC_ROOT = os.path.join(B..

저번 시간에는 클래스(Class) 형으로 input을 통해 데이터를 전달하는 것을 알려드렸는데요. 이번 시간은 함수(Hook) 형으로 input 만드는 법에 대해서 알아보도록 하겠습니다. Step 1. 함수형 템플릿 만들기 우리가 앞으로 작업해야 하는 함수형 템플릿을 만들도록 하겠습니다. import React, { useState } from 'react'; const InputForm = () => { return ( ) } export default InputForm; Step 2. State 정의하기 클래스(Class) 형에서는 this.state={username: '', password: ''} 이런 식으로 정의했었습니다. 하지만 함수(Hook) 형을 사용하시는 분들께서는 클래스(Class) ..

이번 시간에는 EXPO 설치에 대해서 알아보겠습니다. 설치 방법은 너무 간단합니다. Step 1. EXPO 설치하기(Installing Expo) NPM을 이용하여 엑스포를 설치하도록 하겠습니다. * 코드 2개 중 본인이 편한 코드를 한 개 선택하셔서 설치하시면 됩니다. $ npm install --global expo-cli 또는 $ npm install -g expo-cli Step 2. EXPO 신규 앱 만들기 (Create a new app) 설치가 완료되었으면 신규 앱을 만들어 봅니다. 명령어를 입력하시면 blank, blank (TypeScript), tabs (TypeScript) 같은 선택 화면이 표시되게 됩니다. 현재는 타입 스크립트는 필요가 없기 때문에 기본적인 blank를 선택해 줍니..

이번에 알려드릴 것은 클래스(Class) 타입에서 input을 통해 데이터를 전달하는 것을 한번 해보도록 하겠습니다. 제일 처음으로 우리가 흔히 알고 있는 Form이라는 클래스를 만들어보았습니다. 이건 너무 간단하죠? 이건 누구나 아는 html입니다. 우리가 알고 싶은 건 이런 것이 아니겠죠? 리액트 맞추어 코드를 작성해 보도록 하겠습니다. Step 1. state 추가하기 input에 작성된 값을 넘겨주려면 받을 곳이 필요하여, state 추가가 필요합니다. datavalue라는 state를 추가하도록 하겠습니다. constructor(props) { super(props); this.state = {datavalue: ''}; } Step 2. handleChange 함수 추가하기 input 필드에서..

Admin Site에 로그인하기 위해서 슈퍼유저(Superuser)를 만들어야 하는데요. 슈퍼유저란 장고를 관리하기 위한 관리자 권한을 주는 것이라고 생각하시면 됩니다. 간단한 명령어를 통해 접속하는 방법에 대해 알려드리도록 하겠습니다. 아래 명령어를 사용하시면 슈퍼유저가 생성되게 됩니다. Step .1 슈퍼 유저 생성하기 $ python manage.py createsuperuser 명령어를 입력 후 그림과 같이 처음엔 4가지 항목에 대해서 입력 하시면 됩니다. 1) username: 아이디를 입력하시면 됩니다. 2) Email address: 본인의 이메일을 입력하시면 됩니다. (생략하셔도 됩니다.) 3) Password: 본인이 원하시는 패스워드를 입력하시면 됩니다. 4) Password(again..