늘 행복합시다 🧚‍♂️

다음 그림과 같은 그래프가 있을때 정점(1)에서 출발하여 각 노드들에 도달하는데 걸리는 최단 거리를 출력하는 코드를 구현해 보자!

높이를 나타내서 다시 그려보면 다음과 같다

다음과 같이 dis라는 배열을 만들어 정점 1로부터 도달하는데 걸리는 거리를 하나씩 넣는다. 예를들어 1->4->6->2의 구현과정을 먼저 보자면 dis[4]=dis[1]+1 // dis[4]=0+1=1 dis[6]=dis[4]+1 //dis[6]=1+1=2 dis[2]=dis[6]+1 //dis[2]=2+1=3

우선 BFS를 구현할 ArrayList를 만들어 정점과 간선 정보를 입력한다.

dis 1차원 배열을 머리속에 그리면서 생각하면 도움이 되는 것 같다.

: 방향 그래프가 주어지면 1번 정점에서 N번 정점까지 가는 모든 경우의 수를 출력하는 알고리즘 짜기

2차원 배열을 이용한 풀이

문제를 풀기전 간단하게 그래프별로 행렬을 어떻게 구현하는지 살펴보자

1. 무방향 그래프

2. 방향 그래프

3. 가중치 그래프

이제 경로탐색 문제 풀이 코드를 보자면

n(정점의 개수),m(간선의 개수)를 입력받은후 for문을 이용하여 그래프의 정점과 간선을 추가한다. 시작 점인 1 정점의 check를 1로 설정한후, DFS(1)을 호출한다. 현재 정점이 n번 정점에 도달하면 answer값 증가 그 외에는 2차원 graph 배열을 돌며 graph[v][i]가 있고, 정점i가 아직 방문 전일때(ch[i]==0) i정점을 방문하고 ,DFS(i) 실행 백트래킹 후에는 방문했던 정점을 다시 방문하지 않은 상태(ch[i]==0)으로 변경

ArrayList를 이용한 풀이

메인 메서드에서 그래프 생성 및 정점과 간선 정보 입력받기

: 시작 노드에 인접한 노드부터 탐색하는 방법 가장 가까이 있는 정점을 먼저 방문 후 나중에 멀리있는 정점 방문하는 방식. 같은 층(level)에 있는 정점들을 다 방문 후 그 다음 층 노드들로 이동

이진 트리 탐색 코드

• 기본 트리 구현 코드

• BFS 탐색 코드

• 실행 결과

송아지 찾기 문제 코드

문제 설명: 현재 나의 위치가 s, 송아지의 위치가 e일때 한번에 이동할 수 있는 양은 -1,1,5뿐이다. 이때 몇번만에 송아지의 위치까지 갈 수있는가?

이 그림을 코드로 구현하면 다음과 같다.

• tree 말단 노드까지 가장 짧은 경로의 높이 출력

: 이름에서 살짝 알 수 있듯이 트리에서 루트를 최대한 깊숙이 들어가서 확인 한 후 다시 돌아가는 탐색 방법

알랑말랑 한다면 예시코드로 바로 가보자~

전위, 중위 ,후위 구현 코드!를 보기전에

전위, 중위 ,후위가 뭔지 먼저 알아보자!

전위: 부모 노드가 자식 노드들보다 먼저** 맨 앞에** 중위: 부모 노드가 좌우 자식 노드의 중간에 후위: 부모 노드가 자식 노드들보다 더 늦게 마지막에 기준이 부모 노드임을 기억하면 덜 헷갈린다.

Node 생성

tree 생성

전위 코드

: 부모 노드 출력 후 자식 노드 호출

중위 코드

왼쪽 자식 노드 출력 후 부모 노드 출력

후위 코드

왼쪽 오른쪽 자식 노드 모두 출력 후 마지막에 부모노드 출력

부분 집합을 출력하는 코드 예시

사실,,이해가 잘안되서 그림을 열심히 그리면서 했는데 한번 같이 올려볼게요,,

:리액트의 SSR(Server Side Rendering)을 쉽게 구현하게 도와주는 프레임워크

SSR vs CSR

CSR(Client Side Rendering) : 렌더링이 클라이언트 쪽에서 발생, 서버가 요청을 받으면 클라이언트에서 html과 js를 보내 주고 클라이언트가 렌더링함-> 서버로부터 js파일을 모두 다운 받아 실행하기 전까지는 사용자는 볼 수 없음.

SSR(Server Side Rendering) :서버에서 렌더링을 다 마친 후 클라이언트에 보냄 클라이언트에 전달 되면, 이미 렌더링 준비가 끝났기에 즉시 html이 렌더링 된다. 클라이언트가 JS를 다운 받는 동안 csr과 달리 내용을 볼 수 있지만, 조작은 불가능 하다.

로딩시간 비교

• 첫페이지 로딩 시간: SSR이 CSR보다 빠름 CSR은 한꺼번에 모든 파일들을 불러오지만 SSR은 매번 필요한 부분의 파일만 불러오기 때문에
• 전체 페이지 로딩 시간: CSR이 SSR보다 빠름 SSR은 다시 로딩 과정을 거쳐야 하기 때문-> 그래서 SSR이 서버자원을 더 많이 사용한다.

참고자료🚀:

따라하며 배우는 리액트 강의 자료 [SSR vs CSR]https://hahahoho5915.tistory.com/52

NextJS 기본구조

pages

• index.tsx가 메인 기본 페이지. "/" 페이지
• app.tsx에 공통된는 레이아웃

public styles next.config.js

Pre-rendering

pre-rendering를 하지 않는다면 초기화면에 아무것도 뜨지 않지만, pre-rendering시 미리 생성된 HTML이 보인다.

Static Generation

: html을 빌드타임에 생성해 둔 후 요청시 마다 재사용

Server-side Rendering

: 각각의 요청마다 html을 생성함

static generation을 사용하는 경우 :user의 요청 전에 pre-rendering이 필요한 경우, 'next build'

server-side rendering을 사용하는 경우 :계속 업데이트 되는 데이터를 보여주는 경우, 속도는 더 느림, 'npm run dev'

참고자료🚀:

따라하며 배우는 리액트 강의 자료 https://nextjs.org/learn/basics/data-fetching/two-forms https://ppsu.tistory.com/63

Data Fetching

getStaticProps :static generation으로 빌드할때 데이터 불러며 한번 호출, 이후 수정 불가

사용하는 경우

• 사용자의 요청보다 먼저 빌드에 필요한 데이터를 가져올때

getStaticPaths : side generation 데이터에 기반하여 pre-render시 동적 라우팅 구현

paths: 어떤 경로가 pre-rendering할지 결정 빌드하는 동안 /posts/1와 /posts/2를 생성

paras: 페이지 이름이 pages/posts/[postId]/[commentId]라면 params는 postId와 commentId 이다.

fallback
false: getStaticPaths로 리턴되지 않으므로 404페이지가 뜸
true:getStaticPaths로 리턴되지 않으면 404가 뜨고, 리턴된다면 fallback 페이지가 뜸

getServerSideProps :Server Side Rendering 요청시 데이터 불러옴

참고자료🚀:

따라하며 배우는 리액트 강의 자료

React Router

router는 SPA를 사용할때 이용됨.

SPA (Single Page Applicatioin) : 하나의 웹페이지에서 모든 정보를 나타내는 방식 spa의 장점은 필요한 부분만 변경하기 때문에 새로 로드하지 않고 효율적으로 나타낼수 있다는 점이다.
리액트 또한 하나의 index.html 파일을 가지고 있고, 이 템플릿 파일에 JS를 이용하여 다른 컴포넌트를 넣어 페이지를 변경해준다. React Router Dom이 새 컴포넌트로 라우팅, 탐색을 하고 렌더링하는데 도움을 줌.

router 설치 방법

npm install react-router-dom --save

Browse Router

: HTML 5 history API(pushState, replaceState, popstate 이벤트)를 사용하여 ui를 url과 동기화 된 상태 유지해줌

컴포넌트 생성 및 라우트 정의 예시

<script>
function App(){
    return(
    <div className="App">
    <Routes>
        <Route path="/" element={<Home/>}> //메인 페이지
        <Route path="contact" element={</Contact>}/>
    </Routes>
    </div>
    )
    }
</script>

-Routes : 개별 경로에 대한 컨테이너 상위 역할, Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번재 route렌더링 -Route: 단일 경로를 만드는데 사용됨 -path: 원하는 컴포넌트의 url경로 지정 이름도 원하는 대로 정할수 있다. '/'가 이름인 컴포넌트는 앱이 로드될때 먼저 렌더링 됨. 즉, 홈구성요소이다. -element: 컴포넌트 넣기

위의 코드에 이어 Link를 이용해 경로 이동하는 코드

<script>
import {Link} from "react-router-dom";
function Home(){
    return(
    <div>
        <Link to="contact">contact page</Link>
    </div>
    );
   }

   export default Home;
</script>

Link 구성 요소는 html에서 a태그와 비슷함.

중첩 라우팅

<Routes>
    <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="r1" element={<r1 />}>
            <Route path="r2" element={<r2 />}>
         </Route>
     </Route>
 </Routes> 

Outlet

내가 강의를 들으며 이해한 실행과정은 다음과 같다..

Layout 실행 Layout 안 Nav컴포넌트 실행 Outlet컴포넌트가 아래에 Routes를 가져와 실행 Footer 실행

useNavigate

navigate("url주소",{replace:true}) 첫번째 인자는 url주소를 두번째 인자는 replace(true or false)를 전달한다. true를 사용하면 navigate에 적힌 url주소로 넘어간 후 뒤로가기를 하면 전 페이지로 돌아오지 못한다. false라면 뒤로가기가 가능하고, false가 기본값이다.

예시 코드

<script>
let navigate=useNavigate();
function handleClick(){
    navigate("/home");
    }
    </script>

useParams

현재 url에서 <Route path>와 일치하는 <key,vaule>쌍을 반환해주는 Hooks 이건 나중에 더 공부하고 정리! 아직 잘 모르겠,,ㅜㅜ

useLocation

사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks

useLocation을 이용하여 location에 선언후, 현재 머무는 페이지의 pathname을 불러와서 출력하면 다음과 같이 뜬다

: 메인 페이지에 머물때

: search 페이지에 머물때

참고자료🚀:

따라하며 배우는 리액트 강의 자료, https://velog.io/@soryeongk/ReactRouterDomV6 https://bearcomputer.tistory.com/48 https://hururuek-chapchap.tistory.com/212

useNavigate: https://basemenks.tistory.com/278 https://padahkim.tistory.com/44

useParams: https://woong-jae.com/react/220717-useParams-testing <>

: 사용자가 미리 결정된 시간 동안 타이핑을 멈출때까지 keyup 이벤트 처리를 지연시켜줌. UI코드가 모든 이벤트를 처리할 필요가 없고, 서버로 전송되는 API 호출 수도 감소.

예시 코드 : 컴포넌트가 마운트 되는 시점에만 실행하게 하기위한 코드

<script>
export const useDebounce=(value,delay)=>{
    const [debounceValue, setDebounceValue]= useState(value);

    useEffect(()=>{
        setDebounceValue(value)
    },delay);

    return ()=>{
        clearTimeout(handler);
        };

    },[value,delay]);
    return debounceValue;

  }

 const debouncedSearchTerm=useDebounce(query.get("q"),500);
</script>

useRef

-ref는 불필요한 렌더링을 방지함. -state는 값이 변경될때마다 렌더링이 되지만, ref는 ref안의 값들을 변경해도 컴포넌트가 렌더링 되지 않는다. 변경하여도 렌더링을 발생시키지 말아야하는 갑값을 다룰때 유용 -JS에서 getElementById하는 것의 기능과 동일.

ref 생성 : useRef를 이용하여 ref객체를 만들고 ,이를 특정 dom에 ref값으로 설정. ref객체의 .current값이 특정 dom을 가리킴

<script>
const ref=usesRef(); //ref생성

// ref.current사용
const listener=(event)=>{
    if(!ref.current || ref.current.contains(event.target)){
        return;
        }
        handler(event);
    }
</script>

참고자료🚀: https://itprogramming119.tistory.com/entry/React-useRef-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C

따라하며 배우는 리액트 강의 자료

:브라우저, node.js를 위한 promise API를 활용하는 HTTP 비동기 통신 라이브러리

• 설치방법:

  npm install axios 

  터미널에 입력한당

• 요청 옵션 -method:get이 기본값,(put, post,patch등 있음) -url: 서버주소 -baseurl:url앞에 붙는 주소로 앞에 공통으로 같은 부분
  ex) url /movieRate이고 baseurl 이 http://api.themoviedb.org/3 라면 http://api.themoviedb.org/3/movieRate으로 이동 -params: url parameter(?key=value 로 요청하는 url get방식을 객체로 표현한 것)

  
  

  • axios method

    axios get

    : 단순 데이터를 요청할 경우, 파라미터 데이터를 포함시키는 경우

    <script>
    const axios=require('axios');
    axios.get('/user?ID=721)
    .then(function(response)){
    //성공시 실행 함수
    console.log(response);
    })
    .catch(functioin(error){
    console.log(error);
    })
    .finally(function(){
    //항상 실행되는 함수
    });
    

//위와 같은 예시 axios.get('/user',{ params:{ ID:721}}) .then~~뒤에서 부턴 동일

###       <span style="background-color:yellow"> **axios post** </span>

   `: 데이터를 message body에 포함시켜 보내는 방법`

###       <span style="background-color:yellow"> **axios delete** </span>

   `: 일반적으로 body가 비어있다. DB에 저장되있는 내용을 삭제하는 목적으로 사용함`

###       <span style="background-color:yellow"> **axios put** </span>
`: DB에 저장되있는 내용을 갱신하는 목적, 내부적으로 get->post과정을 거침`

+ axios 인스턴스화
: 중복되는 부분을 계속 입력하지 않기 위해 사용

//axios.js

//requests.js

//axios 이용하여 현재 상영중인 영화불러오기 const request=axios.get(requests.fetchNowPlaying);

<span style="background-color:whitesmoke" >참고자료🚀: </span>
<https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9#Axios_%EB%8B%A8%EC%B6%95_%EB%A9%94%EC%86%8C%EB%93%9C>(정말 감사합니다..🧡)

따라하며 배우는 리액트 강의 자료

const memoizedCallback = useCallback(fn(함수),deps(배열)); :memoization 된 callback 리턴

memoization 이란?
:메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 
이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

첫번째 인자인 함수를 저장후, 두번째 인자인 의존성 배열 값 변경시 함수를 새로 생성

useCallBack 사용 전: 컴포넌트 렌더링 마다 새로운 함수가 생성 useCallBack 사용 후 : 컴포넌트 렌더링이 되더라도 의존성 배열 값이 변경되지 않는한 기존 함수 재사용

예시코드

• 의존성 배열에 아무것도 없다면, 컴포넌트 최초 렌더링 시에만 함수가 생성되고 그 후에는 동일한 참조값을 사용하는 함수가 됨.
• 의존성 배열이 콜백에 인자로 전달되지는 않지만, 콜백안에서 참조되는 모든 값은 의존성 값의 배열에 나타나야 한다.(살짝 이해가 될듯말듯..? 더 공부하면서 깨달아보자,,)

참고자료🚀: https://www.daleseo.com/react-hooks-use-callback/ https://ko.reactjs.org/docs/hooks-reference.html#usecallback https://devbirdfeet.tistory.com/134 따라하며 배우는 리액트 강의자료

useMemo()

const memoizedValue = useMemo(()=>fn,deps); :memoization 된 값 리턴

첫번재 인자인 fn은 결과값을 생성해주는 함수이고, deps는 재사용의 여부를 결정하는 의존성배열. 의존성배열의 변경시에만 메모이제이션된 값 다시 계산.

예시코드

const z=useMemo(()=>compute(x,y),[x,y]);

실제론 생각보다 많이 안쓴대요..?

참고자료🚀: https://www.daleseo.com/react-hooks-use-memo/

Document Object Model :문서 객체로 html 문서에 js가 접근할 수 있도록 html태그들을 객체로 만든 것

우리가 열심히 짠 js코드들이 html에 접근할 때 dom 객체를 통해 인식이 가능하다.

문제는 DOM은 변경사항이 있을때마다 re-rendering을 한다.
즉, 속도가 느려질수밖에 없다.

➡➡ Virtual DOM의 등장

1. 변경사항 시 virtual dom에 re-rendering
2. virtual dom 끼리 비교
3. 변경 사항 만 실제 DOM에 적용

그런데 다른 글들을 찾아보다 보니..
virtual dom을 사용하는게 대부분의 상황에서 빠르진 않대요,,?
그냥 나쁘지 않은 정도인것 같다..(자세한건 참고자료 두번째 링크)~ 어쨌든 변경사항들을 가상돔(virtual dom)에 모았다가 DOM에 한번에 보내는 기술이다 성

참고자료🚀: https://devbirdfeet.tistory.com/219 https://velog.io/@woohm402/virtual-dom-and-react

• react hooks 도입배경 함수형 컴포넌트에서 state와 생명주기를 이용가능하게 해줌! class없이 react사용 가능!

useState

hook을 호출하여 함수 컴포넌트 안에 state를 추가 state는 컴포넌트가 다시 렌더링 되더라도 그대로 유지됨.

사용방법

const [state,setState]=useState('초기값');

현재의 state값과, 이 값을 업데이트 하는 함수를 동시에 제공

예시코드

<script>
import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
</script>

useEffect

useEffect를 사용하여 react에게 컴포넌트 렌더링 후 어떤일을 수행해야할지 지정.
리액트는 우리가 넘긴 함수(effect)를 기억 한 후 DOM업데이트 이후 불러냄.
effects는 컴포넌트 안에 선언되어 있기 때문에, props와 state에 접근 가능. 렌더링 이후에 effects실행! vsc에 effect 치면 나오는 'useEffectSnippet이용하면 기본 틀 자동 생성!

• 리액트가 DOM업데이트 후 문서의 타이틀을 바꾸는 컴포넌트 예시 코드

<script>
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
  </script>

-effect 해제 하는 함수가 포함된 코드(effect 해제는 선택적) return 부분에 effect해제 함수를 적으면 됨

  <script>
  import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  </script>

참고자료🚀:

Hook 개요, Using the Effect Hook,

따라하며 배우는 리액트 강의 자료

스터디 5주차 🐬 내용정리 -React to-do앱 만들기(따라하며 배우는 리액트 2~3강)

React

React Component

리액트 컴포넌트는 리액트로 만들어진 앱을 이루는 최소한의 단위로, 사용자에게 보여지는 UI요소를 컴포넌트 단위로 구분하여 구현한다.

1. Class Component 클래스형 컴포넌트

• class로 정의하고 render()함수에서 jsx 코드를 반환 (jsx는 js의 확장 문법으로 리액트에서 화면에서 UI가 보는 모습을 나타내줌. 자세한 내용은 !!! 링크 참고)
  + state, 리액트 생명주기를 모두 포함함

2. Functional Component 함수형 컴포넌트

• function으로 정의하고 return 문에 jsx코드 반환 (arrow function 이용하여 정의 가능)
• react hooks가 등장한 후로는 functional component에서도 state와 생명주기의 사용이 가능함.

잠깐! JSX란..?

자바스크립트 확장 문법으로, JavaScript에 xml을 추가한 것. 하나의 파일에 js와 html을 동시에 작성 가능

함수형 컴포넌트의 장점 vs class 컴포넌트 1.짧고 간결 2. 더 빠르다 3. 가독성이 더 좋다

https://chanhuiseok.github.io/posts/react-4/, https://goddaehee.tistory.com/299,

따라하며 배우는 리액트 강의 자료

React 생명주기(lifecycle)

component가 렌더링 되기 위해 준비하는 과정부터 제거될때 까지의 과정

• Did는 해당 시점이 끝난 후, will은 해당 시점 직전에 method실행을 의미

1. Mounting : 컴포넌트 인스턴스가 mount(생성)되고 dom에 삽입 되는 과정

2. Updating: props 또는 state 변경, 부모 컴포넌트의 re-rendering 등으로 인해 컴포넌트 업데이트 발생시 진행되는 과정

3. Unmounting: 컴포넌트가 dom상에서 unmount(제거)되는 과정

https://talking-potato.me/51, 따라하며 배우는 리액트 강의 자료

React Props

:props는 properties의 줄임말 - 상속하는 부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 전달하는 방법 - props는 읽기전용(immuatable)로 자녀 컴포넌트에서는 변경 x, 변경하기 위해서는 부모 컴포넌트에서 변경해야함

예시 코드

app.js :Form 컴포넌트에 handlesubmit,value,setValue props 내려주기

<Form handleSubmit={handleSubmit} value={value},setValue={setValue}>

Form.js :props로 필요한 데이터 함수 가져오기

function Form({handleSubmit,value,setValue}){...}

React State

:리액트에서 component 내부에서 가지고 있는 값.
- state가 변경가능(mutable) - state 변경시 component는 re-rendering됨.

함수형 컴포넌트의 Hooks를 이용한 사용 방법

const [state,setState]=useState('초기값');

예시코드(강의 코드)

<script>

import React,{useState} from 'react';

export default function Banner(){
    const [isClicked,setIsClicked]=useState(false);
}

if(!isClicked){
    //...다른 코드들
    <button className="play_button" onClick={()=>setIsClicked(true)}>play</button>
}
</script>

위의 코드를 통해 state의 값을 setState를 이용하여 변경하는 방법을 알수 있다.

https://songzzi.github.io/2021/11/21/react-2/

더 자세한 hook과 useState에 관한 내용은 다음 글에서,,!

스터디 4주차 🐬 -JS 강의 섹션4 (HTML을 위한 자바스크립트)까지 듣기

JavaScript

Section 04. HTML을 위한 JS

1. HTML element control

 <button type="button" onclick="doSave();">Save</button>

<script>
function doSave(){
            console.log("doSave");

            var oText1=document.getElementById("text1"); //하나만 가져옴
            //id는 유일한 하나의 값이니까 element 하나만 가져옴

            console.log(oText1.value);

            var textValue=oText1.value;

           var oText2=document.querySelector("#text1");
            console.log(oText2);

            var oCheckbox=document.getElementsByName("chk_interest");
            console.log(oCheckbox);
            //Name은 같은거가 여러개일수도 있으니까 elements 인거임


            //방법 1
             for(var i=0;i<oCheckbox.length;i++){
                 if(oCheckbox[i].checked){
                     console.log(oCheckbox[i].value);
                 }
             }

            //방법 2

           var oCheckbox2=document.querySelectorAll("[name=chk_interest]:checked");
           //selectorAll 은 배열형태로 리턴
            console.log(oCheckbox2);

           //selector는 하나의 객체만 리턴
           var oRadio=document.querySelector("[name=radio_email_yn]:checked");

           console.log(oRadio);

           var oSelect=document.getElementById("select1");
           console.log(oSelect.value);

           var oSelect=document.getElementById("select1");
           console.log(document.getElementById("div1").innerText);

           console.log(document.getElementsByTagName("div"));
        }</script>

2. HTML event control

  <input type="text" id="text1" onfocus="doFocus();" onblur="doBlur(this);">
    <br> 
    <select id="select1" onchange="doChange();">
        <option value="KO">korea</option>
        <option value="UK">UK</option>
        <option value="US">US</option>

    </select>

       <input type="text" id="text2" onkeydown="doKeydown(event);">
    <button type="button" onclick="doSearch()">조회</button>
    <br>
    <button onclick="doSave();">click</button>

<script>
        function doFocus(){
            console.log("doFocus");

        }

        function doBlur(obj){
            if(obj.value==""){
                alert("필수값이니까 반드시 입력 ㄱ");
            }

            console.log(obj.value);
        }

        function doChange(){
            var selectedValue=document.getElementById("select1").value;
            console.log(selectedValue);
        }

        function doSearch(){
            //enter키 누르면 조회 일어나지요
            console.log("조회를 시작합니다");

        }



        function doKeydown(event){
            if(event.keyCode==13){
                doSearch(); //엔터를 입력하면 doSearch를 시작해라
            }
            console.log(event);
        }
        function doSave(){
            console.log("doSave");
        }
    </script>

3. HTML style control

<head>
    <title>Document</title>
    <style>
        .border-red{
            border:4px dashed red;

        }

        .border-green{
            border:4px solid green;
        }

        .border-default{
            border-width:1px;
            border-color:blue;
            border-style:solid;
        }


    </style>
</head>

 <input type="text" id="text1" onblur="changeBorder();">

    <br>radio(email):
    <br>
    <label>
        <input type="radio" name="radio_email_yn" value="y" onclick="showEmail();">agree
    </label>

    <label>
        <input type="radio" name="radio_emil_yn" value="N" onclick="hideEmail();" checked> deny
        <div id="divEmail" style="display:none;">email<input type="text" id="email"></div>

    </label>

    <br>  Select:  
    <br>
    <select id="select1" onchange="doChange(this);">
        <option value="Ko">Korea</option>
        <option value="US">US</option>
        <option value="UK">UK</option>


    </select>

    <select id="select2" style="display:none;">
        <option value="Ko">seoul</option>
        <option value="US">busan</option>
        <option value="UK">jeju</option>


    </select>

    <button type="button" onclick="doSave();">save</button>

4. data table

  <input type="text" id="searchTxt" onkeydown="checkEnter(event);"> 
  <button type="button" onclick="doSearch();">조회</button>
  <table id="tb">
    <thead>
      <tr>
        <th onclick="doSort('name');">name</th>
        <th onclick="doSort('email');">email</th>
        <th onclick="doSort('company');">company</th>
        <th onclick="doSort('address');">address</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    var currentData = [];
    function doSort(key) {
      currentData.sort(function(a,b){
        return a[key]>b[key]? 1: a[key]<b[key]?-1 : 0;
      });

      renderTable(currentData);
    }

    function checkEnter(event) {
      if(event.keyCode == 13) {
        doSearch();
      }
    }

    function doSearch() {
      var searchText = document.getElementById("searchTxt").value;


      if(searchText == "") {
        currentData = userList;
        renderTable(userList);
      }else {
        // /pattern/gi
        var regExp = new RegExp(searchText,"i");
        var data = userList.filter(item => {
          if(regExp.test(item.name)) {
            return true;
          }else if(regExp.test(item.email)) {
            return true;
          }else if(regExp.test(item.company)) {
            return true;
          }else if(regExp.test(item.address)) {
            return true;
          }else {
            return false;
          }
        });

        currentData = data;

        renderTable(data);
      }
    }

    function renderTable(data) {
      var h = [];
      data.forEach(item => {
        h.push(`<tr>`);
        h.push(`<td>${item.name}</td>`);
        h.push(`<td>${item.email}</td>`);
        h.push(`<td>${item.company}</td>`);
        h.push(`<td>${item.address}</td>`);
        h.push(`</tr>`);
      });

      document.querySelector("#tb>tbody").innerHTML = h.join("");
    }

  </script>

스터디 4주차 🐬 -JS 강의 섹션3 (자바스크립트 고급 문법)까지 듣기

JavaScript

Section 03. 자바스크립트 고급 문법

15.try-catch-finally

try-catch-finally 역시 class와 마찬가지로 다른언어에서도 사용되는 개념이다.

• try문을 실행후 error발생시 catch에서 잡고, 모든 작업이 끝난 후에는 error발생 유무와 상관없이 finally를 실행

var x=21;
try{
if(x=="") throw "empty";
var y=x+1;
console.log(y);
} catch(err){
console.log(`x is ${err}`);
}finally{
console.log("try/catch문 마지막에 반드시 실행");
}

• x가 null인 경우

• x에 숫자가 올바르게 입력된 경우

16. strict mode

 x=3.14;
 console.log(x);

위의 코드처럼 변수선언을 안한채 사용하면 문법적인 문제가 있지만, js는 초기에 허용을 해줬다. 하지만!! 더 꼼꼼히 코드 구현을 하고 싶다면

"use strict"; 
x=7;
console.log(x);

이렇게 "use strict"선언해주면 이제 저 코드는 error가 뜬다.

function myFunction(){
"use strict";
}
//특정 함수 내에서만 쓰고싶다면 거기에만 넣어도됨.

17. Regular Expression 정규식

• 기본 모양 patt= /world/i '/ /'안에 검색할 내용, world-패턴, i- modifier

• i의 역할

  var str="hello WORLD";
  

console.log(str.search("world");// -1출력 // 대소문자가 다르기때문에 -1출력

console.log(str.search(/world/i)); // 6 출력(i는 대소문자 상관없이 검색가능)

+ g의 역할

var str="hi world world";

console.log(str.replace(/world/i,"ohoh")); //hi ohoh world 출력

console.log(str.replace(/world/g,"bombom")); //hi bombom bombom 출력(g는 global의 약자, g는 모든 world를 다 bombom으로 바꿈

+ [abc]: a나 b나 c가 있는 문자 다 찾기

var str="Is this all there is";

var patt=/[hat]/g; //h나 a나 t 있는 문자 다 찾기 console.log(str.match(patt)); //['t', 'h', 'a', 't', 'h']출력

+ [0-9]: 0부터 9까지 모든 수 찾기

var str="123wowthing777"; console.log(str.match(/[0-9]/g);

//['1', '2', '3', '7', '7', '7']출력

+ (a|b): a 또는 b(a or b)

var str="red, green, blue, re,green,red,gree,yellow";

console.log(str.match(/(red|green)/g;

// ['red', 'green', 'green', 'red'] 출력

+ \d: 숫자찾기 [0-9]와 동일

var str="give 721"; console.log(str.match(/\d/g)); //['7', '2', '1'] 출력

+ \s 공백 찾기
<br>
+ \b 

var str="helloooo"; console.log(str.match(/\blo/g);

//['oo'] 출력

+ n+: n이 최소한 1개 이상

var str="ohbom bom bom bo" console.log(str.match(/bom+/g)); //['bom', 'bom', 'bom'] 출력

+ n*: 0개 혹은 여러개 가능 

var str="hellooo world";

console.log(str.match(/lo*/g)); //l또는 lo,loo.... 찾기 //['l', 'looo', 'l'] 출력

o는 0개여도 상관 없고, 여러개 여도 상관없다.
l이 무조건있지만 o는있어도 되고 없어도됨

+ n?: 0개 혹은 1개

var str="1, 100 or 5010000"; console.log(str.match(/10?/g)); //0은 0개이거나 1개까지만 있는지 확인 //['1', '10'.'10'] 출력

5010000를 보면 딱 10까지만 찾고 리턴하는거 찾을 수 있음. 만약 "/10*/" 였다면 10000을 리턴했을 것이다.

이 점이 '*'와 ?의 차이!!

+ w3schools.com 사이트에 정규식 잘 나와있으니 참고~

#### <span style="background-color:yellow">실무 사용예시</span>

+ <strong>1.우편번호 5자리가 모두 숫자임을 확인할때</strong>

```var patt=/^\d{5}$/;```

^/d: 반드시 숫자로 시작해라
d{5}:숫자 5개
$:앞에꺼로 마치겠다!(즉 여기선 숫자5개로 마치겠다) 

var postalCode="p01174"; var postalCode2="32334";

//test는 정규식 내장함수이므로 patt.test()으로 실행 console.log(patt.test(postalCode)); //false console.log(patt.test(postalCode2)); //true

+ <strong>2. 전화번호 확인</strong>

```var patt=/^(010)-\d{4}-\d{4}$/;```

^(010): 반드시 010으로 시작
- 숫자4자리 - 숫자4자리 로 끝난다.

var tel="010-1234-5678"; console.log(patt.test(tel)); //true

+ <strong>3. 이메일 주소 확인 ☪</strong>

```var patt=/^\w+([\.-]?\w+)*@\w+(\.\w{2,3})+$/;```

^w+: 하나이상의 문자열로 시작
[\.-]?: 
    [\.-]는 .이나-가 있는지 찾기
    [\.-]?는 .이나-가 있어도 되고 없어도됨

/w+: 다시 하나이상의 문자열로 시작
([\._]?\w+)*: ([\._]?\w+)가 있어도 되고 없어도됨

@\w+ : @후 문자 한개이상 오기
(\.\w{2,3}): . 이후에 2개 혹은 3개의문자가 옴.
(\.\w{2,3})+: (\.\w{2,3})가 1개이상
$: 종료,,

~~와 어려워,,~~

console.log(patt.test("wowthing@gmail.com"));//true
console.log(patt.test("hw.go@gmail.co.kr"));//true

스터디 4주차 🐬 -JS 강의 섹션3 (자바스크립트 고급 문법)까지 듣기

JavaScript

Section 03. 자바스크립트 고급 문법

11. promise

• promise가 필요한 상황

만약에 다음과 같은 코드가 있다고 해보자

  var x=1;
  y=callServerData();//서버 호출해서 데이터 받아오는 함수

  var z=x+y;

위와 같은 코드에서 y에 함수값 받기전에 다음코드로 넘어가서 y가 비었다고 에러가 날수 있다! 이걸 방지하기 위해 y값 받기전까지 우리는 진행하지 않을게 -> promise!!!

mock server 다운받아서 사용했다. 자세한 설치방법은 개발자의 품격선생님의 유튜브 강의에 나와있다~

<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script>
  var url=
  "https://08fe256f-b1a1-470a-a1d3-0e22ec9aa918.mock.pstmn.io/userList";
    //mock server에 만든 데이터의 request url

   // promise

   function getData(){

   //resolve는 정상적으로 처리됬을때, reject는 무언가 잘못되었을때

   return new Promise(function(resolve,reject){
       axios.get(url).then(function(response){
    console.log(response.data);
    resolve(response.data);
        });

   });

   }

   //getData 호출 후 리턴값이 resolve로 오고난 후
   getData().then(function(data){
         for(var item of data.userList){
        console.log(item.name);
        }  
   });

</script>

12. async await

async(비동기)-await(기다려줄게!)는 한쌍이다😊

<script>
async function getData2(){
    return (await axios.get(url)).data;
//(await axios.get(url))을 받은 후 그것의 data를 리턴

//위의 url을 일반화 한 코드
async function getData2(path){
    return (await axios.get(path)).data;
}

async function calculateSum(){
    var data=await getData2();

    var total=0;
    for(var item of data.products){
    total+=item.price;
    }

    console.log(total);

}

calculateSum();

</script>

13. module

module 쓰기 전 코드 3-13. beforemodule.js 코드

function log(message){
console.log(message);
}

function error(message){
console.error(message);
}

3-13.beforemodule.html 코드

<script src="./3-13.beforemodule.js">
log("log로 메시지 출력");
error("error로 메시지 출력");
</script>
//이렇게 하면 내가 script에 적은 모든 함수와 변수가 import됨

내가 script에 쓴 함수나 변수중에 일부만 사용하고 사용하고 싶다면? -> module 이용!!!

module 사용 후 코드 3-13.module.js

  export function log(message){
  console.log(message);
  }

  export function error(message){
  console.error(message);
  }

  export const PI=3.14;

3-13.module.html

<script type="module">
import {log,PI} from "./3-13.module.js";

log(PI);
log("log로 메시지 출력");
</script>

출력값:

• module 사용이 언제 필요할까?

  우리팀이 만든 함수를 가져와서 쓰는데 난 거기서 한두개만 쓸거다 근데 그걸 위해 다 import는 ,,굳이? 그리고 그 위에 다른사람이 정의한건 다 알진 못하니까 내가 같은 변수명으로 또 선언해서 꼬일수도 있는 불상사 방지!

다른 js가 또다른 js import 하는 경우

3-13.ref.js

import {log,error,PI} from "./3-13.module.js";
log("ref에서 출력하는 메시지");

3-13.module.html

<script src="./3-13.ref.js" type="module"></script>

출력값:

14.class

바로 예시 코드를 봅시다아

• Car class 선언 및 항목별 getter setter 설정

class Car{
    constructor(modelName,modelYear,type,price){
        this.modelName=modelName;
        this.modelYear=modelYear;
        this.type=type;
        this.price=price;
        //this는 이 class를 의미
}
    //modelName getter
    getModelName(){
    return this.modelName;
    }

    getModelYear(){
    return this.modelYear;
    }

    getPrice(){
    return this.price;
    }

    //price setter
    setPrice(price){
    this.price=price;
    }

}

let car=new Car("iconic","2021","e","4000");
console.log(car.getModelName()); //iconic 출력

let car2=new Car("genesis","2021","e","7000");
car2.setPrice("7700");
console.log(Car2.getPrice()); //7700 출력

• ** Class 상속(Car을 상속받은 ElectronicCar 구현)**

  class ElectronicCar extends Car{
    constructor(modelName,modelYear,price,chargeTime){
    super(modelName,modelYear,"e",price);
    //부모 class인 Car의 생성자를 이용한 super
  
    this.chargeTime=chargeTime;
    }
  
    setChargeTime(time){
    this.chargeTime=time;
    }
  
    getChargeTime(){
    return this.chargeTime;
    }
  }

• chargeTime 설정 방법 1 (생성자 이용)

  let elecCar1=new ElectronicCar("ionic5","2022","9000",60);

• chargeTime 설정 방법 2 (setter 이용)

  let elecCar2=new ElectronicCar("a","2222",33);
  elecCar2.setChargeTime(88);
  
  

스터디 4주차 🐬 -JS 강의 섹션3 (자바스크립트 고급 문법)까지 듣기

JavaScript

Section 03. 자바스크립트 고급 문법

1.this

• window 객체를 의미

console.log(this); //console.log(window);

function myFunction(){
console.log(this);
}

• object안에서는 object 자체를 의미

   var person={
  
            firstName:"oh",
            lastName:"bom",
            fullName:function(){
                return this.firstName + " " +this.lastName;
            }
  
        };

• html안에서 this는 html 그 자체를 의미

<button type="button" onclick="this.style.backgroundColor='blue'">클릭</button>
<button type="button 2" onclick="callFunc(this);"> 클릭2</button>
//위에서 this는 html의미

function callFunc(obj){
console.log(obj);
}

2. scope

scope는 변수에 대한 접근성을 의미함

• local scope

function myFunction(){
var carName="hyundai";
}

• global scope

  myFunction2(); 
  

//이렇게 함수선언보다 함수를 앞에 놓아도 에러가 안난다. //JS는 함수 선언이 호출보다 더 아래에 있더라도 //함수를 먼저 해석한 후에 호출을 실행하기 때문

var carNmae2="kia";

function myFunction2(){ console.log(carName2); }

//myFunction3(); //error //위와 같은 경우에는 함수호출이 선언보다 앞에 있더라도 에러가 아니었지만 //함수를 변수안에 넣는 경우에는 호출이 선언보다 앞에 있으면 에러남.

var myFunction3=function(){ console.log("haha"); }

#### <span style="background-color:skyblue"> 3. default function parameter </span>

ES6에서 추가된 내용

function say(message="this is default message"){ console.log(message); }

say();//this is default message 출력

function plus(x,y=1){ console.log(x+y); }

plus(4);// 4+1=5 출력

#### <span style="background-color:skyblue"> 4. rest parameter </span>


> 만약에 덧셈을 하는 함수를 짜는데, 변수를 몇 개 받아야 할지 모르겠다? 

+ ver1

function sum(...args){ var total=0; for(var x of args){ total+=x; } return total; }

console.log(sum(1,3,5)); //9출력

+ ver2

function sum2(...args){ let total=0; args.forEach(function(x){ total+=x; }) return total; }

console.log(sum2(1,2,3))//6 출력

#### <span style="background-color:skyblue"> 5. arrow function </span>

함수명=(parameter)=>{}
함수명=(parameter)=>return 값

> ```
var hello=()=>{
return "hello world!"
}
var hello=()=>"espanola~";

• 자세한 arrow function 유도과정

function hello(){
return "hello";
}

var hello=function(){
return "hello world!";
}

var hello=()=>{
return "hi222";
}

var hello=()=>"espanola~";

var hi=(firstName,lastName)=>"hi "+firstName+lastName;

console.log(hi("oh","bom"));

//parameter가 1개일 땐 ()조차 생략가능
var intro=fullName=>"nice to meet you"+fullName;
console.log(intro("ohbom"));

6. template literals

전달한 혹은 전달받은 변수를 출력하거나 리턴할때 함께 전달할 말들을 `` 로 묶고 그 안에 그 변수를 &{변수이름} 이런식으로 넣어서 쓸수 있다.

 ho=(name)=>`hi ${name}`;
 console.log(ho("ho"));
// hi ho

function hello(name){ var name2="HW"; console.log("hi ${name2} ! and hello ${name}");

}

hello("john doe"); //hi HW ! and hello john doe

#### <span style="background-color:skyblue"> 7. Object Literal Syntax Extension </span>

var type="student"; var score={ [type]:"oh bom", score:90 };

console.log(socre.student);//oh bom 출력

var type2="grade"; score[type2]=1; //score.grade=1;과 동일

이전 포스팅 중
_'(02.JavaScript 기본 문법 with 자바스크립트 제대로 배워볼래?(Section 01)'_ 의
**3.object 선언방법2**와 함께 공부하면 좋을 것 같다.
➡[velog](https://velog.io/@oh_bom721/02-1.JavaScript-with-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EB%B0%B0%EC%9B%8C%EB%B3%BC%EB%9E%98)

#### <span style="background-color:skyblue"> 8. Spread Operator</span>

var arr1=[4,5,6]; var arr2=[1,2,3,...arr1]; //...arr1에서 ...은 분해하는거 의미

console.log(arr2); //1,2,3,4,5,6 출력

var cd="CD"; var alphabet=["A","B",...cd]; console.log(alphabet); //A B C D 출력

#### <span style="background-color:skyblue"> 9. Object destructuring</span>

function getPerson(){ return { Name:"oh_bom", age:23, country:korea }; }

//!! 실무에서 자주 쓰임 var{Name,country}=getPerson(); console.log(age);//error(age는 object destructuring 안해줘서) console.log(country); // korea 출력

#### <span style="background-color:skyblue"> 10. array destructuring</span>

function getScores(){ return [70,80,90]; }

//array destructuring var [x,y]=getScores(); console.log(x); // 70 출력

//위도, 경도 예시 function getLocation(){ return [127.22,721.01]; }

var [latitude,longitude]=getLocation(); console.log(longitude); //721.01 출력

스터디 3주차 🐬 -JS 강의 섹션2 (자바스크립트 내장 함수)까지 듣기

JavaScript

Section 02. 자바스크립트 내장 함수

5. Date

• Date 객체 생성

  var d=new Date();
  console.log(d); //현재 날짜 및 시간 출력
  

console.log("timezone: ",d.getTimezoneOffset()); //timezone: -540 출력 //-540분=-9h (우리나라 기준)

인덱스를 month는 0부터, day는 1부터 시작
그래서 7로 입력하면 august 나온당

~~강의자님 추측은 ,, 월을 배열에 넣을때마다 -1을 해줘야하니까?~~

+ 다양한 date함수들

var year=d.getFullYear(); var month=d.getMonth(); var day=d.getDay(); var hour=d.getHours()' var minute=d.getMinutes(); var second=d.getSeconds();

+ TIME ZOONE
:외부 라이브러리 사용, moment.js 사용함
moment.js.cdn 검색 후 나오는 스크립트 head에 입력

![](https://velog.velcdn.com/images/oh_bom721/post/a5bd4e1e-ff0e-4915-9c6d-4f0957d3796d/image.png)

나는 두번째꺼를 복사하여 head에 입력했다.

console.log(moment().format("YYYY-MM-DD")); console.log(moment().subtract(7,"days").format("YY-MM-DD"); console.log(moment().add(7,"days").format("YYMMDD"));

// moment.js 라이브러리를 사용하여 format을 지정할수도, 원하는 날짜, 연도 등을 add, subtract하는 것이 가능하다.

#### <span style="background-color:skyblue">6. Math</span>

+ round(): 반올림

math.round(4.9); // 5

+ ceil() 무조건 올림으로 정수만들기

console.log(Math.ceil(7.21)); //8

실무 사용예시
>만약 서버로부터 받아온 데이터가 72개이고, 한페이지에서 10개씩 글을 보여준다고 하자. 그러면 필요한 페이지 수는?
-> ceil(72/10) 해서 8페이지 필요함!

+ floor() : 무조건 내림

Math.floor(7.21); //7 Math.floor(-4.23);// -5 //-4.23보다 작게 내려서 정수값을 리턴하는것이므로 -4가 아니라 -5리턴

+ trunc() : 정수 부분만 리턴

Math.trunc(-4.23); // -4 //위의 floor()와 비교해보기 ^*^

+ sign(): 음수 -1, 양수 1 리턴

Math.sign(-7.21); // -1리턴

+ pow() 제곱

Math.pow(2,5);//2의 5제곱=32 리턴

+ sqrt() 루트

+ ⭐<span style="background-color:yellow"><strong>abs() : 무조건 양수로 변환</strong></span>

Math.abs(-3.1);// 3.1 리턴 //간격이나 계산용도로 쓰인다

+ max()

Math.max(2,12,442,214,68,7); 가장 큰 값 리턴

+ ⭐<span style="background-color:yellow"><strong>random() </strong></span>

Math.random(): 0<=x<1 해당하는 수 리턴

ex) 1~10사이 수 중 랜덤

Math.floor(Math.random()*10+1);

ex2) a부터 b사이의 랜덤한 정수 출력 (a<=x<=b)일때

Math.floor(Math.random()*(b-a+1)+a);

//여기서 b-a+1은 b부터 a사이의 간격을 의미한다 //우리가 2부터 5사이에 숫자가 몇개있는지 센다면 총 4개라고 답할텐데 그때 그 4는 5-2+1 을 해서 나온 수이다.

ex 3) a<=x<b 라면

Math.floor(Math.random()*(b-a))+a; //여기선 b보다 작은수까지 정수를 세기때문에(b는 미포함) b-a가 두 정수사이의 간격이 됨

#### <span style="background-color:skyblue">7. json</span>

JSON-JavaScript Object Notation

    json서버로부터 웹페이지로 데이터 전송시,
    웹페이지에서 서버로 데이터 전송시에 사용

var data={ "employees":[ {"firstName": "oh", "lastName": "bom"}, {"firstName": "oh2", "lastName":"bom2"} ] }

console.log(data.employees[0].firstName); //oh 출력

Json.stringify: data를 string으로 바꿀수 있음

console.log(JSON.stringify(data)); //출력값 //{"employees":[{"firstName":"oh","lastName":"bom"},{"firstName":"oh2","lastName":"bom2"}]}

JSON.parse : string을 object로 만들기 가능

var text='{"employees":['+ '{"firstName":"oh","lastName":"bom"},' +'{"firstName":"oh2","lastName":"bom2"}]}';

    console.log(JSON.parse(text));

    //출력
    employees: Array(2)
    0: {firstName: 'oh', lastName: 'bom'}
    1: {firstName: 'oh2', lastName: 'bom2'}

#### <span style="background-color:skyblue"> 8. window</span>
+ 다양한 window명령들 소개

alert("this is alert!"); confirm("really delete?); prompt("insert your passcode); window.open("https://google.com");

+ setTimeout

setTimeout(function(){ console.log("5초후 실행"); }, 1000*5); //밀리 세컨드가 기준이라 1000은 1초 의미

+ setInterval

setInterval var i=0; var fnc=setInterval(function(){ console.log("3초마다 실행");

if(i==3){ clearInterval(fnc); } i++

},3000);

#### <span style="background-color:skyblue"> 9. 개발자 도구</span>

+ 콘솔창 띄우는 종류 4가지

console.log("hello"); console.info("2"); console.warn("3"); console.error("4");

+ table로 만들어 띄우기

var userList=[ {first:1,second:2}, {first:11,second:22} ]; console.table(userList);

![](https://velog.velcdn.com/images/oh_bom721/post/e9c60b49-16ee-41c4-9e42-fa30b48f54f6/image.png)

+ 프로그램 구동시간 체크

function a(){

console.time();

//program code~~

console.timeEnd();

}

스터디 3주차 🐬 -JS 강의 섹션2 (자바스크립트 내장 함수)까지 듣기

JavaScript

Section 02. 자바스크립트 내장 함수

4. Array

• toString(): array를 string으로 변환

  var fruits=["banana","orange","kiwi"];
  console.log(fruits.toString());
  //banana, orange, kiwi 출력
  

+ join()

console.log(fruits.join("*")); //을 기준으로 join //bananaorange*kiwi 출력

+ push()

//string에 이어서 문자열 추가하는 방법1 var txt="hello"; txt+= "everyone~";

//arr에 push 이용하여 string 추가 var arr=[]; arr.push("one"); arr.push("two");

+ pop() 
:가장 마지막에 추가한 element return

+ shift() :배열의 첫번째 element 제거후 리턴

var numbers=["one","two","three"]; var s=numbers.shift(); console.log(s); console.log(numbers);

//출력값 //one //['two', 'three']

+ unshift(): 배열의 첫번째 인덱스에 새 element추가

numbers.unshift("zero"); console.log(numbers); //['zero', 'two','three'] 출력

+ splice(a,b,c)
-a: 시작 위치, b: 삭제할 element 수, c: 추가할 요소
그 뒤로부터 element를 이어서 넣는다

let seasons=["spring","summer","autumn","winter"]; seasons.splice(1,2,"봄과 겨울 사이");

console.log(seasons); //출력값: ["spring","봄과 겨울 사이","winter"]

 + concat

var myInst=["guitar"]; var myFx=["eq","reverb"]; var mine=myInst.concat(myFx); console.log(mine); //출력값: ["guitar", "eq","reverb"]

+ slice()

var seasons=["spring","summer","autumn","winter"]; var seasons2=seasons.slice(1,3); //index 1번부터 3번 전, 즉 2번인덱스까지의 값 리턴 consoel.log(seasons2); //출력값: ['summer', 'autumn']

+ ⭐<span style="background-color:yellow"><strong>!sort!</strong></span>
 1. abc 순으로 정렬

var arr=["vienna","budapest","seoul","praha"]; console.log(arr.sort());

// ['budapest', 'praha', 'seoul', 'vienna'] 출력

2. 오름차순으로 정렬

var points=[4,2,33,9,10]; console.log(points.sort()); //10,2,33,4,9으로 출력 /* sort는 저 숫자들을 문자열로 바꾼 후 정렬시키때문에 맨 앞자리 수로(4,2,3,9,1)을 기준으로 정렬이 된다. */

그래서 다시 sort함수를 수정해줘야 한다.

    오름차순으로 정렬

points.sort(function(a,b){ /* if(a>b) return 1; else if(a<b) return -1; else return 0; */ return a-b;

});

내림차순으로 정렬하려면 마지막에 return b-a;를 해주면됨

다음은 obejct를 배열에 넣고, 그 배열속 객체들의 값을 비교하는 함수를 작성한 예시이다.

var btob=[
         {name:"현식",point:100, city:"seoul"},
        {name:"창섭",point:90,city:"seoul"},
        {name: "성재",point:80,city:"vienna"}
        ];


btob.sort(function(a,b){

/*
if(a.point>b.point) return 1;
else if(a.point<b.point) return -1;
else return 0;
*/

//간단한 ver
return a.point>b.point?1: a.point<b.point?:-1:0;

});

console.log(btob.sort());

출력값:

(3) [{…}, {…}, {…}] 0 : {name: '성재', point: 80, city: 'vienna'} 1 : {name: '창섭', point: 90, city: 'seoul'} 2 : {name: '현식', point: 100, city: 'seoul'}

  + ⭐<span style="background-color:yellow"><strong>filter</strong></span>
: 조건에 맞는 배열만 리턴

//예시 1 var pass=btob.filter(funciton(person){ return person.point>80; });

console.log(pass); /*0 : {name: '창섭', point: 90, city: 'seoul'} 1 : {name: '현식', point: 100, city: 'seoul'}

두 객체만 리턴 */

//예시 2 var seoul=btob.filter(function(person){ return person.city=="seoul";

});

console.log(seoul);

/* 0 : {name: '창섭', point: 90, city: 'seoul'} 1 : {name: '현식', point: 100, city: 'seoul'}

리턴

*/

예시3 const numbers = [1, 2, 3, 4, 5]; const result = numbers.filter(number => number > 3);

filter의 장점은 for문으로 직접 돌리는 것보다 훨씬 간단하다는 것!

 + ⭐<span style="background-color:yellow"><strong>! reduce !</strong></span>
 reduce(a,c,i,arr)
 -a(accumulator): 누산기
 -c(curreunt value):현재 한개한개의 값
 -i(current index): 현재 index 값
 -arr(전체 배열)

var arr1=[1,2,3,4,5]; var total=0;

total=arr1.reduce(fucntion(accumulator,current){ return accumulator+current; });

console.log(total); //15출력

 + ⭐<span style="background-color:yellow"><strong>! map !</strong></span>
-새로운 배열 생성하며 기존 배열에서 원하는 값을 이용하여 추가로 새로운 값을 생성할 수 있다.

var userList=[ {firstName:"bom", lastName:"oh",email:"bom@gmail.com"}, {firstName:"bom2", lastName:"oh2",email:"bom2@gmail.com"}, {firstName:"bom3", lastName:"oh3",email:"bom3@gmail.com"}, ];

var userList2=userList.map(function(user){ return {fullName:user.lastName+user.firstName, email:user.email}; }); /*기존 userList에 있던 firstName과 lastName 값을 합쳐 fullName이라는 값 생성, 기존에 있던 email값도 가져올 수 있음 */

console.log(userList2); /* 0: {fullName: 'ohbom', email: 'bom@gmail.com'} 1: {fullName: 'oh2bom2', email: 'bom2@gmail.com'} 2: {fullName: 'oh3bom3', email: 'bom3@gmail.com'} */ ```