본문 바로가기

Library35

[외부lib] react-hook-form : 사용자로부터 데이터 입력받기 react-hook-form리액트에서 유용하게 사용할 수 있는 외부 라이브러리 react-hook-form 사용법을 톺아본다 기존방식 : 제어 컴포넌트사용자가 입력한 데이터를 처리하기 위해서는 제어 컴포넌트를 사용해야한다.제어 컴포넌트란?- Controlled Component- 입력 필드의 값이 React 컴포넌트 상태로 완전히 제어되는 컴포넌트- 입력 필드의 값이 컴포넌트 상태로 관리되고, 사용자가 값을 변경할 때 상태가 업데이트되는 구조- cf. 비제어 컴포넌트 : 입력필드가 스스로 값을 관리함. 이경우 리액트는 ref를 사용해 값을 읽어들임(useRef 사용)문제점- 입력 필드가 많아질수록 상태와 이벤트 핸들러 코드가 증가한다- 입력 변경시마다 상태가 업데이트되어 렌더링이 자주 발생한다//====.. 2024. 10. 15.

[Axios] 서버와의 HTTP 통신 Axios Axios란?JavaScript에서 사용되는 HTTP 클라이언트 라이브러리* 클라이언트란? 웹 브라우저와 같이 서버에 접속하기 위한 단말기(사용자) 서버와 대치되는 개념* HTTP란? 서버와 클라이언트가 통신할 때 따르는 규약특징1. 웹 브라우저와 Node.js 환경 모두에서 사용할 수 있다2. 자바스크립트의 Promise 객체 기반으로 동작한다.3. 서버에서 받은 응답을 자동으로 JSON 파싱한다.4. 요청/응답을 가로채서 중간에 로직을 추가하거나 헤더를 수정할 수 있다.5. 취소요청 기능을 제공해 불필요한 네트워크 요청을 방지한다.설치 및 사용npm install axiosimport axios from 'axios';에러처리방법1. Promise의 catch핸들러를 사용하기2. asyn.. 2024. 10. 8.

[Hook] 부수 효과 관리 : useEffect useEffect리액트에서 부수효과를 관리하는데 사용되는 훅인 useEffect를 톺아본다 부수 효과(Side Effects)란?일반적 의미- 함수가 어떤 동작을 할 때, input - output 이외의 다른 값을 조작하는 경우 부수 효과가 있다고 표현- 프로그램이나 컴포넌트가 자신의 경계를 넘어 외부 상태나 시스템에 영향을 미치는 작업리액트에서 의미- state와 props를 받아 UI를 그리는 주기능 외에 일어나는 모든 것- 일반적인 함수형 프로그래밍에서는 지양되나 현실적으로는 필수적임 모든 프로그램은 사용자와 상호작용하고, 데이터를 저장하거나 가져오며, 외부 시스템과 통신하는 등의 작업을 수행해야 하기 때문대표적인 예- Data Fetching >> 외부세계에서 값을 가져오기 때문- DOM에 .. 2024. 10. 8.

[Hook] 상탯값 관리 : useState useStateuseState를 통해 변화되는 UI데이터를 자동렌더링시키는 과정을 톺아본다 useState란?컴포넌트에서 상태변수(상탯값)을 추가한다컴포넌트가 렌더링될때마가 호출되지만 초기 렌더링시에만 초기 상태값을 설정하고 이후 렌더링에서는 이전 상태값을 유지한다상탯값이란?- 컴포넌트의 동적인 데이터를 관리하는데 사용되는 객체- 상탯값이 변경되면 리액트는 컴포넌트를 다시 랜더링하여 변경된 상태를 UI에 반영한다- 같은 컴포넌트를 여러번 재사용 하더라도 각자의 메모리 공간이 있기 때문에 상탯값도 별도이다.사용방법1. useState를 호출하면서 인수로 초기값을 보낸다.2. 반환되는 상탯값과 업데이트함수를 배열비구조화로 받는다.3. 업데이트함수를 이용해서 상탯값을 변경한다4. 변경 후 해당 컴포넌트는 자동.. 2024. 7. 10.

[Hook] 훅 기초 / 커스텀 훅 훅 기초 / 커스텀 훅 훅과 관련된 리액트 특성자동 렌더링 조건- 상탯값(props) 또는 속성값(state)으로 관리되는 UI데이터만 자동렌더링된다* 속성값 : 부모 컴포넌트에서 내려주는 값(관련포스팅 : 318번) 상탯값 : 컴포넌트 내부에서 관리// UI데이터를 상태값 또는 속성값으로 관리하지 않아서 자동반영이 되지 않는 사례let color = 'red';function MyComponent() { function onClkick() { color = 'blue'; // 값을 변경했지만 UI는 업데이트 되지 않는다 } return ( 좋아요 );} // 해당 버그를 개선한 예제 후술- 상탯값은 불변변수처럼 관리해.. 2024. 6. 12.

[Tkinter] GUI 어플리케이션 만들기 Tkinter파이썬으로 게임등을 개발할 때 유용하게 활용할 수 있는 tkinter에 대해 톺아본다 포스팅순서TkinterTk : 메인창 관리위젯 생성하기위젯의 공통 속성위젯의 공통 메소드위젯종류 - Label - Button - Canvas - Entry - Text - Checkbutton유용한 클래스들 - PhotoImage - BooleanVar유용한 함수들 - 시스템 폰트 확인하기 - 메세지박스 띄우기 TkinterTk란?- 수많은 프로그래밍 언어에서 GUI를 빌드하기 위한 기본적인 위젯 요소들의 라이브러리를 제공 * 위젯이란? GUI에서 사용자가 상호작용할 수 있는 구성요소 윈도우, 버튼, 레이블, 텍스트 상자 등의 형태Tkinter란?- Tk interface- Tcl/Tk GUI 툴.. 2024. 6. 9.

[DOM] 가상돔 활용 방식 가상돔리액트 요소(Element)와 가상돔에 심화적으로 톺아본다관련포스팅 : 206번 리액트 API로 요소 생성 가상돔브라우저 DOM을 변경하는것은 오래 걸리는 작업으로 이 문제를 해결하는 방식이다원리1. 메모리에 실제 DOM의 가벼운 사본을 생성한다. 이 사본은 JavaScript 객체 형태로, 실제 DOM 구조와 속성을 반영한다2. 애플리케이션의 상태가 변경되면 새로운 가상돔을 생성하고 이 둘을 비교해 변경된 부분만 실제 DOM에 반영한다. 리액트 요소의 형태리액트 요소는 JavaScript 객체로 콘솔 출력 시 다음과 같은 속성들을 확인할 수 있다.type- 요소의 타입- HTML의 태그는 따옴표로 감싸진 문자열로 표기된다- 직접 작성한 컴포넌트는 함수명이 표기된다.key- React에서 리스트.. 2024. 5. 31.

[웹서버] Nginx와 가상호스트를 활용해 배포하기 NginX Nginx란?아파치와 함께 사용률 1,2위를 다투고 있는 웹서버 프로그램* 웹서버 : 웹 브라우저와 같은 클라이언트로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹 페이지를 반환하는 컴퓨터 프로그램** 서버개념 자세히 알아보기 : 60번 포스팅주로 HTTP 웹 서버(정적기능)로 사용되지만, 리버스 프록시, 로드 밸런서, 그리고 HTTP 캐시로도 활용된다 실습 명령어들설치하기1. 패키지 목록 업데이트 sudo apt update2. Nginx 패키지 설치 sudo apt install -y nginx >> etc/nginx 경로에 파일들이 생성됨서비스 확인1. 웹 브라우저에서 퍼블릭 IP 주소를 입력하기 >> 정상적으로 설치되었을 시 환영 페이지가 나온다2. 명령어.. 2024. 5. 31.

[컴포넌트] 반환값, 부모가 내려주는 속성값(props) 컴포넌트컴포넌트의 기본적은 동작 형태를 알아본다.포스팅순서컴포넌트란? - 성립조건 - 사용법컴포넌트 종류 - 함수형 컴포넌트 - 클래스형 컴포넌트컴포넌트의 반환값 - 문자열,숫자 - null, false - JSX - 배열 - 프래그먼트 - 리액트포털속성값(props)사용법 - 부모 자식 관계 - 속성값이란? - 속성값 전달하기(부모) - 속성값 받기(자식)속성값 활용법 - 기본값 설정하기- 렌더링 최적화 : React.memo 컴포넌트란?화면에 렌더링 될 요소들로 구성된 재사용 가능한 모듈성립조건1. 렌더링 가능한 요소들을 반환한다 - JSX 또는 React.createElement를 사용하여 리액트 엘리먼트를 생성할 수 있어야 한다2. 재사용 가능한 독립적인 단위여야 한다 - 한번 정의된 컴포넌트.. 2024. 1. 9.

[외부api] SPA 라우팅을 위한 히스토리 API, react-router-dom SPA 구현SPA를 구현하기 위해선 CSR 기법을 사용해야하고이를 위해서 History API가 필요하다.react-router-dom 라이브러리는 해당 API를 간단하게 다룰 수 있게 한다 CSR(Client Side Rendering)리액트는 기본적으로 SPA 방식으로 개발하는 것이 정석이다* SPA란? - 초기 요청 시 서버에서 첫 페이지를 처리하고 이후의 라우팅은 클라이언트에서 처리 - CSR 기법을 사용한다 - 관련 개념 170번 포스팅 참고CSR 구현을 위해 필요한 기능 1. 자바스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다 2. 브라우저의 뒤로가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리할 수 있다 3. 위 두 경우에 브라우저는 서버로 요청을 보내지 않아야.. 2024. 1. 2.

[PIL] 파이썬 이미징 라이브러리 PIL파이썬에서 유용하게 이미지를 조정할 수 있는 PIL 모듈에 대해 톺아본다. PIL이란?Python Imaging Library이미지 처리와 조작을 위한 파이썬 라이브러리이미지 파일을 열고 저장하며, 이미지의 크기를 조정하고 회전시키는 등 다양한 이미지 조작 기능을 제공공식문서 https://pillow.readthedocs.io/en/stable/ 주요클래스Image- 이미지를 표현하는 핵심 클래스- 이미지를 열거나 생성하는 등 다양한 조작을 수행- 이미지 크기, 모드, 픽셀 등의 정보를 담음ImageFilter- 이미지 필터를 정의하는 클래스- 다양한 필터를 적용하여 이미지를 수정 ex) BLUR, CONTOUR, DETAILImageDraw- 이미지에 그림을 그리는 데 사용되는 클래스- 선,.. 2023. 8. 10.

[OpenCV] ndarray를 사용한 이미지 처리 OpenCV컴퓨터비전 관련 유용한 라이브러리인 OpenCV에 대해 알아본다. 컴퓨터 비전이란?컴퓨터가 디지털 이미지나 비디오를 이해하고 해석하는 기술 분야이미지나 비디오에서 정보를 추출하고, 해당 정보를 이용하여 패턴 인식, 객체 감지, 분할, 추적 등과 같은 작업을 수행한다.활용분야- 자율주행자동차 : 도로 및 교통신호 인식, 차선유지, 장애물 감지 등을 수행- 의료분야 : 의료 영상을 분석해서 질병 진단 등- 보안분야 : 얼굴 인식과 감지를 통한 접근 제어 OpenCV란?OPEN source Computer Vision, 오픈소스 컴퓨터 비전 라이브러리실시간 이미지 프로세싱에 중점을 두고 있으며 처리 속도가 매우 빠르다.컴퓨터 비전 및 이미지 처리 작업을 위한 다양한 함수와 알고리즘을 제공특징- 이.. 2023. 7. 14.

[Numpy] 다차원 배열의 데이터 구조 : ndarray Numpy다차원 배열을 다루는 공학컴퓨팅을 위한 핵심 라이브러리 중 하나인 Numpy에 대해 톺아본다. 다차원배열이란?다차원 배열이란 3차원 이상의 배열로 Tensor라고 부른다* 0차원배열 == 스칼라 1차원배열 == 백터 2차원배열 == 행렬(매트릭스) 3차원배열 == 텐서데이터를 구조적으로 조직하고 처리하는데 활용각 차원마자 축(axis)을 가지며, 각 축에 따라 인덱싱 및 슬라이싱이 가능하다. RankType예시0scalar (0-tensor)[1]1vector (1-tensor)[1,1]2matricx (2-tensor)[[1,1],[1,1]]33-tensor[[[1,1],[1,1]],[[1,1],[1,1]],[[1,2],[2,1]]]nn-tensor... Numpy란?다차원 배열을 쉽고.. 2023. 7. 12.

[uvicorn] 웹서버/WAS 구축 및 가동하기 uvicornFastAPI와 함께 사용할 웹서버 라이브러리 uvicorn에 대해 톺아본다 Uvicorn이란?async/await을 기반한 비동기 프로그래밍 지원, 퍼포먼스가 가장 좋다고 알려진 ASGIFastAPI와 같은 ASGI 호환 프레임워크와 함께 사용되는 서버웹서버와 WAS의 기능을 모두 한다관련포스팅 : 60번 포스팅ASGI란?- Asynchronous Server Gateway Interface- 어플리케이션과 웹서버/어플리케이션서버간의 통신을 담당하는 인터페이스- 비동기 웹서버를 가능하게 한다- 동기(WSGL)와 대응되는 개념설치pip install uvicorn 어플리케이션 가동uvicorn 명령어 또는 uvicorn메소드를 통해 서버를 만들고 ASGI 어플리케이션을 실행할 수 있다.서버.. 2023. 7. 12.

[python-dotenv] 환경 변수 관리하기 (+ pydantic의 BaseSettings) python-dotenv환경변수를 관리하기 위한 모듈 python-dotenv에 대해 톺아본다python-dotenv실행환경에서 사용되는 변수들을 별도로 모아 관리할수 있도록 하는 모듈이다.생성하기1. 설치 : pip install python-dotenv2. 루트 디렉토리에 '.env'파일 생성(다른경로의 경우 다음단락 참고)3. 키=밸류 형태로 값을 작성한다. 이때 키값은 대문자를 사용(관례)사용방법1. os모듈과 dotenv 모듈의 load_dotenv를 import한다.2. load_dotenv()로 '.env'파일을 로드한다.3. os.getenv(키값)으로 밸류값을 가져온다# .env파일 작성 예DB_HOST=localhostDB_USER=adminDB_PASSWORD=secret# 사용예.. 2023. 7. 11.

[CSS] 스타일 작성방식 : css-in-js(styled-component) CSS 작성방식 (2/2)클래스명 충돌을 방지하고 코드 재사용성을 높이기 위해외부 문법과 패키지의 도움을 받아본다 css-in-js리액트는 컴포넌트간의 의존성을 낮추고 내부 응집도를 높이는 것이 좋다.>> 이를 위해 css 코드도 js파일 내부(컴포넌트)에서 관리하는 방식 탄생(css-in-js)>> 별도의 css 파일이 필요없음주요특징- 각 컴포넌트의 스타일이 고유한 클래스를 사용하므로 전역 스타일의 충돌이 방지된다- js의 문법을 사용해서 동적으로 스타일링 로직을 구현할 수 있다- 브라우저 호환성을 위한 벤더 프리픽스를 자동으로 추가한다- 개발자 개인이 자바스크립트와 css를 모두 작성할 수 있다면 좋은 선택이지만 스타일 개발팀이 분리된 경우 도입하기가 어려울 수 있다 styled-component.. 2023. 7. 10.

[prettier] 코드 포멧 통일 및 자동화 JS LibraryJavaScript 라이브러리 Prettier에 대해서 알아본다Prettier다양한 협업에서 코드포멧의 통일성을 유지시켜주는 JS 라이브러리공식사이트 : https://prettier.io/docs/en/options.html설치- VS Code의 플러그인으로도 설치할 수 있고 디펜던시로도 추가 가능하다- node.js 디펜던시 설치 : 'npm i prettier' 실행cosmiconfig- 여러 위치에서 설정파일을 검색하고 로드하는 라이브러리- Prettier 설치시 함께 설치된다.* 설정파일 찾는 순서 1. 명령줄에서 '--config' 옵션으로 직접 설정파일의 경로를 지정했는지 2. package.json의 prettier 속성에 설정이 있는지 3. 루트 디렉토리에 '.prett.. 2023. 6. 20.

[CSS] 스타일 작성방식 : css-module, classnames, sass CSS 작성방식 (1/2)클래스명 충돌을 방지하고 코드 재사용성을 높이기 위해외부 문법과 패키지의 도움을 받아본다 css-module클래스를 로컬스코프로 정의하기 때문에 다른 클래스와 이름이 겹쳐도 충돌이 방지된다주로 classnames, sass 등과 함께 사용된다CRA로 만든 프로젝트에서는 별도로 설치해야할 패키지는 없다사용하기1. CRA로 만든 프로젝트에서는 별도로 설치해야할 패키지는 없다2. css파일명을 '이름.module.css'로 작명한다3. js파일에서는 해당 모듈을 "import style from './이름.module.css'" 로 가져온다. * style은 통상적으로 사용하는 임의의 객체명4. 코드 내에서는 className={style.클래스명} 로 사용한다 다수의 클래스를.. 2023. 5. 23.

[CRA] 쉽게 시작하기 / 스크립트 명령어 / 환경변수 CRA로 만드는 프로젝트포스팅순서create-react-app이란?시작하기 - 명령어 - 디렉토리 구조 - 기본규칙 - 보편적 구조실습: 홈화면(index) 띄우기npm 스크립트 명령어환경변수 사용하기 create-react-app이란?리액트 웹 어플리케이션을 간단하게 시작할 수 있도록 도와주는 도구* 리액트 네이티브는 expo 사용바벨, 웹팩, 테스트시스템, ES6+ 문법, CSS 후처리 등 여러 패키지를 조합해서 리액트 개발 환경 구축>> 다양한 선택지를 cra가 자동으로 조합해서 최적의 환경을 제공한다타입스크립트를 지원한다autoprefixer를 통해 자동으로 벤더 접두사를 붙인다 시작하기명령어npx create-react-app 프로젝트명- 기 생성된 프로젝트 루트 폴더에서 시작하려면 프로젝트명.. 2023. 5. 22.

[모듈번들러] 웹팩 사용하기 웹팩 Webpack모듈번들러 중 리액트에서 주로 쓰이는 웹팩에 대해 톺아본다 관련 개념모듈- 특정한 기능이나 작업을 수행하는 코드의 묶음- 일반적으로 파일단위로 관리가 된다- 재사용성이 강화되고 캡슐화를 통해 내부동작을 숨기는 추상화 기능을 한다모듈시스템- include, import 등의 키워드를 사용해서 한 파일에서 다른 파일의 코드를 가져다가 쓰는 것- 모듈측에서는 필요한 부분만 내보내는 방법이 필요하고, 사용하는 측에서는 필요한 것만 가져다 쓸 방법이 필요하다 >> 이를 구현한 것이 모듈 시스템- 자바스크립트는 ES6부터 export, import 키워드로 모듈 시스템을 지원한다 관련포스팅 : 221번 포스팅모듈번들러- 하나의 HTML에서 필요로 하는 모듈의 수가 늘어나면서 스크립트 태그 증가.. 2023. 5. 17.

[엘리먼트] 리액트 API로 요소 생성하기 / JSX와 바벨로 간단하게 엘리먼트(요소) 생성법리액트 라이브러리의 가장 근본이 되는 createReactElement API와이를 좀 더 편하게 사용할 수 있게 하는 바벨과 JSX에 대해서 알아본다 엘리먼트란?ReactElement, 리액트 요소라고도 칭해진다화면에 표시될 내용을 기술하는 가장 작은 단위- 엘리먼트가 모여 컴포넌트가 된다가상돔을 구성한다- 리액트 요소가 랜더링되면 DOM Elements(실제 화면 속 구성요소)가 된다생성방법1. React.createElement() API를 사용하는 방법2. JSX문법으로 작성 후 바벨로 컴파일 하여 1번의 방법을 자동으로 구현하는 방법// 리액트 API를 직접 호출하여 생성한 1개의 엘리먼트 const element = React.createElement( 'h1', { .. 2023. 5. 17.

[개요] 특성 / 기존 방식과이 차이점 React 톺아보기 리액트란?페이스북에서 개발하고 관리하는 UI 라이브러리>> UI 기능만 제공하므로 전역상태관리, 라우팅, 빌드시스템 등은 개발자가 직접 구축해야한다.>> Angular 등의 프레임워크에 대조적, 진입장벽 높음>> 이를 보완하기 위해 create-react-app 도구 제공 (관련포스팅 : 211번 포스팅)가상돔(Virtual DOM)을 사용하여 변화된 상탯값 기반 UI 업데이트>> 리액트 등의 프론트 라이브러리/프레임워크를 사용하지 않으면 직접 업데이트 해주어야 해서 복잡도가 높다>> 리액트는 가상돔을 통해 UI를 빠르게 업데이트 함 * 가상돔 : 이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소 집합을 계산하는 기술함수형 프로그래밍을 적극적으로 사용한다- 선언형 프로그래밍.. 2023. 5. 16.

[01] CRUD : 엔티티와 레파지토리 (+ JUnit 테스트) JPA의 CRUD JPA에서 데이터를 객체로써 어떻게 활용하는지 알아본다. 이때, JUnit을 통해 실습해본다. 참고자료 : 점프 투 스프링부트 JUnit Java에서 독립된 단위테스트(unit test)를 지원해주는 프레임워크 스프링부트에 기본적으로 포함되어 있다. >> 자동생성 된 src/test/~/SbbApplicationTests.Java 파일을 쓰면 됨 @SpringBootTest : 클레스에 붙임. 해당 클래스를 테스트 클래스로 인식시킨다. @Test : 메소드에 붙임. 호출될때 마다 새로운 인스턴스를 생성하여 독립적인 테스트가 이루어지게 한다 테스트 실행 - [Run] - [Run As] - [JUnit Test] ** 이미 로컬서버가 구동중이라면 오류가 뜬다. Boot Dashboard에.. 2023. 4. 7.

[00] JPA 시작하기 (+ H2 데이터베이스) JPA in SpringBoot 스프링부트에서 DB를 활용할 수 있는 프레임워크 중 하나인 JPA에 대해서 알아보자 참고자료 : 점프 투 스프링부트 스키마란? DB의 구조와 제약조건에 관해 기술한 것 >>데이터베이스를 구성하는 데이터 개체(entity), 속성(Attribute), 관계(Relationship) 및 데이터 조작시 데이터 값들이 갖는 제약 조건 등에 관해 전반적으로 정의 사용자가 검색을 할때 맨 아래 저장되어있는 데이터베이스까지 가 닿아 정보를 얻기까지의 구조, 일련의 데이터 처리 프로세스, 자료들간의 협력관계 등을 '형식언어'로 나타낸다. 스키마의 3계층 1.사용자 관점에서 논리적 구조를 기술한 외부 스키마 2.물리적인 저장장치의 면에서 논리적인 구조를 기술한 내부 스키마 3.조직체나 기.. 2023. 4. 6.

[메소드] 시각적인 효과 관련 Effect 메소드페이지 내에 애니메이션 효과를 주기위해 사용되는 메소드 집합 hide() / show() / toggle()객체 . hide ( ms단위 )- 크기가 작아지고 희미해지면서 사라진다.- f12 확인시 hight와 width가 점점 작아지더니 display=none 처리된다.- 매개변수로 사라지는데 소요되는 시간을 ms단위로 입력하며, 생략시 기본값은 0이다.객체 . show ( ms단위 )- 사라졌던 객체의 크기가 점점 커지고 선명해지면서 나타난다.객체 . toggle ( ms단위 )- hide상태이면 show로, show상태면 hide로 효과를 준다. fadeIn() / fadeOut() / fadeToggle()객체 . fadeOut ( ms단위 )- 요소가 점점 투명해지면서 사라.. 2022. 12. 29.

[메소드]이벤트 핸들러 / 이벤트 이벤트핸들러 연결이벤트 핸들러란? 이벤트 발생시 실행될 function을 말한다.연결방법1) 이벤트 메소드$( '선택자' ) . 이벤트 ( function(){ ... } )중복해서 작성했을 시 둘다 구현 됨(중복된 속성은 덮어쓰기가 됨) 연결방법2) on 메소드$( '선택자' ) . on ( "이벤트명", function(){ ... } )한 요소에 여러개의 이벤트를 걸고자 한다면,>> { 이벤트명: 익명함수, 이벤트명: 익명함수, ... } 의 객체를 만들어서 on의 매개변수로 넣는다. // 객체로 다수 전달하기, 이때는 이벤트명에 따옴표를 붙일 필요가 없다 $('#test').on({mouseenter:function(){}, mouseout:function(){}}); 연결방법3) on 메소드.. 2022. 12. 27.

[외부툴] 편리한 UI 제작 : 부트스트랩 부트스트랩Bootstrap, 무료 프론트앤드 프레임워크간단하게 스타일을 적용할 수 있다.부트스트랩탄생배경 : 트위터의 직원인 Mark Otto와 Jacob Thornton가 수많은 직원들의 프론트엔드 결과물을 병합할때 생기는 일관성 유지의 문제를 해결하고자 만들게 됨.글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 요소들을 내장하고 있다.반응형 웹 디자인을 지원한다. 준비하기W3Schools 들어가기 > Tutorials > Learn bootstrap 어느정도 안정성이 인증된 Bootstrap 4버전 클릭왼쪽 목록 중 BS4 Get Started > 스크롤 내려서 Bootst.. 2022. 12. 27.

[메소드] 반복할때는 each(), 일치여부는 is() each() 메소드jQuery식 반복문이다.jQuery용 반복용 메소드 : $ . each( 요소 , function(){ ... })배열의 모든 인덱스에 순차적으로 접근 혹은 객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할때 for in문과 유사하게 수행되는 메소드[표현법1] $.each(배열|객체, function([매개변수1, 매개변수2]){ ... }) [표현법2] $(배열).each(function([매개변수1, 매개변수2]){ ... }) >> 표현법2는 객체에서 정상작동 하지 않는다. *****삽입된 함수는 각 요소에 순차적으로 접근할때 마다 자동으로 실행이 된다.>> 이때 2개의 값을 전달받기 때문에 함수의 매개변수로 활용할 수 있다.매개변수 1 : - 배열을 제시.. 2022. 12. 27.

[메소드] 요소 생성 및 제거 요소 생성과 제거jQuery에서 활용하는 방법을 알아보자동적으로 요소 생성하기동적으로 요소를 생성한다는것은 , 처음에는 페이지에 없던 요소가 어떠한 이벤트로 인해 생성되는 것을 의미한다.방법1), 방법2) JavaScript 방식 사용하기- DOM 노드생성과 관련된 메소드 자세히 보러가기- 방법1) document.getElementById() 와 innerHTML 속성 활용- 방법2) document.createElement(), document.createTextNode(), appendChild() 사용방법3) jQuery 방식 사용하기- 3-1) $('') 으로 태그 요소 생성 후 .text() , .html() 메소드를 사용하여 텍스트 노드 추가하기- 3-2) $('원하는 텍.. 2022. 12. 27.

[문법] 콜백 함수 활용하기 (JavaScript 개념) 콜백함수 Callback Function콜백함수는 JavaScript에서 함수를 활용하는 방법 중 하나로jQuery에서도 그 개념을 활용할 수 있다.콜백함수란?자바스크립트에서 함수는 객체이다. >> 함수의 파라미터로 함수를 전달할 수 있다.>> 함수 안에서 전달받은 또다른 함수를 실행한다 == 콜백함수비동기를 동기로 처리할 때 활용- 콜백은 테스크가 끝나기 전에 함수가 실행되지 않는 것을 보장하기 때문function print(callback) { //callback 함수를 파라미터로 받고있다. callback(); //해당 함수를 호출하고 있다}//콜백함수 예시1const message = function() { console.log("This message is shown after 3 s.. 2022. 12. 27.

이전 1 2 다음

티스토리툴바