코딩애플

서버에게 데이터 요청할때 유저가 그냥 데이터 달라고 하면 서버가 보내주지 않습니다. 서버에 데이터를 요청할때는 정확한 규격에 맞춰서 요청해야 합니다 1. 어떤 데이터인지 (URL 형식으로) 2. 어떤 방법으로 요청할지 (GET or POST) 잘 기재해야 데이터를 보내줍니다. 보통, 서버에서 데이터를 가져올때는 GET 서버로 데이터를 보낼때는 POST 를 씁니다. AJAX 란? 서버에 GET,POST 요청을 할때 새로고침없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능을 말합니다. (get 요청을 날리고 싶으면 주소창에, post요청을 날리고 싶으면 form 태그를 이용하면 되지만, 브라우저가 새로고침된다는 단점이 존재) 그래서 AJAX를 자주 씁니다. AJAX로 GET,POST 요청을 하는..

useEffect(()=>{실행할 코드},[count]) useEffect 의 첫째 파라미터로는 실행할 코드를 넣어주고, 둘째 파라미터로는 [](배열)을 넣을 수 있는데, []안에 변수나 state 같은 것들을 넣을 수 있습니다 이런 경우에는 [] 에 있는 변수나 state 가 변할 때만, useEffect 안의 코드를 실행해줍니다 위의 코드는 count 라는 변수가 변할때만, useEffect 안의 코드를 실행되겠군요. useEffect(()=>{실행할 코드},[]) 만약두번째 파라미터에 빈 배열을 넣어준다면, 처음 렌더링 시 1회 실행하고 영영 실행해주지 않습니다. 처음에 딱 한번만 실행해줍니다 clean up function useEffect를 동작하기 전에 특정 코드를 실행하고 싶으면 ret..

저번에 app.js (메인페이지) 파일에 디테일 컴포넌트를 하나 만들었는데요 여기에는 상품정보가 아직 채워지지 않은 상태입니다. 그래서 props 를 사용해서 shoes 정보들을 입력해볼게요 function Detail(props){ return( {props.shoes[0].title} {props.shoes[0].content} {props.shoes[0].price}원 주문하기 ) } export default Detail; 이렇게 하면 현재 상세페이지에는 shoes 데이터의 0번째 정보만 보여집니다 3개의 상품이 모두 보이도록 하려면 어떻게 해야할까요? 라우터를 3개 만들면 되겠죠? (슬래시 기호도 맘대로 사용가능한데 단어간 띄어쓰기용으로 많이 사용) 이렇게 하면 3개 페이지 완성! 하지만, 만약..

Open API , Rest API 등등 여기저기서 API 이야기 하는데 뭔소린지 잘 모르겠죠? 저랑 같이 정리해봅시다 API 란? Application Programming Interface 한 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법 쉽게 말해서, 메뉴판이다! 우리가 식당에서 주문을 한다고 가정해보죠. 중국집가서 치킨 먹고 싶다고 치킨을 시킬수는 없죠? 우리의 선택권을 한정시켜주는 '메뉴판'이 필요하겠죠. 주인이 메뉴판을 만들면, 그 안에서 우리가 음식을 고르게 되죠. 메뉴판이 식당의 API 가 되는 겁니다. 식당과 손님이 음식을 주고받기 위한 방법으로 사용되니까요 프로그램 측면에서 생각해보죠. 영화를 보여주는 프로그램이 있습니다 여기서 내가 마음대로 '아는형님'을 요청하면 어떻게..

Input box 종류 ​ 이거 말고도 다양한 종류의 인풋 박스가 많으니 필요할 때 찾아쓰기 에 뭔가 입력하면, 코드가 실행되도록 이럴땐 onChange 아니면 onInput 이벤트핸들러를 부착하면 됩니다 {실행할 코드}}/> 이벤트 핸들러는 많다 onMouseOver={ } 이건 이 요소에 마우스를 댔을 때 안의 코드를 실행해줌 onScroll={ } 이건 이 요소를 스크롤 했을때 안의 코드를 실행해줌 입력값을 가져오는 법 {console.log(e.target.value)}}/> e라는 파라미터를 추가하고, e.target.value를 쓰면 사용자가 입력한 값을 가져올 수 있음 참고로 e말고 작명 자유롭게 해도됨 e.target => 이벤트가 발생한 html e.preventDefault()=> 이벤..

안에 state를 쓰려고 하는데 문제가 있음 function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ) } function Modal(){ return ( { 글제목[0] } 날짜 상세내용 ) } 하지만, '글제목'이라는 변수가 define 되지 않았다고 에러가 뜹니다 왜냐면 글제목이라는 state 변수는 function App()에 있지 function Modal() 안에 있지 않으니까요 자바스크립트에서는 다른함수에 있는 변수를 마음대로 가져다 쓸 수 없습니다 다른 함수의 변수를 가져다 쓰려면? 컴포넌트 2개가 부모/자식 관계인 경우에 가능합니다. (한 컴포넌트가 다른 컴포넌트 안에 있는 경우) 부모 ..

모든 array 자료 오른쪽에는 map()을 붙일 수 있습니다 map 함수 쓰는법 기능1. var 어레이 = [2,3,4]; 어레이.map(function(){ // 이 안의 코드를 어레이원소 갯수만큼 실행해주세요~ console.log(1) }); 어레이에 들어있는 원소 갯수만큼 {}의 코드를 반복실행해준다 저러면 진짜로 console.log(1) 3번 실행됨 기능2. var 어레이 = [2,3,4]; 어레이.map(function(a){ // 어레이 안에 있는 원소들을 하나씩 출력해주세요~ console.log(a) }); 콜백함수 안에 파라미터(a)를 작명하면, 그 파라미터는 어레이의 원소들을 하나씩 출력해줍니다 저러면 진짜로 2, 3, 4가 콘솔창에 출력됨 기능3. var 어레이 = [2,3,4]..

리동적인 UI 가 뭐나면, 유저가 조작시 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁, 경고문 등 그런 UI를 의미합니다. 동적인 UI 만드는 방법 1. html, css로 미리 UI 디자인을 다 해놓고 2. UI의 현재상태를 state 로 저장해두고 3. state에 따라서 UI 가 어떻게 보일지 조건문 등으로 작성 1번은 했으니 2번부터 할거임 step 2. UI의 현재상태를 state로 저장 state 하나 만들고, 거기에 현재 UI의 상태정보를 저장해두라는 소리 let [modal, setModal] = useState(false); useState 안에 무슨 자료를 넣어야 되냐면 정말 마음대로 하면됨 모달창은 열림 or 닫힘 이 두개 상태밖에 없기 때문에 그거 2종류만 표현할 수 있는 자료형이면..