나의 코딩일지

문제가,, 사갈스 바갈스N은 3, 6, 12, 24 이므로 상황별을 케이스를 나타내 규칙을 찾는다.프렉탈 규칙이 있으므로 배열을 재귀적으로 반복하여 풀이할 수 있따재귀는 가장 안쪽부터 실행되므로 윗부분에서 규칙을 찾으면 된다.일단 최초 3은 단순한 배열로 나타내준다.if (n === 3) { return [" * ", " * * ", "*****"]; } 그리고 나서 기존의 별들에 띄어쓰기를 몇칸만큼 추가할지 규칙을 찾고, 기존의 별들을 두개로 추가하여 배열로 반환하고 재귀를 통해서 프렉탈을 만들어주면 된다.const stars = drawStars(n / 2); // 12 // 6 // 3const result = []; 가장 첫번째 줄을 가지고 보면, 3*2(k-1) 만큼 ..

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

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

같이 코테문풀하시는 분이 카카오 코테 문제를 들고 오셔서,, 단체로 문제 난이도가 올라갔다^^행복 일단 저번 스도쿠 문제도 비슷한 방식이었기 때문에, 2차원 배열로 만들어주고 내부는 boolean값으로 매핑해주었다. 일단 true를 만나면, 앞뒤위아래로 하나씩 체크해보면서 만약 있으면 해당 위치로 이동하고 이동해서 최대로 끌 수 있는 만큼 끄고, 다시 true를 탐색하는 방식으로 접근했다.function change2DArray(input) { return input.split('\n').map(row => row.split('').map((el)=> el === '0'));}function toggleAroundSwitch(x, y, array) { if (x >= 0 && x = 0 && y = ..

🍀 사이드 프로젝트 협업 툴 스타트업 밸리 FE⭐https://www.startupvalley.site/ Startup Valley하루하루 프로젝트 작업을 기록하여 팀의 성장이란 수확물을 만나보세요!www.startupvalley.site 9oormthon-univ/2024_BEOTKKOTTHON_TEAM_28_FE: 🍀 사이드 프로젝트 협업 툴 스타트업 밸리 FE⭐ (github.com) GitHub - 9oormthon-univ/2024_BEOTKKOTTHON_TEAM_28_FE: 🍀 사이드 프로젝트 협업 툴 스타트업 밸리 FE⭐🍀 사이드 프로젝트 협업 툴 스타트업 밸리 FE⭐. Contribute to 9oormthon-univ/2024_BEOTKKOTTHON_TEAM_28_FE develo..

React Custom Calendar Heatmapa-honey/react-custom-calendar-heatmap: a heatmap library for Customizable SVG Elements and hover actions (github.com)Making react-custom-calendar-heatmap log (tistory.com)peerDependencies플러그인이 특정 버전의 호스트 애플리케이션을 필요로 한다pnpm link로컬에서 개발 중인 패키지를 다른 프로젝트에서 사용할 수 있도록 심볼릭 링크를 생성하는 기능JS 번들 안에 CSS는 넣지 않는다https://medium.com/@ahoney0512/dont-use-svg-in-js-18805d0a653d Don’t Us..

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

This document is in progress.React Custom Calendar HeatmapIntroThis is react-custom-calendar-heatmap guideline.🔗 npm: https://www.npmjs.com/package/react-custom-calendar-heatmap 🔗 repository: a-honey/react-custom-calendar-heatmap (github.com)🔗 examples: (This is just example site using mock data.)BackgroundOur team designer requested this calendar heatmap.However, react-calendar-heatmap, one ..

진짜 막막하긴 한데 한 줄씩 체크하면서 뭔가 정렬 알고리즘을 통해 최적을 선택하면 될거같다.      103000509 2, 4, 6, 7, 8첫번째 자리 2, 4, 7, 8네번째자리 4다섯번째 자리 6, 7, 8여덟번째 자리 2, 4, 6, 7, 8 각각 가능한 수를 구해서 재귀를 이용하면 될거같다. function isValidRow (array) { const removeZeroArray = array.filter(num => num !== 0); const set_array = new Set(removeZeroArray); if (removeZeroArray.length === set_array.size) { return true } return false}console.log(i..

Keep제안을 많이 했다. 디자인 시스템 도입, 토큰 쿠키로 관리, Next  app router 및 fetch 사용, AWS 배포 등을 해봤다.PR을 올리면서 고민한 점들을 남겼다. 혼자서 진행하는 프로젝트 임에도 PR을 반복해서 보며 수정할 부분을 찾았다. Problem지속적인 소통이 어려웠다. 처음에 확정하고 가지 않은게 많았고, 초기 디자인에서 예상 가능한 시나리오를 다 요청하지 못했다. MVP에 불필요한 커뮤니티 기능이 추가되었다. 할 일 목록을 추가하지 않았다. git branch 전략을 후반부에 제대로 사용하지 못했다.수정이나 기타 디테일한 부분들을 연결하지 못했고, QA도 진행하지 않았다. Try기획에 적극적으로 참여해야겠다. 유저플로우와 화면 설계서를 통해 정확하게 정의해야겠다.branc..