개발이 재밌는 개발자 Blog

Next.js

2022-02-24T00:00:00+00:00

React 학습

2022-01-05T00:00:00+00:00

React

https://slides.com/woongjae/react2021 (수업자료 Link)

1)React Getting Started

1-1)React Concept

Component Based Development

Virtual DOM = 화면에 있는 DOM을 직접 다루지않고 DOM을 다루는일을 리액트에게 위임한다.

라이브러리를 지원한다.

CSR(Client Side Rendering) :

개발환경 체크

Node.js
- installer
- nvm(노드버전매니저) : 노드의 버전을 변경할 수 있다.

ex) nvm install 14.16.1

//리액트 컴포넌트 -> HTMLElement 연결하기

=> import ReactDOM from 'react-dom';\

//리액트 컴포넌트 만들기

=>import React from 'react';

ReactDOM.render : 시작함수. html을 그려!! 라고 생각하면 된다.( main 이라고 생각하면된다.)

CDN을 통한 리액트 라이브러리 사용

바탕화면 폴더생성. -> 해당 폴더로 이동(cd) -> npm init -y -> 이폴더를 파일서버처럼 운영할수있는

npx serve 실행->

실제 배포시에는 production cdn을 가져와서 넣어야함.

개인개발용으로는 development cdn을 가져와서 html에 넣는다

const Component = props => {

return React.createElement(‘p’, p태그의 클래스 입력내용, p태그 안에 들어갈내용) //리턴될 떄 리액트엘리먼트로 되어야 한다.

} // 외부에서 props로받은 값을 사용한다. props.message 같은 형식으로 왜냐. 객체니까

ReactDOM.render(리액트 컴포넌트 , 리액트 컴포넌트가 그려질 곳 )

ReactDOM.render( React.createElement (Component, {message:init,count:0} , null) , 쿼리셀렉터 루트)

// 두번쨰는 실제 props에 넣어줄 인자

훅(Hooks) (리액트 컴포넌트 만드는 방법은 총2가지뿐이다.)

import React from 'react';
//정의 1번 방법
function FunctionComponent() {
	return <div>Hello</div>; // 필수로 써야함.
}
//사용
ReactDOM.render(<FunctionComponent/>, document.querySelectot(#root))

//정의 2번 방법
const FunctionComponent = () => <div>Hello</div>;
//사용
ReactDOM.render(<FunctionComponent/>, document.querySelectot(#root))

▶ 결과

<body>
    <div id="root"></div>


    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 위에 선언을 통해 React와 ReactDOM 을 가져온것 -->
    <script type="text/javascript">
        console.log(React);
        console.log(ReactDOM);

        
    // React.createElement(
    //     type, // 태그 이름 문자열 , 리액트 컴포넌트 , React.Fragment
    //     [props], // 리액트 컴포넌트에 넣어주는 데이터 객체
    //     [...children] // 자식으로 넣어주는 요소들
    // )

    //1.태그 이름 문자열 type
    // ReactDOM.render(
    //     React.createElement('h1', null, `type이 "태그 이름 문자열" 입니다.`),
    //     document.querySelector("#root")
    // )

    //2. 리액트 컴포넌트 type
    // const Component = () => {
    //     return React.createElement('p', null, `type이 "React 컴포넌트" 입니다`)
    // }
    
    // //<Component></Component> => <Component/> => <p>type이 "React 컴포넌트" 입니다/p>
    // ReactDOM.render(
    //     React.createElement(Component, null, null),
    //     document.querySelector("#root")
    // );

    //3.React.Fragment => tag가 없이 내용만 출력이 된다.
    ReactDOM.render(
        React.createElement(
            React.Fragment,
            null,
            `type이 "React Fragment" 입니다.`
        ),
        document.querySelector("#root")
    )
    </script> 


</body>

JSX

babel => 최신기술을 구버전에서 사용할 수 있게끔 구현을 시켜줄 때 사용한다.

JSX 문법으로 작성된 코드는 순수한 JavaScript 로 컴파일 하여 사용한다.

누가 해주나요?? =? babel

(baveljs.io 사이트 가면 간단하 확인이 가능하다)

위 사이트에서 Setup 으로 이동한다음 prototyping 클릭해서 Usage의 cdn을 추가하면

작동을시켜준다.

ClassComponent 에서 state를 정의하는 방법.

항상 state 는 객체여야함

Eevent Handling

camelCase 로만 사용 할 수 있으며 , onClick 과 같이 on을 붙여줘야한다
이벤트 ={함수}와 같이 쓴다.
실제 DOM 요소들에만 사요 ㅇ가능하다.
리액트 컴포넌트에 사용하면, 그냥 props로 전달한다.

render = 웹브라우저에 처음 그려지기 시작

리액트 컴포넌트 라이프사이클. (v16.3 이전의 라이프사이클 훅이다. 17버전은 달라짐)

마운트 = render(최초 랜더)

v16.3 이후의 컴포넌트 라이프사이클

Creating React Project

https://create-react-app.dev (CRA)

리액트 애플리케이션을 만드는 것과 관련된 사이트.

npx create-react-app 프로젝트 명 => 프로젝트 생성어,

cd 프로젝트명,

npm start

작업을 끝냈을때 배포할 준비를 해야한다 그럴 때

npm run build를 사용 : 우리가 작업한 소스코드들을 최적화 해준다.

빌드된 프로덕션용 파일들을 어떻게 실행하냐? npm install -s build`를 리액트 애플리케이션용 파일 서버로 활용이 된다.

husky

커밋 후 깃으로 푸쉬하기전에 어떤걸 하고싶다!! 할 때 사용

git init으로 폴더를 연결시켜주고,

tic-tac-toe 프로젝트에 npm i husky -D,

package.json에 “scripts”부분에 “prepare”: “husky install”을 설정해준다. 나중에 다시 패키지를 다른데서 설치해서 사용할때도 prepare을 돌면서 깃훅이 활성화 될것이다.

설치 후 허스키의 깃훅을 활성화 시키기 위해 npx husky install,

npx husky add .husky/pre-commit “lint-staged”로 파일 생성,

npm i lint-staged -D 설치 후 ,

lint-staged 설정을 해준다 package.json파일에

"lint-staged": {
	"**/*.js":[
		"eslint --fix",
		"pretter --write"
		"git add"
	] //어떤 폴더에 있던지간에 .js 확장자를 가진 파일을 해주겟다.
}

npm i prettier -D 설치 역시 해주고 Format On save 는 꺼주어야 한다.

pre-commit 파일 안의 lint-staged 내용을 npx lint-staged 로 바꿔줘야함.이유는 어떤 명령어인지 모르기 때문.

lint-staged : 커밋하려는 파일에 린터를 돌리고 싶을때 사용

팀에서 코드를 맞추고 푸쉬하기전에 강제로 맞추는 용도로 많은 팀이 사용하고 있다.

어떤 컴포넌트를 브라우저에 보여줄지에 대한 로직 = React Router

설치 방법 : npm i react-router-dom

cra에 기본 내장된 패키지가 아니다.
react-router-dom은 Facebook의 공식 패키지가 아니다.
가장 대표적인 라우팅 패키지이다

순서대로
`npx create-react-app react-router-example`
`cd react-router-example`
`npm i react-router-dom`

src의 폴더를 만들고 거기에 .jsx 파일 3개를 만든다 그 후

ex)
xport default function Home() {
	return <div>Home 페이지 입니다.</div>
}
export default function profile() {
	return <div>profile 페이지 입니다.</div>
}
export default function about() {
	return <div>about 페이지 입니다.</div>
}

동적 라우팅

노태환 강사 2022-01-06

구현 환경 : codesandbox.io

별도 환경설정 필요없이 코딩 가능, 쉬운 코드 공유
무료요금제(모든코드가 외부에 공유됨)

Modern JavaScript 튜토리얼 -> 공부하기 추천

Switch 와 NotFound

Switch문안에 넣어주면 맞을경우에만 해당하는 곳에 들어간다.

Home부분은 exact부분이여야한다. 이유는 나머지위에서 맞지않는경우 루트경로인 Home으로 들어가게된다

exact를 빼게되면 모든경로는 루트경로를 갖게된다.

JSX 링크로 라우팅 이동하기

a태그로 리액트에서 이동하게 될 경우 문제가 발생한다.

브라우저의 특정 새 경로를 입력해주는 것과 다를바없기 때문에 아래 특징과 맞지 않다.

React-Routing의 특징

서버에서 다른페이지를 새로 가져오는게 아니라 리액트애플리케이션 내부에있는 이 경로에 맞는 다른페이지를 보여주는 용도로만 라우팅 처리가 된다.

Link 컴포넌트를 사용한다!!

NavLink 경로가 매칭이되어 맞는다 판단된다면, 스타일 지정을 해준다.

Styled Components 라이브러리

npm i styled component

class 를 지정하지않았는데도 추가가 된다.

Styled Components 에서도 전역으로 css 속성을 적용시킬수 있다.

const GlobalStyle = createGlobalStyle``

``안에는 스타일을 넣어주는 곳이다.

import styled, {createGlobalStyled} from “styled-components”;를 해서 가져온다

React Shadow

본래의 html안에 영향을 주지않는 html이 있다고 생각하면 편하다.

npm i react-shadow

Ant Design

npm i antd

index.js 의 importt “./index.css” 위에 impot “ antd/dist/antd.css”를 추가해줘야 antd 를 먼저 적용후 우리걸 적용하는 방식으로 할 수 있다.

사이트 : ant.design

어떤 컴포넌트를 넣으면 그 모습으로 나온다.

Icon 패키지는 => 또 다른걸 설치해줘야한다 사이트참조! !

HOC ; Higher-Order Components

최근에는 중요도가 낮아짐.

이와 비슷한 역할을 하는 Hook이 나왔기 때문에 사용량이 줄어드는 추세.

Basic Hooks

useState, useEffect

useState를 사용하는 이유.

useReducer :

=> 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우 사용

=> 다음 state가 이전 state에 의존적인경우

ex)

const [state, dispatch]=useReducer(reducer, {count: 0});
//

컴포넌트간 통신

상위컴포넌트와 하위컴포넌트 의 2가지 방식으로 가능.

중간의 props로 데이터를 전달해주는 컴포넌트들은 관리하는데 있어 주의해야한다.

이러한 것들을 해결하기위해 제안되는 방식을 학습해본다.

해결방안 : Context Api 를 통해 해보자.

데이터를 Set하기

1.context를 생성한다.

2.context.프로바이더를 사용한다

3.value를 사용한다

import React from 'react'

const 이름 = React.creatContext();
export default 이름

하고 index.js 에서는
<이름.Provider value={}/>

jest

폴더만들기 -> 폴더경로이동->npm init -y (npm 프로젝트로 만들기)-> npm i jest -D

package.json

“scripts” 부분에

클래스컴포넌트는 16.8.0 부터 hook을 주로 쓰기때문에 잘 안쓴다

test('adds 1+2 to equal 3', () => {
	expect(1+2).toBe(3)
})

test 코드를 분야별로 묶는거 describe(‘’, () => {});

npx jest –watchAll : 항상 테스트가 켜져있는 상태가 된다 일일히 npm test 안해도됨

jest 는 기본으로 깔려있음. 별도의 패키지 설치 필요 x

그 후 a 를 누르면 app.test.js 를 test할 준비가 된다.

React Advanced

1.Optimizing performance : 필요할때만 렌더한다.

현업 추가 팁: redux toolkit으로 쓰면 더 쉽고 거기에 타입스크립트로 쓰면 큰 프로젝트 스케일링하기도 편합니다.

리덕스 미들웨어

action이 dispatch 된 다음, reducer에서 해당 action을 받아와서 update하기 전에 추가적인 작업 가능
주로 비동디 작업을 처리할 때 사용됨
redux-thunk, redux-saga를 많이 사용한다.

redux-thunk :

npm i redux-thunk

미들웨어는 함수이다.

import thunk from “redux-thunk”

Ducks Pattern : redux를 이러한 패턴으로 작성하니 좋다.

npm i react-router-dom

npm i connected-react-router : router 를 redux로 관리하고 싶을떄 쓴다

redux actions

=> npm i redux-actions

import { createAction } from "redux-actions";

console.log(createAction("Hello")("안녕하세요"));

따라서 , createAction 을 수행한 결과무이 액션 생성 함수가 된다.!

redux-saga

npm i redux-saga

React로 나의 책장 만들기

npx create-react-app my-books -- template typescript

npm i react-error-boundary : componentDidCatch 만약 런타임 시 에러가 발생하게되면 에러페이지로 FallBack시켜준다.

Next.js

Next.js는 React 어플리케이션의 서버사이드렌더링(SSR)을 쉽게 구현할 수 있게 도와주는 프레임워크입니다.

nextjs프로젝트의 기본적인 세팅을 간편하게 시작하는 방법은 create-next-app을 사용하는 것입니다.

react / react-dom / next 가 함께 설치되며, 간편하게 프로젝트 구조를 잡을 수 있습니다.

환경 설정 하기

시스템 요구사항

- Node.js 10.13 or later

- MacOs, Windows (including WSL), and Linux are supported

Node.js : 자바스크립트 런타임

NPM : 패키지 매니저 도구

Yarn : 개선된 버전의 NPM

기본적으로 Node.js, NPM or Yarn 이 설치되어 있어야 하고, 편집기로는 VSCode를 사용하도록 하겠습니다.

npx create-next-app [프로젝트 명]
index.js 가 메인 페이지이다.

리덕스는 언제 쓰는게 좋을까?

그렇다면 리덕스는 언제 쓰는게 좋을까? 이 질문에 대한 답은 리덕스의 공식문서에 나와있다.

앱의 여러 위치에서 필요한 많은 양의 상태들이 존재할 때 (전역 상태가 필요하다고 느껴질 때)
상태들이 자주 업데이트 될 때
상태를 업데이트 하는 로직이 복잡할 때
앱이 중간 또는 큰 사이즈의 코드를 갖고 있고 많은 사람들에 의해 코드가 관리될 때
상태가 업데이트되는 시점을 관찰할 필요가 있을 때

Vue

2022-01-01T00:00:00+00:00

Vue

App.vue의 순서가 뒤바껴도 MyBtn 안의 순서에 따라 출력된다.(slot 부분)

조상 components에서 자식 components 넘겨줄때 props 를 이용한다.

자식 components에서 후손 components 넘겨줄때 props 를 이용한다.

조상 components에서 후손 components 넘겨줄때 Provide/Inject를 이용한다.

vue-router next (404 페이지찾을수 없음 관련)

컴포지션 API: 대형 프로젝트를 진행할 시, 변수와 함수가 서로 다른 공간에 위치하는 것은 하나의 기능을 한번에 보기에 매우 어려워짐.

따라서, setup이라는 함수를 제공하는 컴포지션API 함수 내에서도 기능별로 함수와 변수를 모아둘 수 있어 가독성이 좋아지며, 마치 Vanila Javascript를 작성하는 것처럼 Vue를 제작할 수 있게 한다.

flex-shrink: 1;

css 적용시 페이지 폭에 막혀 원하는 width가 안나올떄 0으로 바꾸면 설정한대로 나온다.

Vuex(Store) 개요

:중앙집중식 상태관리

데이터 전달에 있어 경로 최적화.

npm i vuex@next 설치.

store 폴더 생성 - index.js 파일 생성

main.js에

import store from ‘./store/index.js’

createApp(App).use(store)

여기서 use 는 vue.js 에서 사용할 수 있게금 플러그인 연결

mutations => 여기 에서만 데이터가 변경 가능하며 다른 컴포넌트에서는 변경할 수 없다.

관리가 복잡해지고 유지보수 어려움 떄문이다.

async await 비동기 관련 공부.

Object.keys() => 객체데이터의 속성들만 가지고 새로운 배열을 만들어 준다.

비동기-콜백과 프로미스 객체의 이해(promise)

코드가 작성된 순서대로 출력되는 함수 = 동기 방식

순서대로 작성됬지만 순서대로 나오지 않을 때 순서대로 나올 수 있게 설정해주는 것 = 비동기 방식

=> 콜백지옥

이를 해결하기위해 Promise 를 사용하여 해결 가능.

function a() {
	//promise : 약속의 객체!
	return new Promise(funtion (resolve) {
	
	})
}

async function test() {
	await a() 
}
// 비동기 함수 

async await 사용이 불가능할 때 then 을 메소드체이닝 방식으로 쭈욱 연결해서 사용이 가능하다.

12월4주차

2021-12-17T00:00:00+00:00

4주차 정리

toyproject

진행중 …

강의 정리

TypeScript 이어서 …

Aliasing

ex)

let person : [string, number ] = [ 'mark'm 35];

type PersonTuple = [string, number];

let another: PersonTuple = ['Anna', 24];

$$ TypeScript 순서

폴더 생성 - npm init -y->npm i typescript -D->npx tsc --init

ex) tsconfig.json에서

{

“compileOnSave” : true,

“compilerOptions”: {

}

}: 프로젝트에서 파일을 save하면 컴파일하겠다.

extends :

npm install –save-dev @tsconfig/deno

{

“extends” : “@tsconfig/deno/tsconfig.json”

}

files, include, exclude

셋다 설정이 없으면 ,전부다 컴파일
files
- 상대 혹은 절대 경로의 리스트 배열이다.
- exclude 보다 쎼다.
include, exclude
- glob 패턴 (마치 .gitignore)
- include
- exclude 보다 약하다.
  
  *같은걸 사용하면 .tx/ .tsx/ .d.ts 만 include(allowJS)`

<outDir>은 include에 있어도 항상 제외한다.

compileOptions: 외부라이브러리를 사용하는경우 typeing이 안되어있기떄문에 쓴다??

typeRoots
types

항상 strict를 true 로 설정해서 사용하는게 중요.: type checking 옵션을 킨다.

interface ex)

#interface 사용전 !!#


function hello1(person: {name: string; age:number}):void {

console.log(`안녕하세요!${person.name}입니다.` )

}

const p1:  = {

name:"Mark,

age:39,

}

hello1(p1);
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
#interface 사용후#
interface Person1 {
name:string;
age:number;
} // 인터페이스부분은 컴파일 시 사라지게된다. -> js에 표시되지않음.

function hello1(person: Person1):void {
console.log(`안녕하세요!${person.name}입니다.` )
}

const p1: Person1  = {
name:"Mark,
age:39,
}
hello1(p1);

age는 있을수도 없을수도 있는 형태라면
`age?` 로 표기한다.

arrow 함수 내에서는 this를 사용할 수 없다!

implements를 이용해 인터페이스의 내용을 바탕으로 class를 만들어낸다.

ex) class Person implements IPerson1 {}

상속

interface IPerson2 {
	name: string;
	age?:number;
}

interface IKorean extends IPerson2 {
	city: string;
}
const k: IKOrean = {
	name: " 나",
	city: "서울",
}
//
프로젝트할때 상속관계로 interface를 표현하는 경우가 많고 편하다.

Function interface

interface HelloPerson {
	(name: string, age?: number): void;
}
const helloPerson: HelloPerson = funtion(name:string, age:number){
console.log(`안녕하세요!${name}입니다.`);
};
helloPerson("Mark", 39);
//에러발생 age:number 부분
//이유는, 실제 구현체는 항상 있는걸로만 표현되있기 때문에 Error가 발생.
따라서, age,number를 지우고 아래처럼 쓰면 정상작동.

type alias vs interface

//type alias

type 함수이름 = ( food: string) = > void;

//interface

interface IEat {

(food: string): void;

}

//type alias

type PersonList = string[];

//interface

interface IPersonList {

[index:number] : string; // [0] : 이름;

}

Class

클래스의 처음은 대문자로 시작 ex) class Person {}

JS로 컴파일되면 es5의 경우 function으로 변경된다

var Person = (function() {
	function Person() {
	
	}
	return Person;
}());
var p1 = new Person();
console.log(p1);

class => object

싱글톤 패턴

클래스로부터 단하나의 객체만 만들어서 사용.

class ClassName {
private static instance: ClassName | null = null;
public static getInstanc() {
//ClassName 으로부터 만든 object가 있으면 그걸리턴
// 없으면, 만들어서 리턴
	if(ClassName === null) {
		ClassName.instance = new ClassName();
	}
	return ClassName.instance;
}
private constructor () {}
}
const a = ClassName.getInstanc();
const b = ClassName.getInstanc();

abstract :

★abstract는 완벽하지않기떄문에 new로 뭘할수없다 = > 오류뜬다.

★abstract로 구현한 함수를 꼭 구현해줘야한다.

상속을 통해 가능.

//기본형식
abstract class 이름 { 
abstract 함수()
}

Geneucsm Any와 다른점.

Any는 모든걸받아서 모든걸 주는 것. <->

제네릭은 각자에 맞게 주어준다.

제네릭함수명<타입(인수: 타입): 리턴타입{
 	return 인수
}

T 부분 -> <T, U> 등 여러개가 들어갈 수 있다.

Json

“Json은 Map구조이다.”: Key와 value가 쌍으로 저장되는데, key값이 중복되면안된다.

(즉, 마지막 값만 저장된다.)

SCSS

반복문

@for $i from 1 through 10 { // for(let i=0; i<10; i += 1)
	.box:nth-child(#{$i}) {
		width: 100px 	
	}
} //아래결과

SCSS함수

색상 내장 함수

saturate($color, 40%) // 채도

lighten // 명도

darken // 어둡게

invert // 색상을 반전

mix // 두개의 색상을 섞음

rgba($color, .5) // 투명도

가져오기

main.scss / sub1.scss /sub2.scsss 총 3개의 파일을 만들었을 때

main.scss 에서 @import "./sub1", "./sub2"로 하여 각 scss의 설정을 가져올 수 있다.

리팩토링: 결과의 변경 없이 코드의 구조를 재조정한다.

Css의 파일을 Scss의 형식으로 재구성해보았다.

반복문@each

@each $c in $list {1,2,3}

:list안의 것들을 c라는곳에 반복해서 하나씩 넣어준다.

@each $key, $value in $map {1,2,3}: key와 value 형태로 사용할 수 있다.

부트스트랩 part에서 기본적으로 알고있어야 사용이가능하지만,, 중요한 부분은 아니다.

https://www.curioustore.com/#!/ 변수명 추천 사이트

뷰 - 중국의 디자이너가 만듬

구글이 만든거 - 앵귤러

페이스북이 만든 거 - 리액트

둘다 프레임워크이다

이후 이들보다 좀더 쉬운 형태의 작업방식을 디자인하여 학습시간을 줄일 수 있는

vue.js가 등장함

뷰는 앱작업이 약함 하지만, 플러터가 나왔기때문에 이부분 학습도 굿

웹컴포넌트 ??(아직은 이르다)

Chrome - Vue.js devtools를 검색해서 설치

vscode에서 vetur, vue vscode snipperts 2개를 깐다.

npm i -g @vue/cli : 프로젝트를 위한 설정/설치를 쉽게 하기 위해 Vue CLi를 제공.

-g 옵션은 전역에 설치하라는 옵션

패키지 매니저인 npm을 통해서는 전역과 지역으로 범위를 구분해서 설치하도록 되어있다.

설치후 버전을 확인하는 명령 -> vue --version

cd first_vue ->npm urn serve 이동한후에 first_vue 프로젝트를 개발 진행용으로 진행

npm run build <= dist라는 폴더를 만든다 –> 이걸 Netlify(호스팅 해주는거)에 올리면 배포.

bootstrap

bootstrap을 통해 할 수 있는 것들.

class 이름만으로도 버튼 생성이 가능.

01.CDN 프로젝트 생성

트리 쉐이킹(Tree Shaking)이란 단일 번들을 최적화할 때 사용되는..필요하지 않은 코드를 제거하는 기술.

bootstrap 설치 및 연결

bootstrap 사이트 - get started 클릭 - CSS, JS link 복붙 및 Bundle(묶음이라는 뜻) 및 Separate 에서 script 복붙

popper.js => 팝업창을 원하는곳에 간단하게 만들어주는 것.(사이트 있음)

사이트에서 사이드바-> Components 로 이동 -> Dropdown 클릭 후 코드 복사후 넣기.(실습해보기)

양식

Forms

(이메일 및 패스워드) 입력 폼들의 소스코드가 있음.

NPM 프로젝트 생성

1.npm init -y => packge.json 파일 생성

2.npm i parcel-bundler -D

3.scripts 부분 -> “dev”: “ parcel index.html”

“build”: “parcel build index.html” 해주기

4.bootstrap 사이트로 이동 -> npm install bootstrap@next 설치

5.main.js 파일 생성 - import bootstrap from ‘bootstrap/dist/js/bootstrap.bundle’

6.scss 폴더생성 -> main.scss 파일 생성 -> @import “../node_modules/bootstrap/scss/bootstrap.scss” 해주기

7.scss와 달리 js는 node_modules에 바로 접근이 가능하다. (CDN 방식과 반대)

장점.

bootstrap에서 필요한 부분들만 가져와 사용할 수 있으며, 커스터마이징이 가능하다.

테마 색상 커스터마이징

bootstrap 사이트 사이드바에 Customize 로 이동하여 참고.

성능 최적화(트리 쉐이킹

Optimize

가져오고 싶은 것들만 가져오기

Bundler

scss , react 등 을 Bundler 를 통해 변환을 해주는 것.

html,css,javascript 로만 코딩을 하기에는 비효율적인 면들이 존재한다.

따라서, 다양한 기능을 가진 패키지들을 통해서 개발을 진행하고 번들러를 통해 변환을 진행한다.

parcel-Bundler : 중/소형 프로젝트에 적합.

Webpack: 중/대형 프로젝트에 적합.

정적파일연결

Online ICO converter 사이트를 통해 파비콘 파일생성 가능.

parcel plugin static files copy 사이트를 통해 자동으로 번들러를 통해 dist로 붙여넣기 해주는 옵션을 설정한다

-> npm i parcel plugin static files copy 터미널 실행

package.json 에 “staticFiles” : {“staticPath”: “static”} 해준다.

static 폴더 만들고 favicon.ico 파일을 넣어준다

autoperfixer

npm i -D postcss autoprefixer 설치

Vender 사의 접두사를 자동으로 붙여주는 것

이 후,

"browserslist" : [
">1%"//전세계의 점유율이 1%인 브라우저 뜻
"last 2 versions"//해당하는 브라우저의 마지막  2개의 버전은 지원.
]

.postcssrc.js 파일 생성해준다. 이름을 똑같이 만들어야 parcel-bundler 가 인식을 한다.

웹에서 작용하는 js 는 import,export

const autoprefixer = require('autoprefixer')
== import autoprefixer frome 'autoprefixer' 와 같다.

Node.js에서 작동하는 require(),module.exports

module.exports = {
	plugins: [
	autoprefixer
	]
}
==
export {
	plugins: [
	autoprefixer
	]
} 와 같다.

autoprefixer 와 postcss 간의 충돌 오류가 자주 발생할 수있다.

따라서 , autoprefixer 를 다운그레이드 해주면된다.

npm i -D autoprefixer@버전숫자

★★ 쓰는 이유 : 구버전의 브라우저에서 적용이 가능하게끔 하기 위함이다.

Vue

React 배우기에 앞서 입문으로 배우기 좋다.

01. 개요

Vue.js 3버전을 학습할 예정이다.

Vue.js 홈페이지로 이동한다.
왼쪽 상단에 필수요소 부분 설치방법으로 이동한다.

CDN 방식 <–> npm 방식 이 존재한다.

npm 은 Vue를 사용하여 대규모 애플리케이션을 구축할 떄 용이하다.

//기본 사용 구조 예시

<div id="app">
	<h1></h1>
</div>

Vue.createApp({
	date() {
	return {
	message: 'Hello Vue!'
	}
	}
}).mount('#app') //mount를 통해 접근한다.

02. CLI

npm install -g @vue/cli 를 터미널에서 진행.

Google검색 -> Vue CLi 페이지로 이동 후 get started 클릭 -> Creating a Project 로 이동.

vue create hello-world 명령어 -> hello-world 프로젝트를 생성할 수 있다.

특정한 규칙에 맞게 동작되는지 확인하기 위해 lint 명령어를 통해 서버를 실행가능.

Vue

장점 : 구성옵션들을 최대한 신경안쓰고 문법에 집중해서 작성가능 (입문자)

단점 : 나만의 프로젝트를 세부적으로 관리하면서 하는 중급자 이상한테는 아쉬울 수 있다.

03.Webpack Template

npx degit 저장소이름 새로운이름의폴더 로 복제됨

git clone과 다른 점 => 기본적인 버전 내역이 삭제된 상태로 복제된다.

웹팩을 기반으로하는 뷰 프로젝트 생성하는 것이다.

npm i veu@next로 신버전 설치.

.vue라는 확장자라는 파일을 관리하기 위해서는

npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc를 설치한다.

=> vue 파일을 변환해서 브라우저에서 동작하도록 보여준다.

weebpack.config.js 에서 js불러오는 부분 수적하기 (entry)

rules에 설정해주기.

rulex: [
	test: /\.vue$/,
	use:'vue-loader'
]
그 아래 use 부분에
'vue-style-loader' 추가해주기. //뷰 파일 내부에 스타일 태그를 해석해서 동작하게 해주는 것.

맨 위에

const {VueLoaderPlugin} = require(‘vue-loader’) 해주고

plugins 부분으로 아래로 이동해서 안쪽에 new VueLoaderPlugin() 생성자 함수 설정해주기

기존 js 폴더는 삭제하고 src 폴더를 만든후 App.vue 파일 및 main.js 파일을 만든다.

App.vue 파일 내용은 아래와 같이 작성한다.

<template>
	<h1></h1>
</template>

<script>
export default {
	date() {
		return {
			message: 'Hello World!'
		}
	}
}
</script>

main.js 파일 내용은 아래와 같이 그 후 작성해준다

CDN
import Vue from 'vue'
import App from './App.vue'

Vue.createApp(App).mount('#app')

CLi 
객체 구조 분해를 통해 가져올 수 있다.
import {createApp} from 'vue'
import App from './App.vue'

Vue.createApp(App).mount('#app')

이 후 npm run dev 를 해주면 열린다.

index.html 파일 내용은 아래와 같이 작성해준다.

바디 태그 안에
<div id = "app"></div>

확장자 관련 부분

확장자 (.js , .vue) 를 안해줄 시 어떤 파일인지 몰라 오류가 발생한다. (확장자 표기)

따라서,

이와 같이 설정 해준다면 확장자 명을 붙이지 않아도 오류가 발생하지 않는다.

파일을 가져올 때 확장자 명을 붙이지 않아도 됨.

App.vue 파일에 연결할 새로운 Vue 파일들을 설정한다.

새로운 폴더 생성 (이름은 components)
HelloWorld.vue 파일 생성해준다.
static 안에 images 폴더를 src 안으로 넣어준다.
images 폴더 명을 assets로 변경해준다.

<template>
	<img src="~assets/이미지파일명">
</template>	

이 경로를 통해서 이미지를 가져와서 vue파일에서 분석해서 화면에 보여주도록 해줘야 한다
npm i -D file-loader 를 터미널을 통해 설치해준다.
웹팩 컨피그 파일로 이동한다.

.js 찾아서 기본적인 규칙을 적용하는 부분 밑에다

{
	test:/\.(png|jpg|jpe?g|gif|webp)$/  // ?는  e가 포함된 것 포함되지 않은 것 모두 적용하는 뜻
	use:'file-loader'
}

extensions 부분 아래에

alias 경로 별칭을 설정해준다.
	alias: {
		'~':'path.resolve(__dirname, 'src')',	
		'assets':'path.resolve(__driname, 'src/assets')'
	} // __dirname 은 현재 웹팩컨피그 파일이있는 그경로를 의미.

04.ESLint 구성

터미널에서 npm i -D eslint eslint-plugin-vue babel-eslint 3가지 패키지 설치해 준다.

.eslintrc.js 파일 생성해준다.

module.exports = {
	env: {
		browser: true,
		node: true
	}, // node와 browser 환경에서 코드 검사를 하는 부분
	extends: [
	//vue
	//'plugin:vue/vue3-essential'	//레벨1
	'plugin:vue/vue3-strogly-recommended'// 코드 규칙 권장사항 레벨2 레벨2를 적용한다
	
	//js
	'eslint:recommended' //eslint에서 권장하는 규칙을 통해 검사한다.
	
	],//코드 검사를 할 규칙들 정의
	parserOptions: {
		parser: 'bable-eslint' //babel은 ES6이상의 문법을 구버전의 브라우저에서 동작할 수 있게 변환시켜줌.
	}, // 코드를 분석할 수 있는 분석기를 설정해준다.
	rules: {
	//코드레벨2를 적용시 작성하지 않아도 된다. 다만, 사용자의 입맞에 맞게 변경하려면 작성해주면 된다.
	}
}
//하나의 객체 리터럴 반환

eslint-plugins-vue 사이트(eslint.vuejs.org) 에서 규칙을 입맞에 맞게 참고하여 설정할 수 있다.

eslint 관련 완성된 템플릿 => `https://github.com/ParkYoungWoong/vue3-webpack-template 에서 확인 가능

데이터를 갱신하면 화면도 바뀐다. = > 반응성(Reactivity)

조건문과 반복문

<div v-if="count>4"></div> 
v-if, v-for 같은 조건/반복문을 설정할 수 있다. 디렉티브(Directive)라고 부른다.

style 부분에 scoped 선언 시 다른 컴포넌트에 영향을 주지 않는다.

created() {} : components 가 실행된 후 실행되는 함수

mounted() {}: Dom과 연결된 후 실행되는 함수

라이프사이클 중 위 2개가 가장 많이 쓰인다.

템플릿 문법

watch 옵션 은 감시하는 기능

console.log 를 통해 콘솔에서 확인가능.

event.stopPropagation()

=> 부모 div안에 자식 div가 있고 클릭 이벤트 시 자식을 클릭했을때 부모의 것도 출력이 된다. 이를 방지하기위해 설정해준다.

(버블링 방지)

=== @click.stop=”“으로 설정 .

이벤트 캡쳐링

:나오는 순서를 반대로 바꿔주는 것이다 ===@click.capture=”“으로 설정 @click.capture.stop 도 가능.

@click.self=” “ 는 해당영역을 정확히 입력했을 떄만 동작하도록 만들어주는 것.

@wheel 은 휠을 위아래 움직일때마다 출력.

@wheel.passive 는 버벅임을 없애기 위해 스크롤의 움직임 따로, 로직 따로 독립적으로 돌아가게 해준다.

키 수식어

@keydown : 키보드 입력마다 콘솔에 출력된다.

v-model.trim = “ “ 앞뒤의 공백문자열 없이 출력가능

v-model은 양방향바인딩.

Vue 설치시

{
	test:/\.vue$/,
	use: 'vue-loader'
}
{
	test:/\.s?css$/,
	use: [
		'vue-style-loader'
	]
}

vue-style-loader : App.vue 와 같이 .vue로 끝나는 확장자 파일들에 내부에서 <style>이라는 태그로 css 내용을 작성이 가능하다.

npm i -g @vue/cli

vue create 프로젝트 명

npm i vue@next : 최신버전 Vue 설치

npm i -D vue-loader@next (최신버전설치) vue-sttle-loader @vue/compiler-sfc(뷰파일을 변환해서 브라우저에서 동작할 수 있는 형태로 바꿔준다)

3개의 패키지 설치.

12월3주차

2021-12-13T00:00:00+00:00

홈페이지 만들기

<header>는 주로 제목,네비게이션을 포함하고 로고,목차,검색폼을 그룹핑 할 수 있음.

<nav> 는 주요 네비게이션을 그룹핑한다. <header> 아래 소제목

<article> 는 본문내용 작성

<section> 는 영역 내 분리

<aside>는 분리된 영역

<main>는 article 까지 포함하여 작성해서 가지고있다.

CSS 복습

font-style	글자 기울기
font-weigh	글자 두께
font-size	글자 크기
line-height	줄 높이
font-family	폰트(서체)
text-align	정렬
margin	각 list 요소들 상하좌우에 크기 적용(시계방향 순)
margin-bottom	요소의 아래에만 크기 적용(시계방향 순)
padding	요소의 내부 여백 지정(시계방향)
border-radius	모서리 둥글게
overflow	요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어
`display`	block,inline,inline-block
text-align	문자 정렬 방식
line-height	한줄의 높이를 설정
text-indent	양수,음수 가능 글자를 밀어쓰는게 가능
background-attachment	scroll:이미지가 요소를 따라 같이 스크롤
	fixed:이미지가 뷰포트에 고정. 스크롤 x
`dispayl:flex;`	수평 정렬
flex items	자동으로 아이템이 된다.
flex-wrap	flex items 묶음(줄 바꿈) 여부
justify-content	주 축의 정렬 방법
align-content	교차 축의 여러 줄 정렬 방법
align-items	교차 축의 한 줄 정렬 방법

display : inline-flex : 인라인 요소의 크기만큼 할당되면서 flex가 적용된다.

flex-direction: row와row-reverse가 있다 왼쪽부터정렬 / 오른쪽부터 정렬.

(주축을 설정할때 사용한다.)

세로일 때는 column으로 설정한다.

오픈 그래프: 웹페이지가 소셜미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정하는것.

description 은 간단히 작성한다. 길게 작성할경우 카카오톡에서 악성스크립트로 인식할 수 있음.

SEO: 검색 엔진 최적화, Search Engine Optimization)

구글이나 네이버 등에 자신의 Web site/Page를 노출할 수 있도록 정보를 최적화 하는 작업을 말한다.

※ 필자는 이 부분에 대해 굉장히 어려움을 겪었고 찾던 부분이였습니다….. ※

※ 모든 Icons , 이미지 등을 매번 디자이너에게 요청하는 것도 쉬운일은 아니다..

※ 따라서, 이런 부분들을 찾아서 적용할 수 있는 부분들을 찾아서 사용하는 것이 좋다.

심지어, 해당 팀에 디자이너가 없을 수 있기 때문에 중요하게 짚고 넘어 가는 것이 좋습니다.

fonts.google.com

=>폰트 설정 적용

google material icons

=> 아이콘 설정 적용

서브메뉴 만들기

a 태그 사용 시 하이퍼링크 속성은 살려두되 기능은 작동하지않게끔하려면

javascript:void(0) 을 삽입해주면 기능작성이 준비되있지않아도 살려둘 수 있다.

드롭다운 메뉴 만들기

 position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  부모에게 relative 를 주고 
  위치 상 부모 기준으로 가운데 위치한다.

position 사용시 자동으로 inline 에서 block 으로 바뀐다.

BEM

HTML 클래스 속성의 작명법

요소__일부분 표시

요소–상태

전역 배지(GSAP)

Javescript 부분 참고(코드)

이미지에 글씨가 포함되 있으면 대체텍스트 alt에 명시해주는게 좋다

position

굉장히 중요한 부분.

float, flex => flex를 요즘 더 많이 쓰는 추세.

after 이용하여 clear:both 하여 float 취소시켜주면서 사용하는 방법 숙지.

swiperjs 구글에 검색.

swiperjs 와 관련하여 현재 opacity 부분 promotion 부분에 적용이 안된다.

swiper-slide-active에

padding-top

padding-top <– 부모요소의 width 길이를 기준으로 %하여 세로 가 계산된다 항상.

중요한 부분!!!!

youtube iframe api

:사이트에서 유튜브 영상 삽입하여 보여줄 수 있는 방법.

랜덤한 숫자를 생성하는 함수

// 범위 랜덤 함수 ( 소수점 2자리 까지)

function random(min , max){
// `.toFixed()`를 통해 반환된 문자 데이터를,
// `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환
  return parseFloat((Math.random() * (max - min) + min).toFixed(2))
}

※모든 내용은 프로젝트 코드를 참조하시오.

논외

Figma 툴 사용을 높이자.

Markdown

README.md

새폴더 만들기 -> vscode에서 폴더 선택해서 열기 -> 파일생성하기(README.md)

Node.js

개요 및 설치

Chrome V8 JavaScript 엔진으로 빌드된 javaScript 런타임

:프로그래밍 언어가 동작하는 환경 (런타임)

nodejs.org 검색을 통해 이동.
LTS(장기적으로 안정되고 신뢰도가 높은 버전 제품화 과정에 용이)를 다운받는다.

NVM 사용법

nvm ls

nvm install 버전 입력

nvm use 버전입력

node –version 확인

nvm 변경할때는

nvm use 버전입력

nvm 지우기 : nvm uninstall 버전입력

NVM 개요 (1)

npm(node package manager): 전 세계의 개발자들이 만든 다양한 기능들을 관리.

npm install XXX 를 통해 우리가 설치해서 사용할 수 있다.

npm init -y

package.json 파일이 생성됨 ( 패키지 관리하기 위해)

npm install parcel-bundelr -D : parcel-bundler 를 설치한다

npm install lodash

한번 설치한 패키지는 package.json에 남게되고 다시 설치를 진행할 경우)npm install) 설치된다.

package-lock.json 이라는게 생긴다. => 자동으로 관리되는 파일.

package.json => 직접적으로 관리하는 파일.

위 두개는 절대 지워지면 안된다.

-D 를 붙이는경우 실제 웹사이트에서 사용되지 않는 개발에 사용할떄만(개발용) 의존하는 용도

일반 의존성 설치는 붙이지않는다.

package.json => scripts 부분에 “dev”:”parcel index.html”을 해준다.

html 실행 시 서버를 실행하는 부분!!!!!!

“build”: “parcel build index.html” +>결과를 보이겠다!!!

parcel-bundler를 설치했기 때문에 위 구문을 적용하면 우리 프로젝트 내에서만 구동되는 서버를 실행시켜준다.

로컬에서 개발서버를 열겠다!! 라는 의미.

그다음 => npm run dev 를 하면

홈페이지 주소가 나오고 우리가 작성한 main.js 부분이 출력된다 (console)

ctrl + c : 서버 종료

.gitignore 파일을 만든다 ( git에서 무시할 파일설정)

.cache/ dist/ node_modules/ 등

위의 과정들을 하는 이유

실제 개발에서는 open with liveserver 를 하지 않고

로컬 서버를 열어서 개발을 하기 때문이다.

숙지할것.

ECMA 스크립트

ES라고도 부른다.

(EX6 ES2015 등)

정을수 강사님 수업 (JavaScript)

https://pythontutor.com/

찾아보기

js 는 모든 코드를 객체화해서 관리한다 !! 의 느낌.

프론트엔드 개발 기술면접 질문

블랙스코프 const let 등

호이스팅 . http 런타임 객체지향 프로토타입 등

js,css,html 에 대해 상세히 공부를 하자 이론에 대해서…

블랙스코프 안에있는 함수는 왜 호이스팅이 안되는지!!? => 조사할것

브라우저 렌더링 , http , 자바스크립트 동작원리 랑 핵심개념

-> 콜 스택, 이벤트 루프 , 스코프 , 실행 컨텍스트 , 프로토타입

협업(팀프로젝트)과 관련하여 - 협업 과정에서 타협이 필요한 상황이 있었는지,

- 프로젝트 진행 시, 개발부터 배포까지의 프로세스 설명 - 다른 직군(기획, 설계, 백엔드 개발자 등)과의 커뮤니케이션 경험

적성 및 인성 관련하여 - 왜 프론트엔드 개발자 하고싶냐 - 성취감을 느꼈던 경험 - 입사 후 자기개발에 대한 포부 (앞으로의 커리어 관리) - 평소 어떻게 공부했느냐 - 요즘 흥미가 있는 기술, framework - 회사에 기여할 수 있다고 자부할 수 있다고 느끼는 자신만의 특별한 무기 - 클린코드에 대한 자신의 생각 - 읽었던 개발 관련 서적 관련 - 회사에서 강제로 업무를 변경(프론트엔드 -> 기획자)을 요청 할 경우 어떻게 할 것인가

리액트 공부할것. 중심으로!

코딩테스트와 실제 적용된 기술 스택을 많이 본다.

typeof : 데이터의 타입을 알아내서 출력한다.

import 파일명 from ‘./파일앞의이름만’ -> Js에 해당

js끼리 연결할 수 있다. <==핵심

비교 연산자

=== : ex) console.log(a===b)

서로 다르면 false 같으면 true

!==: ex) console.log(a!==b)

서로 다르면 true 같으면 false

&& : 둘다 true면 true 하나라도 다르면 fasle

|| : 하나라도 true 면 true

###

JS의 기본

데이터 타입
산술 연산자
변수 var, let , const의 유효 범위
- var 같은 경우 함수 내부이외로 let, const 와 다르게 쓰일 수 있고 메모리를 잡아먹을 수 있기
  
  에 되도록이면 let, const 를 사용하는 것이 좋다.

함수

function sum(x,y) { -> sum(x,y): 매개변수
console.log(x+y)
}
sum (1, 3) // 4 -> 인수

즉시실행함수

const a= 7;

(function() {
 console.log("a * 2")
}());
//
function double() {
 console.log("a * 2")
}
double(); // 두개가 같은 내용.

-> 함수를 생성하자마자 바로 실행이 가능하다.

호이스팅 ★★★

함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

Javascript 는 위에서부터 아래로 순서대로 실행이 되기 때문에 위 코드는 오류가 난다.

이 코드는 실행이 가능하게 되어진다. 함수 선언부가 아래에 선언되어 있지만

실제로 브라우저가 동작할때 자바스크립트 엔진에서는 가장 최상부로 올라가서 만들어지게 되므로 호출이 가능해지게 된다.

호출하는 부분보다 함수가 아래에 선언되어 져도 실행이 가능한 원리이다.

타이머 함수

1.setTimeout(함수, 시간) : 일정 시간 후 함수 실행

2.setInterval(함수, 시간) : 시간 간격마다 함수 실행

3.clearTimeout(); 설정된 Timeout 함수를 종료

4.clearInterval(): 설정된 Interval 함수를 종료

setTimeout(functuin () {}, ㅖ
	console.log('내용')
},3000)  // ms단위(3초) 3초 뒤 실행.

1,3 / 2,4 번 짝궁.

콜백

함수의 인수로 사용되는 함수

setTimeout(함수, 시간) -> 여기서 인수로 함수가 사용 됐다. 이것을 ‘콜백’이라 한다.

함수를 호출할때 인수로 사용되는 새로운 함수 => 콜백 함수

생성자 함수

prototype

new 함수명 : 생성자함수

비교하기위해 function 첫글자대문자를 쓴다.

ex) function User , new User

this

일반 함수는 호출 위치 에서,

화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 정의

const timer = {
name: 'heropy!!',
timeout: function () {
	setTimeout(function () {
		console.log(this.name) // undefined 가 일어난다.
	}, 2000)
}
}
timer.timeout()

setTimeout( () => {} ) 

undefined 가 일어난다. : 이유는 setTimeout 이라는 내부로직으로 콜백이되서 실행이 되기 때문에

따라서, function() 부분을 화살표 함수로 바꿔주면 setTimeout을 감싸고있는 timeout 함수가 있기 떄문에 timeout의 function은 timer를 가리키기 때문에 출력이 된다.

2021/12/13

ES6 Classes

생성자 함수의 prototype

JS는 prototype 기반의 언어.

class User {
	constructor[: function ](first, last) { // [: function ] 이 부분이 생략됨.
		this.firstName = first
		this.lastName = last
	}
	getFullName() {
	
	} // prototype을 따로 쓰지 않아도 그 형식에 맞는 것을 정의한다.
}
React 에서 가장 많이 쓰는 구조.

Car 클래스는 license 를 추가하여 확장

super 가 Vehicle을 대체하여 상속받아 사용할 수 있게 한다.

음… Vehicle에 정의된 것을 다시 작성하지않고 super를 통해 사용할 수 있다.

JS 데이터

문자

String : “” , ‘’, ``

Number

Boolean: true, false

undefined

null

Array: []

Object

String mdn : 구글 검색 ㄱㄱ

String : 전역객체 / 문자영의 생성자.

따옴표를 사용하여 만드는 방식 => 리터럴 방식이라 한다.

Api 가져오는 방법 공부하기.

Youtube iframe Api 정의하는 부분.

trim() : 웹사이트 제작시 많이 쓰인다.

로그인 할때 띄어쓰기 하고 입력할경우 인식오류가 날수 있다 따라서. 그럴때 쓰는 trim() 이라는 메소드가이다

자주 사용할 만한 숫자와 수학 관련 메서드

Math.abs() : 주어진 숫자의 절대값을 반환. ex) -1 => 1

ex ) Math.ceil (3.14) : 올림을 뜻함. 결과 4

Math.floor(3.14): 내림을 뜻함. 결과 3

Math.round(3.5): 반올림을 뜻함. 겨로가 4

Math.random(): 랜덤한 숫자를 표시

배열

.concat

ex ) console.log(배열.concat(배열)) : 배열을 합쳐서 출력한다. 원본의 배열 데이터는 수정되지 않는다.

forEach :

map :

화살표함수 ★

const a = fruits.map( (fruit, index) => ( { id: index , name: fruit} ) )

형식으로 쓸수있음

fruit와 index 두개이므로 소괄호 제거 x

한개일때는 const a = fruits.map( fruit => { return number < 3} )요런 형식 가능

즉시실행함수 IIFE

함수를 만들자마자 바로 실행할 수 있게한다.

(function() {
	console.log("예제")
})();

.filter :

필터링 된 결과만 반환

const numbers = [1,2,3,4]

const b = numbers. filter(number => {
return number < 3
})
console.log(b) // 결과 [1,2]
console.log(numbers) // 결과 [1,2,3,4]

.find() , .findIndex() :

.includes() : 포함이 되어있는지 확인

포함되있으면 true , 없으면 false

.push() .unshift() :

.splice() :

Object(객체)

불변성 :

=> 서로 다른 메모리 주소를 바라보는 것이기 때문에.

Object.keys :

구조 분해 할당

Banana 만 출력하고 싶으면 Apple 부분은 비워두고 ‘ , ‘ 를 사용한다. 구조 분해 할당은

순서대로 출력하기 때문이다.

전개연산자

원래는 아래처럼 사용해야한다.

이걸 쉽게 해주는 것이 전개연산자.

Orange 를 받아줄 수 없기 때문에 위 그림과 같이 사용할 수 있다.

{a, b , c} <– 이부분 객체데이터를 사용할때 중괄호 사용하는데 화살표함수에서 중괄호는 함수의 범위를 나타내는 단순한 블럭으로 사용하는데 객체데이터를 화살표함수 내에서 축약형으로 반환하고 싶다면.

이와 같이 소괄호안에 중괄호를 써줘야한다.

불변성

한번 메모리에 만들어지면 1이 있다면 새로 1을 만드는것이 아니라

기존의 1이 들어있는 메모리 주소를 가르키게 한다.

단, 참조형 데이터 : Object, Array, function 은 불변성이 없다.

참조형 데이터 => 내용이 일치해 보이지만 실제로 다른 메모리 주소에 각각 들어있기 때문에

비교연산자를 사용하여 비교해도 false가 반환된다.

이를 해결하기위해 얕은 복사와 깊은 복사를 사용.

얕은 복사 깊은 복사

이렇게 할 경우 user 의 age를 수정해도 copyUser 부분도 수정된다. 이를 복사를 통해 해결가능.

이렇게 해결 가능.

또한, 전개 연산자 로 해결도 가능하다.

깊은 복사

깊은 복사는 javescript 로 구현하기 복잡해서.

lodash 패키지를 설치해서 구현.

npm install lodash ( 터미널에서 실행한다 

main.js 상단에 import _ from 'lodash' 를 통해 가져온다.

그 후 user 아래

const copyuser = _.cloneDeep(user) 를 해준다.

얕은 복사를 했을때 age는 변했지만 emails에 push를 했지만 copyUser 부분의 emails도 변경된다

이유는, user는 복사해서 따로 했지만 그 안의 emails 는 복사한게 아니다. 따라서, 깊은복사로 하여 해결해 준다.

깊은 복사는 겉의 껍데기 뿐만아니라 그 안의 내용까지 복사하는 것.

export default 는 딱 한번만 가능하고

export 이름 같은 경우에는 여러개 작성이 가능하다.

lodash 사용법

lodash를 통해서 다양한 코드를 작성할 수 있다. 매우 편리하게

uniaBy, unionBy , find, findindex 까지 가장 많이 쓰이기에 관심가지면 좋다.

JSON

server 와의 통신을 위해 주로 사용.

.json 파일은 하나의 문자 데이터이다.

(import myData from ‘./myData.json’)으로 js 상단에 선언하여 가능

Storage

localStorage.setItem('myCat', ' Tom');

-> 현재 도메인의 로컬 Storage 객체에 접근한 후, Storage.setitem()을 사용해 항목 하나를 추가

Json 문자데이터를 자바스크립트 엔진 형식으로 변경해주는 로직에 대해 이해.

axios

axios 패키지를 통해 api를 사용할 수 있다.

->npm install axios

-> import axios frome ‘axios’

function 함수명() {
axios.get('주소')
.then((response) => { //get한 것은 받아서 처리하는 것.
	console.log(response)
})
}
함수명()

정규표현식

바탕화면 폴더만들기 /

vscode에서 열기 /

npm init -y 해서 package.json 파일 생성/

npm install parcel-bundler -D/

index.html 파일만들기/

main.js 파일 만들기/

<script src = ./main.js> <-- 설정하기

개발서버가 열릴 수 있게 설정하기.

package.json 에서 "scripts": 부분에
"dev" : "parcel index.html",
"build" : "parcel build index.html" 

문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어.

간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능 등을

정규식 패턴으로 빠르게 수행할 수 있다.

https://regexr.com : 정규식 테스트 사이트.

리터럴 방식
const regexp1 = /^abc/; // abc로 시작하는 것은 찾는다

//리터럴 방식

/표현/옵션

/[a-z]/gi

gi : 모든 내용을 찾겠다(g) 와 대소문자 가리지않겠다(i)

메소드

메소드	문법	설명
text	`정규식.text(문자열)`	일치 여부(Boolean) 반환
match	`문자열.match(정규식)`	일치하는 문자의 배열(Array) 반환
replace	`문자열.replace(정규식, 대체문자)`	일치하는 문자를 대체

ex) console.log(str.match(/문자열/gi))

패턴(표현)

패턴	설명
^ab	줄(Line) 시작에 있는 ab와 일치
ab&	줄(Line) 끝에 있는 ab와 일치

패턴(표현)

패턴	설명
^ab	줄(Line) 시작에 있는 ab와 일치
ab&	줄(Line) 끝에 있는 ab와 일치
.	임의의 한 문자와 일치
a\|b	a 또는 b와 일치
ab?	b가 없거나 b와 일치
{3}	3개 연속 일치
{3,}	3개 이상 연속 일치
{3,5}	3개 이상 5개 이하 연속 일치
\w	63개 문자(Word, 대소영문52개 + 숫자 10개 + _)에 일치
\b	63개 문자에 일치하지 않는 문자 경계
\d	숫자에 일치
\s	공백에 일치

예제 :

the frozen brown jumps fox

console.log(
	str.match(/\bf\w{1,}\b/g)
)

결과

=> f로 시작하는 것을 찾는다.

TypeScript

https://slides.com/woongjae/ts2021 이웅재 강사

TypeScript 란?: 자바스크립트에 ‘타입’ 을 추가해서 확장시킨다.

TypeScript 설치

nvm

https://github.com/coreybutler/nvm-windows

TypeScript 컴파일러 설치

npm i typescript -g 후
- node_modules/.bin/tsc 가 생긴다.

vscode( 터미널(cmd)에서 code . 으로 바로 실행가능)

새 폴더 생성 - vscode 실행 - 폴더 열기 - 파일명.ts만들기 - npm init -y -npm i typescript -D

(-D 는 개발용으로 사용한다는 의미 정의)

npx tsc --init : tsconfig.json 파일 생성.

명령어 npx tsc 실행하여 tsconfig.json형태로 실행되도록 명령어 입력.

[Tip] ctrl+shift+p 를 통해 해당을 설치해야 터미널에서 code . 으로 vscode 열수 있다.

TypeScript 프로그램 작성을 위해 제공되는 타입

number :

let 이름: number = 1; //ex)

undefined & null:

–strictNullChecks 를 사용한다 기본적이로.

Why? => number에 null을 쓸 경우 오류가 나기 때문에 이를 방지하기위해,

undefined와 null 즉, 자신에게만 사용 가능하도록 하는 것이다.

never

never 타입은 모든 타입의 subtype 이며, 모든 타입에 할당 할 수 있다.

하지만, never 에는 그 어떤 것도 할당할 수 없다.

타입 스크립트의 타입 시스템

타입을 명시적으로 지정할 수 있다.
타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론

따라서,

nolmplicitAny 옵션: 옵션을 켜면 타입을 명시적으로 지정하지 않은 경우,

타입스크립트가 추론 중 any 라고 판단하게 되면,

컴파일 에러를 발생시켜

명시적으로 지정하도록 유도한다

※ 필자는 이부분에서 에러가 발생하였을때 굉장히 애를 먹었습니다..

※ 작성자와 사용자의 관점에서 각각 바라보는 시각이 다르기 때문에 이점을 신경쓰면 좋겠다 ※

DOM API

Document Object Model

Html 에 들어있는 div,span,input 요소들을 의미 = DOM

jsonplaceholder => photo

–> 12/17 four 로 이동.

11/29~12/3 2주차 워크시트!

2021-12-03T00:00:00+00:00

웹 사이트 뼈대 만들기

JavaScript

`JavaScript`

indexOf 함수

특정 값이 배열의 몇 번째 요소인지 반환

없을 시 -1 반환

`push` 함수

배열에 요소를 삽입한다.

var myArray = [];
console.log(myArray);

myArray.push(1);
console.log(myArray);   => myArray 1 대입. myArray.length 길이는 3.

myArray.push(3);
myArray.push(5);
console.log(myArray);

`conact` 함수

다른 배열을 이어붙인 배열을 반환

myNumberArray = [1,2,3,4]
myNumberArray = [0].concat(myNumberArray) 
var myNumberArray2 = mynuberArray.concat([0]);  형식도 가능.
console.log(myNumberArray)
[1,2,3,4] => [0,1,2,3,4]

`for`문

형식 {초기화 : 조건 : 작업 후 처리}

for( var i=0; i<5; i++){
console.log(i);
}

실행순서

var i=0;
5보다 작으므로 console.log(i) 실행. 출력.
i++ 실행. 1로 상승.
결과
```
0
1
2
3
4
```

배열을 `for` 문으로 다루기

var oddArray = [];
var evenArray = [];

for (var i = 10; i <= 20; i++) {
  if (i % 2 === 0) {
    evenArray.push(i);
  } else {
    oddArray.push(i);
  }
}

console.log(oddArray);
console.log(evenArray);

evenArray에 넣어준다. if문 값을.

그 이외 나머지는 oddArray에 넣어준다.

함수와 이벤트

function insertThisTime () {
  var ulEl = document.querySelector("ul");
  var liEl = document.createElement("li");
  liEl.append(new Date());
  ulEl.append(liEl);

두개가 같은 코드 이다. 서식만 다를뿐.

var insertThisTime = function () {
  var ulEl = document.querySelector("ul");
  var liEl = document.createElement("li");
  liEl.append(new Date());
  ulEl.append(liEl);
}

이벤트

특정 요소 클릭 시 이벤트

<button onclick="insertThisTime();">현 시각 기록</button>
<ul></ul>
function insertThisTime () {
  var ulEl = document.querySelector("ul");
  var liEl = document.createElement("li");
  liEl.append(new Date());
  ulEl.append(liEl);
}

요소 로드 완료시 이벤트

body에 붙일 경우 페이지의 모든 요소들(이미지, js, css 파일 등) 로드 후 실행

<body onload="sayPageIsLoaded();">
  <h1></h1>
</body>
function sayPageIsLoaded () {
  document.querySelector("h1").innerHTML = "페이지 로드 완료!"
}

팀 배정 프로그램 만들어보기

<h1>팀 배정</h1>
<table>
  <tr>
    <td colspan="3" id="not_assigned"></td>
  </tr>
  <tr>
    <td>1팀</td>
    <td>2팀</td>
    <td>3팀</td>
  </tr>
  <tr>
    <td>
      <button>배정</button>
      <ul id="team_1"></ul>
    </td>
    <td>
      <button>배정</button>
      <ul id="team_2"></ul>
    </td>
    <td>
      <button>배정</button>
      <ul id="team_3"></ul>
    </td>
  </tr>
</table>
body { padding: 8px 24px; }
table { width: 400px; }
td {
  padding: 12px 16px;
  border: 1px solid gray;

}
ul { list-style: none; }
button {
  font-size: 1rem;
}
var members = [
  '손흥민', '김영권', '이승우', '기성용', '황희찬', 
  '황희조', '구자철', '이용', '조현우', '김승규',
  '이강인', '박주호', '문선민', '김민재', '황인범', 
  '이정협', '김인성', '구성윤', '장현수', '나상호'
];

배정되지 않은 멤버들 표시 함수

function showNotAssigneds () {
  var membersString = '';
  for (var i = 0; i < members.length; i++) {
    membersString += members[i];
    if (i < members.length - 1) membersString += ', ';
  }
  document.querySelector('#not_assigned').innerHTML = membersString;
}

페이지 로드시 실행

<body onload="showNotAssigneds();">

목록 앞에서부터 한 명씩 빼서 원하는 팀에 배정

function assignMemberToTeam (teamNumber) {
  if (members.length === 0) return;
  var member = members[0];
  member = members.splice(0, 1);
  showNotAssigneds();

  var liEl = document.createElement("li");
  liEl.append(member);
  document.querySelector("#team_" + teamNumber).append(liEl);
}

버튼에 함수 실행 이벤트 등록

<button onclick="assignMemberToTeam(1)">배정</button>
<!-- ... -->
<button onclick="assignMemberToTeam(2)">배정</button>
<!-- ... -->
<button onclick="assignMemberToTeam(3)">배정</button>

스타일 제어하기

<div>MY DIV</div>
var divEl = document.querySelector("div"); => div
divEl.style.color = "blue"; => blue
document.querySelector("div").style = " red " => red 로 변경

divEl.style.backgroundColor = "skyblue"; 배경 
divEl.style.padding = "24px 36px"; 폭사이즈
divEl.style.display = "inline-block"; 반대는 block
divEl.style.borderRadius = "12px"; 박스
divE1.style.fontWeight = "bold"; 글씨

HTML 요소의 클래스 다루기

<ul>
  <li><span>국어</span></li>
  <li><span>수학</span></li>
  <li><span>사회</span></li>
  <li><span>과학</span></li>
  <li><span>체육</span></li>
</ul>
  .highlighted span {
    background-color: yellowgreen;
  }
  .important span {
    font-weight: bold;
    color: blue;
  }
</style>

클래스 값 지정

className 속성에 값 대입

document.querySelector("ul li:nth-child(3)").className = "highlighted";
document.querySelector("ul li:nth-child(3)").className = "important";
document.querySelector("ul li:nth-child(3)").className = "highlighted important";

클래스 추가 / 제거

classList의 add, remove 사용

document.querySelector("ul li:nth-child(4)").classList.add("highlighted");
document.querySelector("ul li:nth-child(4)").classList.add("important");

// 이미 있는 클래스는 추가되지 않음
document.querySelector("ul li:nth-child(4)").classList.add("important");

document.querySelector("ul li:nth-child(3)").classList.remove("important");

Last practice

=> Part 04. 나만의 사진 포트폴리오 만들기 참조

`toggleLike`함수

function toggleLike(idx) {
  if (my_info.like.indexOf(idx) === -1) {// 내가 좋아요하지 않은 사진일 때
      my_info.like.push(idx); 			//my_info의 좋아요에 idx 를 푸쉬해서
      									// 해제 된 상태 유지.
	photos.forEach(function (phto) {     //
        if(photo.idx === idx) {  		//  // → 좋아요로 바꿈
            photo.lieks++;				//
        }
    });

  } else {
		my_info.like = my_info.fillter(function (photo){
        	return photo.idx !== idx; //
    });
    // 내가 좋아요 한 사진일 때
    // → 좋아요 해제

  }

  // 최종적용
  showPhotos();
}

Firebase 호스팅

웹 호스팅

웹 사이트를 배포할 수 있도록 인터넷 망에 연결된 서버의 일정 공간을 임대해주는 서비스

호스팅 : 서버 임대 서비스
- .html, .css, .js`, 이미지 등 정적 파일들을 업로드하여 외부에서 접근 가능하도록 함

Firebase

서버에 직접 구현해야 했던 기능들을 대신해주는 서비스

호스팅,데이터베이스,파일저장,로그인 등

Firebase 준비

Node.js 설치

HTML, CSS, JavaScript 심화 학습

main.js 파일을 만들고 본 코드에서 js 파일을 읽어올때는

형식으로 쓴다.

js 파일은 실행 시 Console 부분에 뜬다.

console.log(' 내가 맘대로 입력')

콘솔에 로그를 작성한다. 라는 뜻

<link rel ="" href="">

외부 문서를 가져와 연결할 때 사용.(대부분 CSS파일)

rel : 가져올 문서와 관계 / href: 가져올 문서의 경로

<img src="./경로" alt="">

alt : 대체텍스트 ( 이미지가 출력하지 못할 시 알리고자 작성)

../ (상위폴더로 올라가서 찾음)

CSS

element.style은 css의 인라인 선언 방식으로 스타일이 삽입된다.

console 모드 (개발자도구)

codepen.io : 온라인에서 코드 작성 가능 사이트.(추천)

선택자P{속성 : 값;} => color : blue;

html

<태그> : 빈태그 -> 뒤에
가 없음 -> 빈 태그 뒤에 ‘/’ 를 붙이는 것이 좋다.

ex) meta 태그

<태그 속성="값">내용

: 대표적인 인라인 요소!

본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도의 태그.

div는 블록요소 span 태그는 인라인요소. 서로 상반됨.

인라인 요소 = 글자 / 블록요소 = 상자 의 개념

<a href="링크">클릭될 이름</a> -> 클릭될 이름의 페이지로 이동. 

target=”_blank” => 새탭에서 연다.

radio 의 역할. 그리고 이름의 그룹은 같은 이릅으로 설정하면 ok가 되는것 이름이 다르면 안된다.

<table></table> -> 행과 열의 집합

<태그 id="이름">

-> Css에서는 “#”id 해주고 설정한다.

script 요소에 defer 속성은, html 구조가 준비된 후(문서 분석 이후)에 JavaScript를 해석하겠다는 의미.

복합 선택자

<span class="ornage">오렌지</span>

span.orange{ color: red;

}

로 선택한다. (= .orange 로 선택 가능)

ul > .orange {} : 클래스가 orange인 것을 찾는다. 단, ul의 자식요소여야 한다.

(기호는 ‘>’)

.orange + li => .orange를 선택된 후 그 아래 형제를 출력

.orange ~li => .orange를 선택된 후 그 아래 형제’들’ 모두 출력.

a:hover {color:red;} : 해당요소에 마우스커서를 올려두면 색깔을 빨강으로 바꾸겟다.

<a href = "링크">이름</a>

inherit -> 상속

.parent -> .child : 부모의 속성을 자식이 상속 가능.

같은 클래스로 선언했을경우 나중에 작성된 색깔로 표시된다.

!important 사용 시 색깔을 강제로 바꿀 수 있지만 사용하지 않는것을 추천한다.

*{}:전체 선택자 0점

div{}:태그선택자 1점

.hello{}: 클래스선택자 10점

#hello{}:아이디 선택자 100점

width, heigh

값을 따로 넣지 않아도 auto:브라우저가 너비를 계산한다.

인라인 요소는 가로,세로 를 조절할 수 없다. (글자만 정의)

width : 요소의 가로 너비

height: 요소의 세로 너비 둘다 기본 속성은 auto이다.

단위
- vw : viewport의 가로

margin : 상,하,좌,우 모두 적용이 된다(외부)

상,좌/우,하 순서로 작성가능. or 상,우,하,좌 순서로 작성가능.(시계방향으로)

padding : 요소의 내부여백(공간)을 지정하는 단축 속성.

넘침 제어
- overflow: hidden; => 부모보다 자식의 크기가 클경우 맞춰주는것
- overflow: scroll; => 스크롤 좌우, 위아래로 움직일 수 있는게 생긴다.

넘치는게 없으면 auto 사용시 넘치는 부분에 해당해서 scroll 바가 생김.

투명도 조절 명령어 = opacity

배경화면 사이즈 조절 = background-size

배경화면 반복 조절 = background-repeat : no-repeat;

배경화면 위치 조절 = background-position: center;

repeat-x / repeat-y = x축 반복 출력 , y 축 반복 출력

화면 스크롤에 따라 이미지 위치가 상하로 이동한다 = background-attachment: scroll;

패럴렉스 예제 만들기 ( css ) = 위 배경화면 관련 명령어들을 이용하여 홈페이지 배경은 고정/ 요소는 이동.

배치

position : 요소의 위치 지정 기준 설정 ( 음수 사용 가능)

1.relative : 요소자신을 기준

absolute : 위치 상 부모 요소를 기준
fixed 뷰포트(브라우저)를 기준

relative 사용 시 그 자리는 시각적으로는 비어 있지만, 실제로는 존재함.

위치가 이동한 것은 ‘허상’

position: static; : 기준이 되는 부모요소가 2개일 경우 한 곳에 지정하면 다른 부모의 relative를 설정해서 그 걸 기준으로 위치를 설정한다.

z-index : 1; => 요소 쌓임 설정 (가장 먼저 보임)

position 속성의 값으로 absolute, fixed가 지정된 요소는, diisplay 속성이 block으로 변경됨.

display:inline-flex; => 인라인 단위로 끊어져서 flex container을 표현한다.

container의 주 축을 설정 : flex-direction
-> row(행 좌->우) 와 row-reverse( 행 우->좌)

flex-wrap : flex는 한줄에 모든 아이템을 표시하려 하는데 그러면 크기가 이상해질 수 있음.

따라서 , flex-wrap을 이용해 줄바꿈 되게 하여 요소 본연의 크기를 지킴.

align-content : 교차(수직)의 여러 줄 정렬 방법

기타는 위와 같음.(활용도가 높지 않음)

오히려 align-items를 많이 쓴다.

align-items:교차 축의 한 줄 정렬 방법

flew-grow : 1; => 1의 비율로 설정된다.

전환 효과 : transition 명령어

변환 효과 : tranform 명령어

변환

trnasform : rotate(45deg); => 45도 만큼 회전을 한다.

개인적으로 부모요소에 perspective 속성 사용이 선호된다.

차이점 인지할것.

JS

객체 데이터

let user = {
name: 'asda',
age: 21,
isvlaid: true
};
closole.log(user.name); // asda  

배열 데이터

let fruits = ['apple'];
console.log(fruits[0]); // 'apple'

변수

: 데이터를 저장하고 참조하는 데이터 / let 등.

let a = 2; //변수 let a 를 선언한다. 그후 2를 대입한다.
let b = 5;

console.log(a+b); // 7

함수

//함수 선언
function 원하는이름() {
	//실행코드
	console.log(123);
}

//함수 호출
helloFunc(); // 123

function returnFunc() {
	return 123;
}
let a = returnFunc();

console.log(a); //123

매개변수

//함수 선언
function sum(a,b){ //a,b는 매개변수
	return a+b;
}
let a = sum(1,2); // 1과 2는 인수

console.log(a); // 3

classList 같이 브라우저에서 정의되어 있는것을 DOM API라고 한다.

함수 내에서 함수 밖으로 내보낸다. => return

첫 포스팅 TEST

2021-11-25T00:00:00+00:00

첫 블로그 개설일

파이팅!!

개발이 재밌는 개발자 Blog

Next.js

React 학습

React

JSX

React로 나의 책장 만들기

Next.js

환경 설정 하기

시스템 요구사항

리덕스는 언제 쓰는게 좋을까?

Vue

Vue

12월4주차

4주차 정리

toyproject

강의 정리

Aliasing

interface ex)

type alias vs interface

Class

SCSS

bootstrap

Bundler

정적파일연결

autoperfixer

Vue

템플릿 문법

12월3주차

홈페이지 만들기

CSS 복습

서브메뉴 만들기

드롭다운 메뉴 만들기

전역 배지(GSAP)

position

padding-top

논외

Markdown

Node.js

개요 및 설치

NVM 사용법

NVM 개요 (1)

ECMA 스크립트

정을수 강사님 수업 (JavaScript)

비교 연산자

JS의 기본

함수

즉시실행함수

호이스팅 ★★★

타이머 함수

콜백

생성자 함수

this

2021/12/13

ES6 Classes

JS 데이터

문자

배열

즉시실행함수 IIFE

Object(객체)

구조 분해 할당

불변성

얕은 복사 깊은 복사

JSON

Storage

axios

정규표현식

메소드

패턴(표현)

패턴(표현)

TypeScript

11/29~12/3 2주차 워크시트!

웹 사이트 뼈대 만들기

JavaScript

JavaScript

push 함수

conact 함수

for문

배열을 for 문으로 다루기

함수와 이벤트

이벤트

`JavaScript`

`push` 함수

`conact` 함수

`for`문

배열을 `for` 문으로 다루기

`toggleLike`함수