Java와 Javascript의 차이점
자바? 자바스크립트? 이름만 들으면 두 개발 언어가 어느 정도 관계가 있을 거라 생각되는데요. 하지만 이 두 언어의 차이점을 잘 아는 사람들은 햄과 햄버거 그리고 카(Car)와 카펫(Carpet)의 관계라고 농담 섞어 말합니다. 과연 그 이유는 무엇일까요? 결론적으로 말하자면 두 언어는 완전히 다른 언어로, 이름이 비슷하기 때문에 서로 연관 있을...
고양이발
node로 .ts 파일 실행시키기
node로 .ts 파일을 실행시키면 “syntaxerror: unexpected identifier” 가 발생하였다. babel-node도 설치해보고 tsconfig도 수정해봤지만 소용x ts 파일을 node로 실행하려면 ts-node 모듈을 설치해야 한다. ts-node는 메모리 상에서 티입스크립트를 transpile 하여 바로 실행할 수 있게...
스타일 컴포넌트 GlobalStyle 사용하기
리액트 GlobalStyle 사용하기 GlobalStyle 사용하는 이유 : style component로 컴포넌트들을 스타일링 할 때, html, body, #root 등의 엘리먼트를 스타일링 하기 위해서 Styled Components 설치 npm install --save styled-components createGloba...
async와 defer 의미, 실행 순서, 공통점, 차이점
script 기본적으로 웹 브라우저가 외부 자바스크립트를 불러오는 일반 script 태그를 만나게 되면, 우선 해당 스크립트를 내려받아 해석하고 실행(execute)할 때까지 웹 문서의 HTML 코드 parsing 작업을 잠시 뒤로 미룬다. async 혹은 defer 된 스크립트는 문서 parsing 작업의 중단 없이 동시에 내려받게 되며, 선택적...
.prettierignore 사용하기
특정 파일에 prettier를 적용하지 않기 위해 prettierignore를 사용한다. root 경로에 .prettierignore 파일을 생성한다. 제외할 파일명이나 확장자를 입력한다. *.html *.md
React에서 이미지 파일 import 하기
import { default as image } from "./image.jpg"; 위와 같이 jpg 등의 이미지 파일을 import 하면 모듈 또는 해당 형식 선언을 찾을 수 없습니다. 에러 발생. react-scripts 모듈을 인스톨해준다. yarn add react-scripts src/ 경로 (index.js 경로?)에 react...
.gitignore 파일 적용하기
.gitignore 파일 작성하고 적용하기 git rm -r --cached . git add . git commit -m "커밋메세지" git push origin {브랜치명} .gitignore 적용하기
ctx.drawImage : 비디오를 캔버스로 가져오기
비디오를 캔버스로 가져오기 const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height); ctx.drawImage 메서드를 사용하면 비디오를 이미지처럼 캔버스 위...
✅CRA 없이 리액트 환경 만들기
모듈 설치 폴더 생성 및 초기화 프로젝트 폴더를 만들고 yarn을 초기화하여 package.json 파일을 생성해준다. yarn init -y public 폴더 생성 정적 파일들을 담을 public 폴더를 생성한다. public 폴더 안에 index.html 파일을 만들고 html 코드를 넣어준다. <!DOCTYPE html>...
끝에서 n개까지의 요소에 css 적용하기
끝에서 4개까지 적용한다고 했을 때 <style> li { list-style: none; width: 50px; height: 50px; margin: 2%; background-color: orange; float: left; } li:nth-last-child(-n + 4) { ...