React 프로젝트 설정하기

간단하게 React 프로젝트를 설정해 보겠습니다. 1. Node 설치하기 먼저 컴퓨터에 Node.js가 설치되어 있어야 합니다. 아래 사이트에서 설치할 수 있습니다. https://nodejs.org/en/ 2. 터미널 열기 터미널을 열고 본인이 React 프로젝트를 설정하고 싶은 폴더로 이동합니다. 3. React 설정하기 터미널 창에 아래와 같이 입력합니다. npx create-react-app hello-react hello-react는 프로젝트 이름이며, hello-react 폴더가 생기며 자동으로 react 설치됩니다. 짜잔 설치 완료되었습니다. 이제 아래와 같이 입력하여서 react 프로젝트를 실행해보겠습니다. cd hello-react npm start 자동으로 localhost:3000이 ..

• format_list_bulleted Develop/React
• · 2023. 1. 9.
• textsms

강남 쌀국수 맛집 미분당

안녕하세요 신논현역 인근에 있는 강남 쌀국숫집을 소개해드리려고 합니다. 신논현역 6번 출구 5분 정도거리에 미분당 쌀국숫집이 있습니다. 가게가 있고, 앞에 메뉴판과 키오스크가 있습니다. 키오스크에서 주문을 하고 안으로 입장하라고 안내를 받아 주문 후 입장 하였습니다. 쌀국수 메뉴판입니다. 기타 사이드 메뉴판입니다. 가게는 바(bar) 형태로 되어있고, 조용하게 식사를 할 수 있는 분위기입니다. 짜잔, 쌀국수가 나왔습니다. 고기와 면 양이 넉넉해서 한 끼 식사로 충분합니다. 미분당 음식점에서는 세 가지 소스가 준비되어 있는데요. 핫 소스, 칠리소스, 해선장 소스 세 가지가 있습니다. 이 소스와 함께 드시면 세 가지 요리를 먹는 듯한 다양한 맛을 느끼실 수 있습니다. 지금까지 신논현역 인근 미분당 강남점 소..

• format_list_bulleted 일상/맛집
• · 2023. 1. 6.
• textsms

자바스크립트 try..catch를 사용하는 이유

try…catch를 사용하는 이유 자바스크립트는 에러가 발생하면, 스크립트가 종료된다. try..catch문을 에러가 발생할 것 같은 곳에서사용하면 스크립트 종료 없이 아래와 같이 동작하게 된다. 동작 순서 error 발생 try문 중단 catch 동작 이후 스크립트 실행 아후스크립트가 종료하지 않고 계속 진행한다. try { wakeup(); // ReferenceError: wakeup is not defined } catch(e) { console.log(e); } throw throw 고의로 오류를 발생시킨다. 스크립트 오류는 아니지만, throw 문을 사용하게 되면 오류를 발생 시킬 수 있다. try { // do Something; throw '에러 발생'; } catch(e) { consol..

• format_list_bulleted Develop/JavaScript
• · 2022. 9. 27.
• textsms

jQuery merge - 배열 합치기

$.merge(first, second) 첫번째 배열에 두번째 배열을 추가하여 합치게 된다. 배열을 보존하면서 합치고 싶을때는? merge 하기 전에 함수를 만들어 준다. var newArray = $.merge([], array); Sample var hero = ['superman', 'batman', 'pororo']; var person = ['짱구', '짱아', '신형만']; var array = $.merge($.merge([], hero), person)); console.log(array); console.log(hero); 결과 ["superman","batman","pororo","짱구","짱아","신형만"] ["superman","batman","pororo"] jQuery.merge..

• format_list_bulleted Develop/JavaScript
• · 2022. 9. 22.
• textsms

자바스크립트 실행과 페이지 렌더링은 별개다

sample document.body.innerHTML = 'Hello'; var time = 3000; var date = new Date().getTime() + time; var curDate = new Date().getTime(); while(curDate < date) { curDate = new Date().getTime(); } 위 코드 실행 시 반복문에 다 돌고 난 뒤 페이지에 Hello가 찍히게된다. innerHTML은 동기코드인데 왜 반복문이 다 돌고나서 찍히게 될까? 자바스크립트 실행과 페이지 렌더링을 별개이다. 자바스크립트 실행 이후 페이지 렌더링을 실행하게 된다. 단, 디버깅으로 보게되면 먼저 'Hello'가 렌더링이 된다.

• format_list_bulleted Develop/JavaScript
• · 2022. 9. 21.
• textsms

자바스크립트 jQuery Deferred() 비동기처리 하기

비동기를 사용하는 이유 자바스크립트는 싱글 스레드 언어이다. 한번에 한가지일을 순차적으로 처리한다. 그러나, 웹은 방대한 자료를 가져오고, 효율적으로 사용하기 위해서 비동기적 프로그래밍이 필요하다 jQuery Deferred를 이용하여 비동기 함수 만드는 방법 Deferred() 비동기 함수로 만드려면 3가지 정도 과정이 필요하다. 1. Deferred() 객체 생성 var $dfd = $.Deferred(); 2. 프로미스 객체 return return $dfd.promise(); 3. 비동기 함수 실행 setTimeout(function() { console.log('async'); }, 300) 위 3가지 함수를 사용하면 아래와 같이 비동기로 사용할 수 있는 함수가 생기게 됩니다. function ..

• format_list_bulleted Develop/JavaScript
• · 2022. 9. 16.
• textsms

자바스크립트 - 익명함수를 사용하는 이유

익명함수란 ? 익명함수는 함수 리터럴 방식으로 만들어진 이름없는 함수 입니다. 함수 리터럴 방식을 알기전에 리터럴에 대하여 먼저 알아야 합니다. 리터럴 이란? 말그대로, 문자그대로 라는 뜻입니다. 우리가 데이터를 만들 때 사용하는 방식이 literal 방식입니다. var a = 10; var name = superman; 이러한 방법 들이 리터럴 방식입니다. 함수 리터럴이란? 함수를 문자그대로 변수에 담으면 함수 리터럴 방식으로 만드는 것입니다. var funcA = function(name){ alert(name + "님 환영합니다"); } 이런 식으로 변수에 데이터를 넣듯이, 변수에 함수를 담으면 함수 리터럴 방식으로 데이터를 만들었습니다. 그러면 다시, 익명함수로 돌아가보겠습니다. var funB ..

• format_list_bulleted Develop/JavaScript
• · 2019. 7. 5.
• textsms

자바스크립트 cssText() 이용하여 스타일 적용하는 방법

cssText() Element 객체의 style를 가져오거나 변경할 수 있습니다. 1. css 스타일 적용하는 방법 abc document.querySelector('.abc').style.cssText = 'background-color:red; width:300px; height:300px;'; 결과 2. css 스타일 가져오기 abc console.log(document.querySelector('.abc').style.cssText); // "background-color: blue;"

• format_list_bulleted Develop/JavaScript
• · 2019. 4. 19.
• textsms

자바스크립트 - 배열 값을 변경/삭제 하기 delete splice()

배열 값 변경 1. 인덱스를 이용 var hero = ['superman', 'batman', 'pororo']; hero[0] = 'ionman'; console.log(hero); //["ionman", "batman", "pororo"] 배열 값 삭제 1. delete를 사용 delete를 사용하면 빈자리에는 undefiend가 들어가게 됩니다. var hero = ['superman', 'batman', 'pororo']; delete hero[0]; console.log(hero); //[undefined, "batman", "pororo"] 2. splice() 메서드 이용 splice(변경값이 들어갈 위치, 그 위치에서 배열에서 지울 개수, 값, 값,,,,) 변경 값이 들어갈 위치 : 배열에..

• format_list_bulleted Develop/JavaScript
• · 2019. 4. 18.
• textsms

자바스크립트 - 배열 관련 함수 정리 toString, join, pop, push, shift, unshift

자바스크립트에서는 배열 객체에 사용할 수 있는 다양한 메서드들이 있습니다. 배열 메서드들을 이용하면 많은 기능을 쉽게 구현할 수 있습니다. 1.toString() 배열 안의 값을 콤마를 찍어가며 모두 문자열로 출력합니다. var hero = ['superman', 'batman', 'pororo']; console.log(name.toString()); // "superman,batman,pororo" 2. join() toString() 메서드와 같이 배열안의 값을 문자열로 출력하지만, 특정 구분자를 사이에 넣어줍니다. var hero = ['superman', 'batman', 'pororo']; console.log(hero.join('>')); //"superman>batman>pororo" 3...

• format_list_bulleted Develop/JavaScript
• · 2019. 4. 17.
• textsms