webdeveloping의 등록된 링크

키자드에 등록된 총 737개의 포스트를 확인하실 수 있습니다.

Naver Blog

[node] Sequelize에서의 DB 입력

admin.ctrl.js admin.ctrl.js(controller) 에 아래 소스 코드 추가 const models = require('../../models'); //models의 경로 exports.post_products_write = ( req , res ) => { //res.send(req.body); // sql문의 insert와 유사 models.Products.create({ name : req.body.name, //body-parser price : req.body.price , description : req.body.description }).then( () => { res.redirect('/admin/products'); // 저장하고 메인페이지로 돌아감 }); } admin/products/white에서 데이터 입력 cmd창에서 로그 확인 Workbench에서 해당 테이블 조회 시 정상적으로 인서트 되었음을 확인할 수 있음. admin.ctrl.js의

원문보기 내부링크
Naver Blog

[node] Sequelize에서의 DB 조회

admin.ctrl.js(controller) 에 아래 소스 코드 추가 // admin의 index.js의 router.get('/products', ctrl.get_products )와 맵핑 exports.get_products = ( _ , res) => { //전체 조회(findAll) find라는 것도 있다. models.Products.findAll({ }).then( (productList) => { // admin/products.html에 파라미터로 받은 데이터 전달 // productList : productList를 productList로만 써도 된다 // Javascript에서 키 값과 벨류 값이 같을 때에는 한 번만 적어줘도 됨. // template은 render res.render('admin/products.html', { productList : productList}) }); } admin.ctrl.js 입력을 다 했으면 데이터를 받고 뿌려줄 html(

원문보기 내부링크
Naver Blog

[node] Moment.js 적용

moment.js를 인스톨한다. 날짜형식을 지정할 js파일(Products.js)에 moment 관련 아래 소스를 추가한다. const moment = require('moment'); Products.prototype.dateFormat = (date) => ( //return 생략 moment(date).format('YYYY-MM-DD') ); products.js 화면에 뿌려주는 html파일(products.html)에서 해당 함수를 불러 사용한다. {{ product.dateFormat( product.createdAt ) }} products.html 지정한 날짜 형식으로 출력된다. 출처 : 본 포스트는 패스트캠퍼스의 Node 웹 프로그래밍 올인원 패키지 Online 강의를 보고 직접 정리한 내용입니다.

원문보기 내부링크
Naver Blog

[node] 상세페이지 보기(findByPk로 DB 조회하기)

링크를 연결할 html(products.html) 파일에 a 태그를 추가하여 해당 url로 이동할 수 있게 한다. <td> <a href="/admin/products/detail/{{ product.id }}"> {{ product.name }} </a> </td> products.js admin의 index.js로 가서 url을 생성한다. router.get('/products/detail/:id', ctrl.get_products_detail ) index.js controller(admin.ctrl.js)로 이동하여 아래 소스를 추가한다. admin.ctrl.js template/admin 폴더에 detail.html을 생성하고 아래의 소스 코드를 추가한다. {% set title = "관리자 : 상세페이지" %} {% extends "layout/base.html" %} {% block content -%} <div class="panel panel-default"> <di

원문보기 내부링크
Naver Blog

[node] Sequelize에서의 DB 수정

수정을 하기 위해선 수정할 데이터를 먼저 화면에 불러오는 작업이 필요하다. 즉 수정하기 버튼을 눌렀을 때 기존 데이터를 input 박스에 꽂아줘야 한다. 이 과정을 위해서 먼저 조회 로직을 추가한다. controller(controllers/admin/index.js)에 url을 지정한다. router.get('/products/edit/:id', ctrl.get_products_edit); admin.js admin.ctrl.js에 아래 소스를 추가한다. // 수정할 때 write.html의 폼을 재활용한다. // 수정을 누르면 해당하는 데이터가 조회된 후에 수정 작업을 해야하기 때문 exports.get_products_edit = (req, res) => { models.Products.findByPk(req.params.id).then( (product) => { res.render('admin/write.html', { product }) }); } admin.ctrl.js

원문보기 내부링크
Naver Blog

[node] Sequelize에서의 DB 삭제

index.js에 라우팅 생성 router.get('/products/delete/:id', ctrl.get_products_delete); index.js admin.ctrl.js에 삭제 로직 추가 exports.get_products_delete = ( req , res ) => { models.Products.destroy({ where: { id: req.params.id } }).then( () => { res.redirect('/admin/products'); }); }; admin.ctrl.js products.html에 button과 url 맵핑 <td> <a href="/admin/products/delete/{{ product.id }}" class="btn btn-danger" onclick="return confirm('삭제하시겠습니까?')">삭제</a> </td> products.js url에 접속하여 삭제 버튼 클릭 삭제 후 조회 출처 : 본 포스트는 패스트

원문보기 내부링크
Naver Blog

[Node] node Semantic Versioning

node Semantic Versioning 이란? npm에서 채택하는 버전 관리 시스템으로 오픈소스에서 좀 더 체계적으로 버전을 관리하는 방법 https://docs.npmjs.com/about-semantic-versioning 버전은 각 자리 수 마다 의미가 있으며 최초 Release는 1.0.0 버전에서 시작한다. 각 버전의 숫자들은 각각 의미를 지닌다. 버그가 수정되었을 때 하위 호환이 가능한 경우 마지막 자리의 숫자를 올림 두 번째 자리는 하위 호환이 가능하고 새로운 기능이 추가되었을 때 맨 앞 자리는 하위 호환이 되지 않는 중요한 기능이 생겼을 때 올림 패치는 ~ 사용, 마이너는 ^ 사용, 메이저는 * or X 사용한다. 출처 : 본 포스트는 패스트캠퍼스의 Node 웹 프로그래밍 올인원 패키지 Online 강의를 보고 직접 정리한 내용입니다.

원문보기 내부링크
Naver Blog

[Node] npx란?

npm과의 차이점 npm은 컴퓨터, 혹은 서버에 실제로 모듈을 설치를 하여 실행하는 방식 npx는 실제로 설치하지 않고 일회성으로 사용하는 것이 목적 npx를 사용하는 이유가 궁금하시면 아래 블로그 링크에서 확인해 보세요. 정리가 잘 되어 있습니다. geonlee.tistory.com/32 [npm] cnpx란 무엇인가? c npx란 무엇인가? 우리가 리액트를 처음 시작할 때, 프로젝트를 만드는 패키지인 create-react-app 이 있습니다. npx create-react-app my-app 여기서는 왜 npm이 아닌 npx를 사용하고 npx란 무엇일까요? geonlee.tistory.com npx 테스트를 위해 cowsay를 사용합니다. cowsay는 일종의 개발자들의 재미를 위한 툴로 npx를 활용하기 좋은 예제입니다. npx cowsay "hello"를 실행하면 아래 이미지 처럼 화면이 나오는 걸 확인할 수 있고 별도의 npm 인스톨이 필요 없음 참고 : geonlee.

원문보기 내부링크
Naver Blog

[Node] Promise

callback, promise등을 사용하는 이유? 자세하게 설명하면 너무 복잡하고 어렵다. 본 포스트에서는 Promise를 사용하는 방법을 알려주는 예제입니다. Promise를 사용해야 하는 이유와 좀 더 심도 깊게 알고 싶은 분들은 구글링을 통하여 한 번 검색해 보시는 걸 추천드립니다. 본 포스트를 보시기에 앞서 동기화와, 비동기화에 대해서는 반드시 사전에 숙지가 되어 있어야합니다. 동기화 비동기화에 대해서 숙지하시지 못하신 분은 아래의 포스트를 먼저 보고 와주시기 바랍니다. developing-move.tistory.com/20 [Javascript] 동기/비동기 처리와 callback 동기와 비동기를 나누는 가장 큰 차이점을 어떻게 실행 순서를 가지는 지에 있다. 아래 이미지와 같이 Syncronous 동기는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식을, developing-move.tistory.com 먼저 callback 지옥이란? 콜백 안에 콜

원문보기 내부링크
Naver Blog

[Node] Promist Chainging, Promist.all

Promise Chaining은 여러 개의 프로미스를 then으로 연결해주는 것이다. 테스트할 js 파일을 만들고 아래 소스를 추가한다. 아래 소스는 setTimeout을 사용하여 1초 후에 p1의 text를 찍고 3초 후에 p2의 텍스트를 찍는 소스다. 병렬적으로 실행 된다. (p1 실행 후 3초 뒤가 아닌 처음 실행 기준에서 3초) const p1 = new Promise((resolve, reject) => { setTimeout( () => { resolve({ p1_text : "p1의 텍스트"}); }, 1000); }); const p2 = new Promise((resolve, reject) => { setTimeout( () => { resolve({ p2_text : "p2의 텍스트"}); }, 3000); }); p1.then( (result1) => { console.log("p1 = " + result1.p1_text); // return으로 promise 객

원문보기 내부링크
Naver Blog

[Node] EventEmitter

EventEmitter란? 특정 이벤트가 발생했을 때 일괄적으로 로직을, 즉 특정 코드들을 실행할 수 있도록 구조적으로 코드를 작성하는 방법을 말한다. 해당 예시는 어떠한 사이트에 새로운 유저가 들어왔을 때 특정 이벤트가 실행된다고 가정한 것이다. 자세한 설명은 이미지의 주석을 확인 'use Strict' const EventEmitter = require('events'); class ChatManager extends EventEmitter { } const chatManager = new ChatManager(); chatManager.on("join", () => { console.log("new user joined"); }) chatManager.emit("join"); 출처 : 본 포스트는 패스트캠퍼스의 Node 웹 프로그래밍 올인원 패키지 Online 강의를 보고 직접 정리한 내용입니다.

원문보기 내부링크
Naver Blog

[Node] node.js에서 DNS 주소 확인하기

DNS란? DNS 또는 Domain Name System은 사람이 읽을 수 있는 도메인 이름(예: www.amazon.com)을 머신이 읽을 수 있는 IP 주소(예: 192.0.2.44)로 변환 스마트폰이나 노트북부터 대규모 소매 웹 사이트의 콘텐츠를 서비스하는 서버에 이르기까지 인터넷상의 모든 컴퓨터는 숫자를 사용하여 서로를 찾고 통신합니다. 이러한 숫자를 IP 주소라고 합니다. 웹 브라우저를 열고 웹 사이트로 이동할 때는 긴 숫자를 기억해 입력할 필요가 없습니다. 그 대신 example.com과 같은 도메인 이름을 입력해도 원하는 웹 사이트로 갈 수 있습니다. 참조 : https://aws.amazon.com/ko/route53/what-is-dns/ DNS란 무엇입니까? – DNS 소개 - AWS 12개월 동안 AWS 프리 티어에 액세스하여 연중무휴 24시간 고객 서비스, 지원 포럼 등을 비롯한 AWS Basic Support 기능을 사용해 보십시오. 현재 Amazon Rout

원문보기 내부링크
Naver Blog

[Node] File System 읽기와 쓰기(callback 방식과 async await 방식)

callback 방식 'use strict' const fs = require('fs'); fs.readFile('test.txt', 'utf-8', (err, data) => { // 오류를 항상 먼저 핸들링 if(err) { console.log(err); return; } console.log(data); }); const content = 'something to write'; fs.writeFile('test.txt', content, err => { if(err) { console.log(err); return; } console.log('success'); }); callback 함수를 promise로 변경하여 파일을 읽고 쓰는 함수를 하나로 만듦 'use strict' const fs = require('fs'); const { promisify } = require('util'); const read = promisify(fs.readFile); const write

원문보기 내부링크
Naver Blog

[Node] promise.all 사용해보기

promise.all 이란? promise를 통해 비동기 처리할 때 다수의 promise가 완료될 때까지 모든 promise를 대기시키고 완료가 될 때 해당하는 값을 리턴 받을 수 있도록 하는 함수 배열 안에 있는 모든 promise가 완료될 때까지 기다렸다가 모두가 실행됐을 경우 값을 리턴 한가지 이상 혹은 다수의 비동기 promise에 대해서 모든 작업의 완료를 보장받을 수 있음 다양한 API를 호출하고 여러가지 데이터를 조합할 경우에 자주 쓰임 예시 const promise1 = new Promise((resolve, reject) => resolve('즉시 호출')); const promise2 = new Promise((resolve, reject) => { setTimeout(() => resolve('3초 뒤 호출'),3000) }); Promise.all([promise1, promise2]) .then(values => console.log(values)) 위의 소스

원문보기 내부링크
Naver Blog

[Node] Promise.race 사용해보기

promise.all과 문법이 유사 다른 점은 promise.all은 모든 promise가 완료될 때까지 기다리는 반면 promise.race는 가장 먼저 완료된(resolve)가 리턴 됨 예시 소스 'use strict' const promise1 = new Promise((resolve, reject) => { setTimeout(() => resolve(2000),2000) }) const promise2 = new Promise((resolve, reject) => { setTimeout(() => resolve('즉시'),0) }) Promise.race([promise1, promise2]).then(value => console.log(value)); 출처 : 본 포스트는 패스트캠퍼스의 Node 웹 프로그래밍 올인원 패키지 Online 강의를 보고 직접 정리한 내용입니다.

원문보기 내부링크
Naver Blog

[Node] http 모듈 이용하여 서버 구축하기

웹 프레임워크(express 등)를 사용하지 않고 http 모듈을 사용하여 서버를 구축하는 방법 간단한 로직인 경우에는 express로 구축하는 것 보다 http 모듈을 활용하는 것이 성능적으로 더 뛰어남 예시 소스 'use strict' const http = require('http'); // 서버 생성 const server = http.createServer((req, res) => { // 요청에 대한 결과를 보낼 때 200일 경우 정상 작동 res.statusCode = 200 // 해당하는 데이터로 어떠한 것을 보냈는지 명시적으로 선언 res.setHeader('Content-type', 'text/html'); // html 문서를 리턴한다. // 종료 res.end('<dvi>Hello World</div>'); }) // 명시적으로 포트를 외부에서 받음 //const port = process.env.PORT // 테스트 화면을 띄우기 위해 임의의 포트 번호 작성

원문보기 내부링크
Naver Blog

[Node] Prototype vs Class 차이점 알아보기

먼저 Prototype을 활용한 서버 생성 소스 const http = require('http'); // 서버 생성 const server = http.createServer((req, res) => { // 요청에 대한 결과를 보낼 때 200일 경우 정상 작동 res.statusCode = 200 // 해당하는 데이터로 어떠한 것을 보냈는지 명시적으로 선언 res.setHeader('Content-type', 'text/html'); // html 문서를 리턴한다. // 종료 res.end('<dvi>Hello World</div>'); }) // 명시적으로 포트를 외부에서 받음 //const port = process.env.PORT // 테스트 화면을 띄우기 위해 임의의 포트 번호 작성 const port = 3000; server.listen(port, () => { console.log(`Server running at port ${port}`); }) // Prototy

원문보기 내부링크
Naver Blog

[Node] Class 활용하여 express 선언하기

'use strict' const express = require('express') const http = require('http') // class로 express 선언 // http server를 확장 // 매우 중요 ! class ApiServer extends http.Server { // singleton pattern 활용 // constructor를 통해서 클래스를 초기화하는데 // config를 통해 외부의 환경 설정을 읽어 옴 // 한 번만 config로 초기화 함 constructor (config) { // express가 한 번만 생성되어 유일성을 보장받을 수 있음(중요!) const app = express() // super를 사용하여 해당 메소드를 다 사용 가능하게 super(app) this.config = config this.app = app this.currentConns = new Set() this.busy = new WeakSet() thi

원문보기 내부링크
Naver Blog

[Node] Crawling puppeteer 활용하여 웹페이지에 스크린샷을 자동으로 생성하기

해당 기능은 실무에서는 어떤 웹 페이지를 미리보기로 보여주고 싶은 경우 등에 사용된다. 각각 라인에 대한 설명은 주석처리 되어있다. 예시 소스 const puppeteer = require('puppeteer'); // puppeteer는 네트워크 요청으로 특정한 웹페이지의 스크린샷을 만들기 때문에 만드는 함수 또한 async 함수여야 함 const main = async () => { const browser = await puppeteer.launch(); // 실행된 브라우저에 대해서 새로운 페이지를 만든다. const page = await browser.newPage(); // 스크린샷을 만들 페이지를 지정 await page.goto('https://developing-move.tistory.com/category/JavaScript/Node?page=4'); // 스크린샷을 만든다.(현재 코드가 실행되고 있는 경로) await page.screenshot({path :

원문보기 내부링크
Naver Blog

[Node] Crawling puppeteer를 활용하여 웹 페이지의 데이터를 Crawling하기

원하는 페이지에서 html 소스를 가져와 파일 시스템을 이용하여 실제 파일로 출력하는 로직이다. 각 라인에 대한 설명은 주석에 있다. 예시 소스 const puppeteer = require('puppeteer'); const fs = require('fs'); // 파일시스템을 이용하여 실제 파일을 출력하는 로직을 작성 // puppeteer를 활용한 코드는 모두 비동기 코드로 이루어진다. const main = async () => { // puppeteer 실행 const browser = await puppeteer.launch(); // 새로운 페이지를 만듦 const page = await browser.newPage(); // 파싱할 데이터가 있는 페이지로 이동 / waitUntil을 사용하여 언제까지 기다릴 것인지 명시 await page.goto('https://example.com', {waitUntil : 'networkidle2'}); // 로드 타임이 오래걸릴

원문보기 내부링크
Naver Blog

[Node] Crawling puppeteer를 활용하여 웹 페이지를 pdf로 변환 및 저장

Crawling 마지막으로 원하는 웹 페이지를 pdf로 변환하여 저장하는 것이다. 예시소스 const puppeteer = require('puppeteer'); // puppeteer를 활용한 코드는 모두 비동기 코드로 이루어진다. const main = async () => { // puppeteer 실행 const browser = await puppeteer.launch(); // 새로운 페이지를 만듦 const page = await browser.newPage(); // pdf 파일을 생성하고자 하는 페이지로 이동 // (추가옵션) 해당 웹사이트에 접속하여 로드 되는 시간이 무한정 걸릴 수도 있고 // 해당 서버나 네트워크에 문제가 있어 시간이 많이 소요될 수도 있다 // 네트워크 환경이나 기타 외부적인 환경 등으로 문제가 생겼을 때 언제까지 기다릴 것인지를 지정하는 것 // networkidle2는 네트워크 상태가 여유가 있는 상태가 될 때까지만 기다린다. await p

원문보기 내부링크
Naver Blog

[React] React 다섯 가지 특징

1. Virtual DOM - 가장 중요한 요소 - DOM(Document Object Model) HTML 블록 하나 하나의 요소를 객체(Obeject)라고 하는데 이 객 체를 DOM 객체라고 보면 된다. - Javascript나 jQuery 라이브러리를 사용하는 경우 DOM에 바로 접근하거나 jQuery 메소드를 사용하여 접근했어야 했다. - SPA : Single Page Application 특정한 기능이나 데이터 요청을 했을 때 해당 하는 페이지를 새로고침하거나 이동하는 작업 없이 현재 페이지에서 모든 데이터의 변환 처리과정 이동이 모두 이루어 지는 것 - 네이버 모바일 페이지를 예로 들었을 때 어떠한 버튼이나 이벤트 실행 시 페이지 전체가 리로드 되면서 DOM 구성이 바뀌게 된다.(F12를 눌러 개발자 도구를 킨 상태에서 더 자세히 확인 가능) 해당하는 document의 데이터 일부를 출력하기 위해 DOM Tree를 전부 reloading 해야 한다. - React가 적용

원문보기 내부링크
Naver Blog

[React] 개발 환경 설정(feat. node, vsCode) (Hello World 출력하기)

vsCode 설치 방법은 따로 설명하지 않았습니다. 기본 적인 설치 방법과 사용법 숙지가 필요합니다. developing-move.tistory.com/25 node 설치 및 에디터(vscode) 설치 구글에 node download를 검색하여 다운로드 링크로 이동하거나 해당 URL 접속 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine... developing-move.tistory.com 또한 node.js를 활용하여 진행할 예정이기 때문에 node에 대한 기초 지식도 필요합니다. 우선 초기 단계에서는 npm install 방법만 숙지하셔도 됩니다. developing-move.tistory.com/42 [node] npm install하기 https://www.npmjs.com/ npm | build amazing th

원문보기 내부링크
Naver Blog

[React] JSX의 개념과 React 개발을 위한 ES6+ 필수 문법(Map)

JSX란? - React는 모든 것을 View로 본다. 그렇기 때문에 기존의 자바스크립트의 라이브러리와 프레임워크와 다르게 모든 HTML 코드를 자바스크립트 코드 안에 넣는 획기적인 방법이다. - 그 기본이 되는 것이 Javascript를 확장하여 마치 XML 문법처럼 만든 것이 JSX다. - 즉 HTML 코드를 마치 XML을 코딩하는 것처럼 하는 것이다. app.js의 소스를 보면 javascript function 안에 html 코드가 코딩 되어 있는 것을 볼 수 있다. 이것을 JSX 라고한다. React는 모든 것을 Javascript로 코딩하는 것이 목적이기 때문에 JSX 문법을 통해 Javascript 안에 HTML 코딩을 하게 함으로써 모든 것을 컴포넌트화 할 수 있다. 만약 javascript 안에 HTML 코드를 입력하지 않고 별도의 HTML 파일이 필요하게 된다면 해당하는 모듈을 하나의 컴포넌트로 만들면 다른 파일을 호출해야 하고, 템플릿 언어를 사용해야 되기 때문에

원문보기 내부링크
Naver Blog

[React] JSX와 Fragment

JSX란? - React는 모든 것을 View로 본다. 그렇기 때문에 기존의 자바스크립트의 라이브러리와 프레임워크와 다르게 모든 HTML 코드를 자바스크립트 코드 안에 넣는 획기적인 방법이다. - 그 기본이 되는 것이 Javascript를 확장하여 마치 XML 문법처럼 만든 것이 JSX다. JSX코드는 HTML과 매우 유사하지만 차이점이 있다. - class가 아닌 ClassName으로 표기한다. - 항상 camelCase 표기법으로 표기해야 한다. (기존의 onlick을 onClick으로) flagment란? - JSX 요소들은 항상 한 개의 컴포넌트로 리턴이 되어야 한다. - 그렇기 때문에 똑같은 head를 두 번 나열해서 쓰면 에러가 발생한다. - flagment가 등장하기 전에는 div나 span태그로 묶어서 사용했다. 예) <div> <Head title="this is a title" name = "this is a title"/> <Head title="this is a

원문보기 내부링크
Naver Blog

[React] Rendering(조건별 Rendering)

조건별로 랜더링 하는 예시 소스 import React from 'react'; // 첫 번째 문자는 대문자 // 컴포넌트는 항상 함수를 반환해야 한다. const Loading = () => <div>Loading...</div> // 조건별로 랜더링 // 단일상태로 로딩 상태일 경우만 출력되는 컴포넌트 class LoadingConponent extends React.Component { constructor(props) { super(props) this.state = { // 로딩이 되기 전 loading : false } } render() { const { loading } = this.state return ( <> { /* 조건별 페이지 랜더링 */ loading && <Loading /> // Loading일 경우에만 출력 } </> ) } } 해당 소스는 constructor의 this.state 값 중 loading을 최초 false로 주고 그 조건에 따라 다른

원문보기 내부링크
Naver Blog

[React] Props와 State 차이점

Props와 State의 차이점 먼저 Props는 상위 계층의 컴포넌트와 데이터 교환을 위해 사용한다. 반면 state는 다른 컴포넌트와 상호 교환의 목적이 아닌 해당하는 컴포넌트의 외부 접근을 고려하지 않고 내부적으로 내부 클래스에서만 사용하는 것이 목적이다. 예시 소스 import React from "react"; // class 선언 class Test extends React.Component { constructor(props) { super(props) this.state = { // 문자, 숫자, 함수 다 정의할 수 있다. lang : 'javascript', date : new Date() } } render() { // render 함수 안에서 state 사용 가능 const { lang, date } = this.state return ( <div> {lang} <br/> {date.toString()} </div> ) } } export default Test;

원문보기 내부링크
Naver Blog

[React] Event Handling onClick (feat. 이벤트 버블링(event bubbling)

본 예시는 React에서 onClick 이벤트를 실행하는 방법입니다. onclick을 onClick camelCase로 표기하는 것 이외에는 큰 차이는 없습니다. 예시 소스 import React from "react"; function App() { const handleClick = () => { alert('button is clicked'); } return ( // camelCase 표기법으로 표기 <button onClick={handleClick}>this is a button</button> ) } export default App; 파라미터로 값 받기 이벤트 버블링(event bubbling) 방지 이벤트 버블링이란? DOM 객체 이벤트가 실행될 때 하나의 DOM 객체가 내부 안에 있어 외부와 중첩되는 경우 해당 하는 기능이 두 번 실행 되는 것을 방지한다. preventDefaullt() 사용. 예시 소스 import React from "react"; functi

원문보기 내부링크
Naver Blog

[React] Key Warnings 해결 방법

Map함수를 사용하여 반복되는 컴포넌트 혹은 JSX 요소 들을 랜더링 하다 보면 key Warning라는 오류가 콘솔창에 뜨는 것을 자주 볼 수 있다. 예시 import React from 'react'; import './App.css'; function App() { const iter = [0,1,2] return ( <div> { iter.map(item => <h1>item</h1>) } </div> ) } export default App; 해당 소스 코드 입력 후 localhost:3000에 접속하면 개발자 도구(F12)에 이미지와 같은 오류가 뜨는 것을 확인할 수 있다. 에러를 간단히 읽어보면 유니크한 key가 필요함을 알 수 있다. div 안에 iter.map 부분을 아래와 같이 바꾸면 에러가 사라진다. iter.map(item => <h1 key={item}>item</h1>) 왜 리액트는 key를 사용자가 수동으로 선언을 해야 하나? virtual DOM이 업데이

원문보기 내부링크
Naver Blog

[React] setState() 활용 - componentDidMount()

실무에서 setState를 비동기적으로 활용하기 해당 예시는 tick() 이라는 초당 업데이트 함수를 정의하여 랜더링 이후 즉시 호출되는 함수인 componentDidMount()를 사용해 랜더링 될 때마다 시간을 업데이트 하는 로직이다. 예시 소스에 앞서 setState는 비동기 함수라는 것과, 실제 랜더링이 이루어지는 render() 함수와 생성자, 그리고 현재 클래스를 종료 시키는 componentWillUnmount() 함수 에서는 setState() 함수를 실행할 수 없다는 것을 알고 있어야 한다. 예시 소스 import React from "react"; class Timer extends React.Component { constructor(props) { super(props) this.state = { time : new Date() } } // 랜더링 이후 즉시 호출 함수 componentDidMount() { this.tick() } // 초당 업데이트 함수 정의

원문보기 내부링크
Naver Blog

[React] State Hook

React hook은 react 최신 문법의 핵심으로 기존의 리액트가 클래스 기반의 컴포넌트를 생성하는 데 있어 단점을 해결하기 위해 새로 출시한 기능 React hook은 class를 전혀 사용하지 않고 함수로 시작해서 함수로 끝난다. 다음 예시 소스는 state hook을 사용하여 버튼 클릭 시 숫자가 증가하는 웹 페이지에 대한 소스다. import React, { useState } from "react"; // react hook 불러오기 import logo from './logo.svg'; import './App.css'; // useState는 최상단에서 선언해야 한다. // 버튼 클릭 시 숫자 자동 증가 function App() { // 카운트는 클릭 횟수 저장할 변수, setCount는 카운트를 늘려가기 위한 함수 // useState의 0은 초기값(숫자,문자,배열,객체 모두 올 수 있음) // 변수와 함수는 원하는 대로 지으면 되지만, 보통 함수는 변수명 앞에

원문보기 내부링크
Naver Blog

[React] EffectHook - api 활용하여 검색 결과 보여주기

api를 활용하여 진행하기 때문에 chrome store에서 json viewer download이 필요 axios 설치 api를 가져올 사이트는 아래와 같이 생겼다. https://hn.algolia.com/api/v1/search 예시 소스는 아래와 같으며 각 라인별 설명을 주석 처리로 설명해 놓았다. mport React, {useState, useEffect} from "react"; // Json 데이터를 받아 오기 위해 선언 import axios from 'axios' const App = () => { //react satate hook // hits는 가져올 api에서의 데이터 const [data, setData] = useState({ hits: []}) // api 검색 키워드 (쿼리 스트링) const [query, setQuery] = useState('react') // 랜더링이 업데이트가 되었을 때 effct 구문 실행 // 리액트에서 랜더링 useEff

원문보기 내부링크
Naver Blog

[React] Redux 특징 및 설치법

redux의 특징 one immutable store - 저장소는 한 개만 가지고 있다 - 저장소는 불변하고 그 스토어는 단일성을 유지한다. Actions trigger changes - 특정한 Actions을 사용하기 위한 다양한 연산들을 Action으로 정의하고 그 Action이 수행하고자 하는 상태 변화를 유도한다. - Action의 상태 변화를 유도하고 다른 어떠한 곳에서도 데이터의 상태 변화를 접근하지 않기 때문에 단방향 적으로 흐를 수 있다. Reducers updateState - 데이터 변화 시 기존 데이터의 속성이 변하지 않고 새로운 데이터를 반환 설치 경로가 중요하다. pakage.json과 동일한 경로로 이동하여 터미널에서 설치를 진행한다.

원문보기 내부링크
Naver Blog

[React] Components refactoring

재사용 가능한 컴포넌트를 활용하여 소스코드 리팩토링(refactoring) 게시판 코멘트라는 가상의 소스 코드가 있다고 친다. import React, { use State } from "react"; import "./App.css"; function App(props) { return ( <div className="coment"> <div className="UserInfo"> <img ClassName="avatar" src={props.author.avtarUrl} alt={props.author.name} /> <div classname="UserInfo-name"> {props.author.name} </div> </div> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); } export defaul

원문보기 내부링크
Naver Blog

[React] 첫 번째 리액트 컴포넌트

리액트 컴포넌트를 만들어 보자. 먼저 src 디렉터리에 Hello.js라는 파일을 만들고 아래와 같이 작성한다. import React from 'react'; function Hello() { return <div>안녕하세요</div> } export default Hello; 리액트 컴포넌트를 만들 땐 우선 상단에서 다음과 같은 코드를 입력해야 한다. import React from 'react'; 이 코드는 리액트를 불러와서 사용하겠다는 것을 의미한다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. 그리고 이렇게 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이다. ∴ 사실 이렇게 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능이다. 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기

원문보기 내부링크
Naver Blog

[React] React는 어쩌다 만들어졌을까?

리액트라는 라이브러리가 어쩌다 만들어졌는지 아는 것은 리액트를 이해하는 데 도움이 될 것이다. JavaScript를 사용해서 HTML로 구성된 UI를 제어해 봤다면 DOM(Document Object Model) - 각 HTML element에 대한 정보를 지니고 있는 JavaScript 객체 -을 변형시키기 위해 우리가 어떤 작업을 해야 하는지 익숙할 것이다. DOM을 변형하려면 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택한 뒤 특정 이벤트가 발생하면 변화를 주도록 설정해야 한다. <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <h2 id="number">0</h2> <div> <button id="increase">+1</button> <button id="decrease">-1</button> </div> <script

원문보기 내부링크
Naver Blog

[React] JSX 문법

JSX란 React에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다. 보기에는 HTML처럼 생겼지만 실제로는 Javascript다. 바벨이라는 도구를 사용하여 XML 형태의 코드가 Javascript로 변환이 된다. 변환되는 것을 확인하기 위하여 babeljs.io에 접속하여 아래 코드를 입력해 본다. bable 변환 결과 위 이미지의 네모 안의 createElement 함수가 컴포넌트를 만들어준다. 즉 컴포넌트를 우측 방식대로 계속 선언하는 것은 어려움이 있으니 JSX를 문법을 사용하여 XML형태로 사용하면 이것을 Javscript 형태로 변환하게끔 해주는 것이 바벨이라는 도구다. JSX 문법을 정확하게 Javascript 문법으로 변환하기 위해서는 지켜야 할 규칙들이 있다. - 태그는 무조건 닫혀야 된다. (닫히는 태그가 없으면 에러가 발생한다) 간혹 HTML에서 INPUT이나 BR 태그는 닫지 않고 사용하는 경우가 있지만 리액트에서는 무조건 닫아줘야 한다. 태그를 닫지 않았

원문보기 내부링크
Naver Blog

[React] props를 통해 컴포넌트에게 값 전달하기

props는 properties의 줄임말이다. props는 컴포넌트를 사용하려 할 때 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용한다. App.js import React from 'react'; import Hello from './Hello'; // 현재 자신의 디렉토리에 있는 Hello 컴포넌트를 불러옴 function App() { return ( <Hello name="react"/> ); } export default App; 위와 같이 작성 후 Hello.js로 이동 import React from 'react'; // 리액트를 불러와서 사용하겠다. // 함수 형태 컴포넌트 // 함수형태 컴포넌트의 첫 자리는 대문자 권장 // props 파라미터 안에는 App.js에서 넣어준 값이 객체 형태로 존재 function Hello(props) { console.log(props); // HTML 처럼 보이지만 JSx return <div>안녕하십니까</div>; } //

원문보기 내부링크
Naver Blog

[React] 조건부 렌더링(Rendering)

조건부 렌더링(rendering)이란? 특정 조건이 참인지 거짓인지에 따라 다른 결과를 보여주는 것 먼저 App.js의 Hello 태그 안에 isSpecial을 작성한다. import React from 'react'; import Hello from './Hello'; // 현재 자신의 디렉토리에 있는 Hello 컴포넌트를 불러옴 import Wrapper from './Wrapper'; function App() { return ( <Wrapper> {/* true 또한 Javascript 값이기 때문에 중괄호로 감싸야 한다 */} <Hello name="react" color="red" isSpecial={true}/> <Hello color="pink"/> </Wrapper> ); } export default App; Hello.js 컴포넌트로 이동하여 아래 소스를 작성한다. 해당 소스는 삼항연산자를 활용하여 isSpecial 값의 true/false 에 따라 * 표시를 하

원문보기 내부링크
Naver Blog

[React] useState를 통한 동적 상태 관리

useState는 React의 hooks 중 하나로 해당 예시는 UseSate를 활용하여 간단한 Counter 프로그램 만들기다. 먼저 Counter.js 파일을 생성 후 아래와 같이 소스를 작성한다. import React, {useState} from 'react'; // useState 함수 사용 function Counter() { const [number, setNumber] = useState(0); // COunter 컴포넌트 내부에 함수 작성 const onIncrease = () => { // 숫자 증가 setNumber(number + 1); } const onDecrease = () => { // 숫자 감소 setNumber(number - 1); } return ( <div> <h1>{number}</h1> <button onClick={onIncrease}>+1</button> <button onClick={onDecrease}>-1</button> </div

원문보기 내부링크
Naver Blog

[React] 리액트(React)에서 Input 상태 관리하기

React에서 input 창에 간단한 텍스트 입력 및 초기화에 대한 소스 예시 먼저 InputSample.js 파일을 생성하고 아래 소스를 적용한다. function InputSample() { const [text, setText] = useState(''); // 하단 input 박스에서 값 변경 시 이벤트 객체가 파라미터(e)에 담겨서 온다. const onChange = (e) => { // e.target에는 이벤트가 발생한 input DOM에 대한 정보를 가지고 있다. console.log(e.target); // 이벤트가 발생한 DOM의 값 가져오기 console.log(e.target.value); setText(e.target.value); } // 초기화 const onReset = () => { setText(''); } return ( <div> <input onChange={onChange} value={text} /> <button onClick={onRes

원문보기 내부링크
Naver Blog

[React] 여러 개의 input 상태 관리하기

이전 포스트인 input 상태 관리하기의 응용 name 식별자를 사용하여 여러 개의 input 박스의 상태를 관리하는 예이다. 이번 챕터에서 가장 중요한 것은 객체 상태를 업데이트 하는 것인데, 리액트에서 객체를 업데이트 할 때는 반드시 기존 객체를 먼저 복사해야 한다. 먼저 InputSample.js 파일을 생성한다. import React, {useState} from 'react'; function InputSample() { // 객체 형태의 상태를 관리 const [inputs, setInputs] = useState({ name : '', nickname: '' }) // 네임과 닉네임 값을 간편하게 사용하기 위해 name, nickname 값을 비구조화 할당으로 추출 const {name, nickname} = inputs; const onChange = (e) => { // name 값 추출 console.log(e.target.name); // value 값 추출 c

원문보기 내부링크
Naver Blog

[React] useRef로 특정 DOM 선택하기

HTML/Javascript 환경에서는 특정 DOM을 선택할 때 getElementbyid나 query selector를 사용한다. react를 사용할 때 특정 엘리먼트의 위치나 크기를 가져와야 한다 든지, 스크롤바 위치를 가져오거나 설정해야 한다 든지, 포커스를 설정해야 된다 든지 등 다양한 상황이 있다. 추가적으로 video.js 라이브러리나, d3, chart.js 등 그래픽 라이브러리를 사용할 때에도 특정 DOM에 라이브러리를 적용하기 때문에 DOM을 선택하는 상황이 발생할 수 있다. 이 때 react에서 ref라는 것을 사용한다. 함수형 컴포넌트에서는 useRef를 사용하고 클래스형 컴포넌트에서는 React.createRef()를 사용한다. 우선 이번 챕터에서는 함수형 컴포넌트인 useRef를 사용할 것이다. 해당 챕터는 이전 input 챕터의 소스를 활용하여 진행한다. 이전 여러 개의 input 상태 관리하기 소스를 적용하고 초기화를 누르면 포커스가 초기화에 있다. 초기화

원문보기 내부링크
Naver Blog

[React] useRef로 컴포넌트 안의 변수 만들기

예를 들어 컴포넌트 내부에 let 키워드를 사용하여 변수를 선언했을 때 다음 렌더링이 될 때 변수 값이 초기화 된다. 만약 유지하는 값을 관리하려면 useState를 사용해야 하는데, useState는 상태를 바꾸게 되면 컴포넌트가 리 랜더링 된다. 하지만, 가끔 어떤 값을 바꿨을 때 굳이 리렌더링 할 필요 없는 값을 관리하는 경우도 있다. 이럴 때 useRef를 사용하면 된다. useRef는 특정 DOM을 선택해야할 때 사용하는데 이것 외에도 컴포넌트가 리 렌더링 될 때마다 계속 기억 되는 값을 관리할 때도 사용할 수 있다. 주로 setTimeout, setInterval을 사용했을 때 주어지는 ID값을 기억해야 할 때 사용하고 외부 라이브러리를 사용하여 생성된 인스턴스를 담을 때도 사용하고, 스크롤 위치 등을 알고 있어야 될 때 등에 사용한다. 알아 두어야 할 것은 useRef 관리하는 값은 바뀌어도 컴포넌트가 리 렌더링 되지 않는 다는 것이다. 바로 이전 챕터에서 작성한 Use

원문보기 내부링크
Naver Blog

[iReport] DB에 Binary Data로 저장된 이미지 출력

• Palette에서 이미지 드래그 앤 드랍 • 특정 파일을 불러오지 않고 취소 버튼 클릭 • 쿼리문 작성 • 아이리포트에 이미지를 사용하기 위해서는 해당 데이터를 encode 해야 함. • 아이리포트의 쿼리문도 변경하여 적용. •이미지 클릭 -> Properties 클릭 -> Expession Class를 java.io.inputStream으로 변경 • Image Expression에 다음과 같이 넣어 줌. • net.sf.jasperreports.engine.util.JRImageLoader.getInstance(new SimpleJasperReportsContext()).loadAwtImageFromBytes(javax.xml.bind.DatatypeConverter.parseBase64Binary($F{file_cntn})) • 모든 설정을 마친 후 메인 화면에서 프리뷰 클릭 •미리보기 화면에서 DB에 저장된 이미지가 정상적으로 뜨는 것을 볼 수 있다.

원문보기 내부링크
Naver Blog

[iReport] 바코드(Barcode) 사용하기

• Palette 클릭 후 Bacode를 드래그 앤 드랍. • 원하는 바코드 형태를 선택. • 바코드 클릭 -> Properties -> Code Expression의 …을 클릭. • 사용할 필드 값을 넣어줌. 완료 한 후에 프리뷰를 누르면 바코드가 정상적으로 출력됩니다. 스마트폰 바코드 앱 혹은 바코드 스캐너를 이용하여 해당 바코드를 스캔할 경우 지정한 필드 값이 뜨는 것을 확인할 수 있습니다.

원문보기 내부링크
Naver Blog

[iReport] 동일 밴드(band) 가로/세로로 나눠서 출력하기

•리포트 우 클릭 -> Properties -> Page size / Columns •Page size에서 리포트 크기를 원하는 크기로 줄일 수 있음 •디테일 밴드는 세로 출력이 기본이나 Columns를 수정하여 원하는 형식으로 변경 가능 •Print order를 Horizontal로 변경 및 Columns를 2로 설정하여 이미지가 가로로 2개씩 출력되도록 설정

원문보기 내부링크
Naver Blog

[HTML] Empty tag(빈 태그)

Empty tag(빈 태그) 일반적으로 태그는 열리고 닫히는 범위가 존재함. <div> ... </div> Empty tag의 경우 닫히는 태그가 별도로 없음. 따라서 비어 있다(empty)고 표현함. <img src="" alt=""> 또는 Self closing tag라고 해서 스스로 닫히는 형식으로 쓰이기도 함. 열리는 동시에 스스로 닫아버리는 것. <img src="" alt="" /> Empty tag(빈 태그)의 두 가지 방식 '/'가 없는 empty tag - HTML 1, 2, 3, 4에서 사용 가능. '/'가 있는 empty tag - XHTML에서 사용 가능. HTML5에서는 두 가지 방식 모두 사용 가능함. 사용 시 유의 사항 XHTML 버전이나 Lint 환경 혹은 프레임워크 세팅에 따라 '/'을 사용하는 것이 필수가 될 수 있음. 개발 환경에 따라 '/'을 사용하거나 사용하지 않을 수 있는데, 둘 중 어느 것이 더 좋은 방식인가에 대해서는 여전히 갑론을박이

원문보기 내부링크
Naver Blog

[HTML] HTML 문서의 주요 범위

HTML의 기본 구성 !DOCTYPE DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의함. 이는 웹 브라우저에 제공될 HTML 문서가 어떤 버전으로 해석된 후 출력될지 정의. HTML은 크게 1, 2, 3, 4, XHTML, 5의 6가지 버전으로 분류됨. 현재의 표준 모드는 HTML 5 버전. <!-- HTML 5 --> <!DOCTYPE html> <!-- XHTML 1.0 Transitional --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> HTML 문서의 전체 범위를 지정함. 웹 브라우저가 해석해야 할 HTML 문서의 전체 영역, 즉 시작과 끝 지점을 알려 주는 역할. <head> 웹 브라우저가 해석해야 할 HTML 문서의 정보

원문보기 내부링크
Naver Blog

[HTML] 메타데이터(1) - title, link, style, MIME Type, base

<head></head> 내에서 사용하는 태그들은 HTML 문서의 정보를 담고 있음. <title> HTML 문서, 즉 웹 페이지의 제목을 정의함. 웹 브라우저의 각 사이트 탭에 이름/제목으로 표시됨. HTML 문서의 구조화보다는 정보를 나타내는 태그로 페이지 정보가 브라우저 탭 영역에 출력되기는 하나, 출력을 목적으로 작성하는 것은 아님. <link /> 현재 HTML 문서 외부에 있는 문서를 연결하기 위해 사용. - 특히 HTML 문서 외부에서 작성된 stylesheet(css 문서, .css)를 읽어와 연결시킬 때 가장 많이 사용됨. - 파비콘(favicon) 연결 시에도 사용. 속성 - rel : relationship의 약어. 현재 문서와 외부 문서와의 관계를 명시. 필수 속성. rel은 임의로 작성하는 것이 아니라 정해진 규약 내에서 작성해야 함. Link types: https://developer.mozilla.org/en-US/docs/Web/Link_types

원문보기 내부링크
Naver Blog

[HTML] 메타데이터(2) - <meta>

<meta /> <meta>는 HTML 문서(웹 페이지)에 관한 정보(표시 방식, 제작자, 문자 인코딩 방식 등)를 검색 엔진이나 브라우저에 제공함. <title>, <link>, <style>, <script>에서 나타낼 수 없는 기타 모든 정보들을 표시. 속성 - charset 문자 인코딩 방식(텍스트가 출력되는 방식)을 설정. HTML 문서 내에 작성된 모든 문자들이 화면에 어떻게 출력될지 정의함. UTF-8, EUC-KR 등. 이전에는 EUC-KR이 많이 사용되던 추세였으나 최근에는 UTF-8을 선호함. 문자 인코딩 방식을 설정하는 것이기 때문에 charset 속성을 나타내는 <meta>는 보통 <title>보다 앞에 작성함. - content http-equiv 또는 name 속성의 값을 작성. - http-equiv 서버/사용자의 작동방식을 변경할 수 있는 지시사항을 명시(지시사항은 content 속성에 정의). HTTP 응답 헤더 제공. 대표적인 예로 Internet

원문보기 내부링크
Naver Blog

[HTML] Block 요소와 Inline 요소

Block 요소 - <div>, <h1>, <p> 등 1. 사용 가능한 최대 가로 너비를 사용함. <body> 내에 block 요소인 <div> 생성 <div>에 대한 배경색 지정(좌), 결과 화면(우) - 가로 너비를 지정하지 않았으나 화면의 왼쪽부터 오른쪽 끝까지 배경색이 모두 출력됨. 2. 크기를 지정할 수 있음. <body> 내에 block 요소인 <div> 생성(좌), <div>에 대한 배경색과 width, height 지정(우) 결과 화면 - 지정된 px만큼의 너비와 높이를 가지는 영역이 됨. 3. width: 100%, height: 0px에서 출발 - 이 값에서 출발해서 요소가 완성되는 것. - block 요소가 늘 이 값을 가진다는 건 아니라는 점에 유의. <div>에 height는 지정하지 않고 width값만 지정(좌), 결과 화면(우) - 이전 예와 비교해 height를 지정하지 않으면 <div> 내용의 높이만큼만 영역을 가지게 됨. 4. 수직으로 쌓임. - 블

원문보기 내부링크
Naver Blog

[HTML] Contents 구분(1) - header, footer, h1 ~ h6

<header> - 소개나 탐색을 돕는 그룹 - 일반적으로 사이트 가장 상단 부분에 bar가 있으면 header라고 지칭. - 로고, 메뉴, 검색 바, 로그인/로그아웃, 회원가입 버튼 등으로 구성. - <header></header> 내에는 다른 <header>나 <footer>가 자손으로 올 수 없음. - 또한 <address>, <footer>, 다른 <header>의 자손이 될 수도 없음. - 브라우저 호환성은 Full Support. - Block level 요소. <footer> - 사이트 하단에 회사 정보, 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담음. - <footer></footer> 내에는 <header>, <footer>가 자식 요소로 올 수 없음. - 브라우저 호환성은 Full Support. - Block level 요소 ※ <header>, <footer>와 <div> <header>, <footer>는 <div>로 대체해 사용할 수 있음.

원문보기 내부링크
Naver Blog

[HTML] Contents 구분(2) - main, article, section, aside

<main> 문서 내부의 핵심적인 Contents를 지칭할 때 사용. - <body> 내의 주요 Contents를 나타냄. 주요 Contents 구역은 문서의 핵심 주제나 애플리케이션의 핵심 기능성에 대한 부연, 또는 직접적으로 연관된 Contents로 이루어짐. - 예로 블로그에서 사이드, 광고, footer 등의 부분을 제외하고 핵심 포스트 부분이 main에 해당. <main>은 hidden 속성이 사용된 것을 제외하고 문서당 하나만 존재해야 함. Internet Explorer에서 지원하지 않음. Block level 요소. <article> 독립적으로 구분되거나 재사용 가능한 영역을 설정. <header>, <footer>, <main> 태그는 문서의 헤더, 푸터, 메인(핵심)을 지정해 범위를 설정<article>은 매거진, 뉴스 기사, 블로그 등에 사용됨. 일반적으로 <h1>~<h6>를 포함하여 식별. 작성일자와 시간을 <time>의 datetime 속성으

원문보기 내부링크
Naver Blog

[Java] byte 배열을 파일로 변환

public void writeToFile(String filename, byte[] pData){ if(pData == null){ return; } int lByteArraySize = pData.length; System.out.println(filename); try{ File lOutFile = new File("C:/madev/"+filename+".jpg"); FileOutputStream lFileOutputStream = new FileOutputStream(lOutFile); lFileOutputStream.write(pData); lFileOutputStream.close(); }catch(Throwable e){ e.printStackTrace(System.out); } }

원문보기 내부링크
Naver Blog

[React] 배열에 새로운 항목 추가하기

이번 챕터 역시 이전에 배열 렌더링 했던 것과 이어진다. 먼저 CreateUser.js 파일을 생성하고 아래 소스를 코딩한다. CreateUser()는 App.js로부터 prop 정보를 받아 인풋 박스와 버튼을 그려준다. import React from 'react'; function CreateUser({ username, email, onChange, onCreate}) { return ( <div> <input name="username" placeholder="계정명" onChange={onChange} value={username}/> <input name="email" placeholder="이메일" onChange={onChange} value={email}/> <button onClick={onCreate}>등록</button> </div> ); } export default CreateUser; App.js로 이동하여 아래 소스를 코딩한다. 여기서 중요한 부분은 이전

원문보기 내부링크
Naver Blog

[React] 배열 항목 제거하기

이번 챕터 역시 이전에 배열 렌더링 했던 것과 이어진다. 기존에 만들었던 userList 컴포넌트로 이동하여 해당 부분을 추가한다. import React from 'react'; function User({user, onRemove}) { return ( <div> <b>{user.username}</b><span>({user.email})</span> {/* 버튼이 눌릴 때마다 onRemove를 id 값을 파라미터로 넣어서 호출할 것이다 라는 의미 */} <button onClick={() => onRemove(user.id)}>삭제</button> </div> ); } function UserList({ users, onRemove }) { return ( <div> { // map을 사용하여 엘리먼트 형식으로 변환 // map은 기존 배열의 내용을 통체로 변경할 때 사용한다. // 즉 해당 예시에서는 users라는 배열을 <User user={user} key={user.id

원문보기 내부링크
Naver Blog

[React] 배열 항목 수정하기

이번 챕터 역시 이전에 배열 렌더링 했던 것과 이어진다. 계정 정보를 선택할 때마다 색을 바꿔주는 기능 먼저 기존의 작성된 userList.js 파일 아래 이미지에 표시된 부분을 추가한다. import React from 'react'; function User({user, onRemove, onToggle}) { return ( <div> <b style={{ color: user.active ? 'green' : 'black', cursor: 'pointer' }} onClick={() => onToggle(user.id)} > {user.username} </b> <span>({user.email})</span> {/* 버튼이 눌릴 때마다 onRemove를 id 값을 파라미터로 넣어서 호출할 것이다 라는 의미 */} <button onClick={() => onRemove(user.id)}>삭제</button> </div> ); } function UserList({ users

원문보기 내부링크
Naver Blog

[React] useEffect를 사용하여 마운트언마운트 업데이트 시 할 작업 설정하기

리액트 컴포넌트가 처음 화면에 나타나게 되거나 화면에서 사라지게 될 때 특정 작업을 할 수 있음 추가적으로 컴포넌트의 props나 상태가 바껴 업데이트 되거나 업데이트 전에 혹은 리 로딩 될 때마다 어떤 작업을 등록할 수 있다. 컴포넌트가 나타나는 것 - mount 컴포넌트가 사라지는 것 - un mount 예시는 이전에 작성된 useList를 활용 (배열 항목 추가, 제거, 수정 포스트) userList.js 파일에 해당 소스를 추가한다. useEffect(() => { console.log("컴포넌트가 화면에 나타남"); // setInterval, setTimeout등 시간 함수를 사용할 때 return () => { console.log("컴포넌트가 화면에서 사라짐") } },[]); // 두 번째 파라미터에 비어있는 배열 선언 최초 로딩 시에는 컴포넌트가 3개라 콘솔에 세 번 찍혔고 아래 콘솔로그는 삭제버튼을 눌러 컴포넌트 중 하나를 삭제했을 때 찍힌 로그다. 두 번째 파라

원문보기 내부링크
Naver Blog

[React] useMemo 를 사용하여 연산한 값 재사용하기

주로 성능을 최적화 하는데 사용 이전에 배열 항목 추가, 제거, 수정 파일 활용 해당 예시를 위해 우선 App.js에서 active 값이 바뀔 때마다 카운트 되는 함수를 작성한다. function countActiveUsers(users) { console.log('활성 사용자 수를 세는 중...'); return users.filter(user => user.active).length; } 잘 작동은 하지만 input box에서 onChange 될 때마다 타는 문제가 있음 이럴 때 사용하는 것이 useMemo useMemo는 특정 값이 바꼈을 때만 특정 함수를 사용하여 연산을 하고 원하는 값이 바뀌지 않았으면 리 렌더링할 때 이전에 만들어 놓은 값을 재사용 const count = useMemo(() => countActiveUsers(users), [users]); // users가 바뀔 때에만 실행 됨 해당 부분만 바꿔주면 input box에 값을 변경해도 해당 함수가 실행되지

원문보기 내부링크
Naver Blog

[React]useCallback 를 사용하여 함수 재사용하기(feat React Developer Tools)

이전에 만들었던 함수를 새로 만들지 않고 재사용함 useMomo와 유사 예를 들어 특정 값이 바뀌었을 때만 새로 함수를 생성하고 그렇지 않으면 기존에 만든 함수를 재사용한다. 기존에 작성했던 onChange, onToggle, onCreate 함수 등 모든 함수들이 컴포넌트가 매번 리 렌더링 될 때마다 새로운 함수를 만들고 있다. 함수를 새로 만드는 것 자체는 리소스를 많이 차지하진 않지만 한 번 만든 함수를 재사용 할 수 있으면 재사용하는 것이 좋다. 컴포넌트들이 props가 바뀌지 않으면 vitual DOM을 새로 그리는 것이 아닌 이전에 만들어 놓은 결과물을 재사용할 수 있도록 구현할 수 있다. 함수가 계속 새로 만들어 지다 보면 이렇게 최적화를 할 수 없기 때문에 함수도 재사용이 필요하다. useMemo와 유사하게 기존의 함수를 감싸주기만 하면 된다. 예시 ** 기존 소스 const onChange = e => { const { name, value } = e.target s

원문보기 내부링크
Naver Blog

[HTML] Contents 구분(3) - nav, address, div

<nav> navigation의 약어, 다른 페이지에 대한 링크를 제공하는 영역. <header> 내의 메뉴, home, about, contact us, 목차, 색인 등을 설정. - 반드시 header 내에 있어야 하는 것은 아님. 특정한 페이지에서 외부로 나가는 링크를 그룹화 하여 연결할 때 <nav>를 통해 묶어 줄 수 있음. - 예) 메뉴는 해당 페이지로 이동하는 역할을 함. 이때 전체 묶음을 <nav>를 통해 만들어낼 수 있음. - 메뉴를 묶을 경우 보통 <nav> 사용. <nav></nav> 안에는 <ol>, <ul>이 삽입되어 사용되는 경우가 많음. <nav>의 사용 예시 - 목록 세트를 <nav>로 묶어 사용. - 이 부분이 navigation 역할을 하는 영역이라고 설정하는 것. Block level 요소 ※ <header>, <footer>, <main>, <article>, <section>, <aside>, <nav> 등 영역을 설정하는 태그들은 모두

원문보기 내부링크
Naver Blog

[HTML] 문자 콘텐츠(1) - ol, ul, li, dl, dt, dd

<ol>, <ul>, <li> 각 항목(<li>)의 정렬된 목록(<ol>)이나 정렬되지 않은 목록(<ul>)을 설정. 목록을 구성하는 태그로 <ol> + <li> 또는 <ul> + <li>가 한 세트를 이룸. - <ol>: Ordered List. 순서가 있어야 하는 목록. - <ul>: Unordered List. 순서가 필요하지 않은 목록. - <li>: List Item. 목록 안에 있는 각각의 항목. <ol>과 <ul>은 자식으로 <li>만 포함 가능. 반드시 <li>를 포함해 세트로 사용해야 함. <li>는 단독으로 사용될 수 없음. <ol>이나 <ul>에 자식 요소로 포함되어 있어야 함. 정렬된 목록(<ol>)의 항목 순서는 중요도를 의미할 수 있어 중요도 표시에 활용 가능. <ol>과 <ul>은 Block level 요소. <li>의 경우 display: list-item;. Block level 요소에 소속된 개념. - <ol>, <ul>이 block 요소

원문보기 내부링크
Naver Blog

[HTML] 문자 콘텐츠(2) - p, hr, pre, blockquote

<p> paragraph의 약어, 하나의 문단을 설정할 때 사용. 일반적으로 정보통신 보조기기 등은 다음 문단(<p>)으로 넘어갈 수 있는 단축키를 제공함. - 정보통신 보조기기를 통한 웹 접근성을 올려주므로 많이 사용됨. Block level 요소. <p> 사용 예시 - '마르고 닳도록' 이후 코드상에서는 Enter를 입력했으나 실제 출력된 화면에서는 띄어쓰기가 입력됨. - 태그를 이용해 줄바꿈을 해주지 않으면 코드상에서 입력된 엔터는 모두 브라우저에서 줄바꿈이 되지 않고 띄어쓰기로 인식되어 출력됨. - 줄바꿈할 수 있는 태그로 <br>을 이용. <hr /> Horizontal Rule의 약어. (주제에 의한) 문단의 분리를 위해 사용하며 수평선을 만들어줌. <hr>을 수평선을 만들어내기 위한 용도로만 사용해서는 안 됨. - 대부분 표현적인 관점에서 수평선(border)이 표시되나 이는 시각적인 용도일 뿐 의미적인 관점에서 사용해야 함. - 수평선을 원하지 않는다면 C

원문보기 내부링크
Naver Blog

[HTML] 인라인 텍스트(1) - a, abbr, b, mark, em

<a> anchor의 약어. 기본적으로 현재 문서에서 링크를 걸어 외부 문서로 내보내는 경우에 사용. 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정함. 속성 - download : 해당 요소가 resource를 다운로드하는 용도로 사용됨을 의미. boolean 값. 페이지를 넘기는 것이 아니라 파일을 다운받는다는 것을 명시해서 브라우저에 힌트를 제공하는 용도로 사용. - href : 링크 URL 값을 넣음. 필수처럼 사용하나 HTML5부터 생략할 수 있도록 변경됨. 생략은 가능하지만 생략 시 링크로서의 기능은 상실하게 됨. - hreflang : href language. 이동하게 될 특정한 경로의 언어를 설정. - rel : 현재 문서와 링크 URL의 관계(Link Types)를 설정. license(해당하는 페이지가 라이센스임을 의미), prev(이전 페이지), next(다음 페이지)

원문보기 내부링크
Naver Blog

[HTML] 인라인 텍스트(2) - strong, i, dfn, cite, q, u

<strong> Strong Importance의 약어. 의미의 중요성을 나타내기 위해 사용. 강조가 아닌 의미가 실제로 문맥상에서 중요하게 사용하는 부분을 나타냄. - 문맥상에서 해당 텍스트/문장이 의미적으로 중요한 부분이라는 표시. 글자가 두껍게(Bold) 표시됨. - <b>와 <strong>은 의미적으로는 다르지만 화면상에는 동일하게 표시됨. - 두 태그를 함께 사용하는 경우 CSS를 통해 두꺼운 글체를 사용하지 않는다거나 다른 색을 주는 등 사용자가 혼 용하지 않도록 작성하는 것이 필요. Inline level 요소. <i> <em>, <strong> <mark> <cite> <dfn> 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용. - <b>의 경우에도 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용(이전 글 참조). - <b>가 일반 텍스트 내에서의 구분인 것에 비해 <i>는 평범한 글자와의 구분(아이콘이나 특수기호 등)을 위해 사용. 이탤릭체(

원문보기 내부링크
Naver Blog

[HTML] 인라인 텍스트(3) - code, kbd, sup/sub, time, span, br

<code> Inline Code의 약어. 컴퓨터 코드 범위를 설정. 고정폭 글꼴 계열(Monospace, 가로 사이즈가 동일한 글꼴 계열)로 표시됨. Inline level 요소. <code> 사용 예시와 결과 화면 <kbd> Keyboard Input의 약어. 텍스트 입력 장치(키보드)를 통한 사용자의 입력을 나타내는 텍스트 범위를 설정. Inline level 요소. <kbd> 사용 예시와 결과 화면 <kbd>에 css 적용을 통한 사용 예시 <sup>, <sub> Superscripted text, Subscripted text. 위 첨자(<sup>)와 아래 첨자(<sub>)를 설정. Inline level 요소. <sup>와 <sub>의 사용 예시와 결과 화면 <time> 날짜나 시간을 나타내기 위한 목적으로 사용. 정확한 시간이 어떻게 되는지 유효한 날짜 문자로 나타내기 위함. 속성 - datetime : 유효한 날짜와 문자를 지정. Date 값.

원문보기 내부링크
Naver Blog

[HTML] 수정 관련 요소 - del, ins

<del> delete의 약어. 문장의 내용이 있고 특정한 부분이 제거되었을 경우, 실제로 제거해버린 상태로 노출시키는 것이 아니라 원래 해 당 내용이 존재했으나 현재는 제거되었다는 걸 나타내기 위해 사용. 삭제(혹은 변경)된 텍스트의 범위를 지정. 기존에 작성되어 있었으나 현재는 유효한 정보가 아닌 경우. 속성 - cite : 변경을 설명하는 리소스의 URI을 명시. 특정한 정보가 사라진 이유나 변경사항을 설명하는 정보의 주소를 입력. - datetime : 변경이 일어난 유효한 날짜, 변경사항이 실질적으로 언제 일어난 것인지를 명시. Inline level 요소. <ins> insert의 약어. 기존에는 없었지만 현재로서는 추가된 내용이라는 걸 드러내기 위해 사용. 새로 추가(혹은 변경)된 텍스트의 범위를 지정. 속성 - cite : 변경을 설명하는 리소스의 URL 명시. - datetime : 변경이 일어난 유효한 날짜 문자를 명시. Inline level

원문보기 내부링크
Naver Blog

[HTML] 멀티미디어(1) - img

<img /> 이미지를 삽입하는 데 사용. <img>의 속성 속성 내용 및 설명 값 src - source의 약어. - 필수 속성. - 이미지의 경로, URL을 명시. URL alt - alternative의 약어. - 필수 속성. - 이미지가 제대로 출력되지 못할 경우 출력될 이미지의 대체 텍스트를 지정. width - 이미지의 가로 너비를 지정. height - 이미지의 세로 너비를 지정. srcset - 브라우저에 제시할 이미지 URL과 원본 크기의 목록을 정의. w, x sizes - 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의. <img>의 크기 - <img>의 사이즈를 지정할 때 width든 height든 하나만 입력하면 이미지의 비율을 그대로 유지한 채 줄일 수 있음. - 이미지의 크기를 조절하는 용도로 사용하는 경우에는 가로/세로 중 한 쪽의 사이즈만 입력하는 것을 권장. - 이미지의 크기 조절은 CSS를 이용해 제어하는 것도 가능함. 반응

원문보기 내부링크
Naver Blog

[HTML] 멀티미디어(2) - audio, video, figure, figcaption

<audio> 소리 콘텐츠(MP3) 삽입. 속성 - autoplay : 페이지에 접근해서 오디오가 준비되면(사이트 진입 시) 바로 오디오 콘텐츠 재생. boolean 값. autoplay 속성 지정 시 preload는 무시됨. - controls : 제어 메뉴를 표시. 재생, 소리 음량 조절, 정지 버튼 등 제어하는 메뉴. boolean 값. - loop : 재생이 끝나면 다시 처음부터 재생 반복. boolean 값. - preload : 페이지가 로드될 때 파일을 로드할지 지정(힌트 제공). 기본값은 metadata. none: 로드하지 않음. 플레이되면 오디오 파일 로드. metadata: 메타데이터만 로드. 기본적인 정보만 가지고 있겠다는 것. auto: 전체 파일을 미리 로드. - src : Contents URL 명시 - muted : 음소거 여부 설정. boolean 값. <video> 동영상 콘텐츠(MP4)를 삽입. 속성 - autoplay : 페이지에 접근해

원문보기 내부링크
Naver Blog

[HTML] 내장 콘텐츠 - iframe, canvas

<iframe> 다른 HTML 페이지를 현재 페이지에 삽입해 중첩된 브라우저 컨텍스트(프레임)를 표시. - 하나의 페이지에는 기본적으로 브라우저가 가지는 컨텍스트라는 개념이 있는데, 한 페이지 안에 다른 페이지를 삽입해 페이지가 중첩되기 때문에 브라우저 컨텍스트가 중첩되었다고 표현하는 것. 일반적으로 브라우저를 통해 볼 수 있는 사이트의 페이지는 하나지만, <iframe>을 통해 사이트의 페이지 안에 또 다른 사이트 페이지를 넣어 활용할 수 있다는 것. Youtube 등의 동영상 콘텐츠를 가져와 삽입 시 활용되는 경우가 많음. 속성 - name : 프레임의 이름 명시. 페이지에 여러 <iframe>이 들어가는 경우 name 속성을 고유하게 설정하는 것을 권장. - src : 포함할 문서의 URL 명시. - width : 프레임의 가로 너비. - height : 프레임의 세로 너비. - allowfullscreen : 전체 화면 모드 사용 여부. Boolean 값. - fra

원문보기 내부링크
Naver Blog

[HTML] <script>

<script> 스크립트 코드를 문서에 포함하거나 외부 스크립트 참조. - Javascript 내용을 삽입하거나 외부의 스크립트를 src 속성을 통해 가져오는 경우 사용. - cf. css를 가져올 때는 <link> 사용. 속성 async : 스크립트의 비동기적(Asynchronously) 실행 여부를 설정. boolean값. 사용 시 src 속성 필수. defer : 문서 파싱(구문 분석) 후 작동 여부 지정. boolean값. 사용 시 src 속성 필수. ※ 스크립트의 실행 시점 제어 - 자바스크립트 실행 시 HTML에 있는 내용을 자바스크립트로 찾아 실행해야 하는 경우가 있는데, 이때 자바스크립트의 코드가 언제 동작하느냐에 따라 HTML의 내용을 제대로 실행할 수도, 그렇지 않을 수도 있음. 실행될 Javascript 코드. HTML과 결과 화면 - 위 실행 화면에서의 에러는 자바스크립트 코드상에서 'my-name'이라는 id를 찾아야 하는데 자바스크립트가 이를 찾지 못했

원문보기 내부링크
Naver Blog

[HTML] 표(1) - table, tr, th, td

<table>, <tr>, <th>, <td> 표의 기본 뼈대를 잡는 데 사용되는 태그. 데이터 표(<table>)의 행(줄 / <tr>)과 열(칸, 셀(Cell) / <th>, <td>)을 생성. (Table Row: tr, Table Header: th, Table Data: td) <table>: 표를 만들 때 사용. <tr>: 행/줄을 만듦. <th>, <td>: 열/칸을 만듦. - 일반적으로 <td>를 사용하고 제목의 역할을 담당하는 경우 <th>를 사용함. diplay 속성 - table { display: table; } / tr { display: table-row; } / th, td { display: table-cell; } - 일반적인 block 요소나 inline 요소의 방식으로는 표를 만들 수 없기 때문에 브라우저 내부에서 table이라는 display 속성을 통해 만들 수 있다고 선언되어 있는 것. - display: table;은 기본적으로 di

원문보기 내부링크
Naver Blog

[HTML] 표(2) - caption, colgroup, col, thead, tbody, tfoot

※ 이전글인 HTML 표(1)에서의 관련 태그들은 표를 만들기 위한 필수적인 태그에 해당한다. - https://developing-move.tistory.com/50?category=884479 이 글에서는 표를 보조하는 역할로 활용되는 태그들을 소개하려 한다. <caption> 표의 제목을 설정. <table></table> 내에서 가장 먼저 작성되어야 함. 열리는 <table> 바로 다음에. <table>당 하나의 <caption>만 사용 가능. caption { display: table-caption; } <caption> 사용 예시 <colgroup>, <col /> 표의 열들을 공통적으로 정의하는 컬럼(<col>)과 그 집합(<colgroup>, 여러 열 포함). Column Group, Column의 약어. 속성 - span: 연속되는 열 수를 지정. 숫자 값을 입력하며 기본값은 1. colgroup { display: table-column-grou

원문보기 내부링크
Naver Blog

[HTML] 양식(1) - form

<form> 웹 서버에 정보를 제출하기 위한 양식의 범위를 정의. 네이버 로그인 페이지 - 아이디와 비밀번호를 입력 및 로그인 상태를 유지할 것인지 여부를 체크하고 모든 입력이 끝났다는 의사 표시로 로그인 버튼을 클릭해 해당 정보를 브라우저에 전달함. - 화면에는 여러 양식이 존재하는데 <form>은 이러한 입력 양식들을 wrapping함(입력 양식의 범위를 지정). - 이후 양식의 정보를 특정 페이지나 주소로 전송하는 데 사용됨. <form>은 다른 <form>을 자식 요소로 포함할 수 없음. 속성 - action : 전송한 정보를 처리할 웹페이지의 URL을 명시. <form>은 사용자에게 정보를 입력 받고 그것을 다시 웹 서버로 제출함. 해당 정보가 제출될 페이지가 action의 URL. - autocomplete : 사용자가 이전에 입력했던 값으로 자동 완성 기능을 사용할 것인지 여부 지정. on/off 값 사용. 기본값은 on. - method : 서버로 전송할 HTTP

원문보기 내부링크
Naver Blog

[HTML] 양식(2) - input

<input /> 사용자에게 입력 받을 데이터의 양식. 속성 autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지의 여부를 설정. - on, off 값 지정. 기본값: on. - cf. <form>에서 autocomplete 속성 설정 시 범위 내의 모든 데이터 양식에 설정되는 데 비해 <input>의 경우 해당 요소 하나에 대해서만 설정됨. autofocus: 페이지가 load될 때 특정한 양식 부분에 자동으로 포커스 처리 여부 설정. - boolean값. - focus는 한 곳만 가능하기 때문에 문서 내 고유해야 함. checked: 양식이 선택되었음을 표시. - boolean값. - type 속성의 값이 radio, checkbox일 경우만 해당. readonly: 수정 불가한 읽기 전용 설정. - boolean값. - 포커스는 되지만 아무런 키도 입력되지 않음. disabled: 양식을 비활성화. boolean값. - disabled 속성

원문보기 내부링크
Naver Blog

[HTML] 양식(3) - label

<label> 라벨 가능 요소(labelable)의 제목(Caption)을 지정. 라벨 가능 요소: <button>, <input>, <progress>, <select>, <textarea> for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함. - for 속성: 참조할 라벨 가능 요소의 id 속성 값. <label> 사용 예시 - 라벨 가능 요소를 참조하거나 포함하는 경우 체크박스가 아닌 텍스트만 클릭해도 체크박스에 체크가 됨. label { display: inline; } <label> 사용 예시 - label이 <input type="search">를 포함하는 경우. - 이때 검색이라는 텍스트만 클릭해도 입력창에 focus가 잡힘.

원문보기 내부링크
Naver Blog

[HTML] 양식(4) - button

<button> 선택 가능한 버튼을 지정. 버튼은 <input type="button">을 이용해서도 대체 가능하지만 조금 더 직관적으로 <button>을 사용해 조금 더 특화된 버튼을 만듦. <input type="button>"을 이용한 버튼과 동일한 기능을 함. <button> 사용 예시 속성 autofocus: 페이지가 로드될 때 자동으로 포커스. - boolean값. - 문서 내 고유해야 함. disabled: 버튼을 비활성화 처리. - boolean값. form: <form>의 id 속성 값. - 해당 <form>의 후손이 아닐 경우만 해당. name: <form>의 데이터와 함께 전송되는 버튼의 이름. type: 버튼의 타입을 지정. - button(일반 버튼), reset(초기화), submit(서버로의 제출). button { display: inline-block; } 버튼은 사용자에게 클릭을 유도함. - 일반 버튼은 기능을 포함하지 않기 때문에 거의

원문보기 내부링크
Naver Blog

[HTML] 양식(5) - textarea

<textarea> 여러 줄의 일반 텍스트 양식을 작성할 때 사용. 한 줄의 경우 <input> 사용을 권장. 속성 autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 설정. - on, off 값. 기본 값: on autofocus: 페이지가 로드될 때 자동으로 포커스. - boolean 값. - 문서 내에서 고유해야 함. disabled: 양식을 비활성화. - boolean 값. form: <form>의 id 속성 값 - 해당 <form>의 후손이 아닐 경우만 해당. - <form>의 범위 밖에서 특수하게 작동해야 하는 경우 <form> 외부에 위치한 채 연결해서 사용 가능하도록. - <form>이 submit될 때 연결이 되어 있다면 이에 연결된 <textarea>에 입력된 정보 또한 함께 제출됨. maxlength: 입력 가능한 최대 문자 수. - 숫자 값. 기본값은 무한. name: 양식의 이름. placeholder: 사용자가

원문보기 내부링크
Naver Blog

[HTML] 양식(6) - fieldset, legend

<fieldset>, <legend> 같은 목적의 양식을 그룹화(<fieldset>)하여 제목(<legend>)을 지정. - 그룹화는 <fieldset>, 제목은 <legend>를 통해 지정. fieldset, legend { display: block; } <fieldset>, <legend> 사용 예시 - <fieldset>은 같은 목적의 양식을 그룹화함. 속성 disabled: 그룹 내 모든 양식 요소를 비활성화. - boolean 값. form: 그룹이 속할 하나 이상의 <form>의 id 속성 값. - <form> 외부에서 연결해 사용 가능. - <form>의 범위 밖에서 특수하게 작동해야 하는 경우 <form> 외부에 위치한 채 연결해서 사용 가능하도록. name: 그룹의 이름.

원문보기 내부링크
Naver Blog

[HTML] 양식(7) - select, datalist, optgroup, option

<select>, <datalist>, <optgroup>, <option> 옵션(<option>, <optgroup>)의 선택 메뉴(<select>)나 자동완성(<datalist>)을 제공. - <option>: 사용자에게 선택할 수 있는 옵션 제공. - <optgroup>: 제공된 옵션을 그룹화. - <select>: 제공된 옵션은 셀렉트를 통해 사용자가 선택. - <datalist>: 자동완성 기능으로써 제공. select { display: inline-block; } datalist { display: none; } optgroup, option { display: block; } <select>, <opgroup>, <option> 사용 예시 <select> 옵션을 선택하는 메뉴. 속성 autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 설정. - on, off 값. 기본 값: on disabled: 선택 메뉴 자체를

원문보기 내부링크
Naver Blog

[HTML] 양식(8) - progress

<progress> 작업 완료의 진행률을 표시. - 로딩바(loading bar)와 유사. 속성 max: 작업의 총량. 완료되었을 때의 값을 의미. - 숫자 값 입력. value: 작업의 진행량. - 숫자 값 입력. - max 속성을 생략할 경우 value 속성의 값은 0~1 사이의 숫자여야 함. - value 속성에 대한 값은 Javascript를 통해 작업하는 편임. 값이 가변하기 때문. <progress> 사용 예시 <progress> 사용 예시(2) - max 속성을 생략 시 value 속성 값은 0~1 사이의 값이어야 함. <progress> 사용 예시(3)

원문보기 내부링크
Naver Blog

[HTML] 전역 속성(1) - id, class

※ 전역 속성(Global Attributes)이란? 모든 HTML 요소에서 공통적으로 사용 가능한 속성을 의미. class 요소의 별칭을 지정. 공백으로 구분하여 여러 개 부여할 수 있음. CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근. 동일한 명칭이 여러 태그에 여러 번 들어가도 상관 없음. 중복 사용 가능. id 문서에서 고유한 식별자(idenifier, ID)를 정의. CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근. 고유한 이름을 짓는 것과 유사함. - id 속성 값은 HTML 문서 내에서 한 번만 사용해야 하며 여러 번 사용하는 것은 허용되지 않음. 이름을 짓는 것과 사용 측면에서 까다로울 수 있음. 따

원문보기 내부링크
Naver Blog

[HTML] 전역 속성(2) - style

style 속성 요소에 적용할 CSS를 선언. - CSS의 Inline 작성 방식에 해당. 띄어쓰기를 이용해 선택자라는 개념 없이 CSS를 적용할 수 있는 방식. style 속성 사용 예시

원문보기 내부링크
Naver Blog

[HTML] 전역 속성(3) - title

title 속성 요소의 정보(설명)를 지정. 지정된 설명/정보는 마우스 오버 시 tip으로 표시됨. title 속성 사용 예시

원문보기 내부링크
Naver Blog

[HTML] 전역 속성(4) - lang

lang 속성 language의 약어. 요소의 언어(ISO 639-1)를 지정. - ISO 639-1 코드 목록: ko.wikipedia.org/wiki/ISO_639-1_%EC%BD%94%EB%93%9C_%EB%AA%A9%EB%A1%9D 전역 속성이므로 어느 태그에서든 사용할 수는 있지만 대부분의 경우 <html>에 사용. - <html>에서만 사용 가능한 것도 아닌데 그렇게 하는 이유는 일반적으로 사용되는 사이트들은 설정되는 언어가 하나기 때문. - 최상위 루트에 lang 속성을 지정해 주면 그 내부에서 일일이 지정해 줄 필요가 없기 때문에. 다른 부분에서는 되도록 반복적이게 사용하지 않는 것을 권장함. 다른 언어가 나온다면 해당 언어가 무엇인지 브라우저에 알려 주는 것도 좋은 방법. lang 속성 사용 예시

원문보기 내부링크
Naver Blog

[HTML] 전역 속성(5) - data

data-* 사용자 정의 데이터 속성을 지정. 일반적으로 JavaScript에서 이용할 수 있는 데이터(정보)를 HTML에 저장하는 용도로 사용. - HTML에서 보관하고 있다가 자스에서 필요할 때 활용 가능. data-*에서 data- 이후 * 부분에는 원하는 명칭을 지정할 수 있음. data 속성 사용 예시

원문보기 내부링크
Naver Blog

[HTML] 전역 속성(6) - draggable, hidden

draggable 속성 요소가 Drag and Drop API를 사용 가능한지 여부를 지정. drag해서 drop할 수 있는 명령 체계를 활용할 수 있는지 없는지 설정. 작성하지 않는 경우 true/false가 아니라 기본값이 auto로 지정됨. - auto는 드래그 가능 여부를 브라우저가 판단하는 것. hidden 속성 요소를 숨김 hidden 속성 사용 예시 전송 버튼 클릭 후 결과 화면 - hidden 속성을 통해 화면상에는 <input> 입력창이 나타나지 않지만 전송 버튼 클릭 후의 결과 화면에서 URL을 보면 <input>에 지정된 값이 전송된 것을 확인할 수 있음. - hidden 속성을 통해 특정 부분을 숨길 수는 있지만 숨겨진 부분의 HTML 내용은 동작할 수 있는 부분임.

원문보기 내부링크
Naver Blog

[HTML] 전역 속성(7) - tabindex

tabindex 속성 Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 숫자로 지정. 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨. - 대화형 콘텐츠? 사용자와의 상호작용을 위해 특별하게 설계된 요소. ex) <input>, <img>, ... - 대화형 콘텐츠: developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories#%EB%8C%80%ED%99%94%ED%98%95_%EC%BD%98%ED%85%90%EC%B8%A0 비대화형 콘텐츠에도 tabindex="0"을 지정하면 대화형 콘텐츠와 같이 탭 순서를 사용할 수 있음. tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능. - 탭 이동을 통해 포커스가 안 되는 것으로 클릭 시 포커스 자체는 가능. tabindex="1" 이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용을 추천하지 않

원문보기 내부링크
Naver Blog

[HTML] 주석

HTML 주석 사용 예시 - 주석 처리 시 브라우저는 해당 부분의 코드를 해석하지 않으며, 따라서 화면에 출력되지 않음. - 화면에 출력되지 않는 영역을 주석 또는 메모 처리할 수 있음. - 주석 처리를 담당하는 특수기호는 HTML, CSS, JS 등에서 모두 상이하게 나타남. - 하지만 주석 처리에 대한 단축키는 거의 모든 에디터에서 동일하게 사용. - 주석 처리할 영역을 드래그한 후 Ctrl+/(Windows) 또는 Cmd+/(macOS)

원문보기 내부링크
Naver Blog

[HTML] 특수기호 - HTML Entities

HTML Entities - 화면상에 'Hello world!'라는 문구를 출력하고 싶은 상황을 가정. - 이때 Hello와 world! 사이에 띄어쓰기를 여러 개 넣고 싶다면? HTML Entities 사용 예시(1) - HTML에서 띄어쓰기는 여러 번 입력되더라도 화면상에는 한 번만 압축되어 출력됨. - 는 HTML의 특수기호로 한 번의 띄어쓰기를 의미함. - 원하는 만큼의 띄어쓰기가 들어갈 부분에 를 추가하여 처리할 수 있음. HTML Entities 사용 예시(2) - <div></div>가 하나의 제목으로 출력되기 원하는 상황을 가정. - 가장 왼쪽 이미지의 코드는 화면상에 아무것도 출력되지 않음. <div>가 있는 부분의 코드가 HTML이 읽혀지는 실질적인 <div> 코드로 작성되어 있기 때문. - 꺽쇠괄호(<, >)가 열리고 닫히는 부분을 포함시켜 화면상에 출력시키고 싶다면 HTML Entities로 새롭게 작성 가능. - 열리는 꺽쇠괄호(<)는 < - 닫히는 꺽쇠괄호

원문보기 내부링크
Naver Blog

[CSS] CSS 적용 우선순위

스타일을 적용하는 데에는 다양한 방법이 있으며 동시에 여러 가지 방법을 사용할 수도 있기 때문에 Element에 적용되는 스타일이 충돌할 수도 있다. 따라서 스타일 적용에 대한 우선순위 규칙을 알아 둘 필요가 있다. CSS 적용의 우선순위는 아래와 같다(1이 높은 우선순위, 6이 낮은 우선순위). 1. !impoartant : 속성 값 뒤에 !important를 붙인 속성 2. Inline style attribute : HTML에서 style을 직접 지정한 속성 3. ID 선택자(#id)로 지정한 속성 4. Class 선택자(.class), pseudo class(가상 클래스, ex. :first-child) 5. Tag Element : tag 이름으로 지정한 속성 6. 상속된 속성 : 부모 태그의 스타일이 자식 태그의 스타일에 상속되어 적용된 것 그리고 여기에 추가로 몇 가지 우선순위 규칙이 부여된다. 1. 원천 소스 중 사용자 스타일시트가 가장 우선한다. 작성자쪽의 스타일시트

원문보기 내부링크
Naver Blog

[CSS] 기본 문법

CSS 기본 문법 - 문법 형식 선택자{속성: 속성값; 속성: 속성값;} - 먼저, HTML의 CSS를 연결할 때 사용하는 선택자를 작성. - 중괄호를 열고 닫은 범위 내에 특정한 CSS 명령인 속성과 그 속성에 해당하는 실질적인 값을 적음. - 속성과 값은 하나의 세트. - 하지만 위의 예시와 같이 옆으로 나열하여 작성하는 방식은 코드가 많아지면 가독성이 떨어짐. - 일부 경우를 제외하고는 아래와 같이 작성. 선택자{ 속성: 속성값; 속성: 속성값; } - 선택자(Selector)의 역할 - 속성과 값을 지정할 대상을 검색. - HTML의 특정한 부분을 검색해 연결해 줌. - 속성(property)과 값(value)의 역할 - 검색된 대상에 지정될 CSS 명령. - 예를 들어 글자색을 빨간색으로 하는 경우 글자색은 속성, 빨간색은 값이 됨. - 선택자로 검색한 대상에 각 속성과 값을 삽입하여 스타일을 지정하는 것. - /* comment */ - 문서 내 수정사항이나 설명 등을

원문보기 내부링크
Naver Blog

[CSS] 선언 방식

CSS 선언 방식 1. 인라인(Inline) 방식 - HTML 요소(태그)의 style 속성에 직접 작성하는 방식. - 직접 작성하기 때문에 선택자를 작성할 필요가 없음. - 사용 예시 /* HTML */ <body> <div style="color:red; font-size: 20px; font-weight: bold;">hello</div> </body> - 반복적인 사용이 많은 경우나 유지보수 등에서 위와 같이 직접 입력하는 방식은 좋은 방법이 되지 못함. - 사용 빈도를 떠나 직접 입력하는 행위는 지양하는 것이 좋음. 2. 내장(embedded) 방식 - HTML 문서의 <style></style> 안에 작성하는 방식. - 사용 예시 /* HTML */ <head> <style> div{ color:red; font-size: 20px; font-weight: bold; } </style> </head> <body> <div>hello</div> </body> 3. 링크(l

원문보기 내부링크
Naver Blog

[CSS] 기본 선택자(Basic selectors)

※ 선택자(Selectors)? html과 css를 연결. 기본 선택자(Basic Selectors) 1. 전체 선택자(Universal Selector) - 요소 내부의 모든 요소를 선택. - 전체 선택자를 의미하는 기호는 * 전체 선택자(*) 사용 예시 - 전체를 선택하기 때문에 활용도가 떨어질 수 있음. 2. 태그 선택자(Type Selector) - 태그 이름으로 검색하는 것. - 태그 이름이 E인 요소 선택하려는 시 태그 선택자로는 E 사용. - 태그 이름을 그대로 사용. - 앞뒤로 기호가 없는 경우 태그 선택자로 해석됨. 태그 선택자 사용 예시 - 태그 선택자는 이 HTML 문서에서 사용한 모든 태그들을 전부 선택하기 때문에 활용도가 떨어질 수 있음. 3. 클래스 선택자(Class Selector) - HTML의 전역 속성 class, 즉 별칭을 통해 검색하는 것. - HTML의 class 속성 값이 e인 요소 선택 시 .e - 특정 태그 앞에 .이 있는 경우 클래스 선

원문보기 내부링크
Naver Blog

[CSS] 복합 선택자(Combinators)

복합 선택자(Combinators) 1. 일치 선택자(Basic Combinator) - 조건 E와 F를 동시에 만족하는 요소 선택 시 EF - 일치 선택자는 기본 선택자 4개 중 둘 이상을 붙여서 작성함. - 두 조건을 동시에 만족하는 요소를 찾음. 일치 선택자 사용 예시 2. 자식선택자(Child Combinator) - HTML에는 부모 요소와 자식 요소라는 개념이 있고 이들은 상대적임. - E의 자식 요소 F를 선택 시 E>F - 실질적으로는 마지막 부분에 있는 선택자만 찾는 것이고 앞 부분의 선택자는 일종의 조건에 해당함. 자식 선택자 사용 예시 - 위의 예시에서 결과적으로는 .color-red라는 요소를 찾는 것인데 그 조건이 ul 태그의 자식이어야 한다는 것. 3. 후손(하위, 자손) 선택자(Descendant Combinator) - E의 후손 요소 F를 선택 시 E F - 선택자와 선택자 사이의 띄어쓰기가 선택자의 기호로 사용된다는 점에 주의할 것. - 마지막 부분

원문보기 내부링크
Naver Blog

[CSS] 가상 클래스 선택자(Pseudo-classes Selectors)

가상 클래스 선택자(Pseudo-classes Selectors) - Pseudo는 가상, 가짜를 의미함. 가상/가짜 클래스를 제공하는 개념. - 기본 선택자에 붙여 사용. - 가상 클래스 선택자 기호는 : - 가상 요소 선택자 기호 ::와 혼동하지 않도록 주의. 1. hover - 요소 E에 마우스 포인터가 올라가 있는 동안에만 E 선택. 마우스 오버 시에만 동작함. - 사용법 E:hover - E 자리에는 기본 선택자 4가지(전체 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자) 중 하나를 사용. 2. active - 요소 E를 마우스로 클릭하고 있는 동안에만 E 선택. 클릭하고 있는 동안에만 동작. - 사용법 E:active 3. focus - E가 포커스된 동안에만 E를 선택. - 사용법 E:focus - focus는 대화형 콘텐츠에서 사용. - 대화형 콘텐츠: 사용자와의 상호작용을 위해 특별하게 설계된 요소. ex) ex) <input>, <img> 등 tabinde

원문보기 내부링크
Naver Blog

[CSS] 가상 요소 선택자(Pseudo-Elements Selectors)

가상 요소 선택자(Pseudo-Elements Selectors) - CSS를 통해 HTML에 가상 요소를 생성해서 제공. - 가상 요소 선택자의 기호는 :: 1. before - E 요소 내부의 앞에 내용, contents를 삽입. - 사용 방법 E::before - 가상 요소를 삽입하는 것. 가상 요소 선택자 ::before 사용 예시 - 가상 요소 선택자 사용 시에는 content 속성을 반드시 작성해야 함. 가상 요소 선택자 ::before 사용 예시(2) - 작성하지 않을 경우 위의 예시와 같이 아무것도 적용되지 않음. - 내용을 적지 않더라도 필수로 사용해야 함. - 별도의 내용을 적지 않을 경우 content: "";와 같이 작성. 2. after - E 요소 내부 뒤에 내용, contents를 삽입 - 사용법 E::after 가상 요소 선택자 ::after 사용 예시 ※ before/after의 경우 앞뒤에 가상의 요소를 넣는 것이므로 텍스트뿐 아니라 이미지도 넣을

원문보기 내부링크
Naver Blog

[CSS] 속성 선택자(Attribute Selectors)

속성 선택자(Attribute Selectors) - HTML의 속성은 attribute, CSS에서의 속성은 property로 구분됨. - 속성 선택자는 HTML의 속성을 선택하는 것. 1. attr - 특정한 속성 attr을 포함한 요소 선택. - 사용법: [attr] ex) [class] - HTML 요소가 해당 속성을 가지고 있는 것만으로도 그 요소를 선택할 수 있음. 속성 선택자 사용 예시 2. attr=value - 속성 attr을 포함하며, 그 속성의 값이 value인 요소 선택. - 사용법: [attr=value] 속성 선택자 사용 예시(2) - [type="password"]에서 큰 따옴표 ""는 생략할 수 있음. [type=password]와 같이 사용 가능. 3. attr^=value - 속성 attr을 포함하며, 그 속성의 값이 value로 시작하는 요소 선택. - 사용법: [attr^=value] 속성 선택자 사용 예시(3) 4. attr$=value - 속

원문보기 내부링크
Naver Blog

[CSS] 상속

상속(inheritance) - HTML, CSS에서도 조상(상위) 요소로부터 자손(하위) 요소로 CSS의 명령 또는 속성들이 상속될 수 있음. CSS 상속 예시 - 실제로 위의 예에서 .ecosystem에 해당하는 생태계 텍스트뿐만 아니라 그 하위의 동물, 식물, 호랑이 등의 요소들까지도 빨간색 텍스트로 변경됨. - 생태계(.ecosystem)에 적용된 색상이 하위 요소들에도 적용된 것. - 특정 CSS 속성들은 조상 요소에 지정하는 것만으로도 하위 요소에 영향을 미칠 수 있음. - 상속되는 속성들은 대부분 글자를 다루는 속성. ※ 상속되는 속성들(properties) - font - font-size - font-weight - font-style - line-height - font-family - color - text-align - text-indent - text-decoration - letter-spacing - opacity 등... 강제 상속 - 필요에 의해 조

원문보기 내부링크
1 2 3 4 5 6 7 8