- 전체보기(140)
- 코딩테스트(17)
- 프로그래머스(17)
- nextjs(9)
- three.js(7)
- canvas(6)
- html5(6)
- 인증(4)
- ThreeJS(4)
- three(4)
- React(3)
- Camera(3)
- 리액트(3)
- async(2)
- Scene(2)
- 클로저(2)
- 브라우저 렌더링(2)
- layout(2)
- reflow(2)
- transform(2)
- next.js(2)
- DOM(2)
- File-based Routing(2)
- 부트캠프(2)
- CSSOM(2)
- typescript(2)
- Renderer(2)
- CSR(2)
- SSR(2)
- zustand(2)
- animation(1)
- mbti테스트(1)
- 정규표현식(1)
- React.memo(1)
- 서버 사이드 렌더링(1)
- airbnb(1)
- 렌더링 최적화(1)
- modernizr(1)
- 위장(1)
- 행렬 테두리 회전하기(1)
- object(1)
- 배열(1)
- useRef 타입(1)
- spotLight(1)
- position(1)
- hydration(1)
- proto(1)
- promise(1)
- video(1)
- useFetch(1)
- 커스텀 훅(1)
- 데이터 모킹(1)
- 리페인트(1)
- scale(1)
- environment(1)
- link(1)
- 함수형업데이트(1)
- shadow(1)
- https 서버(1)
- framer-motion(1)
- refresh-token(1)
- 쿠키옵션(1)
- http(1)
- bind(1)
- academind(1)
- 문자열 압축(1)
- 호이스팅(1)
- 후보키(1)
- 프론트엔드 실무 가이드(1)
- LifeCycleMethod(1)
- image(1)
- 객체 키 타입(1)
- 세션(1)
- 쿠키(1)
- mbti 테스트 만들기(1)
- FROM(1)
- 캔버스(1)
- 코딩 강의(1)
- perspective camera(1)
- oAuth(1)
- 조은(1)
- 메뉴 리뉴얼(1)
- 브라우저(1)
- Index(1)
- useInput(1)
- 프로퍼티 섀이딩(1)
- config-airbnb(1)
- https 서버 구현(1)
- 알고리즘(1)
- create-next-app(1)
- useRouter(1)
- HemisphereLight(1)
- NextJS 라우팅(1)
- 튜플(1)
- csrf(1)
- 뉴스 클러스터링(1)
- Prototype(1)
- await(1)
- quaternion(1)
- storybook(1)
- nest.js(1)
- Nested Page(1)
- draw(1)
- 애니스크립트(1)
- oauth2(1)
- 솔트(1)
- 후기(1)
- match(1)
- pageTemplate(1)
- defaultProps(1)
- 비동기(1)
- 괄호변환(1)
- Repain(1)
- Dynamic Route Data(1)
- 렉시컬 스코프(1)
- JavaScript(1)
- 사이드프로젝트(1)
- NextJS12(1)
- Received `true` for a non-boolean attribute X(1)
- 타입스크립트(1)
- 포트폴리오(1)
- Github 소셜로그인(1)
- ESLint(1)
- Prettier(1)
- 플래그(1)
- INDIRECT(1)
- 이벤트 객체 타입(1)
- 프린터(1)
- access token(1)
- 정적 사이트 생성(1)
- iferror(1)
- framer(1)
- 클라이언트 사이드 렌더링(1)
- 커스텀훅 예시(1)
- Github 로그인(1)
- orthographic camera(1)
- https(1)
- 짝지어 제거하기(1)
- pathname(1)
- const(1)
- let(1)
- var(1)
- 구글시트(1)
- Mock Service Worker(1)
- fragment(1)
- 이벤트 핸들러 타입(1)
- 소셜 로그인(1)
- history 타입(1)
- shallow(1)
- context(1)
- 패스트캠퍼스(1)
- Fullstack Capabilities(1)
- useState 타입(1)
- Group(1)
- useContext(1)
- useMemo(1)
- useRef(1)
- this(1)
- setInterval(1)
- 프로젝트회고(1)
- 코드스테이츠(1)
- 솔로프로젝트(1)
- 와플(1)
- 강의콘텐츠(1)
- lightHelper(1)
- gatsbyjs(1)
- 화살표함수(1)
- 괄호 변환(1)
- 리플로우(1)
- 파싱(1)
- material(1)
- object.entries(1)
- mbtious(1)
- useCallback(1)
- 콜백 헬(1)
- MSW(1)
- 스프레드시트(1)
- repaint()(1)
- session.save()(1)
- getStaticPaths(1)
- 구명보트(1)
- preventDefault(1)
- upgrade NextJS(1)
- ambientLight(1)
- 코딩 독학(1)
- 걸그룹 mbti(1)
- custom hook(1)
- animation loop(1)
- 리액트 라이브러리(1)
- Shadows(1)
- useAlert(1)
- 프로젝트(1)
- 캔버스 사이즈 설정(1)
- jest(1)
- geometry(1)
- Defer(1)
- getStaticProps(1)
- NestJS(1)
- ssg(1)
- spreadsheet(1)
- 오픈채팅방(1)
- Mesh(1)
- 기능개발(1)
- 소수 찾기(1)
- 토큰(1)
- life cycle(1)
- 강의추천(1)
- regexp(1)
- 영어 끝말잇기(1)
- 커스텀훅(1)
- 함수 타입(1)
- if(1)
- ES6(1)
- Light(1)
- 거리두기 확인하기(1)
- 수식 최대화(1)
- WebGL(1)
- 패턴(1)
- 오버라이딩(1)
- closure(1)
- The Red(1)
- NextJS 장점(1)
- 해싱(1)
- rotation(1)
- 프리코스(1)
- 생명주기(1)
- motion(1)
- be mbtious(1)
- contextAPI(1)
- 고해상도(1)
- apply(1)
- call(1)
- api 타입(1)
- Dynamic Pages(1)
Jest 공식문서 읽으며 메모 🪶
toBe는 값과 타입이 동일한지 모두 검사, 객체나 배열의 참조값까지 비교, toEqual은 값만을 비교하며, 객체나 배열 내부의 값이 동일한지 검사toEqual recursively checks every field of an object or array.아래와 같은
⛓️ 클로저 실제 활용 사례! ⛓️
회사에서 Form을 만들어서 문의를 받을 일이 점차 많아질 것으로 예상했다.때문에 셀렉트박스나 체크박스 등 다양한 인풋과 인풋에 해당하는 핸들러를 하나씩 만들어주기보다는 인풋도 유형별로 만들어두고, 각 유형에 따른 핸들러도 함수 하나로 작성해두고 싶었다!예를 들어, 기
Zustand 렌더링 최적화
최근 프로젝트 내의 ContextAPI를 모두 Zustand와 CustomHook 조합으로 갈아치우는 작업을 하였는데요. Zustand를 처음 도입해보느라, 엉성하게 코드를 작성한 것이 결국 작은 화를 불러일으켰습니다.보이시나요..? 이 아름다운 렌더링의 향연...!기
PageTemplate 정리하기! (with useRouter)
회사의 홈페이지는 회사 전반을 소개하는 사이트이다. 그만큼 방대한 정보를 담아내는 것이 코드스테이츠 웹사이트의 임무이다. 다양한 내용을 담아야 하는 만큼 사내 다양한 팀과 협업하게되고, 요청사항 역시 다양하다. 많은 개발자들이 거쳐가기도 했고, 일부 페이지는 외주를 통
[Error-log] ESLint: TypeError: this.libOptions.parse is not a function
https://stackoverflow.com/questions/73509984/eslint-typeerror-this-liboptions-parse-is-not-a-function
[Error-log] 특정 프로젝트에서 다른 노드버전으로 실행하기
우리 회사의 프로젝트 중 하나가 Node.js 14 버전을 사용중인데, 개인 프로젝트를 위해 GatsbyJS를 설치했더니 위와 같은 에러가 발생하였다. 내 개인 프로젝트에서만 node v18을 쓸 수 없을까 고민했는데, 당연히 쓸 수 있다! 해당 포스팅을 참고하여, .
How to copy ImageData
ImageData는 일반 객체와 달리 JSON.parse, JSON.stringify 조합으로 깊은 복사가 불가능하다.아래와 같은 방식을 활용해 복사하도록 한다!
[Error-log] framer-motion 설치 에러
위와 같이 변경하였을 때 Could not find a declaration file for module 'framer-motion/dist/framer-motion' 에러 발생src 폴더 하위에 framer-motion.d.ts 파일을 만들어주고 아래와 같이 작성
개발자의 SpreadSheet 학습기 🍋
금주에는 회사에서 어쩌다보니, (정말 어쩌다보니...) SpreadSheet를 통한 알림톡 발송 시트 만들기 업무를 맡게 되었습니다. 이전에 교육엔지니어로 잠깐 근무하면서 SpreadSheet에서 제공해주는 AppScript를 활용하여 간단한 자동화 툴을 만든 적이 있
🧖🏻♂️ NextJS 12 업데이트를 해보았읍니다 🧖🏻♂️
내가 회사에서 다루고 있는 제품은 크게 세 가지로 분류해볼 수 있는데, 그 중 하나인 우리 회사 웹사이트(랜딩페이지)는 NextJS를 베이스로 하고 있다. NextJS 도입을 딱히 내가 결정한 것은 아닌데, 나보고 선택하라고 했어도 같은 선택을 했을 것이다. 유저들과의
IE를 지원하지 않아도 된다면 가장 쓸모 있는, 암기노트📝
flex-direction의 row-reverse와 column-reverse 옵션이 있음.order 속성을 통해서 개별 자식 요소들의 순서를 변경할 수 있음. 자기 자신의 위치를 기준으로 + 혹은 - (Order의 value 정확히 어떤 규칙?)align-self 일
레이아웃, 애증의 플로팅 암기노트📝
컬럼 배치를 위한 속성이 아니다. 본래는 이미지와 텍스트를 흐름배치하기 위한 속성.요소에 플로팅을 적용하면, 주변 텍스트(혹은 인라인 요소)는 흐르게 만들지만, 주변 박스 요소들은 플로팅된 요소와 겹치게 된다.플로팅 요소의 너비는 수축하고 일반적인 흐름에서 벗어난다.
레이아웃, 여백의 비밀 암기노트📝
content-box일 때는 Width값과 height값을 적용할 때 패딩과 border는 제외된다.border-box일 떄는 width, height값 안에 패딩과 border가 포함된다.vw: viewport widthvh: viewport heightvmax: v
레이아웃, 배치의 비밀 암기노트 📝
position을 absolute나 fixed로 변경하거나 float 속성을 left나 right로 변경하면, 자동으로 display가 block으로 변경된다.display inline을 사용하면, 너비와 높이, 수직마진을 적용할 수 없다. (수직패딩도 적용은 되나 다