let's coding let's coding

이번 포스팅은 react 에 관해 포스팅 해보겠습니다. react 에서는 JSX 문법을 사용합니다 JSX 문법 Babel 사의 문법으로 XML 형태이다 외부 모듈을 이 분법을 이용해서 렌더링 컴포넌트로 선언하는코드이다. 반드시 열리면 닫혀야 하고 couple Tag, Single Tag 모두 사용가능하다 필요시 jsx 로 호출 시 전달할 수도 있다.(props, state 객체 이용) props : Only Read 만 가능한 정적 데이터 전달 도구, 최상위 객체인 react 에서 모두 상속 받기 때문에 모든 컴포넌트에서 사용 가능하다. 단 초기 정보값만 전달하는 역할을 하기 때문에 getter 만 존재함 ( 실제 getter 를 open 해서 주는게 아니다) 문법 : props.전달 속성명으로 gett..

이번에는 비동기 통신을 응용하는 실습을 포스팅하겠습니다. 들어가기 앞서 해당 html과 Json 링크는 강의 자료로 저작권 문제가 있을 까봐 공유는 안하겠습니다. 그냥 이런 식으로 응용되는구나 정도만 알아주시면 충분할 거 같습니다. 우선 json 부터 알아보겠습니다. 이미지 부분을 계층 이라고 합니다. 계층 별로 필요한 데이터를 뽑아와 사용 할 수 있도록 계층을 나눕니다. Json 객체에 대해 필수로 알아야 할 항목 3개 꼭 기억하자!! key 는 문자열로 value 는 어떤 것이던 올 수 있지만 문자열인 경우엔 반드시 "" 로 감싸야 한다. parse() : JSON 문자열을 파람으로 받아서, 스크립트 객체로 변환하는 함수. stringify() : 파라미터를 받아서, JSON 객체로 변환하는 함수. ..

오늘은 자바스크립트이 비동기 작업에 대해서 알아보겠습니다. 비동기 통신이란? 대부분의 SPA 프로그램에서 서비스를 구현 할 때 (Single Page Application) -> 웹 클라이언트가 페이지에 컨텐츠를 구성할 때 서버에 다중의 페이지 요청을 해서 페이지 단위로 Response 를 받는게 아닌, 데이터만 요청해서 받은 후 하나의 페이지에서 ReRendering 하는 형태의 서비스이다, 비동기 통신이 필요한 경우 외부 API 가 Get 할 때 (외부 서버에 RESTFUL 서비스 호출 시) 파일에 접근 할 때 데이터가 큰 이미지나 컨텐츠 등을 접근해서 뿌려줄 때 비동기 통신에 필요한 객체 두가지 ES6 문법에서 제안된 비동기 통신의 수행하는 대표적인 API Promise 객체가 있고 여기서 더 진화..

오늘은 break, continue, return 에 대해 포스팅 해보겠습니다. break 문 break 문은 반복문에서 사용되며 가장 가까운 하나의 반복문을 탈출하기 위해 사용되어집니다. break 문이 실행되면 반복문이 모두 끝나지 않아도 해당 반복문을 즉시 탈출한다. continue 문 break 문과 다르게 반복문을 완전히 빠져나가지 않고 해당 반복문만 한 번 skip 하는 개념이다. 현재 진행 중인 반복문을 즉시 중단하고 다음 반복문을 진행하라는 구문이다. return 문 쓰여진 해당 함수에서의 탈출을 의미한다 (break 와 헷갈리지 말기!) 메서드 내에서 return 이 실행되면 뒷 줄에 코드가 더 있다 해도 무시하고 값 반환 후 종료 메서드 출력값은 return 명령어로만 가능 메서드의 리..