나의 코딩일지

엔터 \n엔터 \n엔터 \n엔터 \n얍\n\n얍\n\n얍 react-quill을 에디터로 사용하고 있고, 자동으로 태그를 넣어주거나 이 필요해 innerHTML을 사용해야 했다.interface Props { htmlContent: string;}const HtmlRenderer = ({ htmlContent }: Props) => { return ( );};export default HtmlRenderer; 전달받은 내용을 HTML로 반환하기 때문에, 태그를 인식할 수 있다. 하지만 HTML을 인식하기 때문에, 사용자가 의도치 않은 태그를 삽입하여 XSS 공격을 받을 수 있다.클릭해주세요 이런 방식으로 에디터에 입력하면, 실제로 태그로 인식하여 실행이 된다.이를 방지하기 위해서 사용자가..

피그마 UI를 보다가, 기능정의서로 돌아가서 어디로 이동시켜야하는지, 어디서 모달이 열려야하는지 확인하고, 다시 피그마 UI로 돌아가면서 코드를 작성했다. 초반에는 이게 당연한 것이기 때문에 번거로워도 감당해야하는 부분이라고 생각했다. 하지만 UT 테스트를 진행하면서 UI와 기능이 생각보다 많이 바뀌었다. 그러다보니 변경된 기능과 기존의 기능이 헷갈려서 전부 다시 확인해야하는 일이 있었다. 애초에 해커톤 때 기능을 반영하지 못한 부분도 많아서 업보긴 했지만, 기존의 기능을 만날 때마다 불편함이 있었다. 그러다 유닛 테스트처럼 케이스를 명시해보자는 마음으로 PlayWright를 도입했다. 사실 최근 인기있는 라이브러리라는 말+스토리북을 이김에 한번 사용해본 것도있다..  도입한 이유기능정의서가 초반에 엑셀..

올해 초까지는 프론트엔드에서 왜 테스트 코드를 작성해야하는건지 이해하지 못했다. 브라우저에 띄워서 확인하면 되는걸 굳이 비용들여서 테스트 코드를 작성하는게 단순히 유행이라고만 생각했다. 하지만 이약저약에서부터 분업이 아닌 협업을 추구하면서 테스트 코드의 의미를 이해할 수 있었다.테스트프로그램을 실행하여 오류와 결함을 검출하고 애플리케이션이 요구사항에 맞게 동작하는지 검증하는 절차내가 작성한 코드가 내가 의도한 대로 올바르게 동작하고 기능하는지 검증하는 것 => 테스트 코드를 통해 프로덕트의 안정성과 유지 보수성을 향상시킬 수 있다테스트 코드의 종류종류도구설명Static Test(정적 테스트)Typescript, eslint 등구문오류와 타입오류를 감지해 알려줘서 런타임 에러를 방지할 수 있다.Unit T..

CRA로 한게 아니라서 웹 페이지에 렌더링하려면 추가설정을 해줘야한다. 일단 확인하기 위해 CRA를 통해서 확인해줬다.import { Heatmap } from 'react-custom-calendar-heatmap';const Test = () => { const values = [ { value: 10 }, { value: 11 }, { value: 15 }, { value: 16 }, { value: 10 }, { value: 20 }, { value: 50 }, { value: 10 }, { value: 14 }, { value: 33 }, { value: 22 }, ]; return ( );};export..

디벨롭을 해야하는데, 아무리봐도 프로젝트 구조가 거슬렸다. 일단 component부터 시작해서, 그 안에 도메인별로 폴더를만들어 놓은게 은근히 계속해서 신경쓰이게 만들었다. 그냥할까 고민하다가 리팩토링 결정~   페이지 정리도 안된 상태에서 도메인을 넣어버리니까 페이지 이름변경하는게 뭔가 전체적으로 힘들었다. 특히 두명이서 각자 페이지를 작업하다보니 login과 signin처럼 못보고 직접 만드는 경우도 많아서 단일화해줘야했다. 심지어 로그인페이지는 login이고 회원가입페이지는 signup인 난리도 피워놨다.const RoutesList = [ { path: Paths.Landing, element: }, { path: Paths.Login, element: }, { path: Paths.Re..

더이상 무작정 프로젝트를 늘리는 것이 효과적이지 않았기 때문에, 이제는 기존의 프로젝트를 보완하려고 한다. 처음에는 그 성능 개선을 어떻게 측정해야하는지 막막했는데, 일단 가볍게 LightHouse를 체크해보기로 했다. 아주 초창기에 다들 개선하려면 LightHouse 100점 맞으면 된다고 얘기해서 체크했다가 뭐가 뭔지 몰라서 그냥 점수만 보고 만족했던 경험이 있다. 이번에 다시 체크해보니, 이제는 그래도 굳이 찾아보지 않아도 어떤 개선사항이 필요한지 이해할 수 있어서 공부한 보람을 느꼈다. 그리고 기본이 가장 중요하고 아직 멀었다는 걸 느낄 수도 있었다,,1. 화질이 엄청나게 중요하지 않는 이상 이미지는 최대한 Webp로 변환하자2. 이미지의 사이즈를 지정해주자현재는 Image/next를 활용하고 있..

댓글 달아줘요1. Redirect URL이 백서버를 향하는 경우  Redirect URL이 백서버를 향하는 순간, 프론트 => 구글 => 백으로 향했기 때문에, 구글에서 백으로 리다이렉트 되는 시점에 프론트와 연결이 끊어진 상태라고 볼 수 있다. 요청 주체가 구글이라서 응답에 토큰을 넣어준다고 해서 클라이언트가 받는게 아니다. 구글이 받고, 아무것도 안한다. 따라서 토큰을 발급한 후에 토큰을 담아 리다이렉트를 시켜주어야 한다. 유저가 없는 경우 디스코드 요청한 유저임을 확인하기 위한 토큰(로그인 토큰X)을 발급해서 클라이언트로 넘어가야 한다. 유저가 있는 경우 로그인 토큰을 가지고 메인 페이지로 이동해야한다.  만약 추가정보를 입력하지 않고 구글의 code만으로 유저 생성이 가능하다면, 그대로 로그인 성..

request은 application/json으로, images는 image/jpg, image/png으로 Content-type을 지정해주고 form-data를 통해 전달해달라는 요청을 받았다. 근데 아무리 해봐도 Blob 없이 Content-type을 지정해주는 방법은 없었다. const formData = new FormData(); formData.append( "request", new Blob([JSON.stringify(payload)], { type: "application/json" }) ); if (image && image.length > 0) { const file = image[0]; const imageBlob = new Blo..

??: 배포 해주세요.나: vercel...??: 저희 도메인 쓰십시다.나: vercel.??: 이미지 추가하고 싶어요나: vercel + s3나: 백엔드분들이 cs 뭔가 잘알던데, 백엔드를 내가 해보겠따..!??: 클라우드 때문임. 클라우드 공부ㄱㄱ사실 지금까지 인프라에 대해서 크게 관심이 간 건 아니었다. VM아니면 vercel로 대충 배포하면 알아서 해주기 때문에, 나는 애플리케이션에만 집중하면 될거라고 생각했다. 하지만 HTTP 완벽 가이드를 읽으면서 계속이해된다기 보다는 그냥 텍스트를 읽는 경향이 강해졌다. 백엔드를 직접 만들어보면 되지 않을까 싶어서 그냥 기본적인 서비스와 컨트롤러로 CRUD만 구성해보기도 했지만, 백엔드를 만들 줄 안다고 해서 통신 과정을 이해할 수 있는 건 아니었다. 아직 ..

CSS Custom Hightlight APIJavaScript를 사용하여 범위를 만들고 CSS와 함께 해당 텍스트의 범위를 스타일링하는 API텍스트 편집기에서 오타, 문법 오류, 구문 오류 등 강조 가능 현재 Firefox 외의 브라우저에서 지원한다. 적용 방법1. Range 생성하기JavaScript의 Range 객체를 사용하여 시작 범위와 종료 범위를 설정한다.const parentNode = document.getElementById("foo");const range1 = new Range();range1.setStart(parentNode, 10); // 10번의 위치(offset)부터range1.setEnd(parentNode, 20); // 20번의 offset까지 range1const ..