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는 포함되지 않는다.

블로그에 일상을 쓰는게 너무 낯설고 이상하지만 tmi 마구 갈겨보겠다 오늘 출근 길에 ✨미니 건조기✨를 드디어 샀다 얏홍 얼른 와 🤍🫶🏻🎀😽 역대급으로 피곤한 오전을 보내고 거의 졸면서 점심을 먹기^^,,, 수면실 딱대 오후는 내내 회의여서 그래도 정신이 들었다. 꽤 오래 미뤄오며 진행 중이던 플젝이 베타 배포를 앞두고 있어서 떨린다 빨리 나왔으면 ~!~ 그래도 스프린트가 지나면서 CS 당번은 끝났다 ! 해방감 장난 아니고 기념으로 여섯시 칼퇴 갈겨 눈누 😇 끝나고는 또 동재 만났다^^ 판교에 매일 출근하는 친구는 동재 뿐,, 동재는 길에서 맨날 춤추는 부끄러운 친구지만 동재랑 데뷔하면 내가 비주얼 센터 할 수 있으니까 참고있다 오늘은 같이 하입보이 추다가 왜 안무 다 날려먹냐고 혼쭐났다,,참내 웃겨 진..

nest js 설치 npm i -g @nestjs/cli nest new {dir_name} nest js 기본 구조 src main.ts 어플리케이션 생성(root) = 기존 node의 index.js port 설정 app.module 진입점 controller,providers 등록되어있음. main에서는 app.module을 import app.controller end point, 각자 service의 method 호출, client request에 대한 응답 전송. @Get() 에는 (”/”) 가 생략되어있음: domain/ 접속 시 controller의 getHello 호출 app.service의 getHello 호출 app.service db와 연결 참고 eslintrc.js 타입스크립트 쓰..

2. 스택 & 큐 stack push: list.append(item) pop: list.pop(-1) peek: list[-1] 문제를 만났을 때 스택을 써야하는 것을 어떻게 파악할 수 있을까..? 오늘 공부한 파이썬 문법 리스트 마지막 원소 접근 시 -1 인덱스 사용 가능. js의 at(-1)과 같은 듯. listA = listB 는 참조 복사. (얕은 복사라고도 하는 듯 왜 얕은이지..?) listA = listB[:] 이게 값 복사, 깊은 복사 ord(char) ascii 코드 값 얻기 / chr(asciiCode) 아스키코드(number)에서 char로 변환 do-while 구문이 없다..! 삼항연산자: a = b if b > 0 else c == a = b > 0 ? b : c 리스트 초기화,..

자주 변하는 state와 props. state나 props의 종류가 많아지는데도 componentDidUpdate를 남용하면 매 렌더링마다 호출되기 때문에 성능에 영향을 줄 수 있다. loading과 같은 자주 변하지만, 매번 전 상태와 비교해주어야 하는 변수에 대해 조건부 렌더링을 하기 위한 방법이 이미 있었다!!! 일반적으로 이전 props와 차이 여부를 확인하고 state를 세팅하고자 할 때 prev 매개변수를 쓴다 코드를 바로 보자. class TestPrevProps extends React.Component{ componentDidUpdate(prevProps) { const { loading: prevLoading, name: prevName } = prevProps; const { loa..