IT's Jenna

리액트의 컴포넌트에는 클래스형과 함수형 두 가지가 있다. 과거에는 클래스형과 함수형의 구분이 명확했다. 클래스형은 state와 life-cycle 사용이 가능했고 함수형은 불가했기 때문에, 클래스형은 복잡한 주요 컴포넌트에 사용되었고 함수형은 비교적 단순한 하위 컴포넌트들에 사용되었다. 하지만 현재는 함수형에 hook이라는 기능이 출시되면서 함수형에서도 state와 life-cycle을 사용할 수 있게 되었다. 현재는 리액트 공식적으로 클래스형이 아닌 함수형을 사용하는 것을 권장하고 있다. 그렇다면 위에서 언급한 life-cyle이 무엇인지 알아보자. 라이프 사이클이란 컴포넌트가 생성 및 사용되고 소멸될 때까지의 일련의 과정을 의미한다. 클래스형의 라이프 사이클은 다음과 같다. 1. Mount : 컴포넌..

이제 본격적으로 DB의 데이터를 활용하는 서버 API를 만들어 보자. 우선 코딩 설명을 들어가기 전에 다시 한번 express 프레임워크의 구조를 정리해보았다. bin - www : 통신 관련 설정 (포트 및 http 관련) components : 모든 routes 에서 사용되는 공통 API들을 구분하여 정리 config : 데이터 베이스 연결 models : 각 routes에서 사용하는 데이터 베이스의 CRUD API 정의 (insert, update, delete, getList) public : 정적 파일 보관 장소 routes : 라우팅 경로별 client에 응답 동작 설정 (POST, PUT, DELETE, GET) app.js : express 프레임워크의 메인 스크립트로서 라우팅 서버 추가 ..

데이터베이스 모델링 - 현실에 존재하는 복잡한 데이터들을 체계화 및 단순화하여 컴퓨터상의 데이터베이스로 옮기는 과정 - 데이터베이스 모델링을 어떻게 하느냐에 따라 데이터 품질 및 서비스의 질이 달라질 수 있다 데이터베이스 모델링 설계할 때 가이드 - 데이터 중복 줄이기 - 유연하게 설계 (서비스 동작이 변경될 때 대응할 수 있도록 설계되어야 함) - 일관적으로 설계 (설계 및 명명 기준이 명확할 수 있도록) - 데이터베이스에 null 값이 없도록 설계 but, 현실적으로 위 규칙을 지키는 것이 쉽지는 않다.. ERD (Entity Relationship Diagram) - Entity : 하나의 독립적인 데이터 (테이블), Entity는 관계에 따라 다른 데이터를 속성으로 가질 수 있다. - ERD : ..

기본적으로 http 통신 프로토콜에선 req, res에 텍스트를 전달하면서 통신한다. 텍스트 외의 파일을 업로드하기 위해서는 form-data 형식으로 통신을 해야 하고 form-data 형식을 사용하기 위해선 추가 모듈이 필요하다. 이때 사용하는 모듈이 formidable이다. formidable 모듈은 npm i formidable --save로 설치해서 사용할 수 있다. 공부하고 있는 단계에서는 서버와 Database 그리고 파일을 저장하는 storage까지 하나의 PC에서 사용하지만 실무에서는 server 컴퓨터, database 컴퓨터, storage 컴퓨터를 모두 분리해서 사용한다. 이렇게 PC를 분리해서 사용해야 추후에 PC 확장이 용이하다. 파일을 업로드할 때의 절차를 한번 알아보자. 예를..

값을 넣고 읽어오는 API : readline 관련해선 이전 포스팅 참고 바랍니다. https://jungeunpyun.tistory.com/14?category=914393 { let numbers = input.split(" ") a = Number(numbers[0]) b = Number(numbers[1]) if(a>b) { console.log('>') }else if (a{ process.exit() }) 2. 문제번호 9498번, 시험 성적 split을 활용하여 값을 여러 개 입력하면 object 형태로 들어가지만 하나의 값만 넣어주면 string으로 들어가게 된다. 이때 parseInt를 사용하여 string을 정수값으로 변경할 수 있다. 처음에 a값 범위를 정할 때, 100>=a>=90 ..

리액트란? 프론트엔드에서 웹앱 개발을 위해 사용하는 javascript 개발 환경 (페이스북에서 개발됨) 리액트를 사용하기 위해서 알아야 하는 개념이 3가지가 있다. 1. 컴포넌트 (Component) 컴포넌트는 props를 input으로 받고, UI가 어떻게 보여야 하는지 정의하는 리액트 Element (HTML 형식)를 return 하는 함수이다. 컴포넌트는 props와 state라는 2가지 속성을 가지고 있다. 2. Props props는 위에서 언급한 것 처럼 컴포넌트가 부모로부터 받는 input 이기 때문에 컴포넌트에 값이 할당될 뿐, 컴포넌트에서 자체적으로 값을 변경할 수 없다. 이때 props는 부모로부터 값을 받을 수만 있고 부모의 값이 변경되면 자식의 props도 변경되는 일방향적 구조이..