전체 글

[JavaScript][clean-code] 복잡한 인자 관리하기

* 복잡한 인자 관리하기 - 인자의 갯수별로 함수의 사용도가 달라지기보단 인자의 갯수에 따른 맥락을 유추할 수 있는 방식이 더 중요하다. 무조건 인자가 많은게 나쁜건 아니다. 맥락과 흐름을 파악할 수 있는 인자가 더 중요하다. * 맥락과 흐름을 파악할 수 있는 인자 예시코드 function toggleDisplay(isToggle) { // ...some code } // 인자의 네이밍을 보고 bool형식의 인자가 들어갈 것이 유추된다. function sum(sum1, sum2) { // ...some code } sum(1, 2); // 값이 2개 이므로 2개의 값을 더하는구나를 유추 할 수 있다. function getRandomNumber(min, max) { // ...some code } * ..

[JavaScript][clean-code] argument & parameter

* argument & parameter - 자바스크립트 함수에서 넘기는 인자 혹은 매개변수 * JavaScript argument vs parameter의 다른점은 무엇일까? MDN에서는 아래의 예시와 같이 구분하고 있다. function example(parameter) { console.log(parameter); } const argument = 'foo'; example(argument); 함수의 parameters는 이름이 있고 함수의 정의 부분에 있다. 함수의 arguments는 함수에 들어가는 real value이다. * Parameter (Formal Parameter) 예시 형식을 갖춘 매개 변수 function axios(url) { // some code } * Argument (A..

[React_study] 컴포넌트 전환 애니메이션 지정 (transition & automatic batch)

* 애니메이션 개발 단계 애니메이션 동작 전 스타일을 담아둘 className생성 애니메이션 동작 후 스타일을 담아둘 className생성 transition 속성 추가 원할 때 2번 탈부착을 해준다. * 애니메이션 예시 코드 (fade in 애니메이션 예시 코드) 애니메이션 동작 전 className 생성 애니메이션 동작 후 className 생성 transition 추가 원할 때 fade-end 탈부착 .fade-start { opacity : 0; } .fade-end { opacity : 1; transition : opacity 0.5s; } function TabContent({tab}){ return ( { [content0, conten1, content2][tab] } ) } useEff..

[React_study] if를 사용하지 않고 props를 사용하기

* if를 사용한 예시 function Detail(){ let [tab, setTab] = useState(0); return ( ) } function TabContent(props){ if (props.tab === 0){ return content0 } if (props.tab === 1){ return content1 } if (props.tab === 2){ return content2 } } { setTab(0) }} eventKey="link0">Button0 { setTab(1) }} eventKey="link1">Button1 { setTab(2) }} eventKey="link2">Button2 * if문을 사용하지 않고 변경하기 방법1 function TabContent(props)..

[React_study] Ajax (post, fetch)

* POST 요청 axios.post('URL', {name : 'kim'}) 실행시 서버로 { name: "kim" } 자료가 전송이 된다. 완료시 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 된다. * 동시에 Ajax 요청 여러개 요청하기 Promise.all( [axios.get('URL1'), axios.get('URL2')] ) 위의 코드처럼 구성을 하게 되면 URL1, URL2로 GET요청을 동시에 해준다. 둘 다 완료시 특정 코드를 실행하려면 .then() 뒤에 작성하면 된다. * object/array 자료 전송 원래 서버는 문자 자료만 주고 받을 수 있다. 따라서 object/array 자료는 JSON형태로 전송을 보내야 한다. JSON은 문자 취급을 받기 때문이다. ex) "..

[React_study] Ajax (서버와 통신)

* AJAX 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능을 AJAX라고 한다. AJAX로 GET/POST요청하려면 방법 XMLHttpRequest fetch() axios라이브러리 사용 * axios라이브러리 설치 npm install axios * AJAX요청하는 법 (참고) react에선 거의 서버와 ajax를 이용해서 통신을 한다. import axios from 'axios' function App(){ return ( { axios.get('url정보 넣기').then((result)=>{ console.log(result.data) }) .catch(()=>{ console.log('error') }) }}>button ) } ..