Typescript 란? Typescript는 Javascript의 상위 집합(SuperSet)인 오픈소스 프로그래밍 언어이다. Microsoft에 개발 및 유지 보수를 하고 있으며, 엄격한 문법을 지원하여, 대규모 애플리케이션을 개발하기에 용이하다. 기존 javascript의 문제 Javascript에서 변수는 타입을 지정하지 않고, 하나의 변수에 여러 타입의 값을 할당할 수 있어서 오류가 발생하기 쉽다. 예를들어, let greet = 'hello world'; greet = 50; // ...중략... console.log(greet.split(' ')); // ERR 문자열 값을 기대했지만, 중간에 number 값이 할당되어 오류 발생 코드가 길어지고 여러 개발자가 같이 개발을 하다보면, 변수에 ..
기존 React App에 Typescript 적용하기 Typescript 의존성 추가 타입 스크립트를 적용하기 위해 필요한 라이브러리들을 package.json에 의존성을 추가한다. (아래 명령어 참고) $ yarn add typescript @types/node @types/react @types/react-dom @types/jest --dev 위 명령어를 수행하면 아래와 같이 package.json > devDependencies 에 의존성 라이브러리들이 추가된다. { ... "devDependencies": { "@types/jest": "^27.4.1", "@types/node": "^17.0.21", "@types/react": "^17.0.39", "@types/react-dom": "^17..
Flutter 버전 오류 오랜만에 flutter 프로젝트를 해보려고 하는데, flutter pub get 명령어를 수행했을때, 아래와 같은 오류가 발생했다. The current Dart SDK version is 2.14.3. Because test_app requires SDK version >=2.16.0-134.0.dev =2.16.0-134.0.dev
배포할 프로젝트 생성 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을 이용하여 컴파일 및 번들링을 한다 컴파일 및 번들링이 완료된 컴포넌트를 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 문서에 js 추가시 주의할 점 브라우저는 html 문서를 위에서부터 아래로 한줄 씩 읽어 내려간다. 브라우저에서 아직 읽지 않은 요소를 js에서 참조하려고 하면, 해당 요소를 찾지 못하게 된다. 예를들어, 아래 코드를 보면 initial value 만약, head 태그 내부와 같이 상단에 javascript를 추가 하게되면, 그 아래에 위치한 요소들은 (js를 읽는 시점에) 아직 브라우저에서 읽지 못했기 때문에 js 파일에서 특정 요소를 참조할 수 없다. 그래서 '개발자 도구'를 열어서 확인해보면 아래와 같이 참조할 수 없다는 오류를 확인할 수 있다. Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') 이 문제를 해결하..
블록 요소 (Block Element) 사용 가능한 최대 너비를 가진다. 높이는 내부 컨텐츠 크기 만큼 설정됨 {width: 100%; height: auto;} 와 같은 css 속성을 default로 가진다고 생각하면 됨 width, height로 크기를 지정할 수 있음 padding, margin으로 상하좌우 여백을 지정할 수 있음 여러개의 블록 요소들이 있을때, 수직으로 쌓임 (한 줄에 하나의 블록 요소만 위치할 수 있음) 위와 같은 특징으로 블록요소는 보통 레이아웃을 잡을때 자주 사용한다 블록 요소의 종류: div, h1, p 예시 1. div 태그 width 값을 따로 설정하지 않아도, 블록요소는 기본적으로 최대 너비로 설정된다. 이것은 블록 요소입니다 예시 2. 블록 요소에 크기 지정 블록 요..
본 글에서는 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의 기본 문법 HTML은 꺽새괄호와 태그명, 속성/값을 이용하여 표현한다. 과일 사과 오렌지 바나나 속성과 값 HTML은 속성(Attributes)과 값(Value)을 가질 수 있다. ... 클릭하면 네이버로 새탭으로 열어서 이동하는 태그를 예를들면 NAVER로 이동 href와 target은 속성(attributes)이고, https://www.naver.com과 _blank는 값(value)이 된다. 부모/자식 요소 태그(Tag)와 요소(element)는 엄밀히 따지만 조금 다른 의미를 가지지만, 비슷한 의미로 생각하면 된다. 아래와 같이 하나의 태그 안에 여러개의 태그가 존재할때, 제목 내용1 내용2 밖을 감싸고 있는 div 태그를 부모 요소(parent element)라고 하고, 내부에 있는..
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, 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 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"..
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..
모듈을 사용하는 이유? 모듈은 쉽게 말하면 '부품'이라고 생각하면 됩니다. 부품처럼 각 기능별로 모듈화하여 파일을 만들고, 필요한 파일만 불러와서 프로그램을 만들 수 있습니다. 한 파일로 작성된 코드는 보기에도 복잡하고 유지 보수를 하기도 어려운 단점이 있습니다. 하나의 파일을 기능별로 나눠, 여러 파일로 관리를 하게되면 유지보수하기에 편리하고 복잡성이 낮아집니다. 얻을 수 있는 효과? 자주 사용되는 코드를 별도 파일로 모듈화하여, 재활용성을 높일 수 있음 모듈로 나눠서 관리하게되면, 관련된 파일만 수정하면 됨 필요한 로직만 로드하기 때문에 메모리 낭비를 줄일 수 있음 모듈 표준 모듈 표준에는 여러가지가 있지만, 본 글에서는 아래 2가지를 소개합니다. CommonJs: Node.js에서 채택한 modul..
웹 개발을 위한 기초 언어 3가지 웹개발에서 사용하는 언어는 대표적으로 HTML, CSS, Javascript 3개가 있습니다. 프론트엔드(Front-end) 개발자라면 반드시 알아야 하는 언어중 하나입니다. 다른 프로그래밍 언어에 비해 쉽다고 생각할 수도 있지만, 또 그렇게 쉽지도 않아서 우습게봐선 안됩니다. 항상 기초가 튼튼해야한다는 것을 기억해야합니다. HTML 웹의 구조를 담당하는 HTML은 Hyper Text Markup Language의 약자입니다. 단순히 웹 페이지의 구조(뼈대)를 만들기 위해 사용하기 때문에 HTML만으로는 디자인적으로 예쁘게(?) 만들 수 없습니다. 애초에 용도가 꾸미기 위한 용도가 아니기 때문입니다. HTML과 HTML 태그에 대한 상세정보는 아래 링크 참고 2021.1..
오류 확인 제대로 설치가 되었는지 flutter doctor 명령어로 확인하는 도중 아래와 같이 Android 쪽에 환경 설정이 덜 된것을 확인했다. 오류 조치 우선 Android Studio를 실행한다. Preferences > Apperanance & Behavior > System Settings > Android SDK 로 들어간다. 탭에 SDK Tools 를 클릭하고 Android SDK Command-line Tools (latest) 를 체크하여 apply를 누르고 설치한다. 설치가 끝났다면 아래 명령어로 다시 확인해보자 flutter doctor Reference https://stackoverflow.com/questions/68236007/i-am-getting-this-errors-c..
Go Installer 다운로드 아래 링크를 통해 Go를 설치한다. https://golang.org/ The Go Programming Language Download Go Binary distributions available for Linux, macOS, Windows, and more. // You can edit this code! // Click here and start typing. package main import "fmt" func main() { fmt.Println("Hello, 世界") } Hello, World! Conway's Game of Life Fibonacci golang.org 자신의 운영체제에 맞게 설치한다. Go Installer 실행 msi 형태로 제공해주기 ..
스킨 다운로드 아래 사이트에서 skin.zip을 다운로드 받아주세요. https://github.com/bluemiv/tistory_berry_skin/releases Releases · bluemiv/tistory_berry_skin TISTORY 블로그 스킨 - Berry. Contribute to bluemiv/tistory_berry_skin development by creating an account on GitHub. github.com 다운로드 받은 zip 파일을 압축해제해주세요. 압축 해제를 하면 아래와 같은 파일이 있습니다. 스킨 등록 스킨등록을 위해 자신의 블로그 관리 페이지로 이동합니다. 꾸미기 > 스킨 변경 > 스킨 등록 클릭해주세요 우측 상단에 '추가' 버튼을 눌러주세요. 그리고..
Gatsby 란? Gatsby는 정적 웹 사이트 생성기라고 생각하면 된다. 본 글에서는 getsby를 통해 생성된 정적 웹 파일을 github pages에 호스팅하는 방법을 소개한다. gatsby-cli 설치 아래 npm 명령어를 사용하여 gatsby-cli를 전역(global)으로 설치한다. npm i -g gatsby-cli 설치가 끝났다면 버전을 확인해보자 gatsby --version Gatsby CLI version: 3.10.0 참고. yarn으로는 안되는건가.. yarn으로 설치해서 해보니 나중에 gatsby-cli 명령어를 수행했을때, 아래와 같은 메세지와 함께 실행이 안된다. 'gatsby'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 현재로서는 ..
Berry Skin v2를 배포했습니다. 아래 글 참고해주세요. https://memostack.tistory.com/284?category=877437 Berry Skin 간단 소개 티스토리 두번째 스킨, Berry 스킨입니다. 현재 이 블로그에 적용되어 있는 스킨이며, 아직 0.X.X 버전이라 계속 개발 진행중입니다. 그래도 사용하는데 불편함은 없을거라고 생각하여, 스킨 배포합니다. 예쁘게 사용해주세요. 기능에 대한 자세한 내용은 글 아래에 '기능 소개' 확인해주세요. 스킨 적용 방법 적용 방법은 아래 글 참고해주세요. https://memostack.tistory.com/264 Berry Skin 적용 방법 스킨 다운로드 아래 사이트에서 skin.zip을 다운로드 받아주세요. https://gith..