JavaScript/JavaScript
[Javascript / React / Node ] async+await 과 axios - 파일분리 와 코드경량화
useEffect(()=>{ const getApis = async () => { await axios.get([LINK]).then(res => setState(res)) } getApis(); }) 기존에 위와같은 형식으로 api 를 불러오고 있었습니다. 하지만, 페이지가 많아지고 컴포턴트가 많아지다보니 이 렇게 api를 호출하는 코드를 따로 분리해서 모아야겠다는 생각이 많이 들었습니다. 파일분리 getApis.js import axios from 'axios'; const getApiData = async () => { await axios.get([LINK]) .then(res=>{ return res }); } export { getApiData } pages.js useEffect(()=>{ ..
JavaScript 공부하기 06 (object) array - 2
Javascript 에는 Object라는것이 존재합니다. 이 Object를 이용하여 Json 파일을 만들 수 있습니다. let obj = {}; 이런식으로 선언하여 배열처럼 사용을할 수 있지만, 약간 차이점이 있습니다. //array let array = {1,2,3,4} //object let obj = {first : 1 , second : 2 , third : 3 , fourth : 4}; 이런식으로 약간의 차이가 있습니다. let obj = {/* [Object Name] : [Object Value], [Object Name] : [Object Value], [Object Name] : [Object Value] [Object Name] { //중첩가능 [Object Name] : [Object..
JavaScript 공부하기 05 (조건문, 연산자)
연산자 연산자는 조건문을 하기 위해 가장 중요하다고 생각되는 부분입니다. 아래의 표만 잘 숙지를 한다면 어느 언어를 하더라도 편하게 할 수 있습니다. 종류 연산자 예시 설명 증감연산 ++ ++i / i++ 전 / 후에 증가 후 적용한다. -- --i / i-- 전 / 후에 감소 후 적용한다. 대입연산 = i = 10 대입 연산자로 우측의 값을 좌측에 대입한다. += i += 2 우측의 값만큼 좌측 값을 증가 시킨다 -= i -= 2 우측의 값만큼 좌측 값을 감소 시킨다 등가연산 == i == 10 비교 연산자로 좌우측의 값이 같은지 비교한다 != i != 11 비교 연산자로 좌우측의 값이 다른지 비교한다 >= i >= 10 좌측이 우측보다 크거나 같은지 비교한다.
JavaScript 공부하기 04 (반복문) for, while
반복문은 가성비가 가장 좋다고 생각하는 언어입니다. 여러 언어에서 사용을 하고, 문법상 차이점도 거의 없기 때문입니다. for for 문은 가장 많이 사용된다해도 과언이 아닐텐데요 for(초기화 ; 조건 ; 증감식){ //코드 } 위와같이 사용을 할 수 있습니다. 이 for 문의 사용법은 위에 나온거처럼 (초기화;조건;증감식) 이것들을 적어주어야 정상적으로 동작을 하게 됩니다. for(let i = 0 ; i < 10 ; i++){ console.log(i); } 이렇게 해주면 for문이 도는 조건이 i가 0부터 10보다 작을 때 까지 i를 1씩 증가시키는 조건을 가진 for 문이 생기게 됩니다. 여기서 i 를 콘솔에 for 가 돌아가는동안 계속 찍히는 코드를 적어보았습니다. 동작과정은 i 가 0 부터 ..
JavaScript 공부하기 03 (배열) array - 1
개발환경 - IDE : Atom - OS : MacOS Array 배열은 리스트와 비슷한 객체라고 볼 수 있습니다. Javascript에서는 배열의 길이와 데이터형은 고정되어있지 않고, 배열의 길이는 동적으로 늘거나 줄어들거나 합니다. 이 때문에 Javascript에서는 배열의 밀집도가 보장되지 않습니다. 문론 편리한점도 있지만 형식화 배열을 사용하는것도 좋습니다. 이 글에서는 아래의 코드를 이용하여 공부를 해 보겠습니다. let fruit = ["사과","오렌지"]; 배열의 크기 구하기 console.log(fruit.length); //2 이처럼 length를 이용하여 배열의 크기를 구할 수 있습니다. 이 크기값으로 반복문이나 여러 조건식을 세울 때 유용하게 활용이 가능합니다. 배열의 요소 접근방법 ..
JavaScript 공부하기 02 (엄격모드, 변수) 'use strict' , variable
개발환경 - IDE : Atom - OS : MacOS use strict 이 것은 ES5로 넘어오며 생기게 된 엄격 모드를 알리는 태그입니다. 사용 방법은 .js 파일 맨 위에 'use strict' 를 적어주시면 됩니다. 엄격 모드가 뭔데? 엄격모드는 ES5 이전 암묵적으로 비 엄격 모드에서 작동하였던 것들을 모두 제한하는 것입니다, a = 1; 이렇게 초기화를 하였을 때 오류가 발생을 하는 게 당연합니다. 어디서 a라는 것을 선언하지도 않았기 때문이죠. 그런데 'use strict'를 사용하지 않고 JavaScript 를 작성하게 된다면? 오류가 발생하지 않고 바로 실행이 돼버립니다. 이것을 방지하기 위하여 ES5부터는 'use strict'를 이용하여 엄격 모드를 적용하기로 하였습니다. 이 엄격 ..
JavaScript 공부하기 -1 (팝업 / popup) open(); alert(); prompt(); confirm();
개발환경 - IDE : Atom - OS : MacOS 기본적으로 저는 이렇게 사용을 합니다. 앞으로 모든 JavaScript 공부 게시글에는 이런 식으로 작업이 될 것입니다. 저의 다른 강좌를 보시면 위처럼 외부 파일을 링크하는 방식을 알려주는 글이 있습니다. 이 부분을 참고해서 저의 글을 정독해주시면 감사하겠습니다. open(); 이 함수를 이용하여 특정 url의 페이지를 띄울 수 있습니다. windows.open("http://naver.com", "네이버", option); 위와 같이 (URL , 제목 , 옵션); 이처럼 작성이 가능합니다. option 은 아래와 같습니다 속성 설명 whidth 팝업 창의 너비 지정 hieght 팝업 창의 높이 지정 top 팝업 창의 y축 위치 지정 left 팝업..