CodingCredit

요즘 날씨가 완전 봄이다.🌸 봄이오면서 나른~해지고 춘공증도 오구, 아침에 일어나기두 힘들구, 운동도 잘 안하게되구... 점점 생활루틴이 많이 망가진다는 느낌을 받는다. 😭 내일 일어나면 아침꼭먹고, 틈틈이 철봉만이라도 해야지.. 잡설은 그만하고, 내일 배울 ORM에 대해서 미리 공부해봤다. ORM (Object-relational Mapping) 이란? ORM(Object-relational Mapping)이란 OOP 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법으로 쉽게 말해 객체로 관계형 데이터베이스를 관리하는 기술이다. 대부분의 개발 언어 platform마다 제공되고 있으며, 대표적으로 spring에는 JPA가, node의 sequalize, 또 Django에는 orm이 내장되어있다. OR..

프로젝트를 시작하기 전에, 작은페이지라도 처음부터 만들어봐야겠다는 생각이 들어서 CRA로 시작하는 초기세팅을 해보려한다. CRA 설치 npx create-react-app 이후 public폴더안의 index.html과 src폴더 안의 index.js 를 제외하고 다 삭제해준다. 라이브러리 설치 (예시: React Router) React Router 설치 npm install --save react-router-domsrc 폴더 안에 Router.js파일 생성 Router.js 파일 세팅 요청 경로와 렌더링할 컴포넌트 설정한다. 하위 라우터 중 하나를 선택한다. 요청 경로를 다른 경로로 리다이렉션 한다. (아래의 경우로 예를 들면, 설정하지 않는 경로 요청 시 "/" Home 경로로 이동한다는 말이다. ..

본격적으로 DB를 배우기 시작하면서 마주한 SQL! 공부하면서 정리가 필요하다고 생각했던 두가지 key와 group by 문법에 대해 정리해보려고 한다. 두가지 key, Primary Key와 Foreign Key Key는 기본적으로 테이블에서의 중복된 데이터가 삽입되는 것을 방지하기 위한 제한조건이다. 이 Key에는 Primary Key 와 Foreign Key 두가지가 있다. Primary Key가 하나의 테이블에서의 고유한 값이라면, Foreign Key는 여러개의 테이블을 다룰 때 테이블간의 관계를 참조해주는 Key라고 할 수 있다. 필드명특성sid기본키last_name first_name 필드명특성order_id기본키order_date customer_sid외래키amount 위의 에제에서, or..

오늘의 주제는 SPA를 다루다보면 듣게되는 SSR과 CSR이다!! 😎 SSR (Server Side Rendering) 서버측 렌더링. 일반적으로 백엔드 측에서 템플릿 엔진을 사용하여 뷰를 보여주며 JSP, Django의 template engine, NodeJS의 pug,ejs 등이 있다. SSR은 맨 처음 웹페이지를 로드할 때 빠른 속도를 보여준다. 이유는 한번의 요청, 그리고 한번의 응답으로 페이지를 생성하기 때문이다. 덕분에 일정한 퍼포먼스를 보여주고, 전부 계산된 HTML을 보여주므로 HTML의 SEO (Search Engine Optimization, 검색엔진최적화) 옵션들이 전부 살아 있다. 그러나 이때문에, SSR은 페이지의 작은 부분중 하나만을 업데이트 할 일이 생기더라도, 페이지 전체를..

React를 공부하다보면 매우매우 자주 듣게되는 용어들이 있다. 컴포넌트, 단방향데이터, CSR, Virtual DOM . . . 하나하나의 개념을 이해하려고 노력하며 공부하고있다. 오늘은 Virtual DOM에 대해서 공부해봤다.😆 Why Virtual DOM? 누군가 왜 Virtual DOM을 쓰는지 물어본다면 뭐라고 답할까? DOM 조작이 비효율적이고 느리기 때문에?? 자사크립트 엔진은 계속해서 성능이 좋아지는데, 정확히 어떤 부분때문에 DOM이 느려지는 걸까? 정확히는, DOM조작이 전체 동작을 비효율적으로 만드는게 아니라, 그 이후에 일어나는 일 때문에, 작업이 느려지는 것이다. 이를 이해하기 위해서는 브라우저의 워크플로우에 대해 알 필요가 있다.🏃🏻‍♂️ 브라우저의 Workflow DOM Tr..

TypeScript처럼 타입을 확인할 수 있는 기능이 React 내장되어 있는데, 바로 prop-types이다. import PropTypes from 'prop-types' 클래스 컴포넌트, 함수 컴포넌트 상관없이 사용할 수 있다. Test라는 함수의 props 들의 type을 확인해 보자. 아래는 name prop이 string인지 확인하는 예시이다. Test.propTypes = { // 소문자 p prop: PropTypes.string, // 대문자 P } 배열 또는 객체가 한가지 타입으로 구성되어있는지 확인 => arrayOf, objectOf prop1: PropTypes.arrayOf(PropTypes.number) 객체의 각 property value들의 타입을 하나하나 확..