본문 바로가기
반응형

분류 전체보기202

스코프, 클로져(Closure) 스코프, 클로져 스코프 변수이름,함수이름,클래스 이름과 같은 식별자가 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없는지 결정되는것을 스코프라고한다. 스코프체인 지역스코프에서, 전역 스코프로 현재 참조해야하는곳에 변수가 없으면 점점 외부함수, 전역으로 나가면서 찾아내는것을 스코프체인 이라고한다. 최종적으로 전역에도 없으면 레퍼런스 에러를 출력하다. 그리고 하위에서 상위로는 참조하지만 상위에서 하위로는 참조하지않는다. 스코프 레벨 1.블록레벨 ->if,for,함수.. 2.함수레벨 ->함수만 상위 스코프 함수가 호출되는 시점에결정 ->동적스코프 함수가 정의되는 시점에 결정 ->정적스코프(렉시컬스코프) 자바스크립트 함수는 만들어지면 내부슬롯에 상위 스코프 참조를 저장한다. 클로져 중첩함수가 외부.. 2022. 4. 6.
axios를 불러온 변수를 이용해 하위 컴포넌트에서 또 axios사용하기 검정 테두리를 상위 컴포넌트로 보고 파란 테두리를 하위 컴포넌트로 본다. 그리고 그 안에 또 빨간색으로 하위컴포넌트가 있다. 위 페이지는 현재 라면랭킹 데이터가 없지만, 상위 컴포넌트에서 라면 랭킹 1~4위의 id값을 불러온다. 그리고 불러온 id값을 기준으로 1위부터 4위까지의 이름과 제조사를 4번 불러오게된다. 즉 요약하면 1. 랭킹 1~4위의 ID값을 받음 2. 그리고 그 ID값을 이용해 이름,제조사를 4번 불러오는것이다. 근데 랭킹을 이런방식으로 구현하는건 절대 좋지않다고 생각하지만, 지금 백엔드 개발파트친구의 일정상 어쩔 수 없다고 생각한다. 예를들어 랭킹 100위까지 있다면? 사용자 한명당 한페이지에서 100번의 API요청이 필요한거다. 백엔드에서 1~4위의 아이디 + 이름,제조사 까지 한번에.. 2022. 4. 2.
axios 여러개 요청하기 (멀티 리퀘스트) axios를 사용하다보면 get도 그렇고 post도그렇고 한번에 여러 api요청을 보내야 할 때가 있다. 그때마다 그냥 2~3거나 1~2개면 useEffect를 두번쓰거나해서 가져오곤 했지만 그냥 한번에 멀티리퀘스트를 보내는 방법이 있다. axios.all을 사용하는 것이다. function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // Bo.. 2022. 4. 2.
img태그 onError 처리하기 (대체 이미지) Next.js같은 경우는 Image태그를 사용하라고 권장하지만 react와 next.js에서 img태그를 사용할 시에 대체 이미지 처리하는 방법을 기록해둔다. 상단의 이미지와같이 존재하지 않는경우 대체이미지를 띄우게 할 수 있는데 단순 삼항연산자 조건문으로 설정해도 되겠지만 그래도 혹시나 파일이 없을 때 대체 이미지를 띄우는 방식을 알아두자, 특히 외부 링크로 사진을 가져올 때 필요할것 같다. 이와같이 사용한다고 치면 src = 이미지링크 alt = 이미지가 없을시 나타내줄 설명 그리고 onError 부분이 본 링크 이미지가 없을때 대체 해서 실행해주는 부분이다. react와 next.js에서는 따로 함수를 만들어 사용해준다. const default_img = "ramen/default.png"; co.. 2022. 4. 2.
웹사이트 폰트 바꿔 사용하기 (feat.구글폰트) 웹 사이트에서 폰트의 힘은 대단하다. 폰트하나로 디자인도 가능하고 느낌이 확 달라지기 때문, 구글 폰트를 애용하는 편이다! 저작권도 확실히 표기되어있고 단순히 link태그나 import해와 쉽게 사용할 수 있다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 이렇게 구글 폰트 사이트로 들어가서 원하는 폰트들이 있으면 클릭해서 들어가서 하단으로 내려가 +Select this Style 를 클릭해준다. 그러면 우측에 이와같이 추가한 폰트들을 한번에 사용할 수 있게 알아서 코드를 만들어주고 link태그를 가져와사용하거나 Next.j.. 2022. 4. 2.
파비콘 만들어주는 사이트 (favicon) https://www.favicon.cc/ favicon.ico Generator Preview Favicon in original size: www.favicon.cc 브라우저 상단의 이러한 이모티콘? 느낌의 그림들을 파비콘이라고 한다. 해당 파일을 만들어주는 사이트다. 직접 도트를 찍어서 만들 수 도 있고 그림파일을 업로드해 변환시켜서 만들어 주기도 한다. 유용하게 사용하고있다. 사용방법도 매우쉽고 당연히 무료! 유용하게 쓰고있다. 2022. 4. 2.
반응형

티스토리툴바