728x90 Programming/Javascript23 자바스크립트로 만들어 보는 리액트 프레임워크 - 3. hook을 이용한 상태처리 이번 시간에는 hook을 이용하여 컴포넌트의 상태를 관리해보도록 하겠습니다. 자바스크립트로 만들어 보는 리액트 프레임워크 - 1. 기본 컨셉 자바스크립트로 만들어 보는 리액트 프레임워크 - 2. jsx 자바스크립트로 만들어 보는 리액트 프레임워크 - 3. hook 자바스크립트로 만들어 보는 리액트 프레임워크 - 4. redux 자바스크립트로 만들어 보는 리액트 프레임워크 - 5. thunk 모든 소스 코드는 github를 참고해주시기 바랍니다 hook hook은 함수형 컴포넌트에서 상태관리나 라이프사이클을 제어하도록 리액트에서 제공하는 함수입니다. 예를들어 useState의 경우 함수형 컴포넌트 내에서 컴포넌트의 상태를 변경시킬 수 있습니다 function App() { const [name, setNa.. 2021. 6. 21. 자바스크립트로 만들어 보는 리액트 프레임워크 - 2. jsx로 화면 렌더링 이제 jsx를 이용하여 리액트와 비슷한 형태의 프레임워크를 만들어 보겠습니다. 자바스크립트로 만들어 보는 리액트 프레임워크 - 1. 기본 컨셉 자바스크립트로 만들어 보는 리액트 프레임워크 - 2. jsx 자바스크립트로 만들어 보는 리액트 프레임워크 - 3. hook 자바스크립트로 만들어 보는 리액트 프레임워크 - 4. redux 자바스크립트로 만들어 보는 리액트 프레임워크 - 5. thunk 모든 소스 코드는 github를 참고해주시기 바랍니다 jsx jsx는 Javascript XML의 약자로 자바스크립트로 html 태그와 같은 마크업 형태를 표현할 수 있습니다. function App() { return ( 안녕하세요 ) } 하지만 우리는 앞서 element만을 이용하여 충분히 화면에 잘 표현을 할 .. 2021. 6. 21. 자바스크립트로 만들어 보는 리액트 프레임워크 - 1. 기본 컨셉 자바스크립트로 리액트 프레임워크를 만들어 보는 시간을 가졌습니다. 실제 리액트 프레임워크 동작과정에서 많은 부분이 생략되어 있습니다. 프레임워크의 동작 과정의 큰 그림만 봐주시기 바랍니다. 자바스크립트로 만들어 보는 리액트 프레임워크 - 1. 기본 컨셉 자바스크립트로 만들어 보는 리액트 프레임워크 - 2. jsx 자바스크립트로 만들어 보는 리액트 프레임워크 - 3. hook 자바스크립트로 만들어 보는 리액트 프레임워크 - 4. redux 자바스크립트로 만들어 보는 리액트 프레임워크 - 5. thunk 모든 소스 코드는 github를 참고해주시기 바랍니다 element 리액트는 element라는 단위로 dom을 생성합니다. element를 간단히 설명하면 태그의 정보를 담은 객체입니다. 리액트는 eleme.. 2021. 6. 20. Jest로 Mock 생성하기 오늘은 Jest로 Mock을 생성해보도록 하겠습니다. 회사에서 Open Layer와 Cesium으로 2D/3D 지도 변환하는 모듈을 생성하면서 인터페이스에 대한 테스트를 작성하기로 했습니다. Jest의 경우 평소에 React 웹 프로젝트를 할 경우 react test library로 사용하면서 익숙한 상태였지만, 모듈을 만들면서 정말 많은 dependency들이 엮인 프로젝트에서 사용해보는 것은 처음이었기에 Mock 생성하는데 많은 애를 먹었습니다. 특히 Cesium의 경우는 WebGL을 사용하여 canvas로 3D를 표현하는 코드가 함께 섞여있어 dependency를 그대로 가져와서 테스트하기가 힘들었습니다. 그래서 dependency를 가져와서 Mock 함수/객체를 생성하는 방향으로 개발했었습니다. .. 2021. 1. 27. Jest watch mode is not working In jest watch mode, jest will only run test related to file changed since the last commit. So, if jest watch mode is not working, you should take a look at git in your project. The cause of issues can be vary. In my case it was something to do with git/index.lock': File exists. index.lock file can be created whenever you write code in the difference process then repository is locked for edit.. 2020. 12. 3. Atomic Design 설계 방법 오늘은 프론트엔드 디자인 설계 기법인 atomic design에 대해서 알아보겠습니다. 기존의 javascript, jquery로 만든 프로젝트에서 컴포넌트의 재사용성에 대한 불편함이 리액트로 넘어와서도 여전히 존재함을 느껴왔습니다. 이는 적절한 디자인 설계 틀이 없어서 발생한 문제라고 생각합니다. Atomic Design은 간단히 컴포넌트의 단위를 매우 작게 쪼개어 큰 단위로 조립해가는 단계를 나누는 방법입니다. 마치 작은 레고를 합쳐서 하나의 큰 결과물을 내는 방법과 같습니다. 그럼 atomic design에 대해 간단하게 알아보겠습니다. Atomic Desing Atomic design은 페이지의 컴포넌트들의 단위를 매우 작게 쪼개어 조립하는 방법입니다. Stephen Hay가 인용한 말과 같이 페.. 2020. 11. 29. 이전 1 2 3 4 다음 728x90
