안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요. 도리 깃허브로 놀러오세요 전체 아티클12 공식문서는 왜 보는걸까? 라이브러리는 만든 사람이 있다. 그들이 만든 목적과 도구의 사용법을 정리해둔 곳이다. 책에서도 거의 공식 문서의 내용을 담는다. 친절할 수도 있고, 친절하지 않을 수도 있다. 한국어 번역이 있을 수도 있고, 없을 수도 있다. 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. 바닐라 JS, 모듈화 진행 시 CORS 에러 해결 방안 Access to script at 'file:///C:/경로/js/module.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 바닐라 JS로 다음과 같이 스크립트를 모듈 타입으로 불러올 때, 문제가 발생하였다. 왜 이런 문제가 발생할까? 우리가 작업하는 로컬 환경에서 SOP를 위배했기 때문에 나타나는 현상이다. SOP는 `동일 출처 정책` 이라는 뜻이다. 어떤 출처(origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하.. 2022. 9. 29. [웹 개발] 이미지 에러 시, 대체 이미지로 에러 대체하기 아래 예시는 리액트에 관련된 예시이고, 해당 소스코드를 사용할 때는 상황에 맞게 코드를 변경해서 쓰면 된다. const onErrorImg = (e) => { e.target.src = "이미지 경로 및 파일 이름"; } 2022. 2. 22. 이전 1 2 다음
