본문 바로가기

프론트엔드로 가는 길121

07. 자연스러운 메뉴 만들기 Q. 서서히 내용이 나오게 어떻게 해야할까? let [tap, setTap] = useState(0); { setTap(0); }} eventKey="link0" > 버튼0 { setTap(1); }} eventKey="link1" > 버튼1 { setTap(2); }} eventKey="link2" > 버튼2 {/* {tap == 0 ? 내용0 : null} {tap == 1 ? 내용1 : null} {tap == 2 ? 내용2 : null} */} defaultActiveKey: 기본으로 눌려있는 버튼 {setTap(0);}} eventKey="link0"> 버튼0을 클릭 했을 때 '내용0'을 나오게 하기 위해 state 사용 function TapContent({ tap }) { let [fade,.. 2022. 12. 26.
06. Ajax Ajax 서버와 문자만 주고 받을 수 있다. "{ name: "kim" }" 따옴표 쳐놓으면 array,object도 주고받기 가능 : json 문법 (1) XMLHttpRequest (2) fetch() (3) axios Axios Axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 입니다. 문법코드 axios.get(url,[,config]) import axios from "axios" { axios .get("https://codingapple1.github.io/shop/data2.json") .then((result) => { console.log(result); }) }} > 데이터 요청 요청 실패 할 경우 catch axi.. 2022. 12. 25.
05. LifeCycle & UseEffect 컴포넌트의 LifeCycle 페이지에 장착되기도하고 (mount) 가끔 업데이트도 되고 (update) 필요없으면 제거되고 (unmount) useEffect useEffect(() => {},[]) // mount,update(재렌더링)시 코드 실행 useEffect(() => { // 쓸데없는, 오래걸리는 코드는 여기에 적는 것이 관습 // ex) 어려운연산, 서버에서 데이터 가지고 올 때, 타이머 }); 실행시점 : html 렌더링이 다 되고나서 실행 return () => {} clean up function - useEffect 동작 전에 실행이 됨 - mount시에는 실행안됨, unmount시 실행됨 4. useEffect 실행 전에 뭔가를 실행 시키려면 return () => {} 5. 특정.. 2022. 12. 24.
04. localeCompare (문자정렬) Q. sort()로 문자 정렬은 어떻게 하나요? localeCompare 참조 문자열이 정렬 순서에서 앞 또는 뒤에 오는지 또는 주어진 문자열과 같은지를 숫자로 반환 var lang = [ { name: "Typescript", level: 5 }, { name: "Javascript", level: 5 }, { name: "Scala", level: 5 }, { name: "F#", level: 5 }, { name: "Java", level: 5 }, { name: "Apple", level: 5 }, { name: "C++", level: 5 }, ]; lang.sort((a, b) => a.name.localeCompare(b.name)); 참고블로그 : https://m.blog.naver.co.. 2022. 12. 23.

티스토리툴바