맥에서 블렌더 사용 시 어느 순간부터 G키와 S키 등 특정 단축키가 안 되는 현상이 있었다.검색도 하고 챗GPT에게 물어봐도 알맞은 답변이 나오지 않았다. 아무 키나 누르다가 갑자기 왼쪽 상단 툴박스에 이 녀석이 표시되어 있는 걸 보게 됐다. 원래는 이렇게 표시되어 있었던 녀석이다. 이것 때문인가 싶어서 이전 툴로 바꾸고 싶었는데, 초기 상태에 선택되어 있던 툴로 바꾸려면 T키를 눌러 툴박스를 선택 후 W를 누르면 된다고 챗GPT가 알려줬다. 그런데 뭘 눌러도 이 녀석이 원래대로 돌아가지 않았다. 한참을 아무거나 막 누르다가 갑자기 의심스러운 생각이 들었다. 모든 단축키 표시들의 알파벳이 모두 대문자로 되어 있었다.그래서 설마하고 Caps Lock 키를 눌러 대문자를 활성화한 뒤 다시 단축키들을 입력했더..

클래스 & 함수 타입 컴포넌트 새로운 폴더를 만들고 새 프로젝트를 만든 후 터미널에서 create-react-app을 설치한다. npx create-react-app . npm start 클래스 & 함수 방식 컴포넌트의 props 클래스 방식의 컴포넌트에서는 외부에서 전달된 props 값을 받을 때 this를 사용하지만 함수 방식의 컴포넌트에서는 파라미터를 이용하여 props 값을 받는다. 함수 방식의 인자는 아무 이름으로 정해도 된다. // App.js import React from 'react'; import './App.css'; function App() { return ( Hello World ); } // 함수 방식으로 작성한 컴포넌트 function FuncComp(props) { retu..

Create 구현하기 1. Control 컴포넌트를 작성하고, 이 컴포넌트가 mode를 변경할 수 있도록 onChangeMode props를 추가한다. // Control.js import { Component } from 'react'; class Control extends Component { render() { return ( create update ); } } export default Control; // App.js ... import Control from './components/Control' class App extends Component { ... ... 디버거를 추가하고 create, update, delete를 클릭하면 mode가 변경되는 것을 볼 수 있다. 2. Create..

크롬 브라우저에서 React Developer Tools 확장 프로그램 설치하기 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 7f673317f on 5/31/2022. chrome.google.com 확장 프로그램으로 설치된 Components 탭을 클릭하면 페이지의 실제 컴포넌트를 보여준다. 클릭하면 각 컴포넌트의 props와 값을 볼 수 있다. 직접 값을 변경할 수도 있다. 컴포넌트를 파일로 분..

개발환경 만들기 1. Node 설치 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Create React App 링크 https://github.com/facebook/create-react-app GitHub - facebook/create-react-app: Set up a modern web app by running one command. Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an..

1. 파일 쓰기 1. w모드로 open() myFile = open("file.txt", "w", encoding="utf8") print("강아지 망고는 갈색푸들", file=myFile) print("강아지 망고는 갈색푸들", file=myFile) myFile.close() 2. a모드로 open myFile = open("file.txt", "a", encoding="utf8") myFile.write("망고는 강아지 갈색푸들") myFile.write("망고는 강아지 갈색푸들") myFile.close() 2. 파일 읽기 1. read() myFile = open("file.txt", "r", encoding="utf8") print(myFile.read()) myFile.close() # 강아..

1. 선형 검색 선형 검색 알고리즘은 직선 모양으로 늘어선 요소의 배열에서 앞부터 순차적으로 검색을 수행한다. 선형 검색 알고리즘에서 종료 조건은 2가지이다. 1. 배열의 끝 2. 검색할 값을 발견 보초법은 배열의 마지막 요소로 검색 요소를 추가하여 반복문에서 종료 판단 횟수를 2회에서 1회로 줄이는 역할을 한다. # search 함수 def search(array, n, key): i=0 array.append(key) # array의 마지막에 key를 추가 while(True): if(array[i] == key): break i+=1 # 마지막 요소까지 없으면 i = n으로 while문을 빠져나오게 된다. return i if i != n else -1 # 마지막 요소까지 검색하지 않았다면 인덱스를..

1. sep & end print문에 쉼표(,)를 사용할 때 sep키워드로 구분자를 지정할 수 있다. sep의 기본 값은 빈칸(띄어쓰기)하나이다. print("망고", "강아지") # 망고 강아지 print("망고", "강아지", sep=",") # 망고,강아지 print문의 마지막은 end키워드로 지정할 수 있다. end의 기본 값은 줄바꿈 문자(\n)이다. print("망고", "강아지", sep=",", end="?") # 망고,강아지? 2. 왼쪽 정렬, 오른쪽 정렬, 0으로 채우기 왼쪽 정렬 ljust() & 오른쪽 정렬 rjust() animals = {"망고" : 3, "초코" : 5, "레오" : 10} for name, age in animals.items(): print(name, age..

1. 소수구하기 자연수 n의 소수는 n의 제곱근이하의 어떤 소수로도 나누어 떨어지지 않는 수이다. #소수를 구하는 프로그램 def program(n): prime = [2, 3] # 얻은 소수 i = 5 while i

Python의 함수 형태는 def functionName(argument): 이고 타입을 명시하지 않는다. 함수의 리턴값이 여러개일 수 있다. def plusAndMinus(a, b): return a+b, a-b print(plusAndMinus(3, 5)) # (8, -2) 함수의 인자에 이름을 붙여서 사용할 수 있다. def family(name, age, position): print("이름 : {0}\t나이 : {1}\t호칭 : {2}".format(name, age, position)) family("망고", 3, "강아지") # 이름 : 망고 나이 : 3 호칭 : 강아지 family("망고", position = "강아지", age = 3) # 이름 : 망고 나이 : 3 호칭 : 강아지 인자..

1. 제어문 score = int(input("점수를 입력하세요:")) if score >= 90: print("{0}점은 상위권입니다.".format(score)) elif 70

튜플 튜플은 리스트와 달리 값 변경이나 추가가 불가능하지만 연산 속도가 리스트에 비해 빠르다.(단. 튜플의 내부에 가변요소가 있다면 그 요소를 변겅하는 것은 가능함.)리스트에 사용가능한 함수들 중 값 변경을 제외한 조회 관련 함수들(count, index 등)도 사용할 수 있다. 1. 표기 fruits = ("사과", "딸기") print(fruits[0]) # 사과 2. 활용 animal, name, age = "강아지", "망고", 3 print(animal, name, age) Set Set은 집합의 특성을 가지기 때문에 순서가 없고 중복값이 허용되지 않는다. 1. 표기 language = {"JAVA", "JAVA", "C", "Python"} print(language) # {'JAVA', 'C..

리스트 1. 표기 fruits = ["사과", "배", "망고", "파인애플"] 2. 추가 append fruits.append("딸기") print(fruits) # ['사과', '배', '망고', '파인애플', '딸기'] 3. 중간에 삽입 insert fruits.insert(1, "사과") print(fruits) # ['사과', '사과', '배', '망고', '파인애플', '딸기'] 4. 마지막 요소를 꺼냄 pop print(fruits.pop()) # 딸기 print(fruits) # ['사과', '사과', '배', '망고', '파인애플'] print(fruits.pop()) # 파인애플 print(fruits # ['사과', '사과', '배', '망고'] 5. 특정 요소의 개수를 체크 coun..

1. 기본 포맷 print("a" + "b") # ab print("a", "b") # ab print("망고는 %d살입니다." % 3) # 망고는 3살입니다. print("망고는 %s을 좋아합니다." % "간식") # 망고는 간식을 좋아합니다. print("알파벳은 %c %c %c ..." % ('A', 'B', 'C')) # 알파벳은 A B C ... 2. format print("망고는 {}과 {}를 좋아합니다.".format("형", "누나")) # 망고는 형과 누나를 좋아합니다. print("망고는 {age}살이고 {favorite}을 좋아합니다.".format(age = 3, favorite = "간식")) # 망고는 3살이고 간식을 좋아합니다. 3. f-string age = 3 favori..

Python도 일반적인 연산자(+, *, -, =, % 등)들을 사용할 수 있다. 익숙하지 않은 연산자는 다음과 같다. 제곱 연산자 ** print(3**2) # 9 몫 연산자 // print(10//2) # 5 & 연산자와 | 연산자는 각각 and와 or로도 사용가능하다. 일반적인 수학 함수 예제 print(abs(-10)) # 10 print(pow(4, 2)) # 4 ^ 2 = 16 print(max(5, 12)) # 12 print(min(10, 6, 13)) # 6 print(round(3.14)) # 3 print(round(8.9)) # 9 math 라이브러리를 import하면 아래 함수도 사용가능하다. from math import * print(floor(3.99)) # 3 print(c..

1. 숫자와 문자 print(3.14) #3.14 print(10000000000000000000) #10000000000000000000 print(3*(3+5)) #24 print("풍선") #풍선 print('T' * 8) #TTTTTTTT print('풍' + '선') #풍선 2. 참과 거짓 print(5 > 10) #False print(5 10) #True 3. 변수 name = '망고' category = '강아지' age = 3 favorite = '간식' is_dog = category == '강아지' print(name + "는" + category + "입니다.") print("나이는 " + str..

피그마의 가장 큰 특장점 : 컴포넌트 컴포넌트는 재사용이 가능한 최소의 단위라고 정의할 수 있다. 컴포넌트라는 개념은 개발 / 디자인 분야에서 많이 사용하는데, 처음에는 이해하기 어려울 수 있다. UI/UX를 구성하다 보면, 복사 + 붙여넣기를 많이 이용하게 된다. 이 때 복사 + 붙여넣기가 필요한 부분이 아주 작은 부분(ex. 일반 텍스트, 도형, 단순 글꼴이나 색상)일 수도 있고, 앱 또는 웹의 한 페이지 정도의 많은 요소들로 이루어진 복잡한 부분일 수도 있다. 목차 - 간단한 텍스트 추가하기 - 간단한 텍스트를 컴포넌트로 만들기 - 컴포넌트를 변경하여 인스턴스에 함께 적용하기 - 컴포넌트화 되돌리기(Undo) - Tip 간단한 텍스트 추가하기 피그마 프로젝트를 하나 만들고, 간단한 텍스트를 추가한다..

흔히 객체지향 언어라고 하면 클래스를 떠올리지만, 객체지향 언어는 크게 클래스 기반 언어(ex: java, swift)와 프로토타입 기반 언어(ex : javascript)로 분류할 수 있다. 다음은 클래스 기반 객체지향 언어의 클래스와 객체 개념에 대한 글이다. 클래스는 '틀', 객체는 '실체' 자동차를 예로 들면 클래스는 자동차를 만드는 틀, 객체는 실제로 만들어진 자동차를 의미한다. 클래스는 속성(property)과 메소드로 구성된다. 아래 Car 클래스로 만들어진 자동차는 엔진, 바퀴, 차체 등의 속성을 가지고 있고 시동을 거는 기능, 브레이크를 밟는 기능을 메소드로 가지고 있다. Car 클래스 class Car { var engines : String //엔진 var wheels : String..

웹 상에서 다른 사이트의 정보를 그대로 복사하여 쓰고 싶을 때, XML/HTML의 형식을 파싱하여 원하는 정보를 가져올 수 있다. 아래 라이브러리를 사용하면 간단하게 원하는 정보를 크롤링할 수 있다. 영어 문서지만 사용 방법이 간단하고 익숙해지면 유용하게 사용할 수 있다. 다운로드 및 링크 : https://simplehtmldom.sourceforge.io PHP Simple HTML DOM Parser $html = str_get_html(' Hello World '); $html->find('div', 1)->class = 'bar'; $html->find('div[id=hello]', 0)->innertext = 'foo'; echo $html; $html = file_get_html('http:..