'분류 전체보기'에 해당되는 글 6건

이제 데이터베이스도 준비 됬으니 화면 개발을 시작해본다.

요새는 React로 화면 개발을 할 때는 컴포넌트가 미리 개발 되어져있는 라이브러리가 잘 되어 있는 것 같다.

최근에 입사한 회사에서는 antd를 활용해서 개발하고 있는데 크게 불편함 없이 괜찮은 디자인과 원하는 범위의 컴포넌트를 찾아서 화면을 쉽게 개발했었다. 이전 회사에서는 React Native로 앱 개발했을 때는 디자인 하시는 분이 화면 디자인만 주고 그걸 전부 다음 코드와 같이 수동으로 위치 맞춰가면서 개발 했었다. 이게 진짜... 불편하고 중복도 많고 가끔 어이없는 버그 ( 부모의 flex 값을 1로 정의 하고 자식들의 합계를 1로 맞췄는데 안 맞는다거나 경계선이 어긋나는 버그 등)가 발생하면 불필요한 시간을 낭비하게 된다. 

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
	<View style={ { flex: .2, justifyContent: 'center', alignItems: 'center'  } }>
 		<Text>제목</Text>
	</View>	
	<View style={ { flex: .8, justifyContent: 'center', alignItems: 'center'  } }>
		<Text>내용</Text>
	</View>
</View>

그런 안 좋은(?)경험이 있어서인지 antd는 나에게는 진짜 편하고 좋았었다. 

어쨌든 그래서 이번에 회사 입사 후 편하게 이용해 온  antd를 활용해서 화면을 개발 진행했다.

일단은 로그인, 회원가입, 게시판 화면 딱 3개가 끝이다. 막 엄청 예쁘게 만든건 아니지만 정말 깔끔하게 보인다.

나중에 소스 정리하면서 좀 더 화면은 정리할 것이다. 

배치 부분은 예전에 React Native 사용할 때 flex를 활용했기 때문에 그걸로 style 지정해서 잡아주었다.

화면 쪽은 배치 세세히 잡는 것이 살짝 시간이 걸렸는데 크게 정리할 것은 없고 antd가 꽤 편하게 되어있는 것 같다.

그래도 꽤 편하게 개발했고 그러면서 정리하고 싶은 부분이 하나 있었다.

바로 Form에 대한 내용이다.

예전에 react 공부할 때 유명한 form 라이브러리 (formik, react-hook-form 등)가 있었는데도 불구하고

번거로운 것 같아서 state나 ref를 사용했었고 따로 validation 체크 함수를 정의해서 개발했었다.

근데 이번에 antd에서 제공하는 Form을 사용해보니 크게 문제 없이 편하게 코드를 구현할 수 있었고 간단하고 깔끔했다. 

(물론 아직은 엄청 단순한 코드라 그럴 수 있지만 회원가입 정도에는 편하게 이용할 수 있을 것 같다.)

어쨌든 사용방법은 다음과 같이 정리해볼 수 있다.

우선 useForm을 이용해 변수 form 을 선언하고, onFinish로 데이터를 받을 함수를 선언해준다.

이후에 Form에 form 속성에 위에서 선언한 form 변수를 연결해주기만 하면 준비 끝이다.

그 후에 위처럼 Form.Item 태그를 Input, Select 같은 태그에 감싸서 사용해주면 된다.

Form.Item의 속성 태그를 간단하게 살펴보면 다음과 같다.

- name: 입력한 데이터의 인식할 수 있는 이름이다. 나중에 onFinish로 값 넘어 올 때 이 이름으로 넘어온다. 

(이건 기존 input태그의 name이랑 역할이 같다고 생각하면 된다.)

- label: Label 태그의 역할을 해주며, 입력창 옆에 레이블이 표시된다.

- rules: validation을 지정해줄 수 있다. 여기에 배열형태로 값을 넘길 수 있고, 지정할 validation이름과 message를 객체로 여러개 지정할 수 있다. 이 validation 항목에 대해 어긋나는 것이 있다면 message가 실제 입력창 아래에 표시된다.

위 사진을 보면 좀 더 이해가 쉬울 것이다. 어쨌든 위처럼 코드를 작성하면 validation 체크+Label 표시+변수 생성을 간단히 하나로(?) 사용할 수 있다.

물론 기본 제공하는 validation인 required(필수값), max(최대 길이), min(최소 길이) 등의 속성만으로 복잡한 validation 체크는 어렵다. 작성해본 회원가입 페이지로 예를 들면, 이메일 주소 형식을 체크한다거나 비밀번호랑 비밀번호체크 값이 일치하는지 확인하는 등의 체크는 기본속성으로는 힘들다.

그래서 위의 그림과 같이 정규식을 사용하여 validation 체크를 할 수 있게 해주는 pattern이라는 속성과 필드값을 가져와서 다른 값이랑 비교할 수 있게 해주는 함수인 validator 라는 속성을 제공해주고 있다. 

저 함수에 대한 정보는 antd api 속성명에 따로 있지는 않고, 예제를 살펴보다가 발견했다. 어쨌든 getFieldValue라는 함수를 파라미터로 받아서 그걸 이용해 특정 필드의 값을 가져와 validator 함수를 통해 현재 입력중인 필드값을 비교해서 Promise형태로 반환해줄 수 있다.

저렇게 작성해주면 위처럼 validation 체크가 가능하다. 이러한 custom해서 변경하는 것 까지 알면 왠만한 건 체크할 수 있을 것이다.

어쨌든 최종적으로 완성한 화면은 위와 같고, 가입하기 버튼을 누르면 우측 화면의 로그처럼 입력된 값을 받을 수 있다.

원래는 Table 태그도 같이 정리해보고 싶었는데 구현할 기능이 너무 심플하다보니 제일 인상 깊었던 Form태그를 간단하게 정리해보았다.

이제 화면을 준비했으니 서버를 준비해 인증, 회원가입, 게시판의 기능들을 본격적으로 구현해볼 차례이다.

게시판을 어떻게 개발 시작하고 어떻게 글을 써나가야 할지 이것저것 찾아봤었다.

난 항상 뭔가 하려고 계획하고 시작하는 단계가 정말 어려운 것 같다 ㅠㅠ

내가 MBTI에 P가 있어서 더그런가 ㅋㅋㅋ 

뭔가 이렇게 계획을세우고 글로 짜임새 있게 쓰는게 너무 어렵다.....

어쨌든 이전의 경험과 인터넷으로 막 이것저것 찾아봤다.

그러다 우선 어떤 데이터를 저장하고 관리할 것인지가 제일 중요하고

그에 맞춰서 화면을 설계해나가는게 좋을 것 같다고 생각하게 되었다.

그래서 설계를 하려고 해서 이것저것 검색해보았고, 다음과 같은 순서로 진행해볼 계획을 세우게 되었다.

1. 데이터베이스 설계

2. 데이터베이스 선택

3. 데이터베이스 설치 후 스키마, 테이블 실제 생성

4.생성 스크립트 정리 

이렇게 계획을 세운 뒤 바로 각 단계별로 진행했다.

1) 데이터베이스 설계

설계를 어떻게 시작해보면 좋을까 하다가 옛날 데이터베이스 책을 읽어봤다. 

데이터모델링을 시작으로 정보시스템 구축의 대상이 되는 업무를 분석하여 이해하고 약속된 표기법에 ... 어쩌구 저쩌구..

상세하게는 업무 파악 => 개념적 데이터 모델링 => 논리적 데이터 모델링 => 물리적 모델링 으로 진행해야 어쩌구 저쩌구..

그러다 아래 그림같은 거 보면서 예전 대학교랑 자격증 시험으로 PTSD가... 

어쨌든 개발자로서는 필요한 건 그림으로 한눈에 테이블의 관계를 볼 수 있는 데이터베이스 설계서이다. 

이러한 데이터베이스 관계와 구조를 한 눈에 알아보기 쉽게 그려놓는 다이어그램이 있고 이를 ERD라고 한다.

그래서 이걸 작성하기 위해 이것저것 툴을 찾아봤다. 꽤 많더라...

그렇게 몇 개 해보다가 제일  심플하고 공유가 쉽고 많이 사용하는 ERD Cloud 라는걸 써보기로 했다. 

대충 GitHub로 가입하고... 이거 로그인 할 때 메일 인증 안 할 수 있으면 좋겠다고 생각한다 ㅠㅠ 아니면 선택이라도..

어쨌든 내 이니셜 따서 HKBoard 라는 이름으로 다음과 같이 진짜 심플하게 만들었다.

되게 간단하게 만들었지만 추후에 기능 개발 되면 메일이나 휴대폰 번호 활용한 비밀번호 초기화, 메일로 로그인, 이미지 추가 등도 생각해서 작성해본 것 같다.  

또한, 다양한 기능들이 있었는데 그 중에서 유용했던게 현재 만든 ERD를 기반으로 실제 스키마, 테이블을 생성하는 SQL 파일로 추출하는 기능이었다. 아래 그림처럼 Export를 눌러서 원하는 언어, 원하는 형식으로 추출이 가능했다.

물론 추출할 수 있는 DB 종류가 적기는 하지만 대부분이 자주 사용하는 데이터베이스 종류들이라 꽤 괜찮은 것 같다.

최종적으로 MySQL을 사용하기로 결정을 했기 때문에 실제 추출을 해서 실행해봤었는데 바로 실행이 되지는 않았다. 

그 이유는 작성할 때 형식이 있다거나 검증해주는 기능은 따로 없고 사용자가 사용자입맛으로 하는 것이다 보니 어쩔 수없이 발생하는 문제인 것 같다. 위에 그림 보면 Auto Increment라는 걸 추가해 줬지만 따로 SQL문으로 변경되지는 않는다.

그래도 위 사진처럼 틀적인 부분은 짜주기 때문에 한번 확인하고 부족한 부분을 따로 추가하는 방향으로 사용하면 좀 덜 귀찮을 것 같다.

무엇보다 무료인데 이런 부가기능이 있는 건 매우 좋다.

또한, Import를 눌러서 기존에 데이터베이스에서 생성된 테이블들의 쿼리문을 가져와 ERD 관계도로 생성이 가능한 것 같다.

2) 데이터베이스 선택, 3) 데이터베이스 설치 후 스키마, 테이블 실제 생성

어쨌든 이렇게 ERD로 데이터베이스의 설계를 짰으니 데이터베이스를 선택하고 실제 데이터를 생성하면 된다.

위에서 언급했듯이 나는 최종적으로 데이터베이스는 'MySQL'로 선택했다.

원래는 기존에 사용했던 Oracle이나 PostgreSQL, 티베로 중에서 선택해서

사용하던 데이터베이스를 같이 공부하는 쪽으로 하려고 했었다.

그렇게 깔려고 봤다가 예전에 이 맥북에 MySQL을 기반으로 토이 프로젝트 겸 테스트 어플 만든게 생각이 났다.

그래서 그냥... 깔려 있는 MySQL을 선택했다.. 굳이 뭘 설치하고 설정하기는 귀찮....다

제일 무난하고 무료고 관련 자료도 많아서 MySQL 나쁘지 않은듯?

어쨌든 ERD로 만든 걸 export한 쿼리문으로 대강 만들고, 제약조건을 추가 및 수정해서 최종적으로 만들었다!

4.생성 스크립트 정리 

그리고 이제 마무리하면서 간단하게 스크립트를 정리했다. 

이렇게 정리하게 된 건 이전회사에서는 따로 하지는 않았는데 이번에 회사옮기면서 직접 해보면서 필요성을 느껴서였다.

추후 백업용인데 습관적으로 만들어 놓는걸 과정에 포함시키는 건 좋은 것 같다.

보통은 사용하는 DB Tool에서 테이블 정보 - DDL 정보를 누르면 위 처럼 생성 스크립트를 확인할 수 있다.

(Tool 마다 방법은 다를 수 있지만 대부분이 위와 비슷하게 찾을 수 있는 듯 하다..) 

그리고 위처럼 여러개의 테이블은 한번에 생성하는 스크립트 문도 만들 수 있다.

어쨌든 여기까지 완료했으니 이제 데이터베이스는 준비가 된 것 같다!

여담) 예전에는 데이터베이스를 다룰 때 그 언어에 맞는 Tool을 따로 사용했었다. Oracle은 Orange, Tibero는 Tbero Admin 등등..

근데 요새는 "DBeaver" 같이 여러개의 데이터베이스를 한번에 관리할 수 있는 Tool이 나온 뒤 부터는 그 언어에 종속적인 Tool은 잘 안 쓰게 되었다. 초기 버전 사용했을 때는 그 DB의 고유기능을 못 쓰고 제한적이라는 얘기도 들었던 것 같은데, 지금 써봤을 때는 차이점을 모르겠다. 

예전에 실무로 모바일 개발했을 때는 우리 쪽 서버에서는 데이터를 가져오려면 주로 다른 시스템의 인터페이스를 연결해서 사용 했었다. 그러다보니 우리 쪽 DB에는 그 시스템에서 가져온 필수 데이터인 사용자 정보, 부서 정보, 모바일 토큰, 기기 정보, 로그 등만 담아서 사용하다보니 DB를 그렇게까지 전문적으로 사용은 못 해본 것 같아 아쉽다. 어쨌든 그 때 데이터를 직접 관리하는 담당자 분은 그런 기능들을 잘 다뤄서 사용했던 것 같다. 그러다보니 그 분들 컴퓨터보면 DB 관련 Tool이 여러개 사용하는 분도 있었던 것 같다. 

근데 이제는 간단하게 쓸거면 DBeaver가 무난하고 편한 것 같다. 또한, 예전에는 DBeaver 사용할 때 DB 연결하려면 직접 라이브러리 찾고 설정하는 것도 어려웠던 것 같은데 요새는 데이터베이스 추가할 때 DBeaver에서 라이브러리 검색해서 다운받아고 바로 연결도 가능해서 정말 좋아졌다. 

어쨌든 첫 시작으로 간단하게 DB 설계서를 만들고 그 과정을 간단하게 글로 기록해봤다.

이제 다음순서는 화면 개발 차례다.

이번에 이직하면서 개발자의 실력에 대해 생각해보게 되었다.

어떻게 하면 실력을 늘릴 수 있을까? 

지금까지 어떻게 해왔나를 떠올려보니 주로 강의나 책만 보고 공부하거나 간단하게 git에 프로젝트를 파서 토이 프로젝트를 개발했었다.

그러다 문득 생각이 스쳐지나갔다. 공부 하는 순간이나 개발하면서 모르는 내용을 구글링 해보는 순간 등...

이러한 순간에 잠깐 뭔가를 얻는 것 같았지만 시간이 지나 결국에는 나에게 남는게 많이 없었던 것 같다.

그래서 이번에 이왕 해보는거 기록으로 남겨보고 그 내용들을 정리하면서 공부해보자고 생각하게 되어 이렇게 글을 쓰게 되었다.

그렇게 계획을 세우면서 어떤 프로젝트를 해보는게 좋을지 고민하게 되었다.

그래서 생각해낸게 기초와 간단함이었다.

현재 3년 조금 넘은 경력 밖에 없는 주니어 개발자고, 여태 회사에서 주어진 일을 중점적으로 해서 기초가 부족하고 정리가 필요하다고 생각이 들었다. 그래서 3년의 경험을 가지고 천천히 기초부터 기록하면서 공부할 간단한 프로젝트가 필요했다.

특히, 이번에 react를 활용하는 곳으로 이직을 했으니 이걸 기반으로 기초부터 차근차근 확장해나가면 꽤 공부가 많이 될 것 같았다.

그런 생각을 하다보니 주제가 자연스럽게 떠올랐다. 게시판..?! 

내가 취업하던 2018년에는 신입의 기초는 '게시판'이었다. (뭔가 라떼는 같지만.....)

그 때 당시에 신입은 CRUD를 활용한 게시판과 페이징 개발까지만 할 줄 알면 기초가 탄탄한 유망한 신입이라는 생각을 했었다.

물론, 요새는 기술이 발전하여 쉽게 만들어서 의미가 좀 달라졌을 거라고 생각은 한다.

그래도 뭔가 처음부터 거창한 프로젝트 주제를 정하기보다는 가볍게 웜업한다는 느낌으로 하기에는 좋을 것 같았다.

어쨌든 이러한 생각의 결과로 이번 토이프로젝트는 react를 활용해서 다음과 같은 단계로 게시판을 개발해볼 계획이다.

1. 우선 제일 기초적인 데이터베이스 설계랑 화면개발(로그인 화면, 회원가입 화면, 게시판 화면 등)을 진행해볼 것이다.

2. 회원가입, 로그인 등의 인증을 공부하고 정리해볼 예정이다. 서버는 제일 간단한 Node Js를 활용할 예정이다.

3. 그 다음에 정말 간단한 게시판을 개발할 예정이다. 좋아요나 대댓글, 이미지 업로드, 쪽지 보내기 등의 기능이 없는 

기본 기능만 있는 게시판을 개발해볼 것이다. 말 그대로 CRUD의 기초부분만 개발할 예정이다.

4. 화면단은 서버사이드렌더링을 진행하기위해 요새 핫한 next js를 도입해서 재구성해보고,

모든 자바스크립트를 타입스크립트로 변경해볼 것이다.

5. 추가 요구사항을 산정해보고 그 기능들을 개발해 볼 예정이다. 이거는 추후에 다 완성하면 정의해볼 예정.

이제 간단하게 계획을 세웠으니 시간 될 때 마다 차근차근 글을 올려볼 것이다. Let's start! 

이번에 앱의 화면을 구성하면서 리스트 형태의 뷰를 만들어야 했다. 

그래서 기존에 사용하던 ListView를 사용하려고 react native 공식사이트를 들어갔다.

하지만이번에 리스트뷰가 Deprecated 되어서 FlatList나 SectionList를 사용할 것을 권하는 문구를 보았다.

그러다 보니 FlatList를 활용하게 되면서 삽질하기도 하면서 몇 가지 알게 되어서 간단하게 속성과 사용법을 정리해 올리게 되었다.

사용한 리스트 구현 코드는 다음과 같다.

결과화면 : 

아마 공식사이트를 보면 만들 수 있는 간단한 화면일 것이다. 근데 쬐금 헤매게 했던 거는 저 헤더 부분이다.

(접수번호 제목 ... 회색 섹션 부분)

개발 요건 중 하나가 저 부분이 리스트 아래 부분으로 스크롤을 해도 안 내려가게 해야 하는 것이었다. 맨 처음 구글링 했을 때는 SectionList를 활용하면 된대서 따라 하다가 삽질만 하고 포기했다.

그러다 계속 구글링 하다 stickyHeaderIndices={[0]} 만 추가하면 된다해서 수정해주었다. 굉장히 허탈했다..;;; 위 한줄이 의미하는건 고정하는 헤더를 0번째있는 리스트 헤더아이템으로 사용하겠다는 의미이다.

이외에도 간단하게 정리하면 다음과 같다. 

data : 리스트에 보여줄 데이터다. 보통 객체 배열을 넣어주면 된다.

객체 배열은 다음 형식으로 되있다.

let data = [

 { no : 1, name : 'test1' },

 { no : 2, name : 'test2' },

];

renderItem : 여기에서는 각 아이템 부분을 어떻게 렌더링 할 것인지 정해준다.

ListHeaderComponent : 헤더 부분을 어떻게 렌더링할 것 인지 정해준다.

ListEmptyComponent : 리스트에 데이터가 비었다면 어떻게 렌더링 할 것인지 정해준다.

removeClippedSubviews : 기본상태는 true, true로 되있으면 많은 데이터를 끊김없이 보여준다. 대신 버그가 있을 수 있으니 각자의 상황을 고려해 사용에 유의해야한다고 공식 사이트에 써있다.

keyExtractor : 각 아이템의 키 값을 지정해준다.

renderItem을 자세하게 설명하면 다음과 같다. 

renderItem에는 JSX를 return 하는 메소드를 지정해주면 되고

지정방법은 다음과 같다.

이렇게 하면 객체 배열이 순차적으로 돌면서 각 객체를 item이라는 파라미터로 넘겨준다. 그래서 그 객체의 속성을 사용해서 입맛에 맞게 뷰(JSX)를 만들어서 리턴해주면 된다.

나머지 ListHeaderComponent 와 ListEmptyComponent도 사용방법이 똑같다.

이렇게 대충 FlatList를 정리했다.(물론 공식사이트에는 위에 언급한 속성보다 더 많이 있다.... 이 부분은 나중에 또 삽질하면서 배워야한다!) 

이번에 FlatList를 사용해보면서 리스트 화면을 어떻게 만들고 어떠한 사용해야하는지 알 수 있었던 것 같다.

모바일 어플리케이션에 문서보는 기능을 구현하기 위해서 서버의 파일 다운로드 기능을 로컬에서 테스트하게 되어 서버구조 설명을 듣고 코드를 다운받아서 테스트해보니 굉장히 막막했다. 그래도 꾸준히 코드 읽으면서 관련 프로그램 깔면서 차근히 해결해나갔다.

그러던 중 다운로드 폴더에 symbolic link로 등록해야 한다는 주석을 읽게 되었다.

대충 보니 다운로드 폴더를 symbolic link로 다른 경로를 링크 걸어서 기준 경로로 사용하라는 것 같았다.

symbolic link는 간단하게 말하면 윈도우의 바로가기라고 생각하면 된다.

방법은 다음과 같다.

1. 관리자 권한으로 cmd 창을 켠다.

2. "cd 프로젝트 폴더 경로 혹은 테스트 폴더 경로" 를 치고 경로 이동(어플리케이션에서 사용하는 폴더로 들어가야 한다.)

3. mklink /d 링크 이름 바로가기 할 폴더 위치 를 친다.

예를 들면

mklink /d "docFiles" "d:/temp/test" 과 같이 적어주면 된다.

프로젝트에서 refresh 해보면 위와 같은 모양이 된다. 이러면 docFiles에 d:/temp/test 경로가 연결된 것이다. (이 모양이 되어있는지 꼭 확인해야 한다... svn에서 다운받으면 일반폴더모양이다..)

위와 같이 해서

localhost:8080/프로젝트/resource/이미지파일경로를 쳐서 확인해봤다.

근데 404에러 발생 ㅠㅠ

구글링 결과 톰캣은 아무 설정 없이 symbolic link를 이용해 폴더를 접근하면 보안을 위해 접근을 막는다고 한다.

그래서 또 검색을 해본 결과 server.xml에 웹어플리케이션의 context 설정에서 allowLinking을 다음과 같이 true로 해주면 된다고 한다.

일반적으로 웹 어플리케이션을 올린 서버에서는 톰캣 설치 폴더에서 server.xml을 찾아 변경해주면 된다.

그리고 이클립스에서는 프로젝트 설정옆에 Servers 폴더에서 server.xml을 찾아 위의 사항을 변경하고 서버를 다시 시작해주면 된다.

이렇게 하니까 됬다... 정말 간단한데 무쟈게 헤맸다;;

신입으로 업무 시작했을 때 로컬로 서버 구축하고 만든 기능을 테스트하게  되었다. 그래서 SVN에서 서버를 내려받고 로컬에서 서버 환경을 구성하고 서버를 돌려보았다.

근데 문제투성이... ㅠㅠㅠ  그 중에 라이브러리 관련된 문제 때문에 이글을 쓰게 되었다

분명 관련 라이브러리도 전부 있고, Maven도 업데이트 했고, 프로젝트 라이브러리 연결도 해줬는데 계속 라이브러리 없다고 에러가 난다..

그 이유는 라이브러리가 이클립스에서 Tomcat 서버 구동시 같이 안올라가는 경우도 있다고 한다. 아니면 그 관련 라이브러리를 사용하는 클래스가 같이 안올라 갔을 수 도 있습니다. 그래서 서버에 라이브러리랑 코드가 잘 올라왔는지를 확인해야 한다.

[경로 : 이클립스 워크스페이스 /.metadata/.plugins/org.eclipse.wst.server.core/tmp/wtpwebapps

내 어플리케이션이 잘 올라 갔는지 (하위 파일 포함) 확인]

[경로 : 이클립스 워크스페이스 /.metadata/.plugins/org.eclipse.wst.server.core/tmp/wtpwebapps/웹 어플리케이션/WEB-INF/lib 

관련 라이브러리가 잘 올라 갔는지 (하위 파일 포함) 확인]

만약 없다고 에러나는 라이브러리가 있다면 다음과 같이 톰캣 서버 설정에서 라이브러리를 등록해야 한다.

[등록 방법]

1. 이클립스에서 Servers 탭의 해당하는 서버 더블 클릭하면 다음 창이 나옴

2. 이후 Open launch configuration 클릭

3. 다음 창이 떴을 때 classpath 탭에 들어가서 관련 라이브러리 등록

이렇게 설정해주면 톰캣이 구동될 때 관련 라이브러리가 올라가게 된다!!!