반응형
React 프로젝트 npm에 배포하기
Front End/React 2022. 1. 6. 17:17

배포할 프로젝트 생성 create-react-app 또는 yarn init으로 리액트 프로젝트를 생성한다. (본 글에서는 생략, 아래 글 참고) 2020.06.15 - [Front End/React] - 리액트 설치 및 처음 시작하기 리액트 설치 및 처음 시작하기 NodeJS 설치 https://nodejs.org/ko/ 에서 node.js를 설치한다. 2020/06 기준 최신버전은 14.4, Stable 버전은 12.18이다. 본 글에서는 12.18버전으로 설치한다. 터미널에서 npm -version 을 입력해보자 # npm -v.. memostack.tistory.com 2022.01.06 - [Front End/React] - babel, webpack 으로 react 프로젝트 생성하기 babel,..

babel, webpack 으로 react 프로젝트 생성하기
Front End/React 2022. 1. 6. 15:29

목표 babel과 webpack을 이용하여 컴파일 및 번들링을 한다 컴파일 및 번들링이 완료된 컴포넌트를 npm에 배포한다 React 프로젝트 생성 본 글에서는 npm 대신 yarn을 이용한다 package.json 생성 yarn init 명령어를 사용하여, package.json을 생성한다. $ yarn init yarn init v1.22.17 question name (simple-component): simple-component question version (1.0.0): 0.1.0 question description: simple component for deploy test question entry point (index.js): src/index.js question repositor..

HTML 문서에 javascript 추가시 주의할 점 (브라우저 구문분석 순서)
Front End/HTML, CSS, JS 2021. 12. 28. 19:25

HTML 문서에 js 추가시 주의할 점 브라우저는 html 문서를 위에서부터 아래로 한줄 씩 읽어 내려간다. 브라우저에서 아직 읽지 않은 요소를 js에서 참조하려고 하면, 해당 요소를 찾지 못하게 된다. 예를들어, 아래 코드를 보면 initial value 만약, head 태그 내부와 같이 상단에 javascript를 추가 하게되면, 그 아래에 위치한 요소들은 (js를 읽는 시점에) 아직 브라우저에서 읽지 못했기 때문에 js 파일에서 특정 요소를 참조할 수 없다. 그래서 '개발자 도구'를 열어서 확인해보면 아래와 같이 참조할 수 없다는 오류를 확인할 수 있다. Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') 이 문제를 해결하..

HTML 블록(block) , 인라인(inline), 인라인 블록(inline-block)
Front End/HTML, CSS, JS 2021. 12. 23. 19:31

블록 요소 (Block Element) 사용 가능한 최대 너비를 가진다. 높이는 내부 컨텐츠 크기 만큼 설정됨 {width: 100%; height: auto;} 와 같은 css 속성을 default로 가진다고 생각하면 됨 width, height로 크기를 지정할 수 있음 padding, margin으로 상하좌우 여백을 지정할 수 있음 여러개의 블록 요소들이 있을때, 수직으로 쌓임 (한 줄에 하나의 블록 요소만 위치할 수 있음) 위와 같은 특징으로 블록요소는 보통 레이아웃을 잡을때 자주 사용한다 블록 요소의 종류: div, h1, p 예시 1. div 태그 width 값을 따로 설정하지 않아도, 블록요소는 기본적으로 최대 너비로 설정된다. 이것은 블록 요소입니다 예시 2. 블록 요소에 크기 지정 블록 요..

MAC OS에 node.js 설치하기 (사이트에서 설치 또는 nvm 설치)
Front End/nodejs 2021. 12. 22. 20:12

본 글에서는 node.js 를 설치하는 방법 2가지를 소개한다. 개인적으로는 "방법 1" nvm을 이용하여 node.js 를 설치하기를 권장한다. 방법1. nvm으로 node.js 설치 nvm 이란? nvm은 nodejs version manager로 시스템에 여러 개의 nodejs 를 설치하고, 사용할 버전을 쉽게 전환할 수 있도록 도와주는 shell script이다. rvm(Ruby Version Manager)와 비슷한 역할을 수행한다고 생각하면 됨 설치 전 사전 작업 사전 작업으로 brew 설치가 필요하다. 아래 사이트 참고하여 설치 진행 https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew...

HTML의 기본 문법(속성, 값, 부모/자식 요소, 빈 태그)
Front End/HTML, CSS, JS 2021. 12. 21. 19:16

HTML의 기본 문법 HTML은 꺽새괄호와 태그명, 속성/값을 이용하여 표현한다. 과일 사과 오렌지 바나나 속성과 값 HTML은 속성(Attributes)과 값(Value)을 가질 수 있다. ... 클릭하면 네이버로 새탭으로 열어서 이동하는 태그를 예를들면 NAVER로 이동 href와 target은 속성(attributes)이고, https://www.naver.com과 _blank는 값(value)이 된다. 부모/자식 요소 태그(Tag)와 요소(element)는 엄밀히 따지만 조금 다른 의미를 가지지만, 비슷한 의미로 생각하면 된다. 아래와 같이 하나의 태그 안에 여러개의 태그가 존재할때, 제목 내용1 내용2 밖을 감싸고 있는 div 태그를 부모 요소(parent element)라고 하고, 내부에 있는..

html 문법과 태그의 종류
Front End/HTML, CSS, JS 2021. 12. 16. 21:46

HTML HTML은 Hyper Text Markup Language의 약자로, HTML 문서를 구성하기 위해 사용하는 언어이다. HTML Tags (Element) HTML 태그(tag)는 HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 가장 기본이 되는 단위이다. 꺽쇠 괄호와 태그명으로 아래와 같이 표현한다. ... html의 기본 문법에 대한 설명은 아래 링크 참고 2021.12.21 - [Front End/HTML, CSS, JS] - HTML의 기본 문법(속성, 값, 부모/자식 요소, 빈 태그) HTML 태그의 종류 html의 태그는 굉장히 많은데 굳이 외울 필요는 없고 어떤 태그가 있는지 보고 사용할때 "이런 태그가 있었던거 같은데?"라고 생각하면서 찾아서 사용하면 된다. ..

이미지 포맷 종류(jpg, jpeg, png, gif, svg)
Front End 2021. 12. 16. 20:54

jpg(jpeg, Joint Photograph Experts Group) 높은 압축률을 통해 이미지의 사이즈를 줄여줌 단점으로는 압축을 통해 이미지의 품질이 낮음 24비트 컬러를 지원 .jpg, .jpeg. jpe 등의 확장자명을 사용 참고 https://ko.wikipedia.org/wiki/JPEG png(Portable Network Graphics) png는 손실없이 이미지를 압축하여 품질이 좋음 손실 없이 이미지를 압축하다 보니 다른 이미지 포맷에 비해 용량이 큰 편 8비트/24비트 컬러를 지원 W3C 권장 포맷 Alpha Channel을 지원하여 투명도 표현 할 수 있음 참고 https://namu.wiki/w/PNG gif(Graphics Interchange Format) png와 비슷하..

날짜/시간 라이브러리 moment.js 버그?
Front End/HTML, CSS, JS 2021. 12. 16. 19:40

moment.js moment.js는 날짜와 시간을 간편하게 다룰 수 있도록 도와주는 라이브러리이다. 프로젝트를 하면서 거의 필수적으로 사용하는 라이브러리 moment.js의 자세한 내용은 아래 링크 참고 https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620"..

iterm 커스텀 (터미널 커스텀하기)
OS/MacOSX 2021. 12. 10. 21:06

brew 설치 brew는 macos 패키지를 관리해주는 툴로 리눅스의 apt-get이나 yum과 같은 툴과 같다. 아래 명령어로 brew 설치를 진행한다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 참고: https://brew.sh/index_ko zshell 설치 최근 macos에는 zshell이 기본으로 적용되어 있어서 따로 설치할 필요 없지만, 오랜된 macos를 사용하는 경우 zsh를 직접 설치해야함 zshell이 없는 경우, 아래 명령어로 설치진행 brew install zsh iterm2 설치 iterm2 커스텀하기 위해 설치를 먼저 진행한다. brew update..

반응형