TIL(Today i learned) (79) 썸네일형 리스트형 [TIL-2022.09.30] 테스트코드 작성의 어려움 1.알고리즘 스터디 : 8시30분 - 9시30분까지 알고리즘 스터디를 진행 2.오늘 가장 먼저 한 일은 테스트 코드를 작성하는 것 : 먼저는 멘토님께서 작성해주신 테스트코드 브런치를 합쳤더니, 테스트를 통과하지 못하는 것들이 발견되었다. 그래서 그 부분들을 먼저 수정했다. 음... 이번에는 이런 에러를 만났다. 진짜 테스트 코드 작성하는게... 뭔가 너무 어색하고 힘든 느낌이다. 우선 저 에러 문구를 보면, 내가 새롭게 작성한 내용중에 자바스크립트 문법에 어긋나는 것이 있나보다. 음.. 아니면 타입스크립트 때문에 뭔가 트렌스파일을 못하는 것인지. 우선 에러 문구 하단에서 안내해주는대로 타입스크립트와 관련된 설정들을 해주었다. 그래도 해결은 안되었다. 여차여차해서 스택오버플로우를 찾았고, jest.conf.. [TIL-2022.09.29] keydown 한글입력 에러해결 feat. compositionEnd 1.알고리즘 문제풀기 : 8시30분-9시30분 아침 알고리즘 스터디 진행 2.해시태그 인풋 만들기 : 오늘은 아침에 마저 해시태그 인풋을 만들었다. 타입때문에 잠깐 애를 먹고 있다. if (tags) setTags([...tags, value]); else setTags([value]); 이런식으로 set해주게 만들었지만, 뭔가 부족하다고 생각한다. 조금 더 고급스러운 방법은 없을까. 3.selectionEnd 속성 : evergreen이라는 ui 라이브러리에서 selectionEnd라는 input 이벤트 속성을 사용하는 것을 발견했다. 이것이 뭔가 확인해보니, input이나 textarea 내부에서 마우스커서의 위치가 어디었는지를 확인하게 해주는 그런 이벤트 속성이었다. evergreen은 이 속성을 .. [TIL-2022.09.28]jest.SpyOn, createPortal 테스트코드 작성 1.get, query, find By의 차이점 : 테스트 코드 작성 중 get, query, find By의 차이점에 대한 궁금증이 생김 : getBy...: Returns the matching node for a query, and throw a descriptive error if no elements match or if more than one match is found (use getAllBy instead if more than one element is expected). queryBy...: Returns the matching node for a query, and return null if no elements match. This is useful for asserting an e.. [TIL - 2022.09.27]nextjs external image 사용하기 1.오늘은 리액트 블로그에 있는 18 버전 업그레이드에 대한 글을 번역하는 작업을 했다. 영어 공부도 하고, 리액트 18에 대해서도 공부할 겸 번역을 쭉 해볼 생각이다. 2.게시글 작성 페이지에서 모달을 만들었다. 모달에서 제목, 해시태그, 컨텐츠, 썸네일, 설명글을 모두 서버로 전달하도록 리팩토링했다. 3.몽고디비 연결하는 부분 수정 : 이전에 getStaticProps에서 몽고 디비로 바로 연결하는 부분이 이상하다고 생각되어서 코드를 수정했었다. 수정한 코드는 api routes에서 바로 몽고디비로 쿼리보내고 받아온 정보를 getStaticProps 안에서 요청하는 것이었다. 그런데 조금 찾아보니 getStaticProps 안에서 바로 api routes로 요청하지 말라는 글을 공식문서에서 확인했다... [TIL-2022.09.26] nextjs image upload 오늘 한 일 : 1.aws에 image 업로드하기 2.image 업로드하는 컴포넌트 작성 3.MDN으로 기초다지기 리액트 렌더링 횟수 추적하기 질문이 있다. import React, { useState } from 'react'; import { Modal } from 'src/components/atoms'; import { ImageUpload } from 'src/components/atoms'; export const CreateArticleModal = () => { const [imageUrl, setImageUrl] = useState(); return ( ); }; /* eslint-disable @next/next/no-img-element */ import React from 'reac.. [TIL-에러노트] The policy failed legacy parsing 넥스트js에서 이미지 업로드 작업을 하는 중이다. 몇가지 자료를 찾을 수 있었다. https://next-s3-upload.codingvalue.com/ Next S3 Upload The easiest way to upload files from your Next.js app to S3. next-s3-upload.codingvalue.com https://betterprogramming.pub/how-to-upload-files-to-amazon-s3-from-nextjs-app-b7ef1909976b How to Upload Files to AWS S3 From NextJS App Without the struggle with CORS policy. betterprogramming.pub 우선 nex.. [TIL- 2022.09.24] 웹폰트 최적화 1. 폰트 최적화 next js에서 웹폰트를 최적화 하는 방법을 찾고 적용 시키고자 자료를 검색하는 시간을 가졌다. https://nextjs.org/learn/seo/improve/fonts Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org nextjs에서는 사실 기본적으로 font 최적화하는 방법을 제공해주고 있었다. _document 파일 안에 nextjs가 example에서 보여주는 대로 코드를 넣어주면된다. 외.. [2022.03.11 - TIL] 브런치 생성과 생산성 향상의 연관성 | 항해99 5기 오늘은 생산성이 꽤 높았던 하루다. 그 이유를 생각해보자면, 1.작업을 하기 전에 해야 할 일 리스트를 정리했다. 2.정리한 리스트대로 브런치를 생성했다. 3.생성한 브런치 안에서는 무조건 브런치에 해당하는 내용만 작업하도록 했다. 4.하나의 브런치 안에서 30분 안에 최대한 끝내려고 했다. (물론 그렇게 안된 브런치들도 몇개 있었지만,,) 이것과 관련된 내용을 글로 쓰면 재밌을 것 같다. 제목은 '브런치를 잘게 나누는 것이 생산성을 높이는 이유'. 언제쓰지.. 아무튼 이렇게 했더니 생산성이 매우 높아졌다. 심지어 오늘은 머리를 풀로 써서 그런지 지금 약간 토할 것 같은 기분이 들기도 한다. 오늘 여러가지 작업을 했지만, '이거했다' 말할 수 있는 적당히 큼직한 작업을 기록해보자면, 1)v8n 이라는 라.. 이전 1 2 3 4 5 ··· 10 다음 목록 더보기
