본문 바로가기
728x90
반응형
SMALL

전체 글675

[React.js] 단숨에 라우팅 이해하기 :: Routing 리액트로 여러개의 페이지를 구축할 수 있어요. 주소창에 /admin, /user 등을 입력하면 서로 다른 페이지를 보여주는거죠. 그걸 라우팅이라고 불러요. 우선 간단하게 해시를 이용할께요. 주소창에 /#a를 입력하면 A 컴포넌트를 보여주고 /#b를 입력하면 B 컴포넌트를 보여주면 될 것 같네요. import { useState } from 'react'; function A() { return A 페이지; } function B() { return B 페이지; } function App() { const [hash, setHash] = useState(document.location.hash); function onHashChanged() { setHash(document.location.hash); }.. 2021. 7. 17.
[React.js] 단숨에 JSX 알아보기 React.createElement()를 많이 쓰면 코드 파악이 어려워요. 그래서 HTML과 유사한 방식으로 컴포넌트들을 생성할 수 있도록 JSX가 나왔어요. create-react-app으로 프로젝트를 생성해요. npx create-react-app jsxtest src/App.js를 열어보면 div, img, p, a 등 익숙한 태그들이 보이죠? 컴파일 하면 HTML로 변환되지만 현재 상태는 리액트 컴포넌트에요. class 대신 className을 쓰고 for 대신 htmlFor를 쓰는 등의 차이가 있어요. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to relo.. 2021. 7. 17.
educe :: education education(교육)은 educe(끌어내다, 추출하다)라는 단어에서 유래되었다. 자녀에게 적용해 보자. 무엇을 끌어낼 것인가. 아이의 지식과 지혜다. 그런데 아이에게 지식과 지혜가 없는데 어떻게 끌어낼 수 있는가. 아이에게 책을 선물해 보자. 그 아이는 책을 읽고 어떤 행동을 하는가. 부모나 친구에게 책 내용을 말한다. 여행을 보내보자. 여행지에서 본 것, 느낀 것을 말한다. 안에 있는 것들이 밖으로 나온다. 밖의 것들이 안으로 들어가서 다시 나온다. 지식은 순환이다. 나비 효과와 같은 확장형 대순환이다. 그런데 만약 꺼내려는 아이의 생각을 차단하고 내 생각을 주입하면 어떤 일이 벌어질까. 더 이상 꺼내는 것이 두려워진다. 자랑은 나보다 못한 상대에게 하는 것이다. 부모(선생님)의 역할은 아이에게 좋.. 2021. 7. 17.
단숨에 React.js 이해하기 :: create-react-app 없이 index.html 파일 하나로 끝내보죠. react.js와 react-dom.js만 있으면 돼요. 에 이걸 넣어요. ReactDOM으로 리액트의 루트를 원하는 위치에 끼워넣는다고 생각하면 돼요. 이번엔 클래스 컴포넌트를 만들어 봐요. 이번엔 함수 컴포넌트를 만들어 봐요. 클래스 컴포넌트의 props에 값을 넘겨봐요. 컴포넌트를 재사용할 수 있어요. 함수 컴포넌트의 props에도 값을 넘겨요. 클래스 컴포넌트는 생성주기에 따라 자동으로 호출되는 메소드가 있어요. 태그를 생성할 때 속성값을 넣을 수 있어요. 태그로 해보죠. 한 번 보여주고 끝나는 페이지는 재미없죠? 클래스 컴포넌트에는 state라는 속성과 setState라는 메소드가 있어서 값이 변할 때마다 render가 다시 호출되요. 화면을 다시 그린.. 2021. 7. 17.
아이와 함께 하는 독서 나눔 가벼운 동화 한 권이라도 함께 읽다 보면 할 이야기가 무궁무진해진다. 욕심쟁이 딸기 아저씨는 표지부터 재밌다. 제목의 폰트는 아저씨의 콧수염을 닮았다. 수묵과 펜을 조합한 그림체는 정겹다. 게다가 글과 그림을 모두 작가 혼자서 쓰고 그렸다니 아이에게 탁월함은 이런 것이다라는걸 보여줄 수 있는 기회이다. 이야기 속으로 들어간다. 아저씨는 왜 딸기를 좋아하게 됐을까. 사람들은 왜 아저씨를 욕심쟁이라고 생각하고, 아저씨는 왜 사람들에게 화를 낼까. 딸기를 집 안 가득히 채우려면 돈이 얼마나 필요할까. 마트는 몇 번을 다녀와야 하지. 배달이 될까. 배달이 된다면 어떤 앱을 썼을까. 상하지 않게 어떻게 보관하지. 딸기밭을 관리하려면 어떻게 해야 할까. 사람들이 공터에 모여서 수박을 먹던데, 원래 마을 사람들은 딸.. 2021. 7. 12.
교육의 본질과 더 나은 인류로 나아가는 법 교육의 본질은 삶을 즐기고 일을 탁월하게 하며 하나님의 영광을 드러내는 능력을 배양함에 있다. 주변을 둘러보라. 일의 경중에 따라 그 차이가 결정되지 않는다는 것을 알 수 있다. 몸 쓰는 자는 몸 쓰는 것으로, 머리 쓰는 자는 머리 쓰는 것으로, 예배드리는 자는 예배드리는 것으로. 허나, 이 세 가지(영, 혼, 몸)는 별개가 아니요. 하나이되, 그 드러남의 경중이 다를 뿐이다. 교육의 목표는 성과가 아니요. '성과를 통한 재교육'에 있다. 성과는 있되 재교육 하지 않으면 더 탁월한 성과는 없을 것이요. 인류는 더 이상 나아가지 못한다. 다행인 것은 인간의 본성에 심겨진 배움과 가르침의 정신은 성과를 통한 재교육을 가능케 했고 미래에도 이어질 것이다. 따라서, 교육의 목표는 항상 '성과를 통한 재교육'이어.. 2021. 7. 10.
[주엘리아] 아이고고 현대무용 수업 리뷰 :: 유엘 '주엘리아'의 엘! 유엘이의 꿈은 발레리나에요. ‘다양한 방문 클래스가 모여있는 플랫폼' 아이고고에서 현대무용을 배워볼 수 있는 기회가 생겼어요. 인기 많은 나디아 튜터님 수업이에요. 집을 깨끗하게 치우고 선생님을 기다렸답니다. 선생님의 아이스 브레이크 시간. 얼굴에 붙은 포스트잇 떨어뜨리기(얼굴 근육 이용)로 아이의 긴장을 풀어주셨어요. 스트레칭 시간. 유엘이가 상당히 유연하다며 칭찬해주셨어요. 무용 수업 시간. 현대무용의 매력에 푹 빠지는 시간이었어요. 나디아 튜터님이 설명도 잘 해주시고 친절하셔서 동작을 빠르게 익힐 수 있었어요. 수업을 마치면 리포트도 해주세요. 유엘이가 너무 좋아해서 제가 다 뿌듯했답니다. (-: 2021. 6. 3.
[Golang] 웹사이트 헬스 체크 :: Website Health Check 노마드 강의 듣고 기억을 더듬어 코딩했어요. 그래서 코드가 조금 달라요. 일단 고루틴을 안 썼더니 평균 3.5초가 나오네요. package main import ( "fmt" "net/http" "time" ) var urls []string = []string{ "https://yeastudio.kr", "https://google.com", "https://naver.com", "https://yahoo.com", "https://kakao.com", "https://facebook.com", "https://twitter.com", } func main() { tm := time.Now() for _, v := range urls { res, err := checkURL(v) fmt.Println(.. 2021. 5. 5.
[Python] import 와 from...import * 의 차이 import import math print(math.sqrt(4)) # math로 부터 호출 from ... import * from math import * print(sqrt(4)) # 내부 함수처럼 직접 호출 영어, 중국어 공부중이신가요? 홈스쿨 교재. 한 권으로 가족 모두 할 수 있어요! 한GLO 미네르바에듀 : 네이버쇼핑 스마트스토어 한글로 영어가 된다?! 한글로[한GLO]는 영어 중국어 일어 러시아어 스페인어가 됩니다!! smartstore.naver.com 2021. 4. 24.
[Golang] VSCode에서 실행 시 에러가 난다면... VSCode에서 Run 했는데 아래와 같은 에러가 나나요? go: go.mod file not found in current directory or any parent directory; see 'go help modules' 터미널에서 아래 코드를 실행하세요. go env -w GO111MODULE=auto 2023.02.05 - [IT 인터넷/Golang] - Go 언어를 ChatGPT에게 배우다 :: Golang Go 언어를 ChatGPT에게 배우다 :: Golang [ 설치 ] MacOS에서 Go (Golang)을 설치하는 방법은 다음과 같습니다. Go의 최신 버전을 다운로드합니다: https://golang.org/dl/ 다운로드한 파일을 압축 해제합니다. 압축 해제한 폴더를 /usr/local.. 2021. 4. 23.
[Python] Pandas로 csv 파일 읽기 샘플 데이터는 여기서 구해요. people.sc.fsu.edu/~jburkardt/data/csv/csv.html Pandas를 설치해요. pip install pandas main.py import pandas as pd url = "https://people.sc.fsu.edu/~jburkardt/data/csv/tally_cab.csv" x = pd.read_csv(url) for i, v in enumerate(x): print('header', i, v) for rowIndex, row in enumerate(x.values): for columnIndex, column in enumerate(row): print(rowIndex, columnIndex, column) 결과 ('header', .. 2021. 4. 21.
[Python] MySQL 접속 PyMySQL을 설치해요. pip install PyMySQL main.py import sys import logging import pymysql HOST = "수정하세요" PORT = 3306 USERNAME = "수정하세요" PASSWORD = "수정하세요" DATABASE = "수정하세요" def connect(host, port, username, password, database): try: conn = pymysql.connect(host=host, user=username, passwd=password, db=database, port=port, use_unicode=True, charset='utf8') cursor = conn.cursor() return conn, cursor exc.. 2021. 4. 20.
[PHP] VSCode에서 더블 클릭으로 변수명 $까지 선택하기 settings.json을 열어요. (hello는 사용자 이름이에요) 아래 코드를 추가하면 끝. "[php]": { "editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",./?" } 영어, 중국어 공부중이신가요? 홈스쿨 교재. 한 권으로 가족 모두 할 수 있어요! 한GLO 미네르바에듀 : 네이버쇼핑 스마트스토어 한글로 영어가 된다?! 한글로[한GLO]는 영어 중국어 일어 러시아어 스페인어가 됩니다!! smartstore.naver.com 2021. 4. 19.
[Python] 다른 폴더의 파일 import 하기 :: 모듈, Class 테스트를 위해 임의의 폴더를 만들었어요. /aaa/bbb (aaa 밑에 bbb 폴더) bbb 폴더 밑에 MyClass.py를 만들었고요. class MyClass: def __init__(self): print('MyClass') def say(self): print('주엘리아 안녕!') class MyClass2(MyClass): def __init__(self): print('MyClass2') super(MyClass2, self).__init__() MyClass2는 MyClass를 상속해요. 루트(/)에는 Main.py가 있어요. from aaa.bbb.MyClass import MyClass2 mc = MyClass2() mc.say() from 에는 폴더를 . 으로 구분해서 파일명을 넣고, .. 2021. 4. 10.
PM2 시작 시 업로드 폴더는 관찰하지 않도록 해요 Uploads 폴더에 파일을 쓴다면 PM2가 노드를 재시작할거에요. 그러면 파일이 제대로 써지지 않아요. pm2 start app.js --watch --ignore-watch="Uploads/*" 영어, 중국어 공부중이신가요? 홈스쿨 교재. 한 권으로 가족 모두 할 수 있어요! 한GLO 미네르바에듀 : 네이버쇼핑 스마트스토어 한글로 영어가 된다?! 한글로[한GLO]는 영어 중국어 일어 러시아어 스페인어가 됩니다!! smartstore.naver.com 2020. 11. 26.
728x90
반응형
LIST

티스토리툴바