분류 전체보기 69

개발자도 기획을 알아야 한다

본격적인 디벨롭 과정에서 더욱 느낀 것은, 소통의 중요성이다. 이전에는 다같이 MVP를 선정하고 확장된 기능들을 가지고 다뤘기 때문에, 의도한 바를 적당히 내 선에서 해결할 수 있었다. 하지만 디벨롭 중, 나는 부족한 기능들을 추가하고 기획단에서는 유저 테스트를 통해서 개선사항들을 마련하다보니 의도가 달라지는 문제가 생겼다. 그냥 시간을 변경하기 위한 컴포넌트로 바라보면서, 시간 버튼을 클릭하면 각각의 시간이 올라가는 방식으로 구현했다. 하지만 회의 과정에서 다뤄보니, 기존의 시간 버튼 선택으로 인한 변경이 불편하다는 의견을 받고 개선하여 +, -로 변경된 시간을 오른쪽에 보여주는 방향으로 UI가 변경된 것이었다. 기존에는 차선을 택하는한이 있더라도 내 선에서 끝나는 방향으로 설정해나갔다. 거의 PO의 ..

카테고리 없음 2024.08.01

백준 2448 자바스크립트 별 찍기 - 11

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

카테고리 없음 2024.07.28

테스트로 기능정의서 두번씩 안보기로 했다

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

트러블이슈 2024.07.19

테스트 코드 도입기

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

트러블이슈 2024.07.17

백준 14939번 불 끄기 자바스크립트

같이 코테문풀하시는 분이 카카오 코테 문제를 들고 오셔서,, 단체로 문제 난이도가 올라갔다^^행복 일단 저번 스도쿠 문제도 비슷한 방식이었기 때문에, 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 = ..

코딩테스트 2024.07.14

스타트업 밸리 FE :: 여름이었다, 🍉

🍀 사이드 프로젝트 협업 툴 스타트업 밸리 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..

전시글 2024.07.12

SVG-in-JS를 피해보자

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

카테고리 없음 2024.07.10

백준 2239번 정사각형의 개수 자바스크립트

진짜 막막하긴 한데 한 줄씩 체크하면서 뭔가 정렬 알고리즘을 통해 최적을 선택하면 될거같다.      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..

코딩테스트 2024.07.07