본문 바로가기

전체 글139

[React / Test] Material UI (mui) + React + Testing Library 적용 간 어려운 점 회고 Render 관련 코드 구조 describe("Application 테스트", () => { it("Application - UI Test ", () => { render( , { wrapper: MemoryRouter } ); // ... material UI 특성상 theme 가 구동되기 때문에 ThemeProvider 를 감싸줘야 한다. (참고 : Custom Render - 아예 test-util을 만들어서 wrapping 하는 방법도 있다.) FetchProvider 도 감싸줘야 하며, Application 내부에서 match.params.id 를 사용하는데, 페이지를 전환하면서 전달한 게 아니라서, 임의로 props로 match 객체처럼 보여지게끔 전달해서 해결했다. Provider들을 감싸는.. 2022. 6. 22.
[코딩테스트] 스킬 체크 테스트 Level.2 by Programmers 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. 문제 설명 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다. Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 retur.. 2022. 6. 20.
[JavaScript] ES6 알아야 할 기능 노션으로 정리해두었다. 이런 저런 자료 찾아보면서 나도 자세히 이해하느라 3일 정도 소요되었던 것 같다. 이미 알고 있던 기능도 있고, 트렌드의 변화도 함께 알아야 했던 것들도 있었다. JS는 정말 급변하고 있다... 7.ES6 업그레이드 기능 + promise await async 등 ES6 업그레이드 기능 seeik.notion.site 2022. 6. 15.
[성능최적화] 차세대 이미지 적용하기 (webp) 아래와 같이 적용하면 된다. 그러면, source 부분을 먼저 불러오고, 불러오지 못하는 환경(구형 브라우저나 webp를 미지원하는 경우)일 때는 img 태그를 불러오게 된다고 한다. 확실히 성능최적화는...이미지가 가장 크게 효과보는 것 같은 기분이다. 디자이너가 제대로 있어서 webp도 주고, jpg도 압축해서 전달해주면 참 조으련만......팀에 부재해있다. 그래서 이미지를 전달해 주시는 담당자에게, 아래 사이트에서 줄이고 전달해달라고 요청해두었다. jpg -> webp 변환사이트 : https://convertio.co/kr/jpg-webp/ jpg 용량 줄이는 사이트 : https://www.iloveimg.com/ko/compress-image 결과 점수를 10점 올렸다. 신난다. 이미지만 줄.. 2022. 5. 25.
React useEffect (included api 호출) 가 있는 컴포넌트 분리 방법 자식 컴포넌트에서는 아래와 같이 쓰고 export const childComp = () => { const [data, setData] = useState(); useEffect(() => { refresh(); },[]) const refresh = () => { fetch("URL") .then((res)=> res.json()) .then(_newData => setData(_newData)); } return [data, refresh]; } 부모 컴포넌트에서는 아래와 같이 쓴다. import childComp from "./childComp"; const parentComp = () => { const [data, refresh] = childComp(); return ( Refresh! ) }.. 2022. 4. 29.
[코딩테스트/배열] Two Sum by LeetCode 문제 Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return the answer in any order. 정수 숫자와 정수 대상의 배열이 주어지면 두 숫자의 인덱스를 반환하여 대상에 더합니다. 각 입력에 정확히 하나의 솔루션이 있다고 가정하고 동일한 요소를 두 번 사용할 수 없습니다. 답변은 어떤 순서로든 반환할 수 있습니다. .. 2022. 3. 12.

티스토리툴바