분류 전체보기

알고리즘/프로그래머스
[프로그래머스] 숫자 문자열과 영단어 ( 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
Front-End/React
[React] useCallback과 useMemo 제대로 사용하기
useCallback과 useMemo는 메모이제이션 된 값을 반환한다. 차이점은 useCallback은 함수를 메모이제이션하고 useMemo는 값을 메모이제이션한다. 면접을 준비하여 외웠던 대답이다. 실제 프로젝트를 하면서 useCallback을 써봤지만 왜 쓰는지, 언제 써야하는지를 정확히 이해하지 못했었다.(심지어는 전혀 이점없는 곳에 썼다🙄) 회사에 와서야 useCallback과 useMemo를 사용하는 목적이 무엇인지를 완전히 이해하고 올바르게 사용하게 되었다. 이제 내가 이해한 내용을 여기에 정리해보려한다. REACT의 리렌더링 React가 리렌더링을 하는 조건은 3가지이다. 자신의 state가 변경될 때 부모 컴포넌트로부터 전달받은 props가 변경될 때 부모 컴포넌트가 리렌더링 될 때 여기 ..
→2021.09.12
Front-End/React
Redux-saga를 알아보자
💡 이 글을 읽기 전에 읽어보면 좋은 글 1️⃣ Symbol을 알아보자 2️⃣ for-of와 Iterator 3️⃣ Generator란 무엇일까? Redux-saga란?🤔 공식문서에서는 Redux-saga를 다음과 같이 소개하고 있다. Redux-saga는 react/redux 애플리케이션의 사이드 이펙트, 예를 들면 데이터 fetching이나 브라우저 캐시에 접근하는 순수하지 않은 비동기 동작들을 더 쉽고 보기 좋게 만드는 것을 목적으로 하는 라이브러리이다. redux에서는 action을 발생시키면 reducer를 통해 state를 변화시켜 store를 갱신했다. Redux-saga는 action과 reducer사이에서 흐름을 제어하는 미들웨어이다. 이 중간에서 Redux-saga는 action이 발생..
→2021.09.04
Front-End/JavaScript
[JavaScript] Generator란 무엇일까?
Generator👀 function* generateSequence() { yield 1; yield 2; return 3; } 일반 함수는 function 키워드로 시작한다면, 제너레이터 함수는 function* 키워드로 시작한다. (화살표 함수는 사용할 수 없다.) 제너레이터 함수 안에는 yield 구문이 존재한다. yield 구문의 문법은 return 구문과 비슷하다. 차이점은 return은 한번만 실행되지만, 제너레이터 함수의 yield는 여러번 실행된다는 것이다. yield 구문은 제너레이터의 실행을 멈췄다가 다음에 다시 시작할 수 있게 만든다. 제너레이터 함수는 일반 함수와 동작 방식이 다른데, 제너레이터 함수를 호출하면 코드가 실행되지 않고, 제너레이터 객체가 반환된다. let generat..
→2021.09.04
Front-End/JavaScript
[JavaScript] for-of와 Iterator
for-of문 for(let value of myArray){ console.log(value); } for-in 문이 객체의 속성들을 순회하기 위한 구문이라면, for-of 문은 배열의 요소들, 즉 data 를 순회하기 위한 구문이다. 정확히는 일반 Object 요소를 제외한 Array, Map, Set 등의 객체 타입을 순회할 수 있다. (추가로 String도 가능하다. 문자열로 이루어진 배열로 보기 때문) forEach와는 다르게 break, continue, 그리고 return 구문과 함께 사용할 수 있다. for-of문은 어떤 메소드를 반복 호출하는 방식으로 동작한다. Array, Map, Set 등의 객체들은 공통적으로 이터레이터(iterator) 메소드를 제공한다. 일반 객체는 이터레이터 메..
→2021.09.04
Front-End/JavaScript
[JavaScript] Symbol을 알아보자
Symbol이란?🤔 심볼(Symbol) 은 ES6에서부터 추가된 7번째 타입의 값이다. 심볼(Symbol)은 프로그램이 이름 충돌의 위험 없이 속성(property)의 키(key)로 쓰기 위해 생성하고 사용할 수 있는 값이다. let newSymbol = Symbol(); Symbol()을 호출하면 새로운 심볼 값이 생성된다. 이 값은 고유하다. 즉, 다른 어떤 값과도 다르다. 심볼을 키값으로 사용하게 된다면 다른 어떤 속성과도 충돌하지 않는다. Symbol의 특징 심볼은 이런 식으로 사용할 수 있다. let isOpen = Symbol('isOpen'); ... element[isOpen] = true; 위 코드에서 isOpen문자열은 주석일 뿐이다. 심볼 값을 console.log()로 찍거나, .t..
→2021.09.04

• 이전
• 1
• 2
• 3
• 4
• 5
• 다음