25.10.29 15일차 [ javascript_function,array,object | html_로그인처리 구현, 데이터 시각화 기초]
Datadesigner2025. 10. 29. 12:47
오늘은
javascript
함수
배열
객체
html
로그인 처리 구현
데이터 시각화 기초
에 대한 수업을 진행했다.
javascript
함수 -> 어제에 이어서
외워야 할 포인트 함수의 문법 콜백함수(람다같은 일회성 함수, 함수명이 따로 없으면 콜백함수,익명함수) 비동기처리와 함께 사용 동기 | 비동기 차이 동기 => 순서대로 처리,1번 끝나야 2번, python, java, springboot 비동기 => 병렬 처리 가능, 1번과 2번 함께 진행, node, javascript, fastapi for 문, 아 하나씩 대입할때면 for 문 또는 map을 쓰는구나 map에 함수를 대입하는게 람다함수, 익명함수구나!
1. 표준 함수 표준 함수의 문법결과값 3
function 함수명(인자, 인자) { 반환값 반환식(statements) } 기본 문법이다. 결과값 9
두 개 이상의 식이 있을때에는 수학처럼 소괄호로 묶어주면 우선순위를 지정한다,
2. 익명함수 결과값 9
함수명을 먼저 지정하고 표준함수에서 함수명을 제거한 함수이다. 함수 자체가 표현식으로 묘사된다. 그리고 cal2를 map()이나 filter()등 다른 함수의 인자로 사용할 수 있다. 결과값 apec 2025 / 경주 2026 / 경주2 2025 / 2027 2025
표준 함수에서 인자에 기본값을 부여하는 것이다, 매개변수(parameter)라고 하며 기본값이 부여되어 함수를 호출할 시에 다른 값을 지정하지 않으면 기본값을 출력한다. 포맷팅을 통해서 함수에 값을 부여한다. 네 가지 값을 확인할 수 있다, 이때 4번째 값은 값을 지정해준다 하더라도 상관없이 순서대로 재생되는것을 볼 수 있다. 결과값 9
3. 화살표함수 ES6에서 추가되었다. 함수를 아주 간결하게 표현할 수 있으며 => 수행문이 하나인 경우 람다함수와 비슷하게 생겼다. 문법 () => {} 이지만 모두 특정한 조건에 따라 생략 가능하다 return을 지우면 {}도 지워야한다.
함수 내용 정리
배열 파이썬의 리스트와 유사 [] 대괄호 기호 서버와 통신결과 json {} 파이썬의 딕셔너리와 유사 1. 배열 정의
let으로 arr에 배열을 정의해준다, 이때 타입은 object로 나온다,
2. 인덱싱 3. 배열 길이 결과값 20, undefined
arr [1] 은 20으로 인덱싱이 나오지만 arr [-1]은 undefined로 마이너스 인덱스는 파이썬과 다르게 도출되지 않는다 배열의 길이는 arr.length로 파이썬과 유사하게 추출할 수 있다.
4. for loop문 활용 for loop 문의 기본 문법
1. 인덱스가 for 문으로 하나씩 들어가면서 그 인덱스에 맞는 배열의 값이 추출된다.
5. for in 활용 for in 기본문법
for in 문은 key를 지정하라고 한다, 이때 인덱스로 바꾸면 키가 곧 인덱스가 되는것이다.
6. for of for of 기본문법
인덱스까지 굳이 두번 가면 오래걸리니까 그냥 바로 순서대로 멤버를 추출하는 함수이다.
7. for each문 for each 문 기본 문법
for each 문에서는 익명함수(콜백함수)를 사용해서 값, 인덱스를 정하고 각각 하나씩 꺼내서 콜백함수에 넣어서 호출한다, 파이썬의 람다함수랑 알고리즘이 비슷하다. for each문을 화살표 함수로 바꿨을때
() => {} 문법에 맞추어 익명함수를 화살표함수로 바꾼 내용이다.
8. map map() 결과값 [30, 60, 90, 120, 150]
1. mul3라는 표준함수를 지정한다, 이 함수는 값에서 * 3 을 수행하는 역할을 한다, (return value * 3) 2. arr3이라는 새로운 변수를 지정한다, 이 변수는 배열 arr에 map(mul3)라는 함수를 먹인 결과값이다 arr = [10,20,30,40,50] 인데 여기에 mul3로 각각 3씩 곱한 결과가 출력되므로 결과셋은 [30,60,90,120,150]
같은 코드를 화살표 함수로 변경한 내용
그냥 바로 출력 걸어버리고 mul3의 내용을 화살표 함수로 바꾸어 map()안에 넣어준 것이다.
9. filter()
map과 문법은 같다, 여기서 바뀐것은 안에 들어가있는 화살표함수의 기능이 * 3 에서 인자의 크기를 비교하는 값으로 바뀐것이다. filter()의 역할은 이 조건이 true일시 출력, false일 시 출력 x의 역할을 수행한다.
내부에 있는 화살표함수를 다시 표준함수로 바꾸어주면 이렇게 된다, 1. 표준함수 myfilter 설정한다, 만약(if) 인자가 >=30 이라면 true 아니라면, false 이 내용을 filter() 에 담아서 true면 출력, 아니면 출력 x로 지정한것이다.
수행문에서 애초에 조건을 걸면 조금 더 간편하게 정리할 수 있다.
객체 크다
배열[] > 객체{} 라고 생각하면 된다, 키 : 값을 가진 컬렉션 타입으로 <-> 파이썬의 dict 딕셔너리와 동일하다 자세한 설명은 본문 참조 엔티티를 구현하기위해서 문법 -> 클래스가 탄생 클래스 문법으로 엔티티 묘사, 구현 코드가 구동하려면 메모리상에 존재해야 함, 이것을 객체라고 함 객체는 반드시 주소를 가진다, 이게 변수
객체 생성법 JS에는 5가지 방법이 존재한다 1. 객체 리터럴 2. Object 객체 확장 3. 생성자 함수 이용 -> 객체에 이름 부여 4. 3번 방식 + prototype 확장 -> 설계 시에 주로 사용 5. class 키워드 이용 -> 리액트 등 SPA에서 주로 보임, 4번과 일맥상통
1. 객체 리터럴 => {} 기본 객체 생성
obj 너는 이제부터 객체여
객체 데이터 구성
함수 전에 키와 몸무게를 전역변수로 설정했다. 그 이후 obj1을 지정하여 객체를 만들었다. 이 떄 객체 안에는 파이썬과 다르게 함수도 들어갈 수 있다. 근데 객체 안에 들어간 함수는 포맷팅을 할때 아직 선언이 되지 않은 name과 age를 포맷팅 내부에 선언해야 정상적으로 작동하므로 클래스 내부에서 선언을 할때에는 자기 자신을 지칭하는 객체 this or self.멤버명 을 기입해야 한다 일반적으로 this가 많이 쓰인다고 한다
결과값
키 : 값을 가진 것을 알 수 있다, 그러니 이 형식이 딕셔너리와 비슷하지?
getAge는 같은 객체안에 있는 name = 'ABC'와 age = 35를 가져와서 출력하는 모습을 볼 수 있다.
함수의 인자 전달 예시 결과값 1 연산결과값 => 11 2
test 함수의 인자에 콜백함수 cd를 입력했다 1. 1 출력 - 먼저 1을 출력한 이후 2. cb 함수 돌아감 -x + 1을 cb에 대입한다, 이때 함수를 호출하면 1을 출력한 후 콜백함수가 돌아간다, 그때 x =10이 되고 cb에 의해서 test함수의 결과값은 '연산결과값 => ' , 11이 되는것이다. 3. 2출력 - 그리고 2를 출력한다.
이가 객체에 있는 이유는 함수또한 객체로써 인자로 다른 함수 인자에 전달된다는 내용 때문이다.
대량 데이터 전달
이는 쉽게 생각한다면 test2 함수의 인자 params에 obj1을 그대로 넣은거다. 그 이후 obj1.name , obj1.age, obj1.height를 그냥 출력한거다 type는 그냥 문자열 넣은거고 근데 두번째 출력에서는 값을 지정해줘서 다르게 출력되는거다, 이처럼 한개의 인자에 여러개의 값을 가진 객체를 전달할 수도 있는것이다.
4. 생성자 함수 -> 클래스 구성 , prototype으로 멤버 확장
이게 설명을 듣자면 Memo에 nm을 넣고 memo가 곧 새로운 Memo다 그리고 안에 'js'가 있다. 그래서 memo = Memo {nm : 'JS'} 라는데 이건 아직 잘 모르겠다 설명을 들어도 그리고 PROTOTYPE으로 '별칭'이라는 내용이 memo의 닉네임으로 들어갔다고 한다 이건 챗 gpt한테 다시 물어봐야겠다.
html
로그인 처리 구현
지난번 수업시간에 이어서 추가된 내용 정리하겠다.
클라이언트 -> 서버로 데이터 전송 방식 전송 방식 http 프로토콜의 method ( get, post, put, delete,head, . . .) get -> 소량의 데이터, 보안에 취약, url에 ? 뒤로 표시됨 or 링크) post -> 대량의 데이터, 보안에 우수, 숨겨서 전송됨 전송 방법 http 헤더에 넣어서 전송 (get) - url에 넣어서 전송 (경로 매개변수) - ? 뒤로 붙여져 전송 (인자 매개변수) http body에 넣어서 전송 (post, put, delete)
form 태그의 속성 action = 데이터를 받을 서버측 주소 method = 데이터를 전달할 방식
지난번 시간에서 form 구문과 placeholder 가 추가되었다.
기존에는 로그인을 입력하면 출려되는 함수를 입력해서 함수가 개발자모드에서 나왔다. 이번에는? 정보를 입력할 시페이지가 작동되지 않는 에러가 뜬다.
에러가 뜨지만 이는 로그인을 눌렀을 때 확실히 다음 단계로 넘어간다는 뜻이다, form action이 로그인 버튼에 주소를 입력해서 기능을 부여한것이다. 여기서 method를 get으로 변경하면
이걸로 된다, 이게 get과 post의 차이이다,
placeholder는 로그인 창에 아이디 비밀번호 저 글씨 써주는거다.
데이터 시각화 기초
요구사항
데이터가 들어있는 json파일을 가져와서 html 웹 페이지 내에서 시각화하는 것이다.
그 과정을 하나씩 복기한다.
전체 코딩이다. 순서대로 천천히 하나씩 설명하겠다.
1. html의 기본 틀 생성
html 의 기본 틀을 생성한다. div = 레이아웃을 만들거나 콘텐츠를 나누는 컨테이너의 역할 script = javascript를 적용하고 연결하기 위한 태그
2. 차트가 생성될 공간 선언
div된 공간 내부에 fieldset = 경계선 표기, 이 때 경계선의 크기, 줄 두께 등은 javascript가 알아서 해준다 button onclick ... = 클릭 가능한 버튼을 만든다. 버튼을 클릭하면 함수 evtMakeChart() 함수가 실행되고 버튼 내부에는 차트그리기라는 글이 입력된다. canvas id ='chart_id' 캔버스를 생성한다.
웹에 실행 시 이런 페이지가 나온다
3. 스크립트 불러오기
1. axios 스크립트 = json데이터를 html로 요청하고, 응답하여 {} 로 생성해주는 기능을 가진 프로그램이다. 하지만 우리는 os에 설치하지 않고 불러와서 사용할 것이기 때문에 script형태로 가져온다, 이를 cdn형식이라 칭한다.
2. chart.js 스크립트 = 데이터 시각화를 위한 소스를 라이브러리에서 가져온다. 우리가 바 차트, 바 차트의 두께, 색지정, 결과값 등등 모든것을 지정해서 사용하려면 너무 많기 때문에 기존에 있는 시각화 라이브러리에서 불러올 수 있도록 script로 불러온다, 이 또한 cdn형식으로 불러온다.
4. 차트를 그릴 대상 찾기, js에서 엑세스 가능하게 객체 형태로 공간 획득(canvas), 클릭 시 데이터 획득, 차트그리기 진행
chartCanvas = js에서 chart_id로 엑세스 할 수 있도록 객체형으로 element를 획득하는것이다. 이를 const로 정의한다. 이를 개발자모드에서 알아보기 위해 임의로 chartCanvas의 정체는 문자열을 넣었다 function evtMakeChart 함수에 axios.get = json 데이터를 받아오는 함수 (json파일을 서버에서 가져오는 진도는 안 나가서 임의의 데이터를 다운받았다.) .then(response) 요청한 결과가 도착하면 다음 작업을 진행해라 makeChart(response.data) => 차트 그리는 함수 -> 후술예정
실행값이다, 차트 그리기 버튼을 누르면 json 데이터가 가져와지는것을 볼 수 있다 하지만 아직 makeChart 함수에 기능을 부여하지 않아서 makeChart is not defined 오류가 뜨는것을 볼 수 있다.
이렇게 한 단계씩 나가다보면 오류를 보고 그 다음에 무엇을 해야 할 지를 하나 하나 살펴볼 수 있다. 디버깅느낌이라고 해야하나?
이후로는 데이터 시각화를 위한 라이브러리의 가이드를 따라서 형식을 기입한거다. 이게 다 입력한게 아니라 그저 가이드대로 치기만 한거다 그래서 이 부분은 설명이 좀 힘들다 ㅎ..
최종 사이트 열었을 때차트 그리기 버튼을 누르면 최종 데이터가 시각화되어서 웹사이트에 나온다
오른쪽 개발자모드에서는 타점을 체크하기 위한 문자열들과 json 데이터를 볼 수 있다.
이렇게 전체 최종 코드만 보면 엄청나게 많아버리지만 과정을 하나하나 밟아가면 엄청나게 많지는 않고 기능 한개 한개를 수행해가면서 시각화까지 다다르는 모습을 볼 수 있다.
