전체 아티클73 공식문서는 왜 보는걸까? 라이브러리는 만든 사람이 있다. 그들이 만든 목적과 도구의 사용법을 정리해둔 곳이다. 책에서도 거의 공식 문서의 내용을 담는다. 친절할 수도 있고, 친절하지 않을 수도 있다. 한국어 번역이 있을 수도 있고, 없을 수도 있다. Tutorial이 있을 수도 있고, 없을 수도 있다. 리액트는 친절하고, 한국어 번역도 거의 있고, Tutorial도 있다. 보는 이유와 방법 웹 기반의 표준기술은 MDN, 리액트 표준 공식 문서 React Document 공식 문서를 보는 방법은 목적에 따라 나뉜다. 바로 써보기 vs 이해해보기 써보기만 하고 이해하지 않을 수 있다. 써보지 않고 이해만 해볼 수 있다. 써보면서 이해할 수도 있다. 이해 먼저하고 써볼 수도 있다. 2022. 12. 3. React에서의 DOM TREE DOM DOM은 논리트리를 의미한다. 컴포넌트 앨리먼트의 집합 앨리먼트 요소 사이드 이펙트 = 부작용 리액트에서는 부수효과라고 볼 수 있다. (그렇게 해석하자) useState 상태 값을 관리해주는 훅 useEffect 컴포넌트 사이드 이펙트 다루기, dependency array에 따라 언제 언제 호출되는지를 설정 가능 Custom Hooks 만약 훅이 반복되는 상황이면 이를 Custom Hook으로 커스텀할 수 있다. hook flow 이해하기 hook들의 호출 타이밍을 각 hook에 콘솔 디버깅 창을 통해 순서를 확인할 수 있다. 로컬스토리지에서 값을 꺼내거나, 값을 가져오는데 시간이 걸리는 경우 useState나 useEffect에서 return을 사용하여 lazy initialize를 할 수 있.. 2022. 12. 3. JSX와 Babel JSX와 Babel JSX : 자바스크립트도 아니고, HTML도 아닌 그 중간인 새로운 표현식 Babel : JSX를 이해하기 위해서, 자바스크립트로 변환하기 위해서는 Babel이라는 자바스크립트 컴파일러가 필요하다. 반복적인 것들은 Function 형태의 컴포넌트로 찍어낸다. 바닐라 JS의 경우, 변경으로 인해 Elements를 다시 그리는 반면 리액트는 리액트의 비교 알고리즘을 통해 Elements에서 변경된 요소만을 그려준다. (Reconciliation) 리액트의 Virtual Dom은 다른 elements의 속성이 들어왔을 때 이를 비교할 때 활용된다. 2022. 12. 3. Input 타입이 file인 디자인은 어떻게 커스텀할까? 사이드 프로젝트를 진행하면서 input type이 file인 디자인을 변경할 일이 생겼다. input type을 file로 지정을 하면, 기본 default로 설정되어져 있는 파일 업로드 버튼과 업로드가 되었을 때 파일 명을 보여주는 텍스트가 생성이 되는데 기존 제공되어지는 UI를 커스텀해서 디자인을 하기에는 번거로운 점이 많다. input type='file'을 디스플레이 상에서 숨겨놓고, 내가 디자인하고 만들어놓은 요소를 눌렀을 때 그 요소에 연결된 input을 실행시키면 자연스럽게 UI상으로 보여지지 않을까? → 바로 여기서 사용하는 것이 태그를 도와주는 태그를 활용한 방법이다. 먼저, 다음과 같이 구성을 해보자, 태그의 기본 기능들과 `업로드 버튼` 이라는 이름의 이 나올 것이다. 그리고 의 id.. 2022. 11. 12. [프로그래머스] 옹알이(1) 오늘은 여러 기업의 코딩테스트를 준비하면서, 연습할겸 코딩테스트 문제를 풀어보았다. 가장 눈에 들어온 것이 문제 제목이 귀여운 옹알이라는 녀석이었는데, 문제도 참 귀엽다. 말그래도 아이가 말할 수 있는 단어를 하나하나 분리하여 아이가 말을 할 수 있는지에 대한 판단 여부를 출력하는 문제이다. 처음에는 해당 babbling 각 배열 요소에 아이가 말할 수 있는 단어가 포함이 되어있는지를 확인을 하였다. 정상적으로 결과 값이 출력되는 것을 확인할 수 있었으나, 추가적으로 `wyeoo`와 같이 사이에 `ye`를 포함하게되고 이는 또 `woo`로 줄여져 카운팅되는 문제점을 확인할 수 있었다. 이를 해결하기 위해 기존 반복문 안에 해당 단어의 인덱스를 찾고, 그 인덱스가 0으로 시작하는 것이 아니면 카운팅 되지 .. 2022. 11. 8. XII. 제품 소프트웨어 패키징 01. 사용자 중심의 패키징 수행 제품 소프트웨어 패키징(Product Software Packaging) 개발이 완료된 제품 소프트웨어를 고객에게 전달하기 위한 형태로 포장하는 과정 제품 소프트웨어 패키징 적용 시 특성 - 전체 내용을 포함 : 설치와 사용에 필요한 과정 및 환경 등의 전체 내용을 포함하는 메뉴얼을 작성 - 비전 관리 및 릴리즈 노트 : 제품 소프트웨어에 대한 패치 개발과 업그레이드 수행 - 고객 중심 : 제품 소프트웨어 패키징은 개발자가 아닌 사용자 중심, 고객 편의성 중심으로 진행 - 모듈화 : 신규 및 변경 개발 소스를 식별하고, 이를 모듈화하여 상용 제품으로 패키징 제품 소프트웨어 패키징은 모듈들을 통해 수행되므로, 최초 소스 개발 시 해당 모듈 단위 및 모듈화를 통해 제품 소프.. 2022. 10. 12. 이전 1 ··· 6 7 8 9 10 11 12 13 다음
