전체 글 검색 결과
77 개의 검색 결과가 있습니다.
React.js

리액트 모달창 만들기 2가지 방법

방법 1. 직접 모달창 컴포넌트 만들기 먼저 모달창으로 사용할 UI 컴포넌트를 만들기 위해 Modal.jsx 파일을 생성합니다. * Modal.jsx function Modal() { return ( Modal ); } 이 모달 컴포넌트를 렌더링할 부모 컴포넌트에서는 모달이 열려있는지, 닫혀있는지에 대한 상태를 관리하고 그 상태 값을 모달 컴포넌트에 전달해야 합니다. 모달 컴포넌트에 부모로부터 받을 수 있는 props 코드를 추가하겠습니다. * Modal.jsx function Modal({ isOpen }) { return ( Modal ); } CSS의 display 속성을 이용하였습니다. 결과적으로 isOpen이 true이면 display의 값은 "block"이 되어 사용자의 화면에 모달창이 나타나..

2023. 2. 13. 08:00
Info

ChatGPT를 프로그래밍에서 활용할 수 있을까?

ChatGPT에 대해서 openai가 내놓은 인공지능 챗봇, 지금은 무료 버전만 있는데 나중에 유료 버전도 나온다고 합니다. ChatGPT는 대화를 위해 최적화된 언어 모델로, 주로 정보를 얻기 위한 대화를 하기 위해 사용할 수 있습니다. 대화는 한 번의 응답으로 끝나는 게 아니라, 지속적으로 이어나갈 수 있으며 문맥에 따른 후속 대답을 끌어낼 수 있습니다. 또한 로봇은 실수를 인정하기도 하고, 잘못된 전제를 반박하기도 하고, 부적절한 요청을 거절하기도 합니다. 모델은 지도학습과 강화학습으로 파인 튜닝했으며, 지도학습의 경우, 인간 트레이너가 사용자와 ChatGPT 양쪽 모두를 연기하는 대화를 모델에 입력했고, 강화 단계에서는 인간 트레이너들이 모델이 이전 대화에서 만든 응답들에 대해 순위를 매겼습니다...

2023. 2. 6. 08:00
Database

시계열 데이터베이스 influxDB 소개 및 사용법

시계열 데이터베이스(TSDB) 시계열 데이터(Time series data)란 시간이 흐름에 따라 발생하는 데이터를 의미합니다. 예를 들면 시간이 흐름에 따라 변하는 온도, 풍향 같은 기후 데이터나 주가 데이터 등이 시계열 데이터입니다. 시계열 데이터는 기본적으로 데이터의 양이 방대하고 끊임없이 증가합니다. 기록되는 각각의 데이터들은 시간 종속성을 가진다는 특성도 있습니다. 관계형 데이터베이스(RDB)나 다른 NoSQL로는 이러한 시계열 데이터를 다루기에 큰 불편함이 있기 때문에 시계열 데이터베이스가 따로 생기게 되었습니다. 시계열 데이터베이스(TSDB)는 시계열 데이터를 효율적으로 다루기위해 고안된 데이터베이스입니다. 시간이 흐름에 따라 많은 양의 데이터가 끊임없이 쌓이기 때문에 쓰기 성능에 최적화가 ..

2022. 11. 7. 08:08
React.js

[React] formik으로 폼(form) 만들기

formik 소개 formik은 리액트에서 form을 다루는 코드들을 쉽게 작성할 수 있도록 도와주는 라이브러리입니다. formik은 리액트에서 form을 다룰 때 3가지 까다로운(성가신) 점들을 해결해줍니다. 1. form의 state 관리 및 form의 안팎에서 value 접근 2. 벨리데이션(Validation)과 에러 메시지 3. submit 다루기 formik을 사용하면 form에서 사용하는 값들을 formik 내부에서 자체적으로 관리합니다. 고로 state를 따로 선언하고 관리할 필요가 없어집니다. 상태 값들을 formik 내부에서 관리하기 때문에 이 값을 얻기 위해서는 formik이 제공하는 api들을 이용해 함수를 호출하면 됩니다. form과 관련하여 내부에서 관리하는 상태들로는 각 inp..

2022. 10. 17. 08:08
React.js

리액트 UI 디자인 고민 Material-UI로 해결하기

디자인 고민을 덜어낼 수 있는 material design 소개 Material design은 구글이 개발한 디자인 언어입니다. 그냥 디자인이 아니라 디자인 언어라고 소개하는 점이 흥미롭습니다. 구글이 Material design을 만든 목적은 디자인의 원칙과 기술적, 과학적 혁신이 결합된 새로운 시각적 언어를 만들기 위함이라고 합니다. 그리고 우리가 보통 의사소통을 위해 사용하는 한국어, 영어 등과 마찬가지로 오픈소스로 공개하여 누구든지 사용 가능하도록 하고 있습니다. 이 시각적 언어는 구체적으로 유저 인터페이스(UI) 디자인의 최상의 결과물을 지원하는 가이드라인, 컴포넌트, 도구들의 시스템을 가지고 있습니다. 오픈 소스로 공개되어 있기 때문에 진짜 사람들이 사용하는 언어처럼 디자이너와 개발자 사이의 ..

2022. 10. 10. 08:08
Info

TDD vs BDD, 무엇을 사용해야 할까?

TDD(Test Driven Development)란? TDD는 보통 애플리케이션 코드를 작성하기 전에 테스트 코드를 먼저 작성하는 규칙을 지키는 것으로 알려져 있습니다. 이것은 테스트 코드 그 자체와는 상관이 없고 개발 습관에 대한 것입니다. TDD의 교과서인 켄트 벡의 테스트 주도 개발이라는 책을 보면 TDD의 정수를 제대로 맛볼 수 있을 것이라고 생각합니다. TDD 개발 습관을 가지기 위해서는 다음의 TDD 사이클을 반복하는 습관을 가지면 됩니다. TDD 사이클 - 테스트 케이스를 하나 추가한다. - 모든 테스트를 실행하고 새로 추가한 것이 실패하는지 확인한다. - 테스트를 통과하기 위한 코드를 작성한다. - 모든 테스트를 실행하고 전부 성공하는지 확인한다. - 리팩토링을 통해 중복을 제거한다. 테..

2022. 10. 3. 08:08
Info

DDD(Domain Driven Design) 진입장벽 극복하기

도메인 주도 설계(DDD, Domain Driven Design) 소개 도메인이 무엇인가요? 도메인의 사전적 의미는 '소프트웨어로 해결해야 할 문제의 영역'입니다. 일반적으로 요구사항이라고 불리는 것들이며 이것을 도메인으로 풀어내는 것은 카테고리화와 비슷합니다. 예를 들어 'A회원이 B상품을 구매한다'는 문제는 회원과 상품이라는 두 개의 명사와 구매한다라는 동사로 분석할 수 있고, 이는 회원, 상품, 주문, 결제 등으로 상세화할 수 있는데 이것들을 도메인이라고 부릅니다. 도메인 주도 설계란? 도메인 주도 설계는 도메인이 설계를 만든다는 것으로 데이터베이스의 엔터티가 설계를 만드는 것과는 다른 패러다임을 제시하는 개념입니다. 즉, 모델은 데이터베이스의 엔터티를 의미하는 것이 아니라, 요구사항을 담고 있으며..

2022. 9. 26. 08:08
Info

매우 설득력있는 클린 아키텍처

클린 아키텍처의 목표 클린 아키텍처에서 말하는 소프트웨어 아키텍처의 목표는 다음과 같습니다. '필요한 시스템을 만들고 유지보수하는 데 투입되는 인력을 최소화하는 데 있다.' 인력을 최소화한다는 것은 비용을 최소화한다는 의미이고 이것은 경제적인 관점에서 바라본 목표입니다. 즉, 클린 아키텍처가 지향하는 바는 소프트웨어의 개발과 유지보수의 비용을 최소화하는 것입니다. 따라서 클린 아키텍처는 개발자의 허영심을 채우기 위한 것이 아닙니다. 이것은 손익을 계산하는 경영자가 관심을 가져야 할 내용입니다. 우리 개발자들은 클린 아키텍처를 공부하여 관리자에게 이것의 경제적인 이점을 어필하여 회사의 성장과 개발 역량의 향상을 모두 쟁취하는 이상적인 길을 걸어갈 수 있습니다. 마지막으로 책에서 나온 다음의 문구로 클린 아..

2022. 9. 19. 08:08
Info

클린 코드, 제대로 알고 실천하기

클린 코드에 대한 오해와 진실 오해1. 클린 코드에 신경을 쓰면 개발 시간이 느려진다. 너무 코드를 깨끗하고 예쁘게 짜는 것에만 치중하면 정작 필요한 기능 구현과 로직 작성에 걸리는 시간이 오래 걸린다고 생각할 수 있습니다. 하지만 깨끗하고 예쁜 코드는 오히려 개발을 빠르게 하기 위해서 중요합니다. 개발자는 코딩을 할 때, 코드를 읽는 시간 대 코드를 짜는 시간 비율이 10대 1을 훌쩍 넘습니다. 즉, 새 코드를 짜면서 끊임없이 반복하여 기존 코드를 읽습니다. 실제로 개발할 때, 코드를 작성하는 시간보다 새로 작성할 코드를 기존 코드 베이스에 녹여낼 방법을 찾기 위해 기존 코드를 읽는 시간이 훨씬 길다는 것을 조금 신경 써보면 금방 눈치챌 수 있습니다. 따라서 더 읽기 쉬운 코드는 개발 속도를 향상시킵니..

2022. 9. 12. 08:08
React.js

Jest + react testing library로 react 테스트 코드 작성하기

무엇을 테스트할까? React 컴포넌트의 인터페이스와 렌더링, 유저와의 상호작용 이후에 변화하는 데이터(상태) 그리고 네비게이팅과 라우터 경로에 따른 렌더링 테스트를 할 것입니다. UI 컴포넌트 테스트는 매우 상당히 복잡합니다. 우선, 조건에 따른 렌더링을 테스트합니다. props와 state가 조건으로 주어지며, 더 넓게 보면 브라우저의 종류와 viewport의 크기도 조건으로 고려합니다. 그리고, 유저에게 인터페이스를 제공하기 때문에 유저가 UI에 할 수 있는 모든 행동 시나리오를 테스트합니다. 이 경우 네이밍이나 단언 컨벤션은 TDD가 아닌 BDD를 따르는 것이 좋습니다. 보편 언어(Ubiquitous Language)를 사용하여 비개발자도 읽을 수 있도록 유저 입장에서 시나리오를 작성하는 것입니다..

2022. 7. 4. 08:00