목록분류 전체보기 (48)

느릿늘있

[TIL] Naver FE News 2022-02

[TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ] 1. Web 3.0은 무엇인가? https://itnext.io/what-do-you-need-to-know-about-new-era-of-internet-web-3-0-as-a-frontend-developer-55e51f2cd03f 🔥What You Need to Know About the New Era of Internet Web 3.0 As a Frontend Developer What the future of Internet Web 3.0 looks like..
개발공부 2023. 5. 20. 15:51
[SW_개념] 주니어 개발자가 이해한 동기/비동기

한 줄 정리싱크가 맞으면 동기(synchronous)고 싱크가 안맞으면 비동기(asynchronous)다. 동기/비동기 구분  동기/비동기 개념은 Javascript 개발자라면 무조건 들어봤을 개념이다. 많은 블로그에서 다루고 있는 주제이고 관련하여 많은 글들을 읽어 보고 나의 주관을 정리해 보았다. 반론은 언제나 환영이다.  사전적으로 보면 동기와 동시를 같은 개념으로 오해하기 쉽다. 이 두 단어의 차이를 설명하기 위해 비유를 하나 들어보겠다. 영상과 자막이라는 두 기능을 구현한다고 생각해보자. 이 때, 단순하게 생각해서 영상과 자막의 싱크가 잘 맞으면 동기고 싱크가 안 맞으면 비동기다. 이 비유에서 말하고자 하는 포인트는 영상과 자막이라는 두 기능이 동시에 동작하고 있느냐는 동기/비동기를 구분짓는 개..
개발공부 2023. 5. 13. 14:37
[nextJS] Google Map API 성능 최적화 경험 기록

1. 현상 사이드 프로젝트로 진행 중인 머글래 웹 모듈 4번 작업물인 구글 맵 api를 활용한 지도에 리뷰 표시하는 페이지를 만들 던중 발생한 이슈다. 아래 링크에서 현재 잘 동작하고 있는 것을 확인할 수 있다. https://moglet-web-module.vercel.app/4_googleMaps Moglet Web Module moglet-web-module.vercel.app 처음에는 모든 기능을 index 페이지에 다 몰아 넣고 기능이 동작 가능하게만 만들어서 돌렸다. 그랬더니 노트북 팬이 미친듯이 돌아가고 브라우저는 멈추고 작업관리자 CPU는 100%를 찍고 vercel에 배포는 됬으나 사이트가 먹통이 되어 버렸다. 성능에 문제가 있다는 것을 인지하고 이를 최적화 하기 위해 여러 가지를 시도하..
삽질로그 2023. 5. 7. 00:08
[TIL] Naver FE News 2022-01

[TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ] 1. 자바스크립트는 왜 프로토타입을 선택했을까 https://medium.com/@limsungmook/자바스크립트는-왜-프로토타입을-선택했을까-997f985adb42 자바스크립트는 왜 프로토타입을 선택했을까 프로토타입으로 검색하면 으레 나오는 서두처럼 저 또한 자바스크립트를 처음 접했을 때 가장 당황스러웠던 게 프로토타입이었습니다. medium.com JS는 왜 클래스가 아니라 프로토타입을 쓰는 걸까에 대한 의문 프로토타입을 이해하려면 클래스에 대해 우선 알아야 함..
개발공부 2023. 5. 5. 16:53
[JS] 참조 객체 비교 에러 : This condition will always return 'false' since JavaScript compares objects by reference, not value.

1. 현상 socket chatting 프로젝트를 만들던 중 data protocol을 체크하는 단계에서 JS의 Object의 keys메서드를 활용하여 프로토콜 체크를 진행하려 하였다. if (Object.keys(data) === [key1, key2, ...]) {} " This condition will always return 'false' since JavaScript compares objects by reference, not value. " " 이 조건식은 항상 'false'를 반환한다. JS가 값이 아닌 참조 객체를 비교하기 때문이다. " 2. 원인 array1 = [1, 2, 3] / array2 = [1, 2, 3]이라고 하더라도 참조하는 주소 값이 다르기 때문에 이 둘의 일치 여부를..
삽질로그 2023. 4. 2. 17:57
[react query] 응답 status는 success인데 data가 undefined인 경우

1. 현상 useQuery 요청 후 서버에서 api 응답 status는 success인데 data가 undefined인 상황 브라우저 네트워크 로그 확인 후 해당 url로 접근하면 JSON 데이터를 확인할 수 있음(데이터는 정상적으로 받아 옴) 2. 원인 api 요청에 return 값이 없음 export const apiGet = (req) => { axios({ method: 'get', url: '/api/aaa/aaa/aaa', params: { a : ..., b : ..., } }) } 습관적으로 화살표 함수를 만들면서 중괄호를 쳐버렸다. 화살표 함수는 중괄호를 쓰지 않으면 return을 생략할 수 있다. () => axios; (O) 그래서 axios문을 쓸 때 보통 중괄호와 return을 생..
삽질로그 2023. 3. 28. 22:28
이전 Prev 1 ··· 5 6 7 8 Next 다음