프로그래밍

[영화 웹 서비스 만들기] #2 JSX & PROPS (2) (Key prop , alt, PropTypes)

본 포스팅은 리액트 JS를 다루고 있습니다. #2.3 map Recap Key prop (키 속성) 위의 에러에 따르면 list내의 child는 unique한 key prop을 가져야 한다고 말하고 있다. 즉, 모든 react element들은 유일해야하고있다. 즉, 모든 react element들은 유일해야한다. list 안에 넣으면서 유일성을 잃어버리게 되므로 배열의 각각의 item에 id를 추가하고 component에 key라는 prop을 줌으로써 해결할 수있다. 위의 예시로 설명하면 배열에 있는 정보들은 모두 Food component 함수를 통해 Food component가 되고 우리에게 보여진다. 이렇게 모두 Food component가 되어버려 유일성을 상실한다. 결국 모든 element들이..

[영화 웹 서비스 만들기] #2 JSX & PROPS ( Component, forEach(), filter(), map() )

본 포스팅은 리액트 JS를 다루고 있습니다. # 2.0 Creating your first React Component Localhost Localhost를 게속 유지하고 창을 계속 띄운 상태로 실행시키고 싶다면 npm start 를 하고 console을 종료하지 않아야 한다. x를 눌러서 숨기는 경우는 계속 작동한다. console만 종료시키지 않으면 된다. JSX (1) JS와 HTML의 조합을 JSX라고 한다. React에서 나온 거의 유일한 개념이다. 위의 는 HTML이 아니다. 아래의 return 안에 있는 내용들은 HTML이다. Component 위의 과 같은 것들을 Component라고 한다. react는 component와 함께 동작한다. component를 만들고 보기좋게 만들며 comp..

[영화 웹 서비스 만들기] #1 SET UP (React란?, React App 만드는 법)

본 포스팅은 리액트 JS를 다루고 있습니다. #1.0 Creating your first React App 파일 생성 React app을 사용하기 위해서 콘솔창을 통해 폴더를 생성한다. 위의 순서대로 입력하고 엔터를 치면 해당 이름의 폴더가 자동적으로 생성된 파일과 함께 만들어진다. 명령어 대표적인 명령어에는 start, build, test, eject가 있다. 하지만 start와 build를 중점적으로 알아두면 된다. 실행 Local은 사용하고 있는 컴퓨터에서 실행시키고 싶을 때 주소로 사용될 수 있고, On Your Network는 Wi-Fi를 사용할 때의 주소이다. 따라서 같은 Wi-Fi를 연결하고 해당URL을 통해 폰에서 테스트 해볼 수 있다. 실행이 완료되면 아래와 같은 초기 화면이 뜬다. #..

[바닐라 JS 기초] 크롬앱 클론코딩 ( 시계 구현, Local Storage, Math 모듈로 난수생성, API로 유저 위치와 날씨 받아오기 )

시계 만들기 특정요소에서 찾기 document에서 어떤 요소를 찾을 때는 document.querySelector을 사용했지만, 어떤 요소에서 찾고 싶다면 해당 element에서 element.querlySelector을 하면 된다. 00:00 const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime() { const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); const seconds = date.getSeconds(); // 아래..

[바닐라 JS 기초] 조건문 ( + ClassList, Toggle )

조건문 If-else If-else는 조건문이다. 조건에 따라 수행할 내용을 쓸 때 사용한다. 사용방법은 아래와 같다. if(condition){ // block (조건이 참일 때 수행할 내용) }else{ // block (조건이 거짓일 때 수행할 내용) } block은 JS의 expression들을 말하며 console.log, alert와 같은 코드를 말한다. 예시 if(10 > 5){ console.log("Hi"); }else{ console.log("ho"); } JS에서 '같다'와 '같지 않다' 기호 JS에서 조건문을 사용할 때 '같다'는 ===이고 '같지 않다'는 !== 이다. if('10'=== 10){ console.log("Hi"); }else{ console.log("ho"); } ..

[바닐라 JS 기초] DOM, Event

JS DOM Functions Document document도 object이다. console.log(document); 를 통해 해당 웹페이지의 html 전체를 받을 수 있다. 즉, document를 console.log 하면 문서 전체가 출력된다. DOM (Document Object Module) JS는 HTML에 있는 모든 요소를 가져올 수 있으며, 가져온 요소의 내용을 객체로 바꾼다. document , 즉, 모든 HTML은 객체가 되는 것이다. 그리고 객체는 많은 키(=이름, label....)을 가지고 있다. ex) .log, .error, .name, .handsome, .age 아래와 같은 방식으로 HTML를 JS로 가져오거나 JS를 통해 HTML요소를 쓸 수 있다. 1. JS로 HTM..

[바닐라 JS 기초] 함수

함수 어떤 것을 수행하려는 로직의 한 부분이다. 함수로 정의하고 나면 해당 로직 부분을 필요한데서 원하는 만큼 사용할 수 있게 된다. 즉, 원하는 만큼 쓸 수 있는 코드의 부분을 말한다. JS에서 함수를 만드는 방법 function sayHello(){ console.log('Hello!'); } sayHello(); //function 함수이름(argument인자){ //코드 } 주석으로 쓰여진 코드와 같은 방식으로 함수를 만들 수 있다. Argument ( or parameter ) (인자) function sayHello(name){ console.log('Hello!', name); } sayHello("grit"); 인자를 받을 수 있는 함수를 만드려면 ()안에 argument (인자)를 써줘야..

[바닐라 JS 기초] JS와 바닐라JS, 출력, 변수, 데이터타입

JS와 바닐라 JS Javascript versions ECMAScript는 Specification(설명서)의 명칭 같은 것이다. ECMAScript의 예로 ES5, ES6 등이 있다. ES5 = ECMAScript5, ES6 = ECMAScript6 위와 같이 계속 Specifiacation을 업데이트 한다. Specification Specification은 일종의 매뉴얼로 어떤 것을 적었을 때 브라우저에서 출력되는방식이나 어떤 경우에 에러가 뜨는지 등등에 대해 알려주는 안내책자 같은 것이다. Javascript에서는 ECMAScript(이그마스크립트)가 Specification이다. Javascript는 중앙집중화 되어 있어서 누군가 업데이트를 했을 때 모든 브라우저에서 작동하게 된다. 브라우저는..