imgyuzzzang

요즘 다시 웹 기초 스터디를 하고 있는데 ,3년동안 개발일하면서 머리에 둥둥 떠다니던 지식들을 라벨링하고 연결짓고 정리하는 기분이라 너무 좋다은근 놓치고 있던 부분도 있고 다시 조금씩 정리에서 블로그 포스팅해 볼 예정 💪 개발자 90%가 모르는 자바스크립트 동작원리 (Stack, Queue, event loop)시작에 앞서 애플코딩님의 요런 유튭 간단히 지하철에서 보기 편하다 추천주니어 개발자가 자바스크립트 동작 원리 기초적인 개념 재밌게 잡을 때 보기 좋을 듯 1.  자바스크립트의 런타임 환경자바스크립트 런타임에도 다양한 종류와 버전이 있으며, 각각의 런타임은 자바스크립트 코드를 실행하는 환경과 규칙을 정의한다. 자바스크립트 엔진(V8 등)은 싱글스레드로 동작하고, 런타임환경(브라우저 등)이 멀티스레..

next 13부터는 완전 해결되어 img 태그만 추가되지만 아직 안 쓰고 있으니^^ 스킵 Next 버전따라 해결방법 다름! 버전 확인 또는 맞춰서 사용할 것 v 12.1.1 ~ 12.2.0 // next.config.js module.exports = { experimental: { images: { layoutRaw: true } }, // Rest of the config }; v 12.2.x // next.config.js module.exports = { experimental: { images: { allowFutureImage: true } }, // Rest of the config };import Image from 'next/future/image' v 12.3 부터는 im..

티하 (티스토리 하이..^~^) 드디어....!! 리팩터링 2판을 다 읽고 정리 공유하러 컴백 후후 내용 중에 당연한 부분도, 공감되는 부분도 있지만 너무 옛날 책이라 오잉 이건 좀 별론데 하는 부분도 있었다. 특히 나는 JS 함수형으로 쓰는걸 좋아하는 사람인디 저자는 OOP 러버이신 것 같았다... 후후 끝으로 갈수록 결국 클래스 어떻게 상속하고 어떻게 쓸지 이런거에 집중되는 너낌 총 12 챕터로 되어있고 너무 길어서 두 번에 걸쳐서 포스팅 예정 오늘은 1~6 챕터 내용 정리해보가쓰 (5챕터는 내용 없어서 skip) 챕터 제목은 책과 다를 수 있는데, 이유는 너무나도 번역체여서 대충 내 말로 바꿔봤당 유후 중간 중간 회색은 그냥 내 생각 껴놓기 Chapter #1 리팩터링 첫 번째 예시 프로그램 기능 ..

츨처: https://github.com/vercel/next.js/issues/13209#issuecomment-633149650 세 줄 요약 object ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types. 오류 발생 NextJS 에서는 getInitialProps, getServerSideProps, getStaticProps 의 리턴 값으로 plain Object만을 허용 특정 (Date, Map, Set) 타입을 퍼포먼스 이슈로 인해 지원하지 않음 해결 방법 JSON.parse(JSON.stringify(객체))사용 safe-json-stringify 라이브러리 사용 (1번이랑..

자꾸 헷갈리는 자식 선택자 first-child 는 자식한테 거는거임… ul 안의 첫번째 li 선택하려면 ul li:first-child attribute selector 특정 attribute을 가지고 있는 element data-mkt-id를 가지고 있는 button 이라면 button[data-mkt-id] “example”을 포함하는 href를 가진 a 태그라면 a[href*="example"] ~ 으로 끝나는 것 : $="~" ~ 문자열을 한 번 이상 포함하는 것 : *="~" ~ 포함하는 것(클래스처럼 공백으로 구분되는 attribute) : ~="~" general sibling combinator 특정 선택자 뒤에 나오는 선택자 고르기! img ~ p 선택자로 하면 3, 5번째줄 p가 선택..

자꾸 까먹어서 박제 const time = null; const name = "hi"; const ob = { ...(name && {name}), ...(time && {time})}; object를 변수로 구성하고 싶은데 해당 변수가 존재하지 않는 값인 경우에는 아예 key 조차도 넣지 않고 싶을 때가 있다. destructure인 ... 로 괄호 감싸주고, time이 참이면 {time} 이 괄호 값으로 들어가게 된다. time이 거짓이면 time이 괄호 값으로 들어가면서 해당 key-value는 포함되지 않는다.