React(29)
-
[프론트엔드] cs 지식6 - React 편(2)
1. Redux 사용해 본 적 있습니까? Redux를 적용사례의 대해 설명하세요. Redux는 새로 고침시 state 값을 새로 고침시 변하지 않게 하기 위해 사용합니다. 대부분은 로그인 유지 시 사용되는 편에 속하고요. 이것을 redux session 방식 혹은 redux local 방식으로 이용하여 state 값을 저장합니다. redux session은 javascript의 sessionStorage 역할을 수행하고 있으며 브라우저 창이 닫을 시 state가 다시 초기화되는 상태를 말하고, localStorage는 서버를 내릴 때까지 지속적으로 state값이 유지되는 것을 뜻합니다. 2. useState()와 useEffect()의 대해서 설명하세요. useState()와 useEffect()는 리액..
2023.12.03 -
[프론트엔드] cs 지식5 - React 편
1. dom이란? => 문서 객체 모델이라고 불리우며, 문서의 구성 요소들을 객체로 구조화 하여 표현 한 것. 쉽게 설명하면 문서 전체에 html 태그를 tree dom으로 구성함 2. Virtual dom => Dom을 추상화한 가상의 객체, 즉 직접 dom을 접근하지 않고, 가상의 공간에서 dom을 사용하는 것. 즉, 직접 dom에 접근하지 않아 성능 향상에 개편됨 3. Virtual Dom 동작 원리 => DOM을 추상화 한 객체를 메모리에 저장고, 이는 Javascript 객체를 건드는 행위이기 때문에 변경 사항 발생 시 메모리 변경으로 처리 되기 때문에 즉시 반영된다. 이 과정은 재조정을 한다라고 표현한다. 4. 재조정이란? => Batch Update 방식으로 처리하여 변경 사항을 모든 Ele..
2023.12.03 -
[React CS] 디자인 패턴 2 - Custom hooks 패턴
안녕하세요. 디자인 패턴을 알아보는 시간을 가집니다. 지난시간에는 Presentation & Container 패턴을 알아가면서 예제로 적용 시켰습니다. 하지만 이 패턴은 1:1 = 로직 : 뷰 적용 방식으로 사용이 되는 형태로 구성 되어져 있으며 1개의 로직에서 여러개의 뷰를 활용하여 사용 하고 싶을 때 대비하여 적용을 시켜보고자 합니다. 이 것을 적용 시키는 패턴은 Custom Hooks 패턴이며, Custom Hooks 패턴의 대해서 대해서 알아봅니다. 먼저 리마인드로, Presentation & Container 패턴을 적용 전과 적용 후의 대해서 구조를 정리해봅니다. Presiontation Component - UI 컴포넌트만 구성, Conatiner Component - 로직 부분만 구성 이..
2023.11.13 -
[React CS] 디자인 패턴 1 - Presentation&Container 패턴
안녕하세요. 디자인 패턴을 알아보는 시간을 가집니다. 이번 시간에는 디자인 패턴을 사용하는 패턴 중 하나인 Presentation & Container 패턴의 대해서 알아봅니다. 보통 처음 시간에 배울 때 구조는 아래와 같은 구조로 사용하는데, function 컴포넌트 () { /* 로직 구현 */ return ( UI 출력 ) } 이런 구조를 이용하여 사용을 하게 되실겁니다. 하지만, 매번 사용하다가 조금 더 클린화 된 코드를 작성하고, 로직 컴포넌트와 View 컴포넌트로 나눠서 작성하는 것을 생각을 해낸 결과 디자인 패턴으로 쓰이는 Presentation & Container 디자인 패턴을 이용하여 사용 방법으로 활용하여 사용이 가능하다는 것을 알게 되었습니다. 따라서 Presentation & Co..
2023.11.07 -
[13] 음식점 포스 프로그램 - 프론트엔드 API 연동(2), 계좌 입출금, 음식 구매 연동 (로그 파일 삽입 포함)
지난 시간에는 고객 정보와 로그 관련 API를 연동 작업을 진행 하였습니다. 또한 React-Query와 Recoil 사용 하는 방법에 대해서도 알아가 보았는데, 이번 시간에는 마저 못한 부분 중 하나인 음식 정보 및 계좌 정보를 Front-End 개발자에게 넘겨줄 각각 인터페이스 개발을 이어서 진행 해보겠습니다. github: https://github.com/BerkleyLim/foodstor_pos GitHub - BerkleyLim/foodstor_pos: This is the program on foot store pos machine. This is the program on foot store pos machine. . Contribute to BerkleyLim/foodstor_pos de..
2023.10.29 -
[6] 음식점 포스 프로그램 - 화면단 개발(4) : 이벤트 로그 컴포넌트 구성
이번 시간에는 좀 더 유용한 이벤트 로그를 찍는 것을 개발하였습니다. 고객이 사용한 행위의 대한 기록을 남기는 용도로 로그로 남겨 진행하였습니다. 특별한 요구 사항은 없지만, 고객이 한 행위를 관리자 관점이나 하는 행위에 대해 테스트 용도로 쓰기 위해 만들용도로 쓰이니 참조하였으면 하는 바램입니다. (관리자 관점일 경우 로그 관리 기능으로 유용하게 사용 가능) github: https://github.com/BerkleyLim/foodstor_pos GitHub - BerkleyLim/foodstor_pos: This is the program on foot store pos machine. This is the program on foot store pos machine. . Contribute to ..
2023.09.24