UI (227) 썸네일형 리스트형 [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 points1. 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 explic.. [github branch] git bash로 git hub branch 만들기 github에 연결 이후 new branch를 새롭게 생성 후 연결하는 것까지.git remote add origin URLgit checkout -b homeLib # 로컬 브런치를 만들기git add . # Add all changes to the staging areagit commit -m "Initial commit for homeLib branch" # Commit changes with a messagegit push --set-upstream origin homeLib # Push to the remote branch and establish tracking #로컬 브런치가 remote branch와 동일한 이름으로 트래킹 되기 시작함 git push --set-upstream or.. [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가 삭제된 상황까.. [Git] git과 github set 하기 업데이트 일자(2024.04.30)완전한 이해를 바탕으로 작성된 글이 아님으로 사전에 언급드립니다. 개인적으로 GIT 초보자가 가져야 할 Diagram 이라고 생각한다.git과 git hub는 다르다.git은 Local 저장소라 불리며, 3가지 단계로 나줘져 있다. 만약 이미 github에 만들어진 데이터를 복사할려면 아래의 URL에 들어가서 'git clone [github URL]' 복사https://angelplayer.tistory.com/222 [Github] Github 저장소(Repository) 생성 & 초기 설정Repository(저장소) 생성하기 github에 접속하여, Repositories 탭으로 이동하면 [New] 버튼이 있습니다. New 버튼을 누르면 새로운 Reposito.. [JavaScript]ScrollY? versus pageYoffset? 브라우저 반영 때문에 차이 발생 결론은 구형 브라우저 신경안써도 되면 scrollY 쓰고, 구형 브라우저까지 신경써야 한다면 pageYoffset을 쓴다.아니면 조건문 걸어서 둘 다 쓰던지. 참조 https://studyhardgogo.tistory.com/186 [UI]스켈렉톤 UI = Progress Indicator(Skeleton) “API 응답 시간이 짧은 경우에는 스켈레톤이 보여지지 않게끔” from KaKao tech 스켈렉톤 UI사용 이유는(a) 사용자에게 현재 시스템이 시간이 필요하다. (b) 대략적인 시간은 얼마다 라는 정보를 전달하기 위해서이다.Progress indicators tell users (a) that the system needs more time to process the last user action (for instance, to load a file, or to install a new update), and (b) approximately how much time remains. https://www.nngroup.com/articles/progress-indicators/ Progress I.. [React] 간단한 서버 세팅 하는 법 이 자료는 라매개발자 영상을 참조한 자료입니다. https://www.youtube.com/watch?v=d6suykcsNeY express를 통한 서버 설치. 서버용 폴더와 클라이언트용 폴더 각각 만들기 서버 설치 express를 이용한 서버 설치 1. (cmd) cd를 이용해 server 폴더 이동 2. (cmd 명령어) npm init 설치 3. (cmd 명령어) npm i express 4. 서버 파일 만들기 app.js // app.js 파일 안에 아래 code 넣기 const express = require('express') const app = express() app.get('/', function (req, res) { res.send('Hello World') }) app.listen.. [Javascript] vue.js computed와 methods computed 속성과 methods 속성의 차이점 computed => {{ }} methods = > attribute 1) {{ }}에 작성할 로직이 복잡하면 함수의 return 정의하여 사용(값 바로 >> {{ }} 전달 2) 계산량이 많아 캐시가 필요 1) 이벤트 핸들러 조정 가능 v-on 2) event가 발생 할 때 function () 작동 - 변수를 넣을 수 없음. - 변수를 넣을 수 있음. data : 단순한 값 computed : data의 단순한 값에 상태 변환( 사칙 연산 등) 정도면 사용 methods : prameter와 같은 값을 전달 받을 때 사용 methods > computed(사칙연산 등)) > data(메모리 할당 여부에 따라서 갈리는 듯) Computed compu.. [Javascript] scope 범위 (EnvironmentRecord / LexicalEnvironment) 이 내용은 책 '코어 자바스크립트'를 보고 저의 개인적인 해석으로 작성된 내용입니다. 내용이 틀릴 수도 있으니 중의 하시기 바랍니다. 실행 콘텍스트 - 실행 콘텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. - 실행 컨텍스트 객체는 활성화 되는 시점에 variableEnviroment, LexicalEnvironment, ThisBinding 세 가지 정보 수집. 실행 콘텍스트를 생성할 때 VariableEnvironment와 LexicalEnvironment가 동일한 내용으로 구성. LexicalEnvironment는 함수 실행 도중에 변경되는 사항이 즉시 반영되는 반면() VariableEnvironment는 초기 상태 유지. VariableEnvironment와 LexicalEnviro.. [Javascript] 위아래 정보값 찾기 Hierarchy: parentNode: The element's parent in the DOM tree. childNodes: A collection of all child nodes (elements, text nodes, comments). children: A collection of only child elements (not text nodes or comments). previousSibling and nextSibling: References to siblings in the DOM. [ FE/Broswer] Chrome 디버깅 1 : 버튼 연청색 : 하나하나 코드 실행하는 버튼빨간 박스 : function으로 바로 들어가는 버튼 [Node.js] Node.js를 테스트 자료는 조코딩 영상을 참조하였습니다. node express(framework) - 웹 프레임워크(request response)를 만들고 사용하는 것 ( 단 node 자체 내장함스로도 서버 설정이 가능합니다.) express module 1. npm 'express'검색 2. (설치)cmd에서 'npm i express' 3. (실행) cmd에서 'node index.js' => 자기서버 'localhost:3000' port: 한 서버에 여러개의 포트 가능 FTP : 20,21(TCP) SSH : 22(TCP) 텔넷 : 23(TCP) SMTP : 25(TCP) DNS : 53(TCP/UDP) DHCP :67(TCP) HTTP : 80(TCP) HTTPS : 443(TCP) ap.. 이전 1 2 3 4 5 6 7 8 ··· 12 다음
