전체 글101 20일차(Ul 태그로 Select 구현) (styled-component를 사용해서 태그명이 다를 수 있음) function SelectWrapper() { // isOpen이 true이면 토글이 열리고 false이면 토글이 닫힘을 표현하기 위한 state const [isOpen, setIsOpen] = useState(false); // 밑의 보기 중에서 특정한 하나가 선택되면 상태를 바꾸기 위한 state const [selectedOption, setSelectedOption] = useState("자바"); // 버튼을 눌렀을 때 isOpen을 반대 값으로 바꿔주는 함수 const toggleDropdown = () => { setIsOpen(!isOpen); }; // 밑의 option 중 하나를 골랐을 때 선택한 option으로 바.. 2023. 9. 6. 19일차(비동기 통신: axios) HTTP 1. 프로토콜: 웹 서버와 클라이언트(웹 브라우저)가 대화하기 위해 서로 약속된 방식 2. 요청(Request)과 응답(Response): 요청은 클라이언트가, 응답은 서버가 함 3. Url 1) https:// : 프로토콜 2) WWW. : subdomain 3) hostinger.com: Main domain 4) /tutorials/what-is….: Paht/Page 4. 메서드: 클라이언트가 서버에게 요청하는 것 1) GET: 조회 2) POST: 생성 3) PUT, PATCH: 수정 4) DELETE: 삭제 5. 상태코드: 오류코드 1) 1xx(정보): 요청을 받았으며 프로세스를 계속 진행 2) 2xx(성공): 요청을 성공적으로 받았으며 인식했고, 수용 3) 3xx(리다이렉션): 요청.. 2023. 9. 4. 4주차 WIL (리액트 리렌더링이란?) 일정을 적는 칠판이 있다고 가정을 했을 때, 하나의 일정이 변경됐다고 해서 칠판에 적은 모든 것들을 지우고 다시 적지는 않는다. 다만 변경된 일정만 지우고 새로운 일정을 적을 뿐이다. 리액트 리렌더링은 이처럼, 변경해야 할 부분만 업데이트하는 것이다. 위의 방식을 사용하면 필요한 부분만 지우고 추가하면 되기 때문에 시간 절약이 가능하다. 또한 다시 써야하는 글의 양이 적기 때문에 에너지 또한 적게 들어간다. 즉 효율성이 높다. 이러한 이유에서 리액트는 위와 같은 방식을 사용한다. 시간절약과 효율성을 위해. 2023. 9. 3. 18일차 ( aSynchronous, REST API, Redux-Toolkit) 동기적 방식(Synchronus) => 현재 실행 중인 코드가 끝나가 다음 코드 실행 비동기적 방식(asynchronous) => 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식 비동기적 방식 사용 이유 => 콜백지옥 문제를 해결하기 위해: 콜백지옥 과정이 반복되면 가독성, 수정에 어려움 Promise 1. 앞으로 비동기 프로그래밍을 다룬다는 것은 곧 Promise 객체를 다룬다는 의미와 일치한다고 봐도 됨 2. Promise 객체: 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냄 3. Promise 객체에 담기는 주요한 상태정보 1) 대기(Pending): 요청한 직후의 상태 2) 이행(Fulfilled): 데이터를 localhost한테 성공적으로 전달한 상태 3) 거부(Rej.. 2023. 9. 2. 이전 1 ··· 15 16 17 18 19 20 21 ··· 26 다음 728x90