전체 글 (275) 썸네일형 리스트형 [JavaScirpt] API URLSearchParams( url.searchParams.set ) 이 method는 순수자바스트크립트에서도 사용이 가능하며, 고로 react에서도 사용 가능. const naverUrl = new URL('https://openapi.naver.com/v1/search/book.json'); // Set 'query' parameter naverUrl.searchParams.set('query', 'your_search_term'); // Set additional parameters as needed naverUrl.searchParams.set('start', 1); // First page of results naverUrl.searchParams.set('display', 10); // Number of results per page console.log(nav.. [react]useNavigate or useLocation의 차이 useNavigate is primarily for programmatic navigation between routes within your React application. It allows you to navigate to different URL paths, replacing history or adding to the history stack. useLocation primarily serves to read information about the current location, such as the pathname, search parameters, and state. It doesn't directly modify the history stack but can inform navigation.. [useNavigate] useParams() & useLocation() useNavigate() within parent component. data는 map 함수를 통해서 받아온 argument 입니다. useParams() useLocation() useLocation() + without { } useParams()를 사용할 경우 => isbn13만 받을 수 있음 => 아마도 Route를 통해서 만들었던 정보같음. ( e.g 더 많은 정보를 사용할 수 있음.(hash, key, pathname, search, state {...}) => state {...} [function]onClick={handleOnClickDetail(data) vs onClick={()=>{handleOnClickDetail(data)}} key points 1. Arrow 함수를 사용한 것 2.Arrow 함수에 data 함수를 전달 한것. 1. onClick={handleOnClickDetail(data)}: This expression immediately invokes the handleOnClickDetail function and passes the data argument to it. The return value of the function (which could be anything, including undefined) is assigned as the event handler. If the handleOnClickDetail function has side effects (performs actions without ex.. [github branch] git bash로 git hub branch 만들기 github에 연결 이후 new branch를 새롭게 생성 후 연결하는 것까지. git remote add origin URL git checkout -b homeLib # 로컬 브런치를 만들기 git add . # Add all changes to the staging area git commit -m "Initial commit for homeLib branch" # Commit changes with a message git push --set-upstream origin homeLib # Push to the remote branch and establish tracking #로컬 브런치가 remote branch와 동일한 이름으로 트래킹 되기 시작함 git push --set-upstream o.. [props] 전달하기 spread syntax nested component : A compoent inside B component import Avatar from './Avator.js'; function Card ( { children } ) { return ( {children} ); } export default function Profile () { return ( ); } 참조https://react.dev/learn/passing-props-to-a-component [arrow function]3가지 기본 이해 이 영상은 별코딩 영상을 참조하여 작성된 글입니다. 1. 일반함수: 함수 선언식과 함수 표현식 2. 화살표 함수 문법 정리 3. arguments와 가변인자 함수 선언식 - 호이스팅이 가능 - 함수 이름 필수 function main () { return "hi" } 함수 표현식 - 함수를 하나의 표현식 안에서 정의 - 호이스팅 불가능 //(익명 함수) const main = function () { console.log("hello") } const main = ( ) => { console.log("hello") } 화살표 함수 문법 function add ( a, b ) { return a + b } const add = ( a, b) = > { return a+b } //함수가 한줄 일 경우 re.. [useRef]기본 이 글은 별코딩 영상을 참조하여 작성된 들입니다. useRef 변화는 감지 해야하지만 그 변화가 랜더링을 발생시키면 안되는값을 다룰때 set000으로 데이터 값이 변경되면 (component가 있는)페이지가 re-loading되면서 변수값이 초기화 됨. const countRef = useRef(0); return ( Ref : {countRef.current} useRef의 2가지 특징 1 .저장공간 State의 변화 -> 랜더링 -> 컴포넌트 내부 변수들 초기화 Ref의 변화 -> No 랜더링 -> 변수들의 값이 유지됨 2. DOM 요소 접근 일반 변수와 다른 useRef값 왜냐, ref는 전생애 주기를 통해 값 유지 useEffect와 사용시에 좋은 조합 왜냐, ref는 re-rending을 발생시.. [Element&Component] Element 1. 실제로 대부분의 React 앱은 root.render()를 한 번만 호출. 2. React 엘리먼트는 불변객체. - 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없음. - 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줌. => UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 root.render()로 전달하는 것 3. 변경된 부분만 업데이트 React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트(페이지 전체를 re-loading 하지 않음) Component 일반적으로 새 React 앱은 최상위에 단일 App 컴포넌트를 가지고 있습.. [useEffect]특징 3가지 이 자료는 별코딩 영상을 참조하여 작성하였습니다. useEffect는 브라우져가 랜더링 이후에 돔에 그림을 그린다. useEffect은 함수 작성 방식에 따라서 함수 실행여부가 달라진다. 1. useEffect (기본) usefEffect (()=>{ // 작성함수 }) 페이지가 랜더링 될때마다 useEffect 함수가 작동 2. useEffect( 특정 useState 언급) useEffect (()=>{ // 작성함수 }, [ value(Dependecy Array) ]) value 값을 작성하면 작성한 value에서만 작동. 즉 [ ] 안에 넣은 useState의 상태가 변경될때만 useEffect function이 작동. 3. useEffect( [ ] No 언급) useEffect (()=>{ .. [useState] CallBack 함수는 2가지 타입을 가지고 있다. 왜 useState를 설명하는데 CallBack 함수를 설명하냐하면, set000은 값이 변경될때마다 페이지를 re-loading 하기때문에 이것을 방지하기 위해서 Callback 함수를 활용. CallBack 함수의 2가지 특징 1. functions를 변수로 사용한다. => accept functions as arguments 2. functions를 돌려 준다. => Return functions => function 즉, 함수 '그대로'를 돌려주기 때문에 () === excute(실행문)이 필요. 참조 https://www.youtube.com/watch?v=gVhRtrOw-oM 2. functions를 돌려 준다. useState 사용 특히 input 함수에서 정보를 작성할 때마다 re-load.. [git] git (working Directory / Staging Area / Repository)작업하기 업데이트 일자(2024.01.30) 완전한 이해를 바탕으로 작성된 글이 아님으로 사전에 언급드립니다. 이 글은 드림코딩 영상을 참조하여 작성한 글입니다. 개인적으로 GIT 초보자가 가져야 할 Diagram 이라고 생각한다. git과 git hub는 다르다. git은 Local 저장소라 불리며, 3가지 단계로 나줘져 있다. git add 파일명 -untracked 파일 추가 staged modified 내용 수정이 이뤄지면 다시 add 를 통해서 staging area로 이동 시켜줘야 함 git rm --cached (파일명) staged를 add *과 add. 구분하기 add*하고 다시 a.txt 파일 삭제 하면 a.txt 삭제한 내용을 반영하지 못함( status) add.은 a.txt가 삭제된 상황까.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 23 다음
