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..

자꾸 헷갈리는 자식 선택자 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는 포함되지 않는다.

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 타입스크립트 쓰..

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