React 란

React란 React 는 페이스북에서 만든 프론트엔드 라이브러리입니다 react는 state, props와 함께 dom 객체를 반환하여 virtual dom을 생성합니다. 그리고 실제 dom에 변경사항을 적용하여 실제 뷰를 렌더링 합니다 특징 컴포넌트 기반 컴포넌트는 독립적 단위 모듈을 의미하는데 여러 모듈을 만들어두고 재사용 하여 필요한 컴포넌트들만 조합하여 새로운 view를 만들어 낼 수 있는것이 특징이다. props props는 javascript 객체로써 렌더링 결과물에 영향을 주는 정보를 가지고 있습니다. props는 함수의 매개변수처럼 컴포넌트에 전달되어 사용되며 오직 상위 컴포넌트에서 하위컴포넌트로 전달됩니다. 그리고 전달받은 props들은 수정할 수 없습니다. state state는 ja..

11장 호이스팅, 클로저

채팅 설문조사 코딩창 호이스팅 이란? 변수와 상수 함수등의 선언을 하고 나서 코드를 실행 시키면 선언된 모든 내용은 가장 위로 끌어 올린다 라는 의미이다. 전역 범위(global scope) 전역 범위에서는 해당 페이지에서 최상단으로 끌어 올려진다. 함수 범위(function scope) 함수 범위에서는 해당 함수의 최상단으로 끌어 올려진다. 그러나 변수의 선언만 끌어 올립니다 할당은 끌어올려지지 않습니다 변수 호이스팅 let은 호이스팅이 일어나긴 하지만 호이스팅은 선언만 할 뿐 실제로 값을 할당하지는 않기 때문에 오류가 나게 됩니다 console.log(num); //error let num = 10; 함수 호이스팅 함수 선언부를 호출부 아래에 뒀지만 실행하는데 오류가 없습니다. add(); funct..

10장 React 기초

채팅 설문조사 코딩창 React란? 리액트는 페이스북에서 개발한 프론트엔드 라이브러리입니다 또한 리액트는 컴포넌트 기반으로 html태그들을 묶어 사용할 수 있으며 개발자가 설계한대로 UI가 사용자에게 보여집니다 리액트를 왜 사용하는가? html과 css등으로만 만들어진 웹페이지는 동적인 데이터를 UI에 뿌려주기에는 적합하지 않습니다. 리액트의 특징 컴포넌트 리액트는 컴포넌트 기반의 라이브러리입니다.. 한 페이지에서 전체 페이지를 하나의 큰 덩어리로 보고 컴포넌트는 그 큰 덩어리를 이루는 요소들의 집합이라고 생각하면 됩니다 리액트는 작은 컴포넌트들로 구성되어 유지보수와 재사용성이 매우 뛰어납니다 그렇기때문에 똑같은 코드를 입력하여 똑같은 ui를 구성할 필요가 없어집니다. 컴포넌트의 종류는 클래스형(stat..

9장 html 기초

채팅 설문조사 코딩창 html 이란? HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다. 이 html 문서는 단순히 텍스트 파일에 불과하고 웹 브라우저가 해석을 해서 구조를 통해 화면에 렌더링 해주게 되고 사용자는 View 라고 하는 스크린을 통해 접하게 되는 것입니다. 여기서 웹브라우저는 dom tree라는것을 해석해 우리에게 화면을 보여주는데 이때 html 태그를 해석하게 됩니다. 돔 트리: html 태그들이 트리형태로..

8장 객체

채팅 설문조사 코딩창 객체란? 객체는 key와 value의 쌍으로 이루어진 데이터 집합입니다. 우리가 실행활에서 인식할 수 있는 사물 이라고 생각하면 됩니다. 말로는 어려우니 직접 예시를 봅시다. 사람 이라는 객체입니다. 객체안에 사람을 표현할 수 있는 여러 정보들이 들어있습니다. const person = { name: "js", age: 10, address: "Seoul/Korea", phone: "01012345678" }; 사용법 const 객체명 = { key : value, key : value, key : value, ... } 여기서 key값은 뒤의 value 값을 가져다 쓸수 있게 해줍니다. 객체명.key를 사용하게되면 value값이 나옵니다. 객체 생성 객체의 value에 또다른 ke..

7장 함수

채팅 설문조사 코딩창 함수란? 자바스크립트에서 함수란 코드의 집합을 나타내는 자료형입니다. 자료형이기 때문에 함수를 변수에 할당할 수 있습니다. 또 하나의 특징은 리턴 값으로 값이나 함수를 반환할 수 있습니다. 함수를 만들면 함수안에 있는 코드의 집합을 언제든지 재사용할 수 있습니다. let num = 1; function add() { return num + 1; } console.log(add()); /////////////////// function add(num) { return num + 1; } console.log(add(1)); /////////////////// function add(num) { console.log(num + 1); } add(1); 형태 1. 함수 선언식 선언식의 문..

6장 반복문

채팅 설문조사 코딩창 반복문이란? 반복은 간단하게 일을 되풀이 한다는 말입니다. 전 시간에 배웠던 배열도 일일이 출력하거나 값을 집어넣는일이 번거로우셨을 겁니다. 그걸 자동화 해주는 일을 반복문이 할수 있습니다. 예를들어 배열에 10가지 과일 이름이 들어있다고 합니다. 이 과일이름을 보여주는데 배열의 개수를 모두 알아내어 하나씩 콘솔로그로 보여주는것은 비효율적인 일입니다. const fruit = ["apple", "pineapple", 'orange', 'melon', 'watermelon']; console.log(fruit[0]); console.log(fruit[1]); console.log(fruit[2]); console.log(fruit[3]); console.log(fruit[4]); 위와..

5장 배열

채팅 설문조사 코딩창 배열이란? 관련있는 데이터를 하나의 변수에 할당하여 편하게 관리하기 위해 사용하는 객체입니다. 지금까지는 변수하나에 하나의 값만 할당이 가능했는데 이제 그럴 필요가 없어졌습니다. let fruit = ['apple', 'pineapple'] console.log(fruit) 배열요소 접근하기 배열의 첫번째요소는 0번째입니다. 그래서 배열의 마지막 요수는 배열의 길이(배열 값의 개수) -1 입니다 let fruit = ["apple", "pineapple"]; console.log(fruit[0]); console.log(fruit[1]); 배열 추가 배열 맨끝에 값을 추가하는 과정입니다 let fruit = ["apple", "pineapple"] fruit.push('orange'..

4장 조건문

채팅 설문조사 코딩창 조건문이란? 지정된 조건에 따라서 조건에 맞으면 코드를 실행하거나 안하게끔 조절 할수 있게 해주는 문법입니다. -아래의 코드를 실습해보며 형태를 간단하게 알아봅시다- let appleCost = 1000; // 사과 가격 let pineAppleCost = 5000; // 파인애플 가격 let myMony = 6000; // 내가 가진 돈 // 처음 사과를 삽니다 myMony = myMony - appleCost; console.log("잔액은", myMony, "입니다"); // 사과를 사고 남은 금액이 5000원 이상이면 파인애플을 살 수 있습니다 if (myMony >= 5000) { myMony = myMony - pineAppleCost; } console.log("잔액은"..

javascript 오류 모음

3장 연산자

코딩창 연산자란? 연산자는 연산을 수행하는 기호를 말한다. 대표적으로 = + - / 등을 말한다. 피연산자는 연산할 때 사용될 변수나 상수이다 연산자의 종류 아주 기초적인 연산자를 몇 개 골라봤습니다 할당 비교 산술 논리 삼항 1. 할당 연산자 할당 연산자는 = 를 말하고 우변을 좌변에 대입한다는 뜻입니다. 선언: 아래와 같이 let 이나 const를 사용하여 작성할 경우 변수나 상수를 선언 한다고 한다. let a; const b; let name; let age; 초기화: 위와 같은 문법으로 선언을 하고 값을 넣어주는 작업 . // 선언과 동시에 초기화 let a = 12; let b = 10; // a에 1을 더해 다시 a에 저장한다 a = a + 1; conssole.log(a); conssole..

javascript Q&A 게시판

2장 변수와 상수

> 변수 변수는 말그대로 변하는 수 입니다. 무엇이 변하냐면 데이터가 변합니다. 게시판을 예로 들면 닉네임 게시글 댓글 모든것이 다 데이터로 이루어져 있습니다. 이런 데이터를 처리하기 위해서는 저장해 둘 공간이 있어야 하는데요 이 공간을 변수 라고 합니다 이 공간에는 여러가지 데이터들이 저장되고 삭제 될 수 있습니다. 마치 상자에 물건을 넣었다가 비웠다가 할수 있는것 처럼 말이죠. 아래 그림을 참고 하면 이해가 쉬울 겁니다. 변수의 사용법: let 변수명 = 데이터 상수 상수는 변수와 반대로 변하지 않는 수 입니다. 데이터가 한번 공간에 저장이 되면 나중에 원래 있던 데이터를 비우고 새 데이터로 대체 할수 없는 특징이 있습니다. 상수의 사용법: const 상수명 = 데이터 ** 프로그래밍 언어에서의 '=..

1장 javascript란 무엇일까?

자바스크립트의 탄생 초기의 웹은 변화하지 않는 정적인 글자로 꾸며진 HTML 페이지였고, 넷스케이프 사는 가벼운 프로그램 언어를 통해 HTML 페이지에 움직임을 주고 싶어 프로그램 언어를 추가하기로 결정했습니다. 그래서 Brendan Erich(브랜든 아이크)를 고용했는데, 그가 10일 만에 만든 언어가 자바스크립트입니다. 이름이 자바와 비슷하고 비슷한 문법을 가지고 있으나실질적으로는 많이 다른 언어이다 왜 자바스크립트인가요? 처음에는 livescript 라는 이름을 썼지만 그당시 java라는 언어가 대세였고 홍보차원에서 javascript라고 이름짓게 되었습니다. 자바스크립트는 컴파일 언어인 동시에 인터프리트 언어이다 컴파일: 어떤 언어로 작성된 코드를 다른 언어로 바꾸는 것 인터프리터: 어떤 언어로 ..

Typescript 시작하기

Typescript란: 자바스크립트의 var 와 같은 자료형 대신, string, number와 같은 자료형을 지정함으로써 안정성을 확보하고 TypeScript를 설치할 때 같이 설치되는 tsc(TypeScript Compiler)는 **컴파일 과정**에서 타입 검사를 통해 에러 없이 안정성이 확보되면 타입들을 제거하고 최종적으로 자바스크립트 코드를 생성한다 컴파일 = 타입검사 + 런타임 = javascript 코드로 변환 jsx: react 에서 component를 생성하는 javascript문법이 사용하기 어렵거나 가독성이 떨어지기 떄문에 이를 간편하게 표현해주는 표현식이다 jsx문법 import React from 'react'; const App = () =>{ return( tech hello ..

Django Framework

Django란? 파이썬으로 만들어진 무료 오픈소스 웹 애플리케이션 프레임워크(web application framework)입니다. Django 구조 이미지 출처: https://velog.io/@monsterkos/TIL-2020.06.05 MTV 디자인 패턴 Model: database 스키마를 정의하고 CRUD를 가능하게 한다 Templates: 사용자 UI (html) View: 서버, 모든 로직을 처리하는 controller, 사용자의 요청은 url에 따라 서버에 있는 함수를 실행 시키고 model에 접근할 수도 templates에 접근할 수도 있다 Django 사용법 1. 프로젝트를 담을 폴더 생성 컴퓨터 적당한 디렉토리를 골라 폴더 하나를 만든다. 2. 가상환경 생성 python -m ven..

OSI 7계층

OSI 7계층은 왜 만들어 졌을까? 개요: 여러 통신 장비들이 존재하지만 서로 다른 회사의 통신 장비끼리 호환이 되지 않아 정보를 주고 받는데 어려움이 있다-> 표준화가 필요함 -> ISO 단체에서 OSI 7계층 참조모델을 발표. 목적: 1. 비용절감(ex. 3계층 장비인 라우터의 개발) 2. 학습도구 구성 7개 계층으로 구성:(위부터) 7.응용 6.표현 5.세션 4.전송 3.네트워크 2.데이터링크 1.물리 계층으로 분류. (7->1)계층으로 이동할 때마다(전송과정) 헤더(header)을 추가함.-> 캡슐화(encapsulation)(1->7)계층으로 이동할 마다(수신과정) 헤더(header)를 제거함.-> 디캡슐레이션(decapsulation) ●아래 그림이 데이터 전송 단위를 결정 짓는다. data에..

파이썬 입출력과 삼항연산자

############################## # sep은 print이후에 number = int(input()) value = 10000 for i in range(5): number1 = number // value print([number1*value],sep='\n') number = number - number1*value value = value // 10 ############################## time = input().split(':') print(int(time[1])) ############################ date = input() year, month, day = date.split('.') print(day+'-'+month+'-'+year) ..

SW model 종류와 특징

Software Engineering Models 😀 점증적 개발 특징 초기 구현을 개발하고 사용자와 다른 사람들로부터 피드백을 받아 여러버전을 거쳐 소프트웨어를 진화시켜 요구한 최종 시스템을 개발한다. 명세화, 개발과 검증 활동은 분리되었다기 보다는 활동 간 빠른 피드백을 가지고 중첩되어 있다. 시스템과 소프트웨어 제품을 개발하는 데 있어서 가장 일반적인 접근법이다. 계획주도 접근법에서는 시스템의 증가분을 미리 찾아서 정리한다. 요구사항이 개발 프로세스 과정 동안에 쉽게 바뀌는 시스템에 대해서는 애자일 방법의 기본적인 사항에 해당하는 점증적 소프트웨어 개발이 폭포수 접근법보다 적합하다. 점증적 개발은 엔지니어가 문제를 해결하는 방식을 그대로 반영한다. 시스템에 대한 각각의 증가분이나 버전은 고객이 필요..

Anaconda VScode 설치

Anaconda 설치 (홈페이지에서 다운로드 후 실행) add path 경로선택 anaconda prompt 에서 가상환경생성 (conda create -n myvenv python=3.7) - 가상환경 활성화 conda activate myvenv 가상환경 비활성화 conda deactivate 가상환경 삭제 conda remove -n myvenv --all vscode 에서 ctrl + shift + p select python interpreter - Anaconda pip install django pip install tensorflow

Django dbsqlite3 오류

프로젝트를 만들다 보면 migrate migrations을 빈번하게 하게된다. 그런데 재수 없게도 db가 꼬여버리는 경우가 생긴다 이때의 해결법이다 1. console 창에 find . -path "*/migrations/*.py" -not -name "__init__.py" -delete find . -path "*/migrations/*.pyc" -delete 2. db.sqlite3 삭제한 뒤 다시 python manage,py makemigrations -> python manage.py migrate

django email 라이브러리

settings.py # gmail EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' EMAIL_HOST = "smtp.gmail.com" EMAIL_HOST_USER = '000@gmail.com' EMAIL_HOST_PASSWORD =' ' # 2단계 보안 인증 비밀번호=(앱 비밀번호) EMAIL_PORT = 587 # 권장 gmail smtp포트 EMAIL_USE_TLS = True #tls 보안 DEFAULT_FROM_EMAIL = EMAIL_HOST_USER #naver EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' EMAIL_HOST = "smtp.naver.com" E..

django excel 불러오기 및 생성 하기

settings.py # 엑셀 파일 업로드 핸들러 FILE_UPLOAD_HANDLERS = ("django_excel.ExcelMemoryFileUploadHandler", "django_excel.TemporaryExcelFileUploadHandler") bash pip install django-excel # 엑셀을 데이터베이스에 매핑 시키는 라이브러리 pip insrtall openpyxl # 엑셀 crud 라이브러리 pip install pyexcel-xlsx # xlsx 확장자를 다루는 라이브러리 (csv xls 도 있음) views.py # 엑셀을 생성 및 행 추가 (여기서는 행 단위 추가만 함 열만 추가하는건 검색 바람 ) from openpyxl import Workbook # 엑셀을 만..

Django 명령어 모음

프로젝트 폴더 생성 - 컴퓨터 적당한 곳에 만들어라 python -m venv 이름: - 가상환경 생성 source 이름/scripts/activate - 가상환경 실행 (source -> . replace) pip3 install django - 장고 설치 uninstall 반대 특정 버전 : django==2.1.3 django-admin startproject 이름 - 새 프로젝트 생성 python manage.py startapp 이름 - 새 앱 생성 (python -> ./ replace) python manage.py runserver - 서버 실행 python manage.py makemigrations - 마이그레이션 디렉토리와 파일을 생성 python manage.py migrate - ..