공부81 2022.08.14 - 컴포넌트간 통신, context API, useContext 1. 하위 컴포넌트 변경하기 - 상위 컴포넌트에서 하위 컴포넌트에서 쓰이는 state의 값을 변경 하는 경우 - A컴포넌트(버튼) -> B컴포넌트 -> C컴포넌트 -> D컴포넌트 -> E컴포넌트(pros.value) - A의 버튼을 클릭해서 E컴포넌트에 있는 value를 변경한다. - 상위 컴포넌트의 state 값을 props로 내려서 변경한다. export default function A() { const [value, setValue] = useState("아직 안바뀜 "); return ( E의 값을 바꾸기 ); // 클릭 function click() { setValue("E의 값을 변경 "); } } // 바뀐 값을 b가 c로 변경 function B({ value }) { return ( 여.. 2022. 8. 14. 2022.08.02 - http 웹 기본지식 - (1) * 인프런 강의 기반 1. 인터넷 네트워크 - IP(인터넷 프로토콜) : 최소한의 규칙 클라이언트가 주소를 부여받는다. ( 100.100.100.1 ) 지정한 ip주소에 데이터를 전달한다. 패킷이라는 통신 단위로 데이터를 전달한다. - ip 패킷 규칙 나의 ip, 목적지의 ip를 적고 ip패킷을 만들고 인터넷망이 서버로 보낸다. ip프로토콜에서 서로 노드끼리 전달 받다보면 결국 목적지 ip로 정확하게 도달하게 됨. - ip 프로토콜의 한계 1) 비연결성 : 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷이 전송된다. 2) 비신뢰성 : 중간에 패킷이 사라지거나 순서대로 오지않을 수 있음 3) 프로그램 구분 : 같은 ip를 사용하는 서버에서 통신하는 애플리케이션이 둘 이상일 경우도 있음 - 패킷 전달 .. 2022. 8. 2. git 명령어 모음 터미널을 통해 해당 working directory로 이동 git init git add . git commit -m "message" git remote add origin "github.com/(repo.git)" git push -u origin master 2022. 7. 21. 2022.07.21 - 무한 슬라이드 구현 프로젝트때 슬라이드 구현에 꽤나 애를 먹었던 기억이 있었다. 이번에는 좀 완벽하게 해보고 싶어서 구글링 참고하여 가로 길이 맞춰 구현해봤다! 역시 하고나면 뿌듯해~~ * 01 ~ 05 까지 총 다섯개의 이미지 무한루프 [ 중요 포인트 !! ] 1. li를 클론하여 앞뒤로 복사해준다 ( classList 이용해서 "clone" 클래스 추가 ) 2. 슬라이드로 보여줄 li 너비를 설정하고 3. ul과 li를 감싸고 있는 wrapper에 position relative를 설정 4. 슬라이드로 보여줄 li에 position absolute 설정 5. 슬라이드를 부드럽게 전환시켜 줄 transition이 포함된 css 클래스 추가해주기 (나중에 js에서 classList로 추가해서 전환효과 줄것) 6. clone.. 2022. 7. 21. 2022.07.13 - React / useMemo, useCallback, useRef useReducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 상태를 관리할때 사용하는 hook 함수로, useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. - useMemo : 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 시키는 Hooks 이다. 리액트는 dom에 변화가 있을때마다 랜더링을 하는데, 그 과정에서 수행해야할 연산을 계속 반복한다. 이것은 자원의 낭비가 될 수 있으므로 원하는 연산을 수행하지 않을때에는 변하지 않게 하도록 정하는 것이 useMemo이다. const num = useMemo(callback, deps); //deps는 연산을 수행할 배열 const count = useMemo(() => { //.. 2022. 7. 13. 2022.07.13 - javascript 30 [ day6 ] type ahead - 도시 api 를 이용하여 키워드를 통해 도시 이름을 검색할 수 있는 페이지를 만들었다. 나중에 한국 공공 api 를 이용해서 충북 맛집리스트 키워드 검색 등 만들어보고 싶은 것이 많아졌다 ! 아자 아자 [ JS ] const endpoint = "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json"; const cities = []; // 빈배열 fetch(endpoint) .then((blob) => blob.json()) .then((data) => cities.push(...data)); // Blob을 활용하면 자바스크립트로 이미.. 2022. 7. 13. 이전 1 2 3 4 5 ··· 14 다음