회사에서 프로젝트 준비를 하면서 Js 의 프레임워크 라이브러리 등등 너무 많은것들을 머리에 쑤셔넣다보니 자바스크립트 동작에 대해 다시한번 정리가 필요하단 생각이 들었다. 바쁘다면 가장 아래로 스크롤 해서 결론부터 보자. TDZ 일시적인 사각지대 란 뜻으로 스코프 시작 지점부터 초기화 시작 지점까지 구간을 말한다. 뭔말인지 잘 모르겠다. const 와 let이 등장하면서 부터 사실 var 나 functuon() 는 잘 사용하지 않았다. var 나 function(){} 의 경우 재선언이 가능하다는 단점도 있고 ( 코드 길어져서 변수이름 똑같게 쓰면... ) // 다른코드 // 다른코드 // 다른코드 // 다른코드 // 다른코드 // 다른코드 var 변수 = "변수"; console.log(변수); 이런식으..

React 18 버전에서 컴포넌트별 lazy loading 을 구현하다 rabbit hole 에 빠져 허우적 댄 경험을 까먹지라도 않으려고 포스팅을 남긴다. 그 전에 race condition 이 뭔지 알아보고 가자 간단하게 말하면 두 개 이상의 스레드가 하나의 공유 자원에 접근해서 일어나는 상태 ( 또는 그로 인해 발생하는 버그 ) 라고 생각하자 더 쉽게 두 개 이상의 스레드 = 유저가 두개의 검색을 실행하면 fetch('your_url?example=예시') 이런게 두개 실행된다. 하나의 공유 자원 = fetch 로 받아온 data 로 뿌려지는 ui JS 가 두 개 이상의 스레드? 우리가 쓴 코드는 싱글 스레드로 실행되지만, 브라우저는 멀티 스테르도 작동한다. 버그가 발생하는 코드 예시 const S..

생활코딩의 NEXT.js 13 강의를 듣다 data 를 caching 하는 부분에서 공식문서를 읽다 Headless CMS 의 의미에 대해 다시한번 학습해야 할 필요성을 느껴 알아보게 되었다 Headless 를 직역하면 머리가 없다는 비유적인 표현이다. 웹사이트를 구성할때 반드시 데이터가 필요한데, Head 는 데이터를 보여줄 수 있는 수단 ( web, ios ,android .. ) 이고 Body 는 컨텐츠를 의미한다. 여기서 유추할 수 있듯 Headless 는 데이터를 보여줄 수 있는 수단을 유동적으로 바꿔끼울 수 있다는 것을 의미한다. 요약하면 데이터와 View 를 분리하는것이 핵심이다. 흔히들 알고있는 Restful API 로 컨텐츠에 접근, 수정해 사용한다. 기존의 방식의 CMS 는 하나의 서비..

https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오에서 서비스하는 Developers 사이트에 회원가입을 하면 카카오에서 제공하는 여러가지 API 오픈소스를 활용할 수 있습니다. 내 어플리케이션에 들어가 아이디별로 제공하는 키를 확인합니다. Javascript 의 경우 가장 위의 네이티브 앱 키를 code에 삽입합니다.

https://www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.org https://nuli.navercorp.com/tool/nwagon/exp NULI 적용 예 Radar Chart 스파이더 또는 웹차트 이외에도 여러 다른 이름으로 불리우고 있는 radar차트는 3개나 그 이상의 데이터를 한번에 보여주기에 유용하게 쓰이며 각각의 데이터가 가져야 하는 목 nuli.naverco..

stop() 메서드 안에는 두가지 매개변수가 존재한다 clearQueue() , goToEnd() 매개변수의 값을 지정하지 않을 시 두가지 값은 디폴트 값인 false 로 처리된다 첫번째 매개변수인 clearQueue 를 true 값을 준다면 animate() 메서드가 동작하는 시간 도중에 애니메이션이 중지하게 된다. 두번째 매개변수인 goToEnd() 에 true 값을 준다면 animate() 메서드에 설정한 동작이 모두 종료된 뒤 애니메이션이 중지하게 된다. animate() 메서드를 사용한 버튼을 빠르게 연속클릭한다면 animate() 의 동작시간보다 클릭속도가 빨라 stop() / clearQueue() 를 사용한다 해도 애니메이션이 무너지게 된다. stop() 메서드에 두가지 매개변수를 모두 t..