분류 전체보기

FrontEnd/React
[StoryBook] 스토리북 적용하기
스토리북이란 컴포넌트의 다양한 경우를 정리할 수 있게 도와주는 시각화 도구이다. 컴포넌트들을 시각적으로 볼 수 있게 해주는것은 물론 각 컴포넌트를 문서화 해주는 역할까지 가지고 있다. 따라서 디자이너와 협업을 할때 보다 쉬운 피드백이 가능하며 개발자와의 협업에서도 매우 뛰어난 효율을 보여줄 수 있다. 또한 storybook과 jest를 활용하여 컴포넌트를 불러온 후 테스트코드를 작성하는 것도 가능하다. https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/ Storybook Tutorials Learn how to develop UIs with components and design systems. Our in-depth f..
→2023.12.12
FrontEnd/프로그래머스
[JS] 광고 삽입
누적합을 활용하면 해결할 수 있는 문제이다. 만약 10칸의 크기가 있는 배열에서 4~7까지 1씩 더해준다고 생각해보자. 0001111000 { const [h,m,s] = str.split(":").map(v => +v) return h * 3600 + m * 60 + s } const fillZero = (num) => { return String(num).padStart(2,'0') } const secondsToStr = (seconds) => { const h = ~~(seconds/3600) const m = ~~(seconds%3600/60) const s =seconds%60 return `${fillZero(h)}:${fillZero(m)}:${fillZero(s)}` } const tim..
→2023.12.12
FrontEnd/프로그래머스
[JS] 카드 짝 맞추기
https://school.programmers.co.kr/learn/courses/30/lessons/72415 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 자체는 모든 경우의수를 탐색해보는 완전탐색 문제이다. 1. 현재 보드에서 열어볼 카드를 선택한다. 2. 카드의 짝을 찾는다. 3. 다시 열어볼 카드를 선택한다. 반복.. 조금 생각할 부분은 일반적인 이동 외에 ctrl 이동이 있다는 점이다. 따라서 4방향으로 탐색하는것 이외에도 ctrl이동까지 생각을 해줘야 한다. 필자는 문제를 해결하기 위해서 크게 두가지 함수를 이용했다. 1. before..
→2023.12.11
FrontEnd/프로그래머스
[JS] 모두 0으로 만들기
https://school.programmers.co.kr/learn/courses/30/lessons/76503 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제풀이는 후위탐색을 활용하면 된다. 트리의 뿌리노드부터 루트 노드까지 값을 전달해준다.. 라는 생각을 하면 된다. 이때 굳이 양수가 아니라 음수가 나오더라도 0이 되도록 음수를 전달해도 된다는 개념으로 접근하면 된다. 따라서 재귀함수를 활용하여 뿌리노드부터 0으로 만들어가며 남은 값들을 부모노드로 전달해주었고 옮긴 만큼의 값을 저장했다. function solution(a, edges) { co..
→2023.12.08
프로젝트/소규모프로젝트들
[React,Emotion] 회전 Dial 컴포넌트 만들기
프로젝트를 하다가 아래와 같이 회전하는 Dial모양의 컴포넌트를 만들게 되었다. 우선 위 컴포넌트를 만들어낸 방식은 아래와 같다. 실제로는 아래와 같이 미리 렌더링을 하고 , 빨간색 박스 부분만 보여지도록 제어를 해주면 된다. 이때 회전을 주기위해서 rotate 효과를 활용할 수 있다. const [rotation, setRotation] = useState(0); 따라서 위와같이 회전값을 지정해준 후 버튼이 눌릴때마다 회전을 시켜주면 된다. 그런데 단순하게 위 그림대로 만들어 두고 회전하는 방식으로는 정확하게 180도씩 회전하지 않았다. 위 gif에서 검은색 박스를 보자. rotate 으로 각도를 변화시키면 영역을 감싸고 있는 큰 박스자체가 회전을 하게 된다. 이때 세개의 작은 Dial들이 있는 부..
→2023.12.07
FrontEnd/프로그래머스
[JS] 다단계 칫솔 판매
https://school.programmers.co.kr/learn/courses/30/lessons/77486 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제를 해결할 때 꼭 생각해야 하는 점이있다. (내가 실수한 부분이기도 하다) 처음에는 판매자의 모든 칫솔 판매량을 한번에 계산한 후 그 판매량의 10%를 부모에게 올라가도록 설계했었다. 하지만 위 방식으로는 해결할 수 없다. 1개씩 10번 판매했을 경우와 10개씩 1번 판매했을 경우를 생각해 보자. 1개씩 10번 -> 100원의 이익이 10번 발생한 것이므로 2번 부모를 거치면 보낼 돈이 0원이..
→2023.12.07

• 이전
• 1
• ···
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• ···
• 125
• 다음