본문 바로가기

분류 전체보기

 (275)
mac 권한 설정 해제 추가적인 이슈 해결책 권한 설정 disable https://m.blog.naver.com/5341287/221697740777 https://stackoverflow.com/questions/32659348/operation-not-permitted-when-on-root-el-capitan-rootless-disabled
[NPM] package manager version conflict(버전 이슈) 버전 이슈가 있어서 짜증난다. 사진을 찍었어야 했는데, 사진을 못 찍어서 그래도 남겨놓은 글을 적어 놔야겠다. No loader is configured for ".node" files: node_modules/re2/build/Release/re2.node 개념은 하나의 매너지에 프로젝트마다 다른 버전으로 생기는 이슈일 수 있다고 한다. 그래서 Gemini는 -g 를 써서 버전 관리를 하는게 좋다고 한다. 1. 버전 확인 vite --vision or node -v 2. 전역(global) Dependencies를 확인 : npm list -g or yarn global list 불필요하거나 안 맞는 거 있으면 삭제 삭제는 두 가지 방법 1. a certain package만 삭제 2. 그냥 packa..
[Javascript] function and ( ) =>{ } 비교 연습해보기 onClick 조회 () => { } 조회
[Javascript] fetch with post post를 쓸 때는 body에 데이터를 담아서 보내줘야 한다. 다만 여기서 주의해야 할 사항은 JSON.stringify()를 해줘야 한다는 것이다. 물론 여기에 맞춰야 할 양식이 있다. 나는 아직 이 부분이 미숙지 된 것 같다. 따라서 여기서 한번 정리해 놓고 가끔식 봐줘야 할꺼 같다. const options = { method : "POST", headers : { "Content-Type" : "application/json", // 아이디와 키값을 넣을 때도 있으니 연속해서 쓰는 방법도 숙지가 필요하다. 형태는 위에 동일하다. "API 명칭" : "API KEY" body : JSON.stringify({ word : keyword //사용자 페이지에서 전달 받은 값, content : 'inf..
[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가 삭제된 상황까..
[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..
[독서]독서를 안하는/못하는 이유 독서를 하지 안는/못하는 이유 스마트폰 저조한 독서율의 원인은 무엇일까. 과제 보고서를 작성할 때 자료조사를 위한 발췌독을 제외하고는 책을 읽지 않는다는 대학생 A씨는 “책은 다른 매체에 비해 시각적인 정보가 적고, 책의 내용을 머릿속으로 재구성하고 이해하는 과정이 필수적이기에 쉽게 손이 가지 않는다”며 평소 독서를 하지 않는 이유를 전했다. 이어 A씨는 “어렸을 적에는 책을 많이 읽었지만, 스마트폰을 사용하며 책과 멀어지기 시작했다”며 자신의 독서경험을 공유했다. 최근 콘텐츠들이 짧고 자극적인 것만을 추구하고, 쉽게 정보를 얻을 수 있는 원천이 많아지다 보니 독서를미루고 온라인 콘텐츠를 주로 향유하게 됐다는 것이다. 독서 환경 독서 장애 요인은 현재 주로 개인의 영역에서 분석되고 있으나, 사실 그 근간..
[독서]" 2021년 국민 독서실태 조사 " from 문체부 문체부 독서 " 2021년 국민 독서실태 조사 " ㅇ (조사 시기) 2021.9.1.~ 2021.11.12. ㅇ (조사 규모) 총 9,320명(성인 남녀 6,000명, 학생 3,320명) ㅇ (조사 설계) - 조사 대상 : 성인(전국의 만 19세 이상 남녀), 학생(전국 초등4~6학년 학생, 중학생, 고등학생) - 조사 지역 : 전국 17개 시․도 - 조사 항목 : 독서율, 독서량, 독서시간, 독서 장애요인 등 - 표본 오차 : 95% 신뢰수준에서 성인 ±1.27%, 학생 ±1.79% ㅇ (주요 조사 내용) - 독서율 : 지난 1년간(‘20년 9월~’21년 8월) 일반도서(교과서, 학습참고서, 수험서, 잡지 제외한 종이책, 전자책, 오디오북)를 읽은 사람의 비율 - 독서량 : 지난 1년간(‘20년 9월~..
[JavaScript]ScrollY? versus pageYoffset? 브라우저 반영 때문에 차이 발생 결론은 구형 브라우저 신경안써도 되면 scrollY 쓰고, 구형 브라우저까지 신경써야 한다면 pageYoffset을 쓴다.아니면 조건문 걸어서 둘 다 쓰던지. 참조 https://studyhardgogo.tistory.com/186

티스토리툴바