2021년 목표설정

-
이미지
기본적으로 작년에 달성하지 못한 것들을 하려고 생각중인데..코로나가 언제까지 이어질지, 한국이나 북해도는 갈 수 있을지..자격증은 응시 가능할지..여러가지가 불확실하다. 2021년은 무엇보다 정신적인 부분과 경제적인 부분에 중점을 두고 조금 더 치열하게 지내보고 싶다. 일본나이로도 30대 마지막 해, 이제 불혹에 접어드는 나이..복잡하지만 심플하게. 육체적목표 : 트라이에슬론 스탠다드 도전하기 정신적 : 자격증2개 도전 + 자체개발 서비스 론칭 가족적 : 가정의 평화를 유지하기 경제적 : 외식과 유흥비를 줄이고 부수입을 늘려서 결과적으로 저축하기 사회적 : 목표세미나를 포함해서 민단과 개인인맥의 활성화와 교류를 촉진하기
댓글 1개

[실습] NodeJS + ExpressJS 로 Landing page랑 CRUD 기능 구현하기

-
뭘 어찌 공부할지 몰라서 찾아봤더니 우선 만들고 보라더라.
근데 뭘 만들지?? 어떻게 만들지?? 를 모르는데 만들라고 하면 그게 되나 ㅋㅋ
그렇다고 기존처럼 하나하나 개념공부 하고 예제소스 치는 건 아무 도움이 안되니까..
흔히 말하는 클론코딩을 많이 해 보기로 했다.

NodeJS를 비롯해서 자바스크립트 관련 기술을 익히고 싶어서 우선 따라한 것이 이 동영상이다..2시간 30분 짜리인데 거의 12시간 걸린듯..ㅡㅡㅋ (맥과 윈도우가 다름, 그 외에는 거의 에러처리...ㅠㅠ)

참조 : Learning Expressjs
소스코드 : https://github.com/buzz-software/expressjs-mvp-landing-page
동영상 : Express.js & Node.js Course for Beginners - Full Tutorial

내용이 꽤나 많아서 다 정리하려면 시간이 너무 걸리니까..걍 몇 가지만 간단하게 정리함.
  1. 기본 설치:Visual Studio Code + Git + Prettier 설치함
    1. Visual Studio Code 는 최신버전으로 업데이트
    2. Git 는 꽤나 삽질을 많이 했음..프로젝트 디렉토리를 만든 후 PowerShell에서 원격리포지토리 설정을 해 주면 자동으로 연결.
      참조 : Visual Studio Code에서 git 설정하기
    3. Prettier는 자동으로 소스코드를 정리해주는 플러그인. 아직 잘 활용은 못하지만 어찌되던 써 봤다.
      참조 : Visual Studio Code에서 Prettier 설치하기
  2. NodeJS 설치 - 윈도우 기반이라 공식사이트에서 다운로드 후 설치
    참조 : NodeJS 공식 사이트
    1. 에러 : HttprequestInvailated 관련 에러가 남 -> 최신버전 설치
  3. Express 설치 - NodeJS 관련 프레임워크, 왠만한 플러그인이나 프레임워크 다 들어있더라..설치는 npm 으로 했음.
    참조 : ExpressJS 공식 사이트
    1. 설치 후 초기화를 하면 자동으로 폴더구조를 만들어 줌, 페이지 렌더링하는 엔진으로는 pug (구 : Jade) 가 들어있는 듯.
      참조 : ExpressJS - generate 로 초기화하기
  4. Nodemon 설치 - 소스코드가 수정되면 재부팅 없이 자동으로 웹페이지와 nodeJS엔진을 갱신해주는 플러그인. 난 왠지 예제 동영상을 아무리 따라해도 안되서 그냥 일반적인 방법으로 했음.
    참조 : (일본어) nodemon으로 자동실행시키기
  5. DB 연결&사용 : postgresql을 사용, 프레임워크로는 Sequelize 사용
    1. Sequelize 및 Sequelize-cli 을 설치 : 버전에 따라 약간 다른 듯..나는 v5를 사용했음.
      참고 : Sequelize 설치방법
    2. pg (postgre용 플러그인) 를 설치, npm으로 업데이트 함.
    3. 사용법
      1. models 폴더에 모델을 정의하는 js 파일을 만듦.
      2. migration 을 정의함, 파일명은 날짜+시간.js 으로 하던데..
      3. 커멘드라인에서 다음을 입력 : > sequelize db:migrate
  6. Bootstrap 사용 : 여러가지 방법이 있지만 여기서는 CDN 링크를 활용
    1. Bootstrap 홈페이지에서 CDN 링크를 복사한 후, 공통으로 사용하는 pug 파일에 포맷을 변경해서 잘 붙이면 끝. (예제에서는 footer에 붙임)
    2. 가능하면 views에 있는 pug 파일을 용도별로 정리해서 사용하면 좋음. 공통으로 들어가는 부분은 별도의 파일로 나눈 후, 필요에 따라서 include 함.
    3. ajax 혹은 jquery 를 사용하는 경우, jquery 를 silm 이 아닌 min 버전으로 할 것. 또한, 자바스크립트 파일을 첨부하는 경우, 코드 하단에 붙일 것.
    4. pug 에서 디자인을 하는 경우, pug문법으로 작성해야만 함, 또한 들여쓰기랄까..탭이 엄청나게 중요함. 연습삼아서 다 쳐봤는데 탭을 틀리거나 한 글자라도 틀리면 화면이 아예 안 뜨거나 깨져버려서 디버깅 힘듦...ㅠㅠ
      참조 : htmlTopug 변환기
  7. 인증을 위한 프레임워크 : PassportJS 사용
    1. 설치 커멘드
      npm install passport passport-local bcrypt validator express-session connect-flash --save
    2. 설치 후, 프로젝트 폴더에 passport_setup.js 파일을 생성해서 기본설정을 해 줌.
      참조 : http://www.passportjs.org/docs/
    3. middleware 형식으로 각 세션별로 페이지를 접근거부 할 수 있으며, 에러페이지를 별도로 보여줄 수 있다. 
    4. 패스워드는 해시값을 이용하여 암호화 가능, bcrtpy 알고리즘으로 gensaltsync 를 사용해서 값을 생성함.
  8. 폼의 값을 체크하기 위한 프레임워크 : Validator 사용
    1. 설치 커멘드
      npm install validator lodash --save
    2. 설치 후, 프로젝트 폴더에 validators 라는 폴더를 만든 후, 설정파일을 만듦.
    3. 어려웠던 부분은, rerender를 하는 부분임. 문제가 있으면 해당 폼 페이지를 재렌더링 한 후, pug 파일에서 에러가 있는 경우에 표시할 문자열을 별도로 설정해야 함.

느낀점이랄까..정리해 둘 내용은 다음과 같음.

  • 철자 및 들여쓰기 엄청나게 중요함..한 글자라도 틀리면 안 돌아가는데 그게 어디가 문제고 틀렸는지 감이 잘 안잡힘..게다가 대소문자도 구분함. 자바스크립트 함수명을 잘못 기입하면 정말 헬...pug파일은 심지어 띄어쓰기 하나 잘못해도 페이지가 깨지거나 화면이 안 뜸..근데 뭐가 문제인지 알 수가 없음..뭔가 디버깅 방법이 없을까??
  • 괄호도 엄청 중요..콜백함수에 화살표함수에 하나의 코드가 다수의 함수로 구성되거나 하므로, 괄호의 순서가 바뀌거나 종류가 바뀌면 에러가 남. 그나마 이건 에디터에서 빨간 줄 표시해주니 알기가 쉬울수도.
  • 자바스크립트 및 프레임워크 특유의 문법이 매우 헷갈림..좋게 말하면 단순해지고 빨리 개발할 수 있는 반면, 익숙하지 않은 나에게는 같은 이름의 변수가 있으면 뭐가 뭔지 모르거나 헷갈릴 수 있다. 이건 뭐 익숙해지는 수 밖에 없을까..
  • 공부해야 할 게 너무 많음..간단히 말하면 설치해서 사용하는 프레임워크가 너무 많아서 이걸 모르면 죽도 밥도 안 됨..설치 잘못하면 안돌아가고, 의존성 관리 잘못하면 에러나고, 복잡도가 엄청남. 이것도 뭐 익숙해지고 자주 사용하면 npm install 땅땅땅 해서 프레임워크 스택 만들어놓고 바로바로 사용이 가능한 듯...하지만 나에게는 미지의 세계에서 이건 뭐지?? 저건 뭐야?? 얜 또 뭐하는데 쓰는거?? 혼란만 가중..ㅠㅠ
  • git이며 visual studio code 사용법이나 단축키 등등..경험이 없다보니 그럴 수 밖에 없다지만 쓸데없는 조작이 많음. 단축키를 익히려는 노력을 해야 할 듯.
  • git은 좋은 듯. 무엇보다 뭐가 어떻게 바뀌었는지 확인이 가능한 점이 편리함. 비록 나 혼자 개발한다고 하더라도, 이전 소스가 돌아갔는데 왜 갑자기 안돌아가나?? 할 때 바뀐 부분을 한 화면에 비교가능한 점은 매우 좋았음. 단, git 명령어를 모르는 점 & 그걸 콘솔에서 입력하는 부분이 문제임. GUI 툴도 있다는데 우선 명령어를 써 보겠음.


댓글

댓글 쓰기

이 블로그의 인기 게시물

[메모] PostgreSQL에서 Insert 하는 경우 자동채번 PK가 중복에러 나는 경우

-
PostgreSQL에서 Entity Framework를 사용해서 DB조작할 때 에러에 대한 메모. id컬럼을 Serial형(Auto Increasing)으로 만든 테이블에 id 값을 생략한 형식으로 INSERT를 하려고 했더니 다음과 같은 에러가 났다. ERROR: 重複キーが一意性制約" table_pkey "に違反しています。 ERROR: duplicate key value violates unique constraint "table_pkey" 초기화 SQL 스크립트로 데이터만 집어넣은 컬럼이라 치가 중복이 된 건 아니고, 왜 이런 에러가 나는지 감이 안잡혔는데 다음 링크에서 해답을 얻었다. PostgreSQLでINSERT時に自動採番の主キーが重複してエラーが出る場合の対処法 요약을 하자면, PostgreSQL에서는 자동으로 증가하는 번호를 시퀀스 오브젝트를 사용하여 내부적으로 관리하는데 이걸 수동으로 변경하거나 데이터를 외부에서 삽입 혹은 복사하게 되면 실제 컬럼에 들어간 값과 시퀀스 오브젝트의 값이 달라지게 되어서 문제가 생기는 경우가 있다. 내 경우에는 스크립트로 SQL 을 직접 입력해서 값을 삽입한 것이 문제가 된 듯. 이것을 확인하고 수정하는 건 다음의 3단계를 거친다. 실제 테이블 컬럼값의 최대치를 확인 >> SELECT MAX(id) FROM table; 시퀀스 오브젝트 값 확인 >> SELECT nextval('table_id_seq'); 두 값이 일치하면 문제가 없음. 두 값이 불일치하는 경우, 시퀀스 오브젝트 값을 테이블 컬럼값으로 변경해준다. >> SELECT setval('table_id_seq', (SELECT MAX(id) FROM table));
자세한 내용 보기

[C# & LINQ] 랜덤으로 데이터를 한 개 추출하는 방법

-
별 거 아닌데 엄청 고생함..하고 싶었던 것은 오늘의 추천음식이나 운동을 랜덤으로 하나 표시하는 것이었다. 처음에는 쉽다고 생각했는데 의외로 고생했다. 고생한 이유는 간단한데, 데이터베이스에서 가져온 데이터셋 중 하나를 렌덤으로 추출하고 싶은데 그걸 한 번의 LINQ로 해결하려고 했기 때문이었다. 해결한 방법은 간단한데, 먼저 데이터를 가져와서 리스트나 배열로 만든 후에 랜덤값을 가지고 하나를 뽑으면 된다. 방법이 여러가지가 있었는데 나는 2가지를 해 봤다. 방법 1은 랜덤객체를 생성한 후에 데이터셋 개수를 이용해서 무작위로 한 개를 끄집어냄. 방법 2는 NewGuid를 사용하는 방법이다. 방법 2가 간편하네..얻은 교훈?!  Divide and conquer!! 나누어서 공략하자!! //  food, exercise, goodの中で、良い体質の項目をそれぞれ持ってくる var   foodquery  = ( from   f   in   model . foods                  where   f . goodtypeid  ==  TypeId  &&  f . flag  ==  true  &&  f  !=  null                  orderby   f . id              ...
자세한 내용 보기

[react-native] uuid 생성이 에러가 날 때 대처법　

-
ToDo 앱을 연습하는데 ID생성이 안되더라.. uuid 라는 패키지를 사용하면 된다던데 한참을 헤메었다. 우선, 맥에서는 Xcode가 설치되어 있지 않으면 안되니 필히 설치할 것. 다음, npm 으로 다음 명령어를 입력해서 uuid를 설치한다 > npm install --save uuid 그리고나서 필요한 페이지에 다음과 같이 임포트 하면 된다던데... import { v1 as uuidv1 } from 'uuid' ;     const ID = uuidv1 (); 안된다..에러난다..ㅠㅠ Error :  crypto.getRandomValues() not supported. 신나게 찾아보니  react-native-get-random-values 를 설치하라길래 했다. > npm install --save  react-native-get-random-values 설치 후 페이지에 임포트 import 'react-native-get-random-values' ; 그래도 에러가 난다...열심히 찾아봤는데 버전문제?? v1은 비추라고 다른 거 써봤는데 똑같다. Error： TypeError: null is not an object (evaluating 'RNGetRandomValues.getRandomBase64') 콘솔에도 안찍히고..그냥 랜덤값이 생성이 안되더라..상수로 값 집어넣으면 멀쩡하게 움직임. 리엑트 네이티브에서 사용가능한 react-native-uuid 도 있다길래 해봤는데 안된다..ㅠㅠ Error :  undefined Unable to resolve module `buffer` from `node_modules/safe-buffer/index.js`: buffer could not be found within the project. 버퍼 지워보고 실행해도 똑같고...재설치를 해봐도 안되고...그러다가 참고 ...
자세한 내용 보기