본문 바로가기

전체보기136

HTML 표준 스터디(6) - 기타 body 요소는 잊지 말자 body를 생략하지 말자 Bad: ... Good: ... hgroup 요소 사용 금지 W3C 스펙에서 삭제되었음. Bad: HTML Best Practices For writing maintainable and scalable HTML documents. Good: HTML Best Practices For writing maintainable and scalable HTML documents. address 요소는 contact 정보를 제공하는 데만 사용 address 요소는 이메일 주소, 소셜 네트워크 계정, 주소, 전화번호 등 직접 연락할 수 있는 항목이다. Bad: No rights reserved. Good: Contact: Kyo Nagashima 2020. 4. 8.
HTML 표준 스터디(3) - Document Metadata 문서 작성 시 title 태그를 작성 title 요소 값은 브라우저뿐만 아니라 다양한 어플리케이션에서 사용한다. Bad: Good: base 태그 사용 금지 base 태그를 사용하여 절대 경로나 URL을 설정하는 것은 위험성을 증가 시킨다. Bad: Good: 리소스에는 MIME 타입을 명시 어플리케이션에서 리소스를 어떻게 처리하는 가에 대한 것을 명시해준다. Bad: Good: favicon.ico 링크 금지 대부분의 브라우저에서 /favicon.ico를 자동으로 비동기방식으로 가져온다. Bad: Good: Alternate Stylesheet 사용 시 title 속성 추가 사람이 읽을 수 있는 레이블은 스타일시트를 선택하는 데 도움을 줄거다. Bad: Good: URL 포함 시 meta 대신 link.. 2020. 4. 8.
HTML 표준 스터디(2) - Root Element 목차 HTML 태그의 lang 속성을 추가해라 lang 속성이 HTML 문서를 번역하는 데 도움이 된다. Bad: Good: HTML 태그의 lang 속성은 짧게 사용 한글은 ko만 사용. 국가 코드는 필요 없음. Bad: Good: data-*을 가능한 한 없애라 data 속성은 특정 브라우저에서 동작하지 않을 수 있다. Bad: chemises ... Do not wash! Good: chemises ... Do not wash! 2020. 4. 7.
HTML 표준 스터디(1) - 기본 사항 목차 DOCTYPE으로 시작하기 DOCTYPE은 표준 모드를 활성화하기 위해 필요하다. Bad: ... Good: ... 레거시 혹은 폐기된 DOCTYPE을 사용 X DOCTYPE은 더 이상 DTD가 아니다, 간단하게 아래와 같이 사용 Bad: Good: * DTD(Document Type Definition)란? XML 문서의 구조 및 해당 문서에서 용할 수 있는 적법한 요소와 속성을 정의하는 것 XML 선언 사용 X XHTML은 HTML4를 XML에 맞도록 재정의한 언어이다. 이제는 사용하지 말자... Bad: Good: 특수 문자 레퍼런스를 가능한 한 사용 X HTML을 UTF-8로 작성한다면 HTML Entitiy를 사용하지 않고 대부분의 특수 문자 및 이모티콘을 직접 쓸 수 있다. Bad: Co.. 2020. 4. 6.
Mac의 유사 알프레드(Alfred) Windows의 Wox 맥에 알프레드(Alfred)가 있다면 Windows에는 Wox가 있습니다! (http://www.wox.one/) 기능은 크게 빠른 파일, 디렉토리 및 어플리케이션 검색 빠른 웹 검색 Plugin 사용 다양한 테마 가 있습니다! 다운로드 하는데 Python3 버전과 Everything을 사전에 설치해야합니다. (https://github.com/Wox-launcher/Wox/releases) (아래 순서로 설치 하면 됩니다.) 설치 완료 되면 Alt + Space가 단축키 입니다 2020. 4. 6.
호스팅(hosting)이란? 호스팅이란? 서버의 전체 혹은 일부를 이용할 수 있도록 임대해 주는 서비스 호스팅의 종류 웹 호스팅 서버 호스팅 클라우드 서버 형태 (서버 : 고객) 1 : N 하나의 서버를 여러고객이 사용 1 : 1 하나의 서버를 고객이 단톡으로 사용 1: 1 가상화된 서버를 단독으로 사용 장점 저렴하다 업체에서 통합관리를 받을 수 있음 넓은 하드웨어 공간 서버를 직접 운영/관리 가능 빠를 데이터 전송 속도 필요에 따라 서버 자원이 유동적 단점 서버 운영 관리에 제한이 있음 하드웨어 사용에 제한이 있음 비용이 높음 클라우드 서버 이슈에 종속적 2020. 4. 4.
Domain Name과 DNS이란? 알고 있는 내용이지만 최근 FE 로드맵 따라서 정리를 하는 중 내용을 남기고 있다. Domain Name 의 발생 배경 인터넷 상에서 다른 단말에 접근하기 위해서는 숫자와 구분자(.)로 이뤄진 고유의 IP를 알아야함 ex) 192.168.10.100 ▼ 특정 서버에 IP를 매칭해서 하나씩 외우는 것은 불편함을 초래함. ex) 네이버(125.209.222.142), 구글(216.58.197.206) 등 ▼ 숫자와 구분자(.)로 구성된 IP를 대신해 사용자가 기억하기 쉬운 영문, 숫자 및 구분자(.)로 이뤄진 도메인 네임(Domain Nam)이 등장 하였음. Domain Name 의 정의 넓은 의미로는 네트워크상에서 컴퓨터를 식별하는 호스트 명가리키며, 좁은 의미에서는 도메인 레지스트리에게서 등록된 이름을 .. 2020. 4. 4.
인터넷(Internet) 인터넷(Internet)의 정의 International Network의 줄임말로 TCP / IP 프로토콜을 이용하여 정보를 주고 받는 컴퓨터 네트워크 인터넷이 하는 일은 무엇 일까? How Does The Internet Work? 기본적으로 TCP / IP 프로토콜을 이용하여 네트워크 상에서 패킷을 라우팅 하는 일을 한다. 프로토콜 이란? What is Protocol? 다른 말로는 통신 규약이라고 하며 네트워크 상에서 데이터를 주고 받는 방법/약속을 정의한 것을 말함. (예를 들면 내가 부처!라고 하면 너는 핸섭!이라고 대답하기로 약속하자) 패킷 이란? What is Packet? 네트워크 통신할때 주고 받는 데이터의 형식이다. 라우팅 이란? What is Routing? 네트워크 안에서 통신할 데.. 2020. 4. 2.
[MySQL] 컬럼명이 "DESC"인 삽입 쿼리에러 다음과 같이 컬럼명이 DESC인 경우 단순하게 삽입하는 경우 에러가 발생한다. INSERT INTO EVENT_TABLE (EVENT_ID, EVENT_TIME, TITLE, DESC) VALUES (1, "2020-03-26 00:00:00", "사용자 접속", "minhoe 사용자가 로그인 시도하여 접속"); DESC가 컴럼 명인 경우는 아래와 같이 백틱(`)로 감싸줘야한다. INSERT INTO EVENT_TABLE (EVENT_ID, EVENT_TIME, TITLE, `DESC`) VALUES (1, "2020-03-26 00:00:00", "사용자 접속", "minhoe 사용자가 로그인 시도하여 접속"); 2020. 3. 27.
Bamboo 서버 업그레이드/마이그레이션 방법 1. 기존 Bamboo 서버 백업 기존 Bamboo 서버 로그인 및 Export 2. 라이선스 키 추적 및 Bamboo 서버 다운로드 다운로드 링크 (https://www.atlassian.com/software/bamboo/download) 설치할 서버의 OS에 알맞은 설치 파일 다운로드 (본 문서에서는 Linux만 다룰 예정) 3. Bamboo 서버 설치 및 인증 설치 파일 압축 해제 tar xvzf atlassian-bamboo-7.0.4.tar.gz bamboo data home 디렉토리 생성 mkdir /root/bamboo-home bamboo home 디렉토리 설정 vim {설치 파일 압축해제한 경로}/atlassian-bamboo-7.0.4/atlassian-bamboo/WEB-INF/cl.. 2020. 3. 27.
create-react-app 쓰지 않고 webpack으로 React 앱 만들기 (3) webpack config 설정하기 const path = require('path'); module.exports = { mode: 'development', // 'production' devtool: 'eval', // hidden-source-map resolve: { extensions: ['.js', '.jsx'], }, // 타겟이 되는 파일 entry: { app: './client', }, // load 할 모듈 module: { rules: [{ test: /\.jsx?/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { targets: { browsers: ['> 1% in KR', 'last 2 chrome.. 2020. 3. 10.
create-react-app 쓰지 않고 webpack으로 React 앱 만들기 (2) 기본 소스 코드 작성 (Hello React & Webpack) JS 파일을 load 할 페이지 생성 (./index.html) ./dist/app.js이 webpack의 결과물이다. 해당 파일을 load하는 소스 코드 html에 react를 랜더링하는 소스(./client.jsx) const React = require('react'); const ReactDom = require('react-dom'); const { hot } = require('react-hot-loader/root'); const HelloReact = require('./HelloReact'); const Hot = hot(HelloReact); ReactDom.render(, document.querySelector('#ro.. 2020. 3. 10.