전체 글

알고리즘/프로그래머스
[프로그래머스] 숫자 문자열과 영단어 ( 2021 카카오 인턴십) / JavaScript
숫자 문자열과 영단어 https://programmers.co.kr/learn/courses/30/lessons/81301 코딩테스트 연습 - 숫자 문자열과 영단어 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자 programmers.co.kr 문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1..
→2021.10.23
Front-End/React
[React] 자주 사용하는 Custom hook 소개
프로젝트를 하면서 자주 사용하는 Custom hooks를 모음. 아마도 계속 추가해나갈 예정이다. usePrevious import { useEffect, useRef } from 'react'; function usePrevious(stateOrProp) { const previous = useRef(null); useEffect(() => { previous.current = stateOrProp; }, [stateOrProp]); return previous.current; } export default usePrevious; 가끔 이전 state의 값이 필요할 때가 있다. 예를 들어 useEffect는 deps에 명시한 값이 하나라도 변경되면 로직을 실행한다. useEffect(() => { ....
→2021.10.16
Front-End/React
[React] Custom hooks의 return value
Custom Hook에서 여러개의 값을 return하는 방법은 두가지가 있다. const [one, two] = useNumbers(); const { a, b, c } = useAlphabet(); array형태와 object형태로의 return이다. 어떠한 경우에 array형태를 사용하고 object형식을 사용하는지에 대한 정답은 없다. 하지만 두 타입의 장단점이 극명하기 때문에 상황에 따라 구분에서 사용하면 좋다. array로 return const [color, setColor] = useState('MintCream'); const [width, setWidth] = useState('100vw'); 적은 수의 값들을 return하는 경우 같은 컴포넌트 내에서 한번 이상 사용하는 경우 array..
→2021.10.16
Front-End/React
[React] Custom hook을 만들기 전에 고려해야 할 것들
들어가면서🚪 Building your own Hooks lets you extract component logic into reusable functions. 최근 내가 컴포넌트를 설계할 때 가장 중요하게 생각하는 것은 컴포넌트의 역할이 명확하게 나타나는가 이다. 예를 들어보자. app이라는 페이지에 input field가 있고 확인 버튼이 있다. 이 화면의 코드는 대충 이런 식일 것이다. function App() { const [value, setValue] = useState(''); const onClick = () => { 클릭 이벤트 }; return ( ); } app 컴포넌트의 역할은 'input field와 button을 적절한 위치에 그리는 것' 그리고 '확인 버튼을 누르면 input ..
→2021.10.16
Front-End/개발일지
React로 타임라인 만들기 (+ 더보기 버튼)
타임라인은 일정 양의 데이터만을 로딩하고 사용자가 +read more버튼을 클릭하면 새로운 데이터를 끝에 추가로 로딩하는 방식으로 동작한다. 각각의 데이터들은 날짜별로 분류되어 있으며 최신 순으로 정렬되어있다. 내가 만들 타임라인의 구성은 다음과 같다. Timeline이라는 큰 틀 안에 날짜별로 분류된 HistoryList가 있고 각각의 기록들은 HistoryItem으로 나타낸다. 이 구성을 표현하기 위해서는 데이터들을 날짜별로 나눠서 재분류할 필요성이 있었다. 타임라인 로직 구성하기 일단 데이터를 어떤 방식으로 가져오는지 알아야 했기 때문에 twitter의 timeline api를 참고했다. 트위터에서는 두가지 방식으로 timeline 데이터를 가져올 수 있다. start_time과 end_time을 ..
→2021.10.08

• 이전
• 1
• ···
• 4
• 5
• 6
• 7
• 8
• 9
• 다음