개발 블로깅
-
[2019.04.17] ES6 문법 - Template Literals 문자열 처리개발 블로깅/Modern script 2019. 4. 17. 08:58
자바스크립트에서 문자열을 표시할 때 '(따옴표) 또는 "(쌍따옴표)를 사용하는데, ES6문법에서 들어오면서 템플릿 리터럴(Template Literal)라는 새로운 문자열 표기법이 생겼다. `(백틱) 이라는 문자열을 사용한다. 주의할 점 : 한글에서는 ₩(원)으로 나옴, 영어에서 쳐야 `백틱이 나온다 백틱은 중간에 +로 문자열을 합쳐주거나 하는 것 없이 ` `안에 다음 코드 줄로 변경해도 그대로 문자열을 사용한다. // 백틱 방법 `문자열 첫번째 줄입니다. 두번째 줄입니다.` // 기존 따옴표 방법 '문자열 첫번째 줄입니다.' + '플러스를 안해주면 문법에러가 납니다.' 위와 같이 백틱 문자열은 바로 줄바꿈을 사용할 수 있다. 또한 백틱 문자열 안에서 따옴표와 쌍따옴표는 문자열로 표시된다. `저의 이름은..
-
[2019.04.15] React의 개념 - LifeCycle API개발 블로깅/React 개념 2019. 4. 15. 20:32
lifeCycle 즉, 나타나기 전, 나타난 직후, 나타난 후, 사라지기 전 등등, 어떠한 것에 대해 나타나기 전부터 나타난 후 사라지기까지의 모든 과정을 말한다. 모든 컴포넌트는 이러한 lifeCycle 동안 발생할 수 있는 함수들을가지고 있다. -- [2019.04.17] 수정사항 -- 현재 리액트 버전 16.4에 들어서면서 왠만한 라이프사이클이 불필요하게 되었다. 현재 공식문서에 나오는 라이프사이클 API componentDidMount : 초기 컴포넌트가 생성될 때 componentDidUpdate : 중간에 컴포넌트가 변경사항이 있을 때 componentWillUnmount : 컴포넌트가 삭제될 때 ------- # 브라우저에 나타나기 전 호출되는 API constructor constructo..
-
[2019.04.15] React의 개념 - state개발 블로깅/React 개념 2019. 4. 15. 18:44
내가 이해한 대로 적는 설명 state는 해당 컴포넌트가 가지고 있는 상태, 즉 데이터를 말한다. 각 컴포넌트들은 자신의 데이터들을 가지고 있을 수 있다. (함수형의 컴포넌트는 state를 가지지 않는다! 오로지 class 방식만!) # state를 선언하는 법 class Hello2 extends React.Component{ constructor(props){ super(props); this.state = { //여기에 Object 방식으로 state를 저장 name : 'inyong', age : 27 } } render = () => ( Hello {this.props.todo} ) } constructor 생성자에서 state변수를 만든다. 그리고 그 안에 object 방식으로 데이터를 추가해..
-
[2019.04.15] React의 개념 - props개발 블로깅/React 개념 2019. 4. 15. 16:50
내가 이해한 대로 적는 개념 설명 기존의 자바스크립트와는 다르게 react에는 클래스나 함수 하나하나가 컴포넌트로 볼 수 있다. 컴포넌드는 여러 html요소가 구현되어 있는 하나의 html구성(?) # 함수 방식으로 컴포넌트를 생성하는 방법 const HelloWorld = () => { return ( 헬로월드 ); }; ReactDOM.render(, document.getElementById("root")); 컴포넌트 생성 방법은 두가지가 있다. 위 코드처럼 함수 형태로 생성하는 방법. return 괄호 안의 태그들이 호출되는 곳에 렌더될 부분이다. 이 방법은 따로 state를 가지지않고 짜여진 틀만 가져와서 사용하면 될 때 쓰면 될 듯하다. const HelloWorld = () => ( 헬로월드..
-
[2019.04.14] fetch API의 개념, 그리고 다시 정리해본 Promise개발 블로깅/Modern script 2019. 4. 14. 18:05
서버와의 비동기 요청방식 fetch라는 것이 있다. 오잉? 비동기 요청방식은 Ajax 아니야? 맞다. fetch는 Ajax의 방식 중 하나이다. 그것도 최신 방식! 나는 지금까지 Ajax라는 것이 있는 건 줄 알았고, 그냥 써보기만 했다. 근데 사실 비동기 방식의 유래도 있었다. # 비동기 서버 요청의 초기 방식 XML Http Request 왠지 자바에서 서버 통신할 때 많이 본 듯한... 초기에 비동기 요청방식을 사용하려면 저렇게 많은 코드의 틀이 필요로 했다. 그러나 그 코드를 줄이고 간편하게 사용하고자 해서 이후에 나온 것이 Ajax이다. # 비동기 방식 Ajax란? 그리고 Ajax 방식 중 최신기술인 fetch API 이 틀에서 바로 사용 가능! 참고로 fetch API는 promise 방식의 ..
-
[2019.04.12] 네트워크 통신 GET과 POST.개발 블로깅 2019. 4. 12. 14:33
클라이언트와 서버에서 데이터를 주고 받을 때, HTTP request Method가 4가지가 있다. # HTTP Request Method 4가지 방식 (설명은 런코 기준) GET : 특정 리소스를 가져오도록 요청 POST : 데이터를 서버에 제출, 서버 상태를 변화시킴. PUT : POST와 비슷하나, 연속적인 요청시에도 같은 효과를 가져옴. DELETE : 리소스의 삭제를 요청할 때 사용 클라이언트가 서버로 데이터를 전송 및 요청을 하면, 서버에서는 클라이언트에게 응답을 보낸다. 클라이언트가 서버로 요청을 보낼 때는 일반적으로 GET, POST 둘 중 하나를 사용하게 된다,. Get 방식의 특징 : URL 뒤에 ? 변수명 = 값 등의 형식으로 요청이 주소창에 보여진다. 길이제한이 있다. POST 방식..
-
[2019.04.08] Check Point 틀린문제개발 블로깅 2019. 4. 8. 22:14
123456var player = { score: 3 };function doStuff(obj) { obj = {};} player = doStuff(player);csplayer는 undefined.... 6번 줄에 player가 doStuff의 결과값을 받는 것을 못봄.... 12345var obj = { inner: { x: 10 }};var example = obj.inner;obj.inner = undefined;csobj.inner가 가리키고 있는 녀석은 {x:10}4번 줄에 exaple도 {x:10}을 가리키게 함.obj.inner에 undefined를 넣음으로써, 가리키고 있는 녀석의 값을 바꾸는게 아닌, obj.inner가 가리키는 놈을 undefined로 바꿈.1~3번째 줄에 저렇게 선..
-
[2019.04.08] __proto__, prototype, constructor 관계개발 블로깅/Javascript 개념 2019. 4. 8. 15:54
쉽게 내 방식대로 정리한 설명 prototype 은 var Human = function () {this.name}; 과 같이 틀로 쓰는 녀석에게 속성을 정의하는 것 (함수만 prototype을 가지고 있음)__proto__ 는 var john = new Human(); 에서 나온 john 인스턴스에 속성을 부여하는 것.(인스턴스만 __proto__를 가지고 있음) 더 쉽게 생각해서, prototype은 붕어빵 틀 자체에 기능을 추가하는 것. __proto__는 붕어빵에, 그 추가했던 기능 # 1 방식1234567891011121314var Human = function(){ }Human.prototype.sleep() = function(){};var Student = function(){ } Stud..