본문 바로가기

전체 글

Debugging React Apps [React-The Complete Guide] Finding & Fixing ErrorsMaking Sense of React Error MessagesFinding Logical Errors via the Browser DevTools & DebuggerEnabling React's Strict ModeUsing the React DevTools for Application Analysis & Manipulation  *콘솔에서 오류 메세지가 출력되는 경우오류 메세지 뒤의 stack-trace를 통해 문제가 발생하는 코드의 부분을 찾아갈 수 있음.ex) Value값 undefined 가져올 수 없는 case초기값 없을 시 if return을 통해 예외 처리    *코드에 논리적 오류가 있는 경우 콘솔에 오류 메세지가 출력되지 않음.value 값을 .. 더보기
Styling React Components [React - The Complete Guide 2024] Vanilla CSSCSS code is decoupled from JSX codeCSS code is not scoped to components -> CSS rules may clash across components How to Scoping?Inline Styleuse inline style  by jsx => { } react에서는 style 값을 표준 동적 값 문법으로 전달해야함  {{ key : value }}일반적으로 cammel 방식 선호return (Inline Style의 장단점 Quick & easy to add to JSXSytles only affect the element to which you add them. Dynamic(conditioning) Sytling is sim.. 더보기
React Essentials [React - The Complete Guide] 본 글은 udemy의React- The Complete Guide 2024 (incl. Next.js, Redux)를수강하며 작성한 글입니다.  리액트의 핵심적인 부분들에 대해 알아보자. Components, JSX, Props, State & More"React Apps are built by combining components."=> Reusable Building Blocks, Related Code Lives Together, Separation of Concerns HTML, CSS, JS => React Component (JSX) - (transpile) > Browser DOM *JSX : JavaScript Syntax Extension Rules of React Components1... 더보기
GitHub저장소에 프로젝트 여러 개 올리기 React강의를 들으며 수행하게 되는 프로젝트들을 github에 올려두려고 했는데, 각 프로젝트별로 repository를 만들게 되니, 너무 지저분해 보여서하나의 repository에 여러 프로젝트들을 저장해두는 방법을 찾아보게 되었다. 하나의 저장소에 올린 후 지속적으로 개발하며 관리하는 것은 어려우므로, 개발이 끝난 프로젝트를 저장하는 용도로 사용하자.(개발이 끝나기 전까지는 각자의 repository 사용) *만약 프로젝트 또한 완전히 local에 있었다면... 깃허브에서 repository 생성 후git remote add origin [원격저장소 주소]git branch (브랜치 확인)git add .git commitgit push origin [브랜치 이름]을 통해 repository에 프로.. 더보기
02. 리액트 핵심 요소 깊게 살펴보기 [모던 리액트 Deep Dive] JSX란?JSX(JavaScript XML)는 JavaScript 코드 안에서 HTML을 작성할 수 있게 해주는 문법이다. JSX를 사용하면 React 컴포넌트를 직관적이고 가독성 있게 작성할 수 있다. JSX 코드는 브라우저가 직접 이해할 수 없으므로, Babel 같은 트랜스파일러를 통해 JavaScript 코드로 변환된다. 이 변환된 코드는 React의 React.createElement() 함수를 사용해 DOM 요소를 생성하게 된다.JSX의 기본 구성 요소JSXElement:HTML 구문 외에도 사용자 정의 컴포넌트 태그를 나타낸다. 사용자 정의 태그는 대문자로 시작해야 한다.JSXAttributes:JSXElement에 부여할 수 있는 속성들로, HTML 속성처럼 동작한다. props를 통해 컴포.. 더보기
01. 자바스크립트 [모던 리액트 Deep Dive] 해당 게시글은 [모던 리액트 Deep Dive]를 공부하며 작성하는 것으로, 문제가 될 시 삭제하겠습니다. 1장은 리액트에서 자주 사용되는 JS문법들에 대해 다루고 있다. 동등 비교원시 타입(primitive type) boolean null undefined niimber string symbol bigint - 값을 직접 저장객체 타입(object/reference type) object - 값을 참조로 저장== : 타입이 다르다면 자동 변환 후 비교=== : 타입 변환 없이 비교 (엄격히 비교)Object.is( , ) : 객체와 원시 타입 모두 비교   5 == '5' (true) / 5==='5' (false) ,+0 === -0 (true) / Object.is(+0, -0) (false) 객.. 더보기
LSTM 예측 - BEMS 시계열 데이터 RNN, LSTM, GRU, Transformer Model에 대해 살펴보고, LSTM과 GRU를 통해 주가 데이터 예측을 진행해 보았다.이제 BEMS(Building Energy Management System)의 실제 Data set에 적용해보자. 시드 고정 및 GPU장비 설정import osimport random# 시드 값 고정seed = 42# Python 내장 해시 함수의 시드를 고정하여 재현성을 확보 (Python 3.3 이상에서만 적용)os.environ['PYTHONHASHSEED'] = str(seed)random.seed(seed) # Python의 random 모듈np.random.seed(seed )# NumPy의 난수 생성기torch.manual_seed(seed) # PyTor.. 더보기
Local 원격저장소를 통해 DVC 사용하기 위와 같은 이유로... 구글 드라이브와의 연동은 결국 포기했다..Colab DVC를 상상했는데.... 흑이전에 GCP에서 진행하였던것과 달리, 이번에는 대신 local환경을 원격저장소로 사용해 보았다! 먼저, dvc파일들을 github에서도 확인할 수 있으면 좋을 것 같아서 git의 원격 저장소를 github로 설정해 주었다.방법은 1. github repository 생성2.  git remote add origin 3. git push -u origin main (github사이트가 켜지면 인증)으로 비교적 간단하다. 이후 git remote -v를 통해 확인해 볼 수 있다. 이제 local 원격저장소로 사용할 디렉터리를 생성해 준 후,dvc remote add -d 를 통해 DVC의 원격저장소를.. 더보기

티스토리툴바