본문 바로가기

FrontEnd

 (437)
[Epic React] form 사용하기 Epic React by Kent C. Dodds https://epicreact.dev/learn/ epicreact.dev kent c dodds 의 Epic React 기초 강의 공부 내용 정리이다. 추가로 적고 넘어갈만한 팁이 있다면 fragment는 flexbox나 grid랑 사용하면 좋다고 한다. jsx를 바벨이 해석할 때. 함수형 컴포넌트와 일반 컴포넌트를 맨 앞글자의 대소문자 여부로 판단하기 때문에 주의해야 함. function UsernameForm({onSubmitUsername}) { const [error,setError] = React.useState(null); const [value,setValue] = React.useState(""); function handleSubmit..
[Epic React] React.createElement, jsx와 바벨 Get Really Good at React | Epic React by Kent C. Dodds https://epicreact.dev/learn/ epicreact.dev 해당 수업을 내돈내산하여 공부한 내용이다. props를 어떻게 사용해야 가장 성능에 영향을 안주는지 알아보자. 우리가 리액트로 개발하며 주구장창 만드는 jsx 컴포넌트는 바벨에 의해 컴파일되어 React.createElement로 변환된다. 정말 기본중의 기본인 두 가지 사용법을 보고가자. 첫번째는 2개 파라미터. 두번째에 props 객체 때려넣기 세번째는 prop을 null로 지정하고, 세번째 인자에 children 넣기 ReactDOM.render(div(), document.getElementById('root')) funct..
[Epic React] Dom Api로 비동기 렌더링 Get Really Good at React | Epic React by Kent C. Dodds https://epicreact.dev/learn/ epicreact.dev 해당 클래스를 내돈내산으로 공부하며 작성하는 짤막글이다. 바닐라 자바스크립트의 dom api를 사용해서 functional하게 dom을 조작해 보려니 뭔가 생각했던 대로 동작하지 않는다. 그래서 심심해서 dom을 비동기적으로 조작하는 짤막한 코드를 작성해 보았다. root() .then($root => document.body.append($root) || $root) .then($root => Promise.all([$root, div()])) .then(([r, d]) => r.append(d)) async function di..
[TypeORM] 관계 심화 라이프사이클을 같이 관리하고 싶다면 cascade 옵션을 ["insert","update","delete"] 로 지정한다. (부모가 하나일때!) onDelete는 @ManyToOne 쪽에 설정한다. (자식이 부모따라 가는 매커니즘) # 1대1 관계 일대일 관계는 A가 B의 인스턴스를 하나만 포함하고 B가 A의 인스턴스를 하나만 포함하는 관계입니다. 예를 들어 사용자 및 프로필 엔터티를 살펴보겠습니다. 사용자는 단일 프로필만 가질 수 있으며 단일 프로필은 단일 사용자만 소유합니다. FK 쪽에만 관계 지정하기 import {Entity, PrimaryGeneratedColumn, Column} from "typeorm"; @Entity() export class Profile { @PrimaryGenerat..
[TypeORM] 릴레이션 기본과 조인 TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms. TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, typeorm.io TypeORM 공식 문서를 스터디한 게시물이다. 애플리케이션에서 DB..
TypeORM 스터디 : QueryBuilder 3편 - 캐싱 1편 보기 TypeORM 스터디 : QueryBuilder 1편 - CRUD 기본 TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova a.. itchallenger.tistory.com 2편 보기 TypeORM 스터디 : QueryBuilder 2편 - CRUD 심화 TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MyS..
TypeORM 스터디 : QueryBuilder 2편 - CRUD 심화 1편 보기 TypeORM 스터디 : QueryBuilder 1편 - CRUD 기본 TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova a.. itchallenger.tistory.com 3편 보기 TypeORM 스터디 : QueryBuilder 3편 - 캐싱 TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, P..
TypeORM 스터디 : QueryBuilder 1편 - CRUD 기본 공식 메뉴얼을 번역 및 정리한 내용이다. 2편 보기 TypeORM 스터디 : QueryBuilder 2편 - CRUD 심화 TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova a.. itchallenger.tistory.com 3편 보기 TypeORM 스터디 : QueryBuilder 3편 - 캐싱 TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ..

티스토리툴바