웹프론트엔드

[Javascript] 템플릿 리터럴 | Template literals

템플릿 리터럴이란? 내장된 표현식을 허용하는 문자열 리터럴이다. 백틱을을 이용하여 여러 조각으로 이루어진 문자열과 변수, 상수 등의 조합을 훨씬 읽기 편하게 입력할 수 있다. 문법 예시 const apple = 3 const banana = 10 console.log("철수는 사과를 " + apple + "개 가지고 있고, 바나나를 " + banana"개 가지고 있어요!") 이런 식으로 라인에 여러가지 요소가 들어가면 코드가 번잡해진다. 그럴 때 템플릿 리터럴을 사용하여 코드를 간결하게 만들 수 있다. console.log(`철수는 사과를 ${apple}개 가지고 있고, 바나나를 ${banana}개 가지고 있어요.`) 백틱(` `)안에 문자열을 넣고 스페이스 홀더( ${expression} ) 안에 표현..

[Javascript] 객체의 Key와 Value가 동일한 경우 | Shorthand Property

Javascript 객체에서 key와 value 값이 동일할 경우 생략이 가능하다. 이러한 것을 Shorthand property라고 부른다. ▶ Code1 createBoardInput: { writer:writer, password: password, title: title, contents: contents } ▶ Code 2 createBoardInput: { writer, password, title, contents } Code 1을 Code 2번 처럼 쓸 수 있다는 이야기. 잘 익히면 코드가 훨씬 간결해질 것이다.

[JavaScript] import 와 export

React 등 현대의 Javascript 기반 프로젝트 파일을 열어보면 import와 export가 무수히 많다. import와 export는 무엇일까? 사전적 정의 import : 수입, 가져오다. 1. to buy or bring in products from another country 2. to introduce new goods, customs, or ideas to one country from another export : 수출, 내보내다. 1. to send goods to another country for sale 2. to put something from one country into use in other countries 사전적 정의를 보아 짐작할 수 있듯, 소스코드를 각각 내보..

[React] JSX란?

JSX란? React에서 사용하는 React 전용 문법. JSX : JavaScript XML JSX는 JavaScript에 XML을 추가한 확장 문법으로, 공식적인 자바스크립트 문법은 아니다. 웹브라우저에서 읽어올 수 없는 형태이기 때문에, 브라우저에서 실행하기 전 일반 html 코드로 변환되어 출력된다. 기타 상세한 사항은 React 공식 문서를 참고하면 좋다. https://ko.reactjs.org/docs/introducing-jsx.html JSX 문법 예시 ▽ 기존 HTML 방식 제목 버튼 ▽ JSX 방식 제목 버튼 속성값이나 대소문자 정도 차이 등을 제외하고는 거의 비슷하다. [ 주의점 ] JSX는 본질적으로 HTML보다는 Javascript에 가깝기 때문에 html 속성명 대신 camel..

[React] Emotion으로 Reset.css 설정하기 / 글로벌 스타일 설정하기

본 포스팅은 링크한 블로그의 내용을 기반으로 실제 프로젝트에 적용한 내용을 서술한 글이다. https://egg-programmer.tistory.com/226 css를 사용하지 않고 순수 Emotion으로 React에 글로벌 스타일 적용시키는 방법. 나의 경우, 웹폰트와 box-sizing 등의 reset css 적용을 위해 사용하였다. index.js 1. @emotion/react에서 Global을 import 한다. import {Global} from '@emotion/react' 2. 문서 내에 Global style이 들어갈 위치를 지정해준다. reset.js 1. index의 reset 과 연결한 뒤 필요한 css 값을 입력한다. 그렇게 한 뒤 서버를 실행하면 로 지정한 위치에 태그가 삽입..

[Javascript] 자주 이용하는 내장 함수들

setTimeout(기능, 초) : 시간 지연 함수 setInterval(기능, 초) : 시간 반복 함수

[Javascript] 함수 작성 방법 세가지 | 선언식, 표현식, 화살표 함수

1. 함수 선언식 function hello() { alert('안녕하세요') } - 초기부터 있었던 함수 작성 방법 2. 함수 표현식 const hello = function() { alert("안녕하세요") } - 익명 함수를 만들어서 변수나 상수에 할당해주는 방식 - 호이스팅을 막기 위해 생긴 방법 3. 화살표 함수 const hello = () => { alert('안녕하세요') } - 함수 표현식의 변형 방법 - 실무에서 가장 많이 사용됨 * 작성 방법은 달라도, 실행 방법은 동일하다. hello()

[Javascript] 수학 객체 / 내장 함수

많이 사용되는 수학 객체 모음 Math.max(2,1,6) : 최대값 구하기 Math.min(2,1,6) : 최소값 구하기 Math.random() : 0~1 랜덤 수 만들기 Math.round(2.12) : 반올림하기 Math.ceil(2.12) : 올림하기 Math.floor(2.12) : 버림하기 Javascript 자주 사용하는 내장 함수 모음 String(a) : a를 문자열(String)으로 변환한다. Number('1') : 1를 숫자(Number)로 변환한다. padStart(6, '0') : 추후,, 확인 후 기입 setTimeout(기능, 초) : 시간 지연 함수 setInterval(기능, 초) : 시간 반복 함수 관련 참고 페이지 MDN Web Docs : https://develo..

[Javascript] 반복문

for (초기식; 조건식; 증감문;){ 반복해서 실행할 내용 } for (let i = 0; i

[Javascript] Google JavaScript Style Guide

https://google.github.io/styleguide/jsguide.html