개발을 잘하고 싶어요 :)

• 리액트 프로젝트에서 타입스크립트 사용하기 출처 https://react.vlpt.us/using-typescript/ JavaScript 는 weakly typed 언어이기에, 특정 숫자 변수를 선언한 다음에 변수에 문자열을 넣을 수도 있고, null 을 넣을 수도 있고, 배열을 넣을 수도 있습니다. let value = 5; value = '안녕하세요'; value = [1,2,3,4,5]; value = null 추가적으로 자동완성도 우리가 Java / C# / C++ / Python 등의 언어를 사용 할 때처럼 제대로 되지 않습니다. (VSCode 를 사용하면 어느정도 되고 있다고 착각 할 수도 있는데 사실 TypeScript 관련 기능이 이미 기본적으로 돌아가고있어서 되는 거랍니다.) 만약에 TypeScript 를 사용하면, 이러한 불편.. 2022.08.02
• 1. Sass 출처 - 벨로퍼트 https://react.vlpt.us/styling/01-sass.html SASS 참조 defaultProps 를 통하여 size 의 기본값을 medium 으로 설정하고, 이 값을 button 태그의 className 으로 설정하고자한다. className에 CSS 클래스 이름을 동적으로 넣어주고 싶을 때 다음과 같이 설정한다. (size가 변수) className={['Button', size].join(' ')} 또는 className={`Button ${size}`} 하지만, 이 방법보다 classnames 라이브러리를 사용하는 것이 훨씬 편함 ⇒ 조건부 스타일링을 할 때 함수의 인자에 문자열, 배열, 객체 등을 전달하여 손쉽게 문자열을 조합할 수 있음 yarn add clas.. 2022.07.30
• 22. Context API를 사용한 전역 값 관리 출처 - 벨로퍼트 : https://react.vlpt.us/basic/22-context-dispatch.html Context API와 dispatch를 사용하면 3~4개 이상의 컴포넌트를 거쳐서 전달해야하는 복잡한 구조를 해결할 수 있다. const UserDispatch = React.createContext(null); createContext 의 파라미터에는 Context의 기본값을 설정할 수 있다. : Context를 쓸 때 따로 지정하지 않을 경우 사용되는 기본값 Context를 만들면, Context 안에 Provider라는 컴포넌트가 들어있는데 이 컴포넌트를 통하여 Context의 값을 정할 수 있다. 이 컴포넌트를 사용할 때 value 라는 값을 설정해주면 된다. ... 이렇게 설정해.. 2022.07.29
• 20. useReducer를 사용하여 상태 업데이트 로직 분리하기 출처 - 벨로퍼트 : https://react.vlpt.us/basic/20-useReducer.html 공부를 다시 해야할 거 같음 ! reducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 function reducer(state, action) { // 새로운 상태를 만드는 로직 switch (action.type) { case 'INCREMENT' : return state + 1; case 'DECREMENT' : return state - 1; default : return state; } } state : 현재 상태 action : 업데이트를 위한 정보를 가지고 있다. 주로 type 값을 지닌 객체 형태로 사용 const [state, dispatch] .. 2022.07.28
• 19. React.memo를 사용한 컴포넌트 리렌더링 방지 출처 - 벨로퍼트 https://react.vlpt.us/basic/19-React.memo.html React.memo : 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화 export default React.memo(UserList); 작성한 코드 기준으로 이야기해보자. 하지만, export한 컴포넌트를 React.memo로 감싸도 user의 이름을 클릭하면 user컴포넌트가 모두 리렌더링된다. 그 이유는 다음 코드에서 useCallback 함수에 users 가 디펜던시에 있기 때문에 users 값이 변경되었다 판단하여 렌더링을 하게된다. const onRemove = useCallback( id => { // user.id 가 파라미터로 일치하지 않는 .. 2022.07.26
• 트리 (소스코드) 기본 틀 public class NodeMgmt { Node root = null; public class Node { Node left; Node right; int value; // 노드가 갖고 있는 값 Node(int data) { this.left = null; this.right = null; this.value = data; } } // TODO public boolean insertNode(int data) { return true; } // TODO public node search(int data) { } } 이진 탐색 트리에 데이터 넣기 public boolean insertNode(int data) { // CASE 1 : Node가 하나도 없을 때 if (this.root == nu.. 2022.07.25
• 18. useCallback을 사용하여 함수 재사용하기 useCallback vs. useMemo useCallback : 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 useMemo : 특정 결과값을 재사용할 때 const onChange = useCallback( e => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value }); }, [inputs] ) ❗ 함수안에서 사용하는 상태 혹은 props가 있다면 꼭, deps 배열 안에 포함시켜야 된다. 만약, deps 배열 안에 함수에서 사용하는 값을 넣지 않게된다면, 함수 내에서 해당 값들을 참조할 때 가장 최신값을 참조할 것이라 보장할 수 없다. props 로 받아온 함수가 있다면, 이 또한 deps 에 넣어주어야한다. 2022.07.23
• 17. useMemo를 사용하여 연산한 값 재사용하기 useMemo Hook을 사용하여 연산된 값을 재사용 1) 첫번째 파라미터 : 어떻게 연산할 지 정의하는 함수 2) 두번째 파라미터 : deps 배열 이 배열 안의 내용이 바뀌면, 첫번째 파라미터에 등록한 함수를 호출해서 값을 연산해주고 만약에 바뀌지 않았다면 이전에 연산한 값을 재사용하게 된다. const count = useMemo(() => countActiveUsers(users), [users]); 2022.07.22
• 16. useEffect를 사용하여 마운트/언마운트/업데이트 시 할 작업 설정하기 useEffect라는 Hook을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 언마운트됐을 때 (사라질 때) 업데이트 될 때 (특정 props가 바뀔 때) useEffect(() => { // 마운트 시 하는 작업을 작성 console.log('컴포넌트가 화면에 나타남'); return () => { // 언마운트 시 하는 작업을 작성 (업데이트 되기 바로 직전에 호출) console.log('컴포넌트가 화면에서 사라짐'); } }, []); useEffect 1) 첫번째 파라미터 : 함수 2) 두번째 파라미터 : 의존값이 들어있는 배열 (deps) - 만약 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect에 등록한 함수가 호출 마운트 시 하는 작업에 바뀌기전값이 .. 2022.07.21
• 15. 배열 항목 수정하기 onToggle 함수를 선언 active 값에 따라 폰트의 색상 변경하는 것 구현 id값을 비교해서 id가 다르다면 그대로 두고, 같다면 active를 반전시키도록 구현 const onToggle = id => { setUsers( users.map(user => user.id === id ? { ...user, active: !user.active } : user ) ); }; App컴포넌트에서 구현하여 UserList에 넘김 → UserList에서 전달받아 → User 컴포넌트에 전달 2022.07.19