- 이 문제를 해결하기 위해서는 기능별로 코드를 구분해 독립된 파일로 만드는 과정이 필요하다.
다양한 방법으로 모듈 만들기
- 새로운 자바스크립트 파일을 만든 후 exports 전역 변수를 사용해 다른 파일에서도 해당 exports 전역 변수의 속성을 참조할 수 있게 만든다.
- 모듈화한 파일의 기능을 불러오고 싶다면 require() 메소드를 통해 불러들어야 한다.
- require() 메소드로 불러들인 모듈을 변수에 할당한다면 해당 변수에는 exports가 속성으로 할당된다. 이 과정을 거치고 난 후 해당 속성이 할당된 변수에서는 모듈 내의 여러 메소드나 함수 등의 기능을 사용할 수 있게 된다.
exports에 객체 지정하기
- exports에 객체를 만든 후 속성들을 할당해보자
- 노드는 모듈을 처리할 때 exports를 속성으로 인식한다. 이 소성에 함수나 객체를 속성으로서 추가하면 모듈을 불러들인 쪽에서 exports에 추가된 속성들을 참조할 수 있게 되는 것이다.
- exports에 객체를 할당하게 되면 모듈 시스템에서 처리 가능한 전역 변수가 아닌 단순한 변수로 인식된다. 이 때문에 모듈을 불러들인 쪽에서는 exports를 참조할 수 없게 되고 결과 객체에는 아무것도 들어있지 않은 { }가 출력된다.
module.exports를 사용해 객체를 그대로 할당하기
- 객체를 그대로 할당하고자 한다면 exports를 그냥 쓰는 것이 아니라 module.exports를 활용하면 된다.
- exports에 객체를 그대로 할당하면 모듈 파일을 불러들인 쪽에서 해당 객체를 참조할 수 없지만, module.exports에 객체를 할당하면 모듈 파일 안에서 할당한 객체를 참조할 수 있다.
module.exports에 함수만 할당하기
- 함수도 객체이기 때문에 module.exports에 함수만 할당하는 것도 가능하다.
- 익명 함수를 할당했다면 user().name과 같이 객체에 괄호를 넣어주어 함수를 실행할 수 있다.
exports와 module.exports를 함께 사용하기
- 두 가지를 함께 적용하게 되면 module.exports가 먼저 적용된다. 즉, 불러오는 쪽에서 exports에 할당된 전역 변수는 무시되게 된다는 것이다.
- 결론적으로module.exports를 사용하는 것이 권장된다. exports를 사용한다면 모듈을 불러들인 쪽으로 객체를 전달할 수도 없을 뿐더러 module.exports에 무시될 상황이 발생할 수도 있기 때문이다. 더불어 실무에서도 module.exports를 더 많이 사용한다.
모듈을 분리할 때 사용하는 전형적인 코드 패턴
- 모듈화를 위해 사용하는 전형적인 코드 패턴은 세 가지가 있다. 첫 번째로는 모듈 파일 안에서 함수를 할당하는 것, 두 번째로는 모듈 파일 안에서 인스턴스 객체를 할당하는 것, 세 번째로는 모듈 파일 안에서 프로토타입 객체를 할당하는 것이다.
- 전형적인 코드 패턴
함수를 할당하는 경우 : 모듈 안에서 함수를 만들어 할당한다. 모듈을 불러온 후 소괄호를 붙여 모듈을 실행한다.
인스턴스 객체를 할당하는 경우 : 모듈을 불러온 후 해당 객체의 메소드를 호출하거나 속성을 사용할 수 있다.
프로토타입 객체를 할당하는 경우 : 모듈을 불러온 후 new 연산자를 통해 인스턴스 객체를 만들어 사용할 수 있다.
- 이들 세가지는 다시 exports를 활용하는 방식과 module.exports를 활용하는 방식으로 나눠지지만 module.exports를 권장한다
함수를 할당하는 코드 패턴
인스턴스 객체를 할당하는 코드 패턴
프로토타입 객체를 할당하는 코드 패턴
- User객체로 인스턴스 객체를 만드는 것 대신 User객체를 정의 후 module.exports에 직접 할당한다.
- 프로토타입 객체를 할당하게 될 경우 User 객체를 정의하는 부분만 별도의 모듈 파일로 분리 가능해져 다른 파일에서 필요할 때마다 직접 인스턴스 객체를 만들어 사용 가능하다는 장점이 있다.
- 인스턴스 객체의 과정과 같으나 제일 뒤 new 연산자를 통해 바로 객체를 생성하지 않고 module.exports = User의 형태로 코드를 마친다.
- 실제로 모듈을 불러오는 부분에서 new 연산자를 사용해 객체를 생상한 후 해당 객체를 활용해 코드를 진행한다.
07-2 모듈화 방법 자세히 알아보기
스키마 파일을 별도의 모듈 파일로 분리하기
- userSchema.js파일을 만든 후 스키마를 생성하는 부분을 분리해 넣는다.
- main에 넣을 때는 require를 통해 userSchema 모듈을 불러온다. 해당 모듈에는 createSchema함수만 들어있기 때문에 .createSchema(mongoose)를 붙여 한 번에 불러와준다.
사용자 처리 함수를 별도의 모듈 파일로 분리해보기
- 사용자 처리 함수들은 라우팅 미들웨어를 사용하지만 모듈화하는 것은 일반적인 모듈들과 같은 과정을 통한다.
- app.post() 함수의 두 번째 파라미터로 전달되는 것이 함수이므로 이 부분을 모듈화시키는 것이 가능하다.
- 일반적인 모듈을 불러오는 식으로 user를 선언한 후 라우터의 함수부분을 새로 대체해 코드 가독성을 향상시킨다.
07-3 설정 파일 만들기
- 설정 파일을 만들고 메인 파일이 설정 파일을 불러오도록 조치한다면 ㄹ새로운 모듈을 추가했을 때 메인 파일을 수정할 필요가 없어진다.
- 스키마 파일을 정의할 때 사용하는 속성들
file : 스키마 파일을 지정한다.
collection : DB의 컬렉션 이름을 지정한다.
schemaName : 스키마 파일을 불러온 후 결과 객체를 어떤 속성 이름으로 할지 정한다.
modelName : 모델객체를 불러온 후 어떤 속성 이름으로 할지 정한다.
- 스키마를 새로 만들고자 한다면 아래의 두 단계를 거치게 된다.
1 : 스키마 정의 파일을 추가한다. 만일 사용자 정보를 추가하고 싶다면 먼저 사용자 스키마를 userSchema.js파일에 정의한다.
2 : 새로 만든 스키마 정보를 config.js파일의 databaseSchemas 배열 객체 안에 추가한다.
07-4 UI 라이브러리로 웹 문서 예쁘게 꾸미기
- CSS와 자바스크립트만으로도 UI를 꾸밀 수 있지만 CSS 라이브러리를 사용한다면 더 쉽고 이쁜 UI를 얻을 수 있다.
- Semantic UI 라이브러리는 태그만으로 버튼이나 입력 상자와 같은 UI 구성 요소를 만들 수 있도록 돕는다.
- 처음에는 form 부분을 container 클래스의 밖에 꺼낸 상태로 배치를 했지만 화면상 배치가 엉망이 되어 화면 요소를 분석해본 결과 container 안에 넣어야 한다는 것을 찾아내 container의 cardBox 클래스 안에 함께 포함시킴으로서 UI를 완성시켰다.
- 이미지를 지정할 때는 public내에 images폴더가 있는 것이 아니기 때문에 ../를 사용해서 상위 폴더에서부터 찾아갈 수 있도록 해준다.
- 화면 배치 수정 전
반응형 웹으로 웹 문서를 구별해서 보여 주기
- 하나의 파일에서 모바일과 PC 각각의 요청을 구별해서 보여주고 싶다면 반응형 웹 (Responsive Web)을 사용하게 된다.
- 반응형 웹은 단말의 종류에 따라 다르게 보이는 웹 문서를 상황에 맞게 설정할 수 있다. 이 때는 보통 미디어 쿼리를 사용해 단말의 가로 크기나 출력 단말의 종류 등을 구별 후 CSS를 조절하게 된다.
- 반응형 웹 적용 후 로그인 화면
- @media로 시작하는 부분에서는 단말의 가로 크기를 최소값과 최대값 사이 범위로 지정하게 된다.
사용자 리스트 웹 문서 수정하기
- 로그인과 css부분은 동일하게 배치하여 테이블과 form을 구성한다.
- 이 때 완벽하게 중복되는 부분이 발생하기 때문에 css폴더를 새로 만들어 style.css파일에 style부분을 전부 넣은 후 link 태그를 통해 불러온다.
- 결과를 보니 예제의 결과와는 다르게 조회가 왼쪽으로 치우쳐있었다. 이를 해결하기 위해 css 파트에서 form1 클래스에 margin: 0px auto; 속성을 부여해 가운데로 요소가 올 수 있도록 만들어주었다.
- 이후 혹시나 별도의 충돌이 있을 지도 모른다는 가능성때문에 form1 아이디에서 centered클래스로 해당 속성을 분할했다.
사용자 조회에 응답하는 웹 문서 꾸미기
사용자 추가용 웹 문서 꾸미기
- 기본적으로 로그인과 같은 구성이나, 밑에 사용자명을 입력하는 요소를 추가해준다.
- semantic-ui 외에도 부트스트랩이나 타이톤과 같은UI 라이브러리가 많이 존재하기 때문에 목적에 맞는 레이아웃과 위젯이 들어간 결과물이 나올 수 있도록 잘 도와줄 수 있는 라이브러리를 선택하는 것이 중요하다.
