선초코

node 설치 yarn 다운로드 확장팩 prettier 설치 gitbash에 yarn create react-app week-1 입력 (우리는 아직 초보니까 세트로 깔아주었다) vscode에서 터미널 켜고 yarn start 했더니 오류가 났다 yarn : File C:\Users\Seon\AppData\Roaming\npm\yarn.ps1 cannot be loaded because running scripts i s disabled on this system. For more information, see about_Execution_Policies at https:/goripts i.micros .micros oft.com/fwlink/?LinkID=135170. At line:1 char:1 + ..

styled-component 이용해보기 yarn add styled-component 명령창에 입력 vscode-styled-components 플러그인 다운로드 (손에 매니큐어 칠하는 이미지) import styled from "styled-components"; // 스타일 컴포넌츠를 임포트한다 import "./App.css"; const StBox = styled.div` //백틱 안에 넣어준다. div 말고 다른 태그들도 된다. width: 100px; height: 100px; border: 1px solid red; margin: 20px; `; function App() { return 박스; } export default App; 색 정보를 props로 넘겨줄 수 있다. 부모가 자식 컴..

1-2. 파이썬 시작하기 파이썬이란 우리의 언어를 컴퓨터 언어로 바꿔주는 일종의 번역팩 읽기 쉽게 만든 언어 초보자들에게 진입장벽 낮다 무료/오픈 소스로 운영되고 커뮤니티가 커서 직접 구현하기 힘든 기능 다른 개발자의 라이브러리를 이용해 쉽게 코딩할 수 있다. 파일 생성 프로젝트 생성 초록색 실행버튼은 클릭하면 실행이 되지만 가끔 내가 보고 있는 파일이 아닌것을 실행해 줄 때가 있다. 1-3. 변수 선언과 자료형 변수 선언 (변수의 값은 정수, 소수, 문자열, boolean, 비교 연산자 ) a = 2 # 2를 a에 넣는다. print(a) b = a # b에 들어있는 값인 2를 b에 넣는다. a = 7 #a에 새로운 값을 넣어준다 print(a, b) # 결과 7, 2 프린트 숫자형 사칙연산, 나머지 ..

1-1. 시작하기에 앞서 데이터의 입력 ⇒ 처리 ⇒ 출력이 바로 프로그램이 하는 일이고, 프로그램이 정해진 방식에 따라 일할 수 있도록 작성해놓는게 코딩 도구를 이용해서 코딩 ⇒ 프로그래밍 언어 (문법이 있다) Node.js 는? 컴퓨터 언어 번역기 (javascript 전용) 1-2. Hello World Visual Studio Code - 코딩을 더 쉽게 바꿔주는 툴? 파일 ⇒ 새파일 ⇒ hello.js 만듦 자동 완성시켜주는 것을 툴팁이라 부르신다 문자열 적어줄 때 쌍따옴표 또는 작은 따옴표안에 넣어주면 된다. 하얀 점이 생기는 것은 저장 안되었다는 뜻 터미널에서 새터미널 선택하면 터미널 창이 켜진다 node + 파일명 엔터 ⇒ 파일 실행하여 글자 뜬다 선택해서 ctrl + / 도 주석으로 만들어..

대충 - Google Slides (설명 PPT) 웹서비스는 어떻게 작동하는가? 식당에서 우리가 요청을 하면 서버분들이 응답해준다. -웹서버란? 웹이라는 서비스를 제공해주는 곳 (서버는 컴퓨터) AWS는 서버용 컴퓨터를 빌리는 것 -어떻게 서버에 요청을 보내나요? 서비스는 브라우저를 통해서 요청한다. 나와 브라우저를 묶어서 클라이언트라고 한다. 요청은 url로 하는 것이다. (get 방식, post 방식) app.py에서 응답해주는 것 중 하나인 def home: 을 살펴보자 응답은 여러 종류가 있지만 여기에서는 render을 해주었다. 예시) 네이트에 로그인 시도했을 때 아이디와 패스트워드와 같은 내용을 url에 담아서(그릇같은 역할) 서버에 보내준다 응답은 내 아이디와 패스워드를 받아주고 그에 맞는 ..

JS로 하는 SPA Javascript 로 하는 Single Page Application 특강 듣는 이유는? 우리는 react라는 프레임워크 배울텐데 그게 SPA 방식을 이용한다. 내일 파이어베이스 강의에서 소개할 코드도 SPA 방식 이용한다. MPA vs. SPA 개념 이해 MPA - multi page application 서버 사이드 렌더링 매번 새창을 서버에서 가져다준다 ex) 우리가 이전 미니 프로젝트에서 썼던 방식, 비수기 소개 페이지 HTML 통째로 서버와 클라이언트랑 주고 받는다. 네트워크 창을 확인해보면 다른 창 넘어갈 때 서버에서 모든 내용을 다 그려서 새로 받아온다. 다른 창으로 갈 때 깜빡인다. SPA - single page application 클라이언트 사이드 렌더링 처음에는..

커밋해시와 태그 커밋 해시: 각각의 커밋에 주어진 고유한 정보 (가독성을 위해서 앞부분만들 따서 짧게 쓰기도 한다) 태그: 특정 커밋을 더 가독성있게 지칭할 때 사용 (커밋에 붙이는 꼬리표) -해시로 커밋을 지칭할 수 있는데 왜 태그를 사용하나? 유의미한 커밋에 달아주어 분기를 표시 할 수 있다. 사용자들에게 배포하기 전 마지막 커밋같은 곳에 붙인다. ex) 0 0 0 0 0 0

git과 github 특강을 들었다. git이 필요한 이유- 변경사항(버전)을 관리하는 도구 1. 변경한 내용을 기억할 수 있다 2. 변경한 작업을 되돌릴 수 있다 3. 여러명의 코드를 쉽게 나누고 합칠 수 있다. github의 기능 인터넷상에서 깃으로 관리한 프로젝트를 관리해준다. 개발자들 sns기능도 함 git이 관리하는 3개의 공간 -작업디렉토리(.git 파일이 있는 디렉토리, 버전관리 대상이 위치함) ↓ add 한다 -스테이지(버전 후보들이 들어가는 곳) ↓ commit 한다 -저장소(버전이 만들어지고 관리되는 공간) (영어로는 repository, 레파지토리) 로컬 git 이용방법 1. window에서는 git bash를 다운로드 받고, 켠다. 2. cd 파일명 해서 원하는 파일에 들어간다. 3..

js 생긴 이유 동적인 웹페이지를 만들기 위해 만들어진 언어 페이지 불러오는 과정 1. url로 클라이언트(나 + 브라우저)가 서버에 요청 보냄 2. 요청 받아서 서버에서 클라이언트로 html 보냄 3. 브라우저에서 html을 해석하고 object로 만듦 (파싱) - 해석해주는 엔진이 브라우저 안에 있음 4. dom (document object material) tree 만듦 dom으로 만들면 javascript가 알아볼 수 있음 dom은 속성과 메소드를 가짐 5. css 있으면 cssom(css object material) tree 만듦 6. dom, cssom 합쳐서 render tree 만듦 7. 그걸 기계어로 해석? 그런 다음에 브라우저에 뿌려줌? 이라고 들었던 것 같은데 속성과 메소드 구분 ..

index.html을 바라보고 div root가 있다 그리고 그 안의 App.js를 연결해주는 것은 Index.js이다 프롭스는 프로퍼티스 성효진님 투두 인것 같은데 const App() {}을 쓰는 것 함수형 프로그래밍 구조분해할당 destructuring {}안에 키값 넣어준다. 태그 안에 들어간 것들은 칠드런 구조분해 할당한 애들은 중괄호 안에 넣어서 써야한다. 빈태그로 감싸주면 div 넣지 않아도 안에 자유롭게 추가 할 수 있다 리액트는 사용자가 만들어 놓은 jsx 코드를 렌더링을 한다. state와 props의 변화에 따라 동적으로 렌더링 props로 폼태그 안에 버튼이 있으면 버튼을 클릭하면 submit이 자동을 되어서 onsubmit이 호출이 된다. 회원가입 폼같을 것을 제공하는 것이 폼태그..