학원
1.[JS] 학원 1일차 (07.19~07.25)
2.0803 Git
3.0804 02-Javascript
메모리 --> 저장장치1) 휘발성 메모리 : 전원이 off되면 저장된 데이터가 모두 날라감, 속도 겁나 빠름 --> RAM2) 영구적 메모리 : 직접 삭제하지 않는 이상 영구적으로 저장함. 속도 느림 --> HDD, USB ...프로그램 실행HDD안에 저장되어 있는 실
4.0823 06-배열
반복 횟수 -> 2나누고 소수점 이하를 버린다.이유 : 위의 배열처럼 갯수가 5개 인 경우인덱스로 따지면data\[0] - data\[4]data\[1] - data\[3]끼리 서로 변경만 하면 되고 가운데 위치한 data\[2]는 변경할 필요가 없으므로2번만 반복하면
5.JS - module package.json 파일 생성
package.json을 만들 폴더에서 주소창을 클릭cmd 입력후 엔터 (windows에서만 가능)cmd 창이 열림npm init 입력 후 엔터package name을 입력하라고 나오는데 영어 소문자와 \_(언더바) 만 가능 package name 입력후 엔터이후 나머
6.[JS] 13 - 내장기능 - Array1
const k; k라는 상수를 선언 (바뀌지 않음) Array, Object, JSON의 경우 안의 원소가 바뀌어도 상관없음.고정되는 것은 a의 시작점
7.[JS] 14 - 예외처리
고전적 예외처리개발자가 원하지 않는 상황을 예외시키기 위해 if문으로 대체 -> 예외처리try,catch에러의 종류Syntax Error : 문법에러. 코딩상의 실수이므로 수정하지 않으면 프로그램이 동작하지 않음.Runtime Error : 프로그램 작성 과정에서 논리
8.[JS] 16 - 웹페이지와 JavaScript
JavaScript 코드는 <script></script> 태그 안에서 작성된다.HTML 문서의 어느곳에서나 존재할 수 있다.<head> 태그 안에 JS코드가 위치하는 경우웹 브라우저가 HTML 파일을 실행하는 과정에서 JS소스를 인식하고 JS코드를 해
9.[JS] 17 - 이벤트 처리 - scroll
스크롤바의 Y좌표 const scrollTop = window.scrollY;웹 브라우저의 창 높이 const windowHeight = window.screen.availHeight;HTML 문서의 높이 const documentHeight
10.[JS] 18- HTML 제어하기
HTML 태그 : Element값이 있는 속성 : Attribute값이 없는 속성 : Propertyflex: 1(= flex: 1 1 0)flex-grow 속성과 flex-shrink 속성, flex-basis 속성을 축약해서 flex 속성으로 표현할 때 flex:
11.[JS] 19-HTML 탐색하기
부모요소 : .parentElement 조상요소 : .closest('#ID') 상위 요소들 중에서 주어진 selector를 충족하는 가장 가까운 요소를 검색 -> IE는 지원하지 않음 자식요소 : children 자손요소 형제요소 : previousElem
12.[JS] 20-HTML 생성하기
인터넷 주소에는 특정 컴퓨터의 폴더 내부로 진입할 수 있는 정보가 들어 있음.그 폴더 안의 html 경로를 의미User가 사이트에 점속하은 패킷의 전송을 의미이는 곧 회선비의 지출로 이어짐HTML을 Refresh한다는 것은 위의 반복..innerHTML : 기존 내용
13.[JS] 라이브러리 활용
소스코드를 파일 형태로 분리해서 재사용 가능하게 만든 단위. 형태에 상관없이 조립 가능한 프로그램 조각이라는 의미모듈 중에서 함수나 클래스 단위로 구성된 형태들의 모임.소프트웨어 개발에 쓰이는 하부 프로그램들의 모임이다.(위키백과)쉽게 말하면 모듈과 라이브러리는 동일한
14.[JS] chart.js bar 오류
막대그래프가 걷잡을수 없이 길어지기 시작했다.
15.[JS] 22 - form 요소
text dropdown radio checkbox
16.[JS] try catch
생성자는 객체가 만들어질때 자동으로 실행됨resolve --> .thenreject --> .catchtry catch를 이용할땐 try의 블럭안에 코드가 많을수록 프로그램이 무거워지므로 코드를 최소화 해야한다. try catch finallytry 가 정상실행되면 바
17.[JS] async-await
비동기처리에 대한 이해가 부족해서 조금이나마 이해한 내용을 정리해보려고 한다.수업시간에 실습한 페이지처음에 열리는 페이지 이름을 클릭하면 새로운 html창이 열리고 그 이름의 id를 주소창에 저장하여 (\~~/?id=10103) 해당 id에 대한 정보를 백엔드에서 가져
18.[React] 02-simple-spa
단일 페이지 애플리케이션하나의 HTML 페이지로 다수의 페이지 효과를 내는 구현 방식.장점페이지 이동 없이 JS에 의해 화면이 갱신되므로 실제로 네트워크 통신이 발생하지 않아 실행 속도가 빠르다.단점JS코드가 비대해 질 수 있다. 코드 스플리팅 기법으로 해결가능(코드
19.[React] 01-hello-react
react는 기존 javascript할때와 다르게 폴더를 프레임워크가 생성한다. 프레임워크는 폴더 기준 cmd에서 원하는 위치로 이동한 뒤 프로젝트 생성 (프로젝트 이름은 숫자, 영어소문자만 가능 언더바_도 안됨) yarn create react-app 프로젝트이
20.[React] 03-jsx
{조건 && (조건이 참인 경우 출력할 내용)}조건이 거짓인 경우 표시되는 내용 없음{ true && true && true && false } true가 끝나는 부분이 출력(3번째){조건 || (조건이 거짓인 경우 출력할 내용)}조건이 참인 경우 표시되는 내용 없음
21.[React] 04-props
properties의 줄임말.어떠한 값을 컴포넌트에게 전달해줘야 할 때 props를 사용.컴포넌트에 props를 지정하지 않았을 때를 대비하여 기본값을 JSON으로 정의해 둘 수 있다. (가급적 권장)
22.[React] 07-hook-event
함수형 컴포넌트에서 상태값(state)를 관리하기 위한 기능으로 클래스형 컴포넌트의 LifeCycle에 대응된다. useState, useEffect, useRef, uesReducer . . .
23.[React] yarn add
SPA앱을 만들 때 사용.URL에 따라 실행할 Javascript를 분기한다.sass와 scss 컴파일 기능 제공reset.cssstyled component 지원styled component에서 media query를 쉽게 사용할 수 있게 한다.날짜 처리 기능 제공
24.[React] 11-axios-hooks
setState() 에서 안에 파라미터만 넣는경우와 콜백함수를 넣는 경우 |파라미터|콜백함수| |-------|-------| |상태값에 따라서 후속처리|상태값만 변경| | 화면변경 |useEffect가 실행되지않음 화면변경 x (성능은 더 좋음) | |||
25.[React] 13-Redux
리액트 전역 상태 관리 라이브러리일반적인 컴포넌트 개발시에는 상태값(변수)을 관리하기 위해 라이프사이클이나 hooks을 사용한다.이 경우 각각의 컴포넌트가 관리하는 변수값들이 소스파일 여기저기에 흩어져 있기 때문에 코드 유지보수에 좋지 않다.컴포넌트의 상태 업데이트 관
26.[React] Redux-CRUD
먼저 알아야 할 것 (Slice 액션함수에서) [state]-전달받은 데이터 / [result.meta]-백엔드에게 전송한 파라미터 / [result.payload]-백엔드로부터 전송받은 응답결과 / return 값들은 state로 페이지에 다시 전달된다.