코드펜은 이름에서 알 수 있듯이, 간단히 코드를 작성해서 실행해보고 공유할 수 있는 서비스입니다. codepen.io로 접속 ​ https://codepen.io/

window 에서 cmd 창을 열어준다. ​ 초기세팅 ​ 기본적으로 node.js, npm은 설치가 되어 있어야 합니다. ​ npm init react-app [폴더이름] npm init react-app . -->폴더 안에서 프로젝트 생성하기 npm run start --> 프로젝트 개발 모드 실행하기 ​ ​ ctrl + c--> 프로젝트 개발 모드 실행 종료하기 ​ 2. 크롬에 react 개발자 도구 세팅하기 ​ react developer tools -> 구글 검색 크롬 확장 프로그램 설치하기 구글 개발자 도구에서 components 탭 클릭 ​ 3. 빌드하기 , 빌드 후 확인 실행 ​ npm run build --> 빌드 하기 ​ npx serve build --> 빌드 한 부분 서버 실행 ctr..

파이썬 인터렉티브 모드 파이썬 파일이 없이도 파이썬 실행하기 cmd 창에서 python 명령어를 치면 인터렉티브 모드로 변경됨 quit() 명령어로 인터렉티브 모드 종료

파이썬 파일이 있는 폴더에서 python .[파이썬 파일명].py

CAST(type) : 데이터 타입 변환 signed는 양수와 음수를 포함한 모든 정수를 나타낼 수 있는 데이터 타입입니다. order by CAST(data AS signed) ASC ; -- 형식으로 써야 숫자 정렬이 된다 만약 문자열 타입으로 저장된 숫자값에 소수점이 포함되어 있다면 signed 대신 decimal(소수점이 있는 수를 나타내는 타입)을 적어주고 사용하면 됨

날짜 간의 차이 구하기 날짜 간의 차이를 구하는 함수도 있습니다. DATEDIFF()라는 함수인데요. 여기서 DATE는 날짜, DIFF는 Difference의 줄임말로 '차이'라는 뜻입니다. DATEDIFF(날짜 a, 날짜 b)를 사용하면 '날짜 a - 날짜 b'를 해서 그 차이 일수를 알려줍니다. 예를 들어, DATEDIFF(’2018-01-05’, ’2018-01-03’)의 값은 2입니다. 오늘 날짜를 구하는 함수는 CURDATE() 날짜 더하기 빼기 날짜에서 며칠을 더하고 빼는 것도 가능한데요. 더하는 함수는 DATE_ADD(), 빼는 함수는 DATE_SUB()입니다. DATE_ADD(sign_up_day, INTERVAL 300 DAY)라고 적힌 부분은 sign_up_day 컬럼의 값에 300일을..

# w 는 덮어쓰기 a 기존 데이터에 추가로 작성하기 with open("data/new_file.txt", 'w') as f: f.write("new test file\n")

기본 옵션 open("data/chicken.txt", 'r') 한글이 있는 경우 with open("data/chicken.txt", 'r', encoding='utf-8') as f: for line in f: print(line.strip())

strip : 문자열의 중간 공백은 나두고 앞 뒤의 공백, \t, \n 을 모두 지워줌 str.strip() 선행과 후행 문자가 제거된 문자열의 복사본을 돌려줍니다. chars 인자는 제거할 문자 집합을 지정하는 문자열입니다. 생략되거나 None 이라면, chars 인자의 기본값은 공백을 제거하도록 합니다. chars 인자는 접두사가 아닙니다. 모든 값 조합이 제거 됩니다. str.strip([chars]) >>> ex_str = " hello " >>> ex_str.strip() # 'hello' >>> 'http://www.example.com'.strip('m') # 'http://www.example.co' >>> 'http://www.example.com'.strip('w') # '.exampl..

문자열은 조회 방식은 리스트와 같은 방식으로 쓸수 있지만 리스트와 같은 방식으로 수정은 불가능 인덱싱 가능 # 알파벳 리스트의 인덱싱 alphabets_list = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'] print(alphabets_list[0]) print(alphabets_list[1]) print(alphabets_list[4]) print(alphabets_list[-1]) # 알파벳 문자열의 인덱싱 alphabets_string = 'ABCDEFGHIJ' print(alphabets_string[0]) print(alphabets_string[1]) print(alphabets_string[4]) print(alphabets_string[-1]..

alias는 '가명'이라는 뜻을 가지고 있는데 이는 쉽게 말해 파이썬에서 변수 = 객체 일때, 객체에 변수라는 가명을 정해준다고 생각하시면 됩니다. 이렇게 객체와 변수의 연관짓는 것을 참조(reference) 하나 이상의 참조를 가진 객체는 한 개 이상의 이름을 갖게 되어서 객체가 에일리어스(aliased)되었다고 합니다. 만약 에일리어스된 객체가 변경 가능하면, 변화의 여파는 다른 객체에도 영향을 끼치기 때문입니다. x = [2, 3, 4, 1, 10, 2] y = x y[2] = 15 print(x) print(y) [2, 3, 15, 1, 10, 2] [2, 3, 15, 1, 10, 2] x의 리스트 값은 우리의 예상과 다르게 y와 동일하게 나옵니다. 이는 x가 객체를 참조하고 y 가 x를 참조하면..

Python의 딕셔너리는 키와 값으로 이루어진 자료형 생성 방법 2가지 첫 번째 방법은 중괄호 {}를 사용하는 것이고 두 번째 방법은 내장 함수 dict()를 사용하는 것입니다. #빈 딕셔너리 선언하기 my_dictionary = {} print(my_dictionary) #type() 함수를 통해 자료형을 확인하기 print(type(my_dictionary)) #출력된 결과 #{} # #빈 딕셔너리 선언하기 my_dictionary = dict() print(my_dictionary) #type() 함수를 통해 자료형을 확인하기 print(type(my_dictionary)) #출력된 결과 #{} # 요소가 포함된 딕셔너리 선언하기 dictionary_name = {키: 값} #딕셔너리 선언하기 my..

# 반복문 예제 for i in [1, 2, 3, 4]: print(i, end=", ") # 출력: 1, 2, 3, 4, Python에서의 Range 함수 range(stop) range(start, stop[, step]) start 전달인자는 특정 범위에서 첫 번째 값을 뜻합니다. 만약 range() 함수가 전달인자 하나만으로 호출된다면, Python에서는 start = 0으로 간주합니다. stop 전달인자는 특정 범위를 초과하는 최대 한계치입니다. 특정 범위 안에는 최대 한계치 값이 포함되지 않도록 구현하는 것이 중요합니다. 아래의 예제에서는 기본값인 0으로 시작해서 5보다 작은 정수들이 포함되는 범위를 확인할 수 있습니다. # 전달인자가 1개인 예제 for i in range(5): print(..

반올림 round >>> n = 7/15 >>> n 0.4666666666666667 >>> round(n,2) 0.47 >>> round(n,4) 0.4667 >>> round(n) 0 >>> type(round(n)) math.ceil(i) : 올림 math.floor(i) : 내림 math.trunc(i) : 버림 import math >>> math.ceil(12.2) 13 >>> math.ceil(12.6) 13 >>> math.floor(12.2) 12 >>> math.floor(12.6) 12 >>> math.trunc(12.2) 12 >>> math.trunc(12.6) 12

l = ['a', 'x', 'd', 'w', 'p', 'b'] l.sort() ## 내부적으로 정렬한 뒤 원본에 정렬 결과를 저장 print(l) l = ['a', 'x', 'd', 'w', 'p', 'b'] l = sorted(l) ## 복사본이 생성되므로 l에 다시 그 결과를 할당해주어야한다. print(l) l = ['a', 'x', 'd', 'w', 'p', 'b'] l = sorted(l, reverse=True) ## 또는 l.sort(reverse=True) print(l) l = [('꽁냥이', 100), ('야옹이', 80), ('옹냥이', 90), ('멍멍이', 70)] ## 원소의 두 번째 기준으로 오름차순 정렬 l = sorted(l, key=lambda x:x[1]) ## 또는 l..

numlist = [1,2,3,4,5] len(numlist) # 5 리스트 안의 값의 갯수 numlist.append(3) # 뒤에 3 을 추가 [1,2,3,4,5,3] del numlist[3] # 3번 index 값 삭제 [1,2,3,5,3] numlist.insert(3,37 ) # 3번 index 값 추가 [1,2,3,37,5,3] #리스트 슬라이싱 numlist[0:4 ] # [1,2,3,37] numlist[2: ] # [3,37,5,3] numlist[:3 ] # [1,2,3] # 리스트에 있는 값 확인 하기 primes = [2, 3, 5, 7, 11, 13, 17, 19, 23] print(7 in primes) print(12 in primes) True False primes = [..

# while 문 while 조건: 실행코드 # if 문 if 조건 : 실행코드 else: 실행코드 # elif 문 if 조건 : 실행코드 elif 조건 : # else if 라는 뜻 실행코드 else: 실행코드

자주 쓰이는 표현을 더 간략하게 쓸 수 있게 하는 문법 # 다음 두 줄은 같습니다 x = x + 1 x += 1 # 다음 두 줄은 같습니다 x = x + 2 x += 2 # 다음 두 줄은 같습니다 x = x * 2 x *= 2 # 다음 두 줄은 같습니다 x = x - 3 x -= 3 # 다음 두 줄은 같습니다 x = x / 2 x /= 2 # 다음 두 줄은 같습니다 x = x % 7 x %= 7

파이썬[1](Python)은 1991년[2] 프로그래머인 귀도 반 로섬(Guido van Rossum)[3]이 발표한 고급 프로그래밍 언어로, 플랫폼 독립적이며 인터프리터식, 객체지향적, 동적 타이핑(dynamically typed) 대화형 언어이다. 파이썬이라는 이름은 귀도가 좋아하는 코미디 〈Monty Python's Flying Circus〉에서 따온 것이다. 파이썬은 비영리의 파이썬 소프트웨어 재단이 관리하는 개방형, 공동체 기반 개발 모델을 가지고 있다.CPython 구현이 사실상의 표준이다.

파이썬 공식 홈페이지에서 download 클릭해서 파일 다운로드 받고 설치 ​ https://www.python.org/ Welcome to Python.org The official home of the Python Programming Language www.python.org ​ Pycharm 설치하기 ​ 공식 사이트 검색으로 방문 전문가용, 커뮤니티용 이 있음 전문가용은 유료로 전환 되기 때문에 커뮤니티용을 추천 커뮤니티용을 설치 시에 모든 옵션 선택 추천 ​ https://www.jetbrains.com/pycharm PyCharm: the Python IDE for Professional Developers by JetBrains The Python & Django IDE with intell..

print(type(2)) // print(type(2.2)) // print(type("test")) // print(type("True")) // print(type(True)) // def Hello(): print("test"); print(type( Hello )) // print(type( print )) // 내장 함수

print(" {0},{2},{1} 출력".format("0","2","1")) // 0,1,2 출력 --> 출력 순서를 정할 수 있음 num1= 1 num2=3 print(" {0}/{1}={2}".format( num1 , num2 , num1 / num2 )) // 1/3=0.333333333... print(" {0}/{1}={2:.2f}".format( num1 , num2 , num1 / num2 )) // 1/3=0.33 print(" {0}/{1}={2:.0f}".format( num1 , num2 , num1 / num2 )) // 1/3=0

age = 17 print(str(age)+ "살" )--> 17살 print( "{}살" .format(age))--> 17살 year=2010 month=10 day=15 date_string="오늘은 {}년 {}월 {}일 입니다."; print( date_string.format( year , month, day ) // 오늘은 2010 년 10 월 15 일 입니다. --> 출력

print(int(3.5)) --> 3 출력 print(float(3)) --> 3.0 출력 print(int("5")) --> 5 출력 pring(str(2) + str(5)) --> 25 출력 age = 7 print(age+ "살") --> error print(str(age)+"살") --> 7살 출력 print(int("Hollo")) --> error

print("Hello"*3) --> HelloHelloHello 출력 pring("'/Hello'/") --> 'Hello' 출력 / 를 붙이면 따옴표 출력 가능

소수점을 자동으로 버리는 floor division print(7//2) --> 3 print(7/2) --> 3.5 // 파이썬은 소수가 더 강함 print(8.0//3) --> 2.0 // 하나라도 소수 이면 소수로 표현 print(round(3.14334544654, 2) ) --> 3.14 print(round(3.14334544654) ) --> 3 print(2**3) --> 8 출력 2의 3제곱

Vite라는 프로젝트 생성 도구 Create React App과 비교했을 때 좀 더 라이트한 기능의 프로젝트를 만들어주고, 빌드 속도가 조금 더 빠르다고 알려져 있습니다. 그리고 리액트 프로젝트 말고도 다양한 프로젝트를 생성하는 데 사용할 수 있다는 장점 공식 문서 https://vitejs.dev/guide/#trying-vite-online Vite Next Generation Frontend Tooling vitejs.dev 개발자들이 만든 템플릿 https://github.com/vitejs/awesome-vite#templates GitHub - vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js ⚡️ A cur..

keyof 연산자 객체 타입에서 프로퍼티 이름들을 모아서 Union한 타입으로 만들고 싶을 때 사용합니다. interface Product { id: string; name: string; price: number; membersOnly?: boolean; } type ProductProperty = keyof Product; // 'id' | 'name' | 'price' | 'membersOnly'; typeof 연산자 자바스크립트 코드에서 사용하면 결괏값이 문자열이지만, 타입스크립트 코드에서 쓸 때는 결과 값은 타입스크립트의 타입입니다. const product: Product = { id: 'c001', name: '블랙 후드 집업', price: 129000, salePrice: 98000, m..

typescript : 마이크로소프트가 개발하고 유지하고 있는 오픈소스 ​ TypeScript is JavaScript with syntax for types. 타입스크립트는 자바스크립트에 타입이 추가된 언어 ​ ​ ​ npm init node js 프로젝트 만들기 ​ npm install --save-dev typescript 타입 스크립트 설치 ​ npx tsc --init 노드 모듈 실행 npx, 타입스크립트 컴파일러 tsc, init 초기 설정 파일을 설정하는 옵션 ​ package.json 파일안에 scripts 안에 "build": "tsc" "start" : "node main.js" --> npm start 실행가능 추가 ​ main.ts --> 타입스크립트 파일 생성 ​ npm run b..

쿠키의 SameSite 옵션 쿠키에는 이 쿠키가 어떤 도메인에서만 사용할 수 있는지 설정할 수 있는 옵션이 있는데요. 바로 Domain 옵션과 SameSite라는 옵션입니다. 특히 SameSite 옵션은 다음과 같은 세 가지 값을 설정할 수 있습니다. Strict: 반드시 같은 도메인에서만 사용 가능 (하위 도메인 포함) Lax: 같은 도메인에서만 사용 가능하지만, 유저가 링크를 클릭해서 접속하거나 하는 경우에는 다른 도메인에서도 사용 가능 (기본 값) None: 다른 도메인에서도 사용 가능. Secure 옵션과 함께 사용해야 함. 상황 1: SameSite=Strict를 사용하고 같은 도메인인 경우 예를들어서 codeit.kr이라는 사이트에서 api.codeit.kr이라는 백엔드 서버로 리퀘스트를 보내..