Dev/reactJS18 tf.constant와 tf.Variable: 상수와 변수의 차이 불변성(Immutable) vs. 가변성(Mutable) tf.constant와 tf.Variable: 상수와 변수의 차이 불변성(Immutable) vs. 가변성(Mutable)TensorFlow는 머신러닝과 딥러닝 모델을 구현하는 데 있어 가장 널리 사용되는 오픈소스 라이브러리 중 하나입니다. 모델을 구성할 때 데이터를 표현하는 기본 단위인 텐서를 다루는 방법은 매우 중요한데, 그 중에서도 tf.constant와 tf.Variable은 핵심적인 역할을 수행합니다. 이번 포스팅에서는 두 함수의 차이점을 비교하고, 모델 학습 시 언제 어떤 함수를 사용해야 하는지 실습 예제와 함께 상세히 설명드리겠습니다.1. 서론TensorFlow의 주요 특징 중 하나는 데이터 흐름 그래프를 기반으로 복잡한 연산을 효과적으로 처리할 수 있다는 점입니다. 이 과정에서 텐서는 수치.. 2025. 2. 26. 애자일 개발 환경에서의 UI 프로토타이핑과 컴포넌트 디자인 애자일 개발 환경에서의 UI 프로토타이핑과 컴포넌트 디자인애자일 개발 환경에서는 빠른 피드백과 지속적인 개선이 핵심 가치로 자리 잡고 있습니다. 이에 따라 UI 프로토타이핑과 컴포넌트 디자인은 제품 개발의 초기 단계부터 중요한 역할을 담당하게 됩니다.본 포스팅에서는 프로토타이핑 도구와 리액트 스토리북(Storybook) 등을 활용하여 UI 디자인을 빠르게 시각화하고 검증하는 방법에 대해 구체적으로 설명드리며, 개발 프로세스와 팀 내 협업 시나리오를 함께 다루어 보겠습니다.UI 프로토타이핑의 필요성과 이점애자일 개발 환경에서는 제품의 기능과 디자인이 빠르게 변화하는 만큼, 초기 단계부터 시각적인 피드백을 얻는 것이 중요합니다. UI 프로토타이핑은 다음과 같은 이점을 제공합니다.빠른 피드백 수집: 초기 단계.. 2025. 2. 25. TensorFlow 기본 구조 tf.constant, tf.Variable 함수 소개 TensorFlow 기본 구조 tf.constant, tf.Variable 함수 소개TensorFlow는 구글이 개발한 오픈소스 머신러닝 라이브러리로, 딥러닝 모델을 구축하고 학습시키는 데 널리 사용되고 있습니다. 이 포스팅에서는 TensorFlow의 전반적인 아키텍처와 함께, 그 핵심 함수인 tf.constant와 tf.Variable을 중심으로 간단한 텐서 연산을 수행하는 방법을 소개합니다. 이를 통해 TensorFlow의 기본 개념을 이해하고, 실제 코드 예제를 통해 학습할 수 있는 기회를 제공하고자 합니다.1. TensorFlow 개요 및 아키텍처TensorFlow는 데이터 흐름 그래프(data flow graph)를 기반으로 동작합니다. 이 그래프에서는 노드(node)가 수학적 연산을 수행하고,.. 2025. 2. 24. [리액트] REST API, AXIOS로 받아온 Array 객체의 map 호출 에러 해결하기 [리액트] REST API, AXIOS로 받아온 Array 객체의 map 호출 에러 해결하기이번 포스팅에서는 React와 Axios를 사용하여 REST API로부터 데이터를 받아올 때 발생하는 “map 함수 호출 불가” 에러에 대해 심도 있게 다루어보겠습니다. 개발 과정에서 API 호출 결과가 정상적으로 formdata에 저장되는 것은 확인되었지만, 화면의 특정 div 영역에서 데이터를 꺼내 렌더링하려고 할 때 에러가 발생한 경험이 있으신 분들이라면 이번 글이 큰 도움이 될 것입니다. 특히, 비동기 처리 과정에서 데이터가 완전히 준비되기 전에 렌더링이 시도되어 발생하는 문제를 어떻게 해결할 수 있는지 구체적인 코드 예시와 함께 설명드리겠습니다.도입부: 문제 상황과 발생 원인React 애플리케이션에서 RE.. 2025. 2. 2. React 실행 오류: npm ERR! errno -4058 해결 방법 React 실행 오류: npm ERR! errno -4058 해결 방법 npm ERR! errno -4058 오류의 이해와 원인 파악 React 개발 환경에서 가끔 마주치는 npm ERR! errno -4058 오류는 개발자들에게 당혹감을 줄 수 있습니다. 이 오류는 주로 Node.js와 관련된 패키지 관리자인 npm을 사용할 때 발생하는 문제로, 파일 시스템 접근과 관련된 문제에서 주로 발생합니다. 오류 메시지가 표시되는 주요 원인은 다음과 같습니다. 파일 또는 디렉토리 접근 권한 부족: npm이 필요한 파일이나 디렉토리에 접근할 수 없는 경우 발생합니다. 존재하지 않는 경로 참조: 설치하려는 패키지나 스크립트가 참조하는 파일/디렉토리가 실제로 존재하지 않을 때 발생합니다. 시스템 경로 문제: 시스템의.. 2023. 11. 22. 리액트 쿼리 v5 에서 바뀐 점 react query v5 react query v5 리액트 쿼리 v5 에서 바뀐 점 리액트 쿼리 v5의 변화에 대해 자세히 알아보겠습니다. 이 업데이트는 많은 중요한 변화를 포함하고 있으며, 특히 함수 호출 방식, 콜백 처리, 그리고 타입스크립트 지원 등의 분야에서 변화가 이루어졌습니다. react query v5 함수 호출 방식의 단순화 하나의 객체로 단일 서명 지원: 이전 버전에서는 useQuery와 같은 함수들이 여러 오버로드를 가지고 있었으나, 이제는 단일 객체 형식만을 지원합니다. 이 변경으로 인해 타입스크립트 유지 관리가 간소화되고, 런타임 시에 파라미터 유형을 확인하는 절차가 단순화됩니다. // 이전 useQuery(key, fn, options) // v5에서 useQuery({ queryKey, queryFn, .. 2023. 11. 16. 리액트 프로젝트의 폴더 구조 리액트 프로젝트의 폴더 구조 리액트(React)는 유저 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 컴포넌트 기반 아키텍처를 중심으로 한다. 이러한 구조는 개발자가 대규모 어플리케이션을 구축할 때 모듈성, 재사용성, 그리고 관리 용이성을 제공한다. 리액트 프로젝트에서 효율적인 폴더 구조를 갖추는 것은 프로젝트의 유지보수성을 높이고, 팀 작업의 생산성을 촉진하는 데 매우 중요하다. 본 글에서는 리액트 프로젝트를 위한 폴더 구조에 대해 논의하며, 이 구조가 왜 중요한지, 그리고 어떻게 구성되어야 하는지에 대한 깊이 있는 통찰을 제공할 것이다. 리액트 프로젝트의 폴더 구조 중요성 리액트 프로젝트의 폴더 구조를 적절히 구성하는 것은 다음과 같은 여러 가지 이유로 매우 중요하다: 코드의 가독성: 체계적인.. 2023. 10. 30. 리액트 초기 세팅 환경 구축하기: Windows에서의 React 설치 가이드 리액트 환경 구축하기: Windows에서의 React 설치 가이드 안녕하세요! 이번에는 리액트(React)를 Windows 환경에서 설치하는 방법에 대해 알아보겠습니다. 리액트는 페이스북에서 개발한 프론트엔드 라이브러리로, 주로 컴포넌트 기반의 개발에 중점을 두고 있습니다. 이제부터 순차적으로 진행해보겠습니다. 리액트 초기 세팅 전 준비 사항 리액트를 설치하기 전에 몇 가지 준비 사항이 필요합니다. 아래와 같이 진행해보세요. Node.js 설치: 리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js는 Webpack과 Babel과 같은 도구를 사용하기 위해 필요한 기반 환경을 제공합니다. Node.js 공식 웹사이트에서 설치하세요. Yarn 설치: Node.js와 함께 설치되는 패키지 매니.. 2023. 8. 22. javascript classList.toggle로 jquery addClass, removeClass, toggleClass 구현하기 / 더보기 버튼 클릭시 영역 확장 아래처럼 더 보기 버튼을 누르면 위 영역이 확장되면서 내용을 더 보여주는 컴포넌트를 구현하려고 한다. 사실 jquery라면 일도 아니지만, javascript 특히 react에서는 귀찮다. 여러분이 느끼셨을 것 같지만, JavaScript, 특히 React를 사용하면서 DOM을 선택하는 작업이 매우 번거로울 때가 많습니다. 그리고 이것은 jQuery를 사용하시던 분들에게는 특히 더 그렇게 느껴질 수 있습니다. jQuery의 힘을 알고 있는 우리에게 이는 상당히 실망스러운 측면 중 하나일 것입니다. 그러나, 이렇게 불편함을 겪고 있는 것은 저희들만은 아닙니다. 사실, 이 문제를 해결하기 위한 방법은 많습니다. 여러 가지 가능한 방법들이 있지만, 주요한 두 가지 해결책은 ref 사용과 useState 사용입.. 2022. 11. 3. 이전 1 2 다음
