choi95의 TIL📝

문제 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예numbersreturn [6, 10,..

Carousel Slide Carousel Slide는 이번 WETCHAPEDIA 프로젝트에서 내가 맡은 핵심 기능이자 가장 고민했던 부분이다. 단순히 기능이 원활하게 동작되는 것 뿐만 아니라 해당 컴포넌트를 얼마나 효율적으로 만드는 것인가에 대해서 끊임 없이 고민하였기에 이에 대해서 포스팅해보고자 한다. 처음에 Carousel Slide 기능을 구현하기 위해서 일정 영역을 Fixed View로 지정해 둔 뒤 overflow value를 hidden으로 하여, 버튼 요소를 누르게 되면 해당 View의 너비만큼 transformX 값을 퍼센트(%) 단위로 이동하게끔 하였다. 그리고 Carousel Container 내에 마우스가 hover가 되면 overflow value를 scroll로 바꾸어, 사용자가..

협업(Communication) 해당 프로젝트에서 여러 기능을 구현해 보았고 새로운 기술 또한 경험해 보았다. 본래라면 이 모든 기능에 대해서 하나씩 나열하여 길고 긴 설명을 시작으로 해당 회고를 시작하려고 했다. 하지만 처음 팀 프로젝트를 경험해 본 나에게 있어서, 주요하게 복기해야 될 사항이 단순히 기술의 설명에 대한 나열일 것인가 라는 고민이 들었다. 이에 이번 프로젝트를 시작하고 끝나면서까지 마음 한 켠에 품고 스스로 계속 되새겼던 한 질문을 시작으로 회고의 서두를 띄고자 한다. 개발자에게 있어서 어떠한 점이 중요할까. 이 질문에 대해서 이전의 나라면 단연 '오랜 시간 의자에 앉아 키보드를 두들기는 것' 이라고 말했을 것이다. 하지만 이번에 난생 처음 팀 프로젝트를 진행하면서 개발자에 대한 나의 ..

Before 코드 다음은 로그인 컴포넌트의 JSX 코드이다. 로그인 식별을 위해 id와 pwd의 value 값을 식별해주기 위해 state에 값을 저장하는 메서드인 checkVal를 onChange 이벤트에 바인딩해주었다. 두 개의 다른 Input value를 하나의 함수로 관리해주다 보니, 아래와 같이 똑같은 코드 반복되며 불필요한 조건문이 사용되어졌다. checkVal = event => { let { value } = event.target; if(event.target.className === 'login-form') { this.setState({ login : value, }); } else { this.setState({ pwd : value, }); } }; After 코드 위의 내용을 수..

구현 결과 다음과 같이 Scroll값이 화면 상에 끝 지점에 도달했을 경우에 추가적으로 서버에 데이터를 요청하여 화면에 랜더링되도록 기능 구현하였다. 리액트 상에서 전역 객체(Window)에 스크롤 이벤트를 바인딩해주는 작업은 이번에 처음하는 거였기 때문에 관련된 코드를 포스팅해보고자 한다. 소스 코드 우선, 전역 객체 Window에 Scroll Event를 바인딩해주는 시점은 모든 요소가 화면에 나오는 처음부터 이다. Vanilla Javascript 상에서는 이 작업을 DomContentLoaded 나 load 된 시점에 해주지만 리액트 상에서는 해당 이벤트 발생 시에 Scroll 이벤트를 바인딩해주는 것보다 컴포넌트가 처음 Mount(마운트) 되는 시점에 하는 것이 더 명확하다고 생각이 들었다. 이..

리팩토링해야 될 사항 다음과 같이 동일한 Feed Style 속성 값을 지니고 있지만 안에 들어가는 이미지의 Layout만이 다른 두 UI 요소가 있다. 전자의 Feed에는 단일 이미지만이 들어가는 반면에 후자의 Feed에는 Grid Layout 형식으로 총 4장의 이미지가 들어간다. 들어가는 이미지의 갯수가 다르기 때문에 이미지의 크기와 더불어 세부 속성 값을 달리 해주어야 되기 때문에 처음에는 아래와 같이 각 Feed 속성 값에 Style 값을 주었다. .moviePosterQuarter { // Grid 형식의 Feed width: 95%; height: 95%; border-radius: 4px; background-size: cover; background-position: center; } (..

https://choi95.tistory.com/175 Carousel Slide 기능 Component로 분립 Issue 위 Carousel Slide 기능은 해당 Main Page 뿐만 아니라 다른 Page 내에서도 쓰이기 때문에 따로 컴포넌트로 분립할 필요가 있음을 확인하였다. Carousel Slide 기능이 리스트 형식에서 제대로 동작하기 choi95.tistory.com 이전 포스팅에서 Carousel Slide 기능 내에 쓰인 Feeds Layout은 총 2개이다. 해당 Layout 형식은 Main Page 내에서 뿐만 아니라 여러 다른 Page 내에서도 공통적으로 쓰인다. 이를 위해 임의로 Layout Type 값을 props로 넘겨주어 Type 값에 따라 다른 형식의 Feeds List가..