728x90 반응형 전체 글165 [AWS 배포 연구] - Code Pipeline - 해결 안됨... 어쩌다가 hive 땜시 이 쪽 연구가 당겨지게 되었다. 나도 정확히는 앱을 배포까지 해본 적은 없었기 때문에... 하여간에 앱배포를 어제는 실패했다. 기본적인 CI/CD를 해보고자 Code Pipeline을 만들어서 Soruce -> Build -> Deploy를 해보고 싶었는데... 계속 실패했다. BuildArtifact를 가져올 수 없다고 징징대길래 어짜피 하는 것도 없어서 Source -> Deploy로 단축시켰다. SoruceArtifact는 다행히 잘 가져온다. 그래서 일단 S3에 배포하는 것도 static한 웹사이트를 지원한다고 하길래 elastic beanstack로 갈아 탔다. 이거 하는데도 1. elastic beanstalk 자체를 만들고 env를 만든다. 2. env에 넣을 inst.. 2024. 4. 11. FlowForge(GTDList) 04-03 일지 Typescript Test / Build(Babel) 환경 기록 여기서는 간단하게 typescript로 작성된 코드의 경우 어떻게 테스팅 환경을 짜면 좋은지를 기록해두려고 한다. 지금은 backend를 먼저 바꾸고 있는데, 거기서 어떻게 했는지 알아내면 frontend에서도 바로 적용이 가능하기 때문이다. 테스트환경은 jest를 쓰기로 했다. 공식적으로 typescript를 지원하고, 문서 지원도 되어있기에 선택했다. https://jestjs.io/docs/getting-started Getting Started · Jest Install Jest using your favorite package manager: jestjs.io 다만 이게 엄청난 스노볼이 되어서 또 다른 삽질을 불러일으키기는 했다. babel이라는 트랜스파일러를 이용해서 체크를 하는 방법이 소개되.. 2024. 4. 4. FlowForge(GTDList) 03-30 일지 ESLint과 초기 기동 처음으로 ESLint를 이용해 보았다! 이걸 이용할 생각이 처음부터 있었던 것은 아니다. 단순히. ts 확장자나. js확장자를 붙이지 않아서 제대로 import가 안 되는 문제가 생겼고, 그래서 해결 방법을 찾다가 Linting을 해서 코딩을 더 깔끔하게 하기로 마음먹었다. ts에다가 yarn까지 써서 좀 복잡해진 김이 있지만, 다행히 그렇게 어렵진 않았다. 1. eslint 설치 yarn add --dev eslint eslint-config-love eslint-plugin-import eslint-plugin-typescript @typescript-eslint/parser 내가 바라는 import구문 강제를 위해서 추가적인 plugin을 설치한다. 최종 사용자는 굳이 필요 없으므로 --dev옵션을.. 2024. 3. 30. for in vs for of 반복문 비교, Array .. in이 가능해서 생기는 문제 오늘 Typescript를 계속 공부하는 중에 갑자기 이상한 버그...는 아니고 미묘한 문법 차이로 생긴 1시간의 삽질을 방지하기 위해서 이 글을 올린다. 우선 이분의 글을 참고하였으니 좀 더 자세한 설명을 원하면 여기로 가면된다. https://jsdev.kr/t/for-in-vs-for-of/2938 자바스크립트 for in vs for of 반복문 정리 ES6 공부하면서 for in 과 for of 차이점이 뭔지 궁금해서 찾아보다가 정리해보았습니다. 잘못된 부분이 있으면 커멘트 부탁드려요~ http://itstory.tk/entry/Javascript-for-in-vs-for-of-반복문 foreach 반복문 foreac jsdev.kr 바로 본론을 이야기하면 이렇다. 분명 JS배울 때 같이 배웠을.. 2024. 3. 24. Typescript 디버그 세팅!(tsconfig.json + vite + vscode) 일단... 갑자기 이걸 들고 온 이유는 반드시 이걸 배워야겠다는 생각이 들어서이다. 물론 스프링도 들을 거긴 한데... 그전에, 지금 죽어가고 있는 FlowForge를 살려낼 희망을 여기서 찾았기 때문이다. redux 가지고 react앱 개발하는 건 좋은 아이디어다. redux를 대체 어떻게 이용해 먹어야 하는지 도대체 알 수가 없다는 생각이 들기 전까지는. 일단 당장 코드가 언제 어떻게 쓰이는지 바로바로 직관적으로 이해할 수 없는 코드가 많기도 하고, action이랑 같이 있으니까 더욱 환장할 것 같았다. 지금은 되지도 않는 거에 투자하는 것 보다는 나중에 돌아오는 게 낫겠다 싶어 스프링을 들으면서 힐링하고 있었다. 역시 Java! 하고 있는데 문득 생각이 드는 게, Typescript를 쓰면 특유의 .. 2024. 2. 28. Spring - 기초 프로젝트 세팅과 spring boot / spring initalizr의 차이 굉장히 오래간만에 Java와 관련된 걸 건드려보는 듯 하다. 과거에도 다형성, 명시적인 코딩 스타일이 내 맘에 쏙 들었던 기억이 있어서, 기대가 되는 튜토리얼 이기도 한데, 인프런에서 내용을 가져와서 복습하는 식으로 배울 것이다. 언제나 이 사이트에서 프로젝트를 가져와서 시작하는 듯 하다. https://start.spring.io/ 이게 spring boot인가? 싶었는데 그건 아니었다. ChatGPT의 이야기에 따르면 이렇다 : spring-boot가 추구하는 바는 spring 프로젝트를 하다가 많은 설정을 하지 않아도 웹서버를 구축, 테스트, 배포하기 쉽도록 해주는 것이고, 그런 방식으로 동작하고자 하는 프레임워크이다. 반면 spring initalizr은 일단 프로젝트를 쉽게 세팅하는데 중점이 있.. 2024. 2. 24. 객체 지향 프로그래밍의 5원칙 SOLID 강의를 듣다 보니까 개인적으로 필기해 두는 게 좋을 것 같아서 여기다가 간단하게 노트처럼 적는다. S. Single Responsibility Principle - 단일 책임의 원칙 어떤 객체는 한번에 한 가지 책임을 져야 한다. 이는 굉장히 모호하지만 해당 객체에 변경이 있을 경우 다른 객체에 주는 영향이 작을 수록 좋다는 것을 기준으로, 그때 마다 판단한다. O. Open-Close Principle - 개방-폐쇄의 원칙 객체는 확장에는 열려있되, 개방에는 폐쇄적이어야한다. 다형성을 활용하면 인터페이스/구현체를 분리하므로 확장하는 방향으로 개발하기가 쉬워진다. 다만, 다형성만으로는 해당 원칙을 완벽하게 지킬 수 없는게 결국 구현체를 선택하는 부분에 있어서 의존성이 발생해서 해당 부분의 코드를 수정해야.. 2024. 2. 17. FlowForge(GTDList) 02-06 일지 (backend - express의 next) 정말 오래간만에 일지를 쓰는 것 같다. 역시 사람 마음가짐과 행동은 100% 일치할 수는 없나 보다. 여태까지의 성과, 그리고 이해한 것을 조금이라도 정리하고자 한다. 이전에도 이야기했다시피, 난 한 가지 레퍼런스 프로젝트를 기반으로 백엔드를 만들고자 하였다. 특히, 유저 파트는 그럴 수 밖에는 없었다. Restful 한 API를 넘어서서 cookie, jsonwebtoken을 이용해서 seemless 한 유저 경험을 만들어내는 것은 적어도 그 당시 나의 능력 밖이었다. 분하지만 어쩔 수 없다. 모르는 건 배우는 수밖에. 그래서 일단 그 코드를 분석하는데도 의외로 삽질이 꽤 많이 필요했다. (지금 글을 쓰면서 생각하는 것이지만... 어쩌면 코드를 분석하는 방법이 잘못된 것은 아닐까? commit log를.. 2024. 2. 6. REDUX 모르겠어요... 도저히 안될 것 같아서 올린다. 모르겠고 귀찮다... 으아아ㅏ아앙 백엔드를 계속 만지다가 프런트엔드에서 연결작업을 해보고 있는데, 이놈의 리덕스 쪽이 전부 해결이 되지를 않는다. ChatGPT한테 물어볼게 산더미고 가면갈 수록 너무 복잡해져서 슬슬 내가 뭐하는지 모르겠어서 결국은 반쯤 놔버렸다... 흠... redux를 써서 스토어 하면 깔끔하게 코드를 쓸 수 있다고, 괜찮은 투자였다고 생각했다. 근데 아쉽게도, 나는 리덕스에 발끝자락만 담그고서는 괜찮다고 생각하고 있었다. 생각보다 공부해야 할 게 많은 state machine이었고, 최근에서야 전체적인 그림을 파악하고 조금씩 개발을 하고는 있지만... 또 이것 때문에 지쳐버려서 그냥 노는 게 부지기수가 되어버렸다. 그러니까... 전에 내가 포스팅해서 .. 2024. 1. 22. FlowForge(GTDList) 01-09 일지 컨트롤러 작성 및 TDD 환경 조성 흔해빠진 기능마저도 구현하는 데는 참 노력이 많이 들어가는 듯하다. 이메일 확인 절차를 만들기로 결정했는데, 생각보다 고려해야 할게 많았다. 나중에 이메일 확인 절차 같은 건 자동으로... 자동으로...? 잠시만... 그나마 답변을 보니 외부의 뭔가를(Firebase라던가 AWS Congnito라던가) 경우도 있어서, 완전 노력이 헛되는 않은 것 같다. 하여간에 그것을 위해서 새로운 모델을 넣기로 하기도 했고 해서, 컨트롤러를 더 수정해야 할 것 같다. - 오늘의 개발 커밋로그는 간단한 편이지만 추가된 것은 많다. 라이브러리를 보면서 설명하면 좋으니까 package.json 의 일부도 가져왔다. 1. 이메일 토큰을 자동으로 발급하기 위한 crypto 2. 입력값의 확인을 위한 joi 3. 환경설정을 위한.. 2024. 1. 10. FlowForge(GTDList) 01-07 일지 모델 확정 및 sequelize 활용 오늘은 예고했던 대로 백엔드를 만지기 시작했다. 우선 아직 완벽하지 않은 user, task, global-value 테이블의 기본적인 모델을 확실히 확정하기로 했다. - 모델 정리 이럴 때야 말로 내 머리로 직접 일일이 생각하기보다는 GPT를 이용할 때다. user에 대한 스키마는 흔해빠졌지만 일일이 생각하기 귀찮기 때문이다. GPT에게 물어본 질문은 이렇다 (문법적으로 틀린 문장이 있다면 ㅈㅅ) : Here is another question. What attribute of user model will usually get when making a webpage? I mean, there is gotta be more than just username and password, right? 답변은 이.. 2024. 1. 9. [MySQL] 사용자 관리 관련 명령어 모음(열람, 생성, 삭제, 비밀번호 변경) + 접속 명령어 이번에 프로젝트를 하면서 간단하게 MySQL을 다룰 일들이 생겼기 때문에 기억하기 쉬우라고 명령어 몇개를 적어두고자 한다. SELECT, CREATE, DROP, ALTER, DROP등을 이용해서 SQL서버 상의 사용자를 조작하면 된다. username = 사용자 이름 locahost = 서버 주소 는 상황에 따라서 바꿔주면 된다. 1. 사용자 리스트 뽑기 SELECT user FROM mysql.user; 2. 사용자 비밀번호 초기화(변경) ALTER USER 'username'@'localhost' IDENTIFIED BY 'newpassword'; 3. 사용자 삭제 DROP USER 'username'@'localhost'; 4. 사용자 생성(단, 이렇게 생성할 시 기본 권한만 가짐) CREATE .. 2024. 1. 7. FlowForge(GTDList) 01-06 일지 로그인, 회원가입 페이지 만들기 주말인 관계로 아마 내일도 작업 속도가 좀 느려지겠지만, 너무 완급 조절을 하지 않으면 사람에 문제가 생길 수 있으니 적당히 하는 게 좋을 듯하다. 그래도 내게 있어서는 이 시간에 제일 소중한 시간이 될 듯하다. 하루도 빠짐없이 열심히 개발을 할 수 있는 나날들이 참 꿈만 같다. 여기서 돈만 벌 수 있으면 너무 좋을 텐데... 이런 아들의 뒷바라지를 해주시는 우리 부모님께 감사하다. - 오늘의 개발 각설하고, 드디어 3~4일 전에 끝냈어야 할 내용을 전부 끝냈다. 로그인 페이지, 회원가입 페이지를 둘 다 구현해 두었고(물론 겉면만), react-redux로의 이주도 완전히 끝냈다. 개별적으로 다른 내용들이 필요한 게 아닌 이상(각각의 셀처럼), redux를 쓰는 게 간결하고 데이터의 흐름을 파악하기에 좋.. 2024. 1. 6. joi 라이브러리로 입력값 검증, messages로 커스텀 메시지 작성하기 이번에 같이 개발하게 된 친구와 함께 협의한 것 중 하나는 우선 서로 같이 쓸 수 있는 개발일지를 만들어서 배포해 보자는 것이었다. 그래서 실제로 코드를 지금 github organization에서 공유하게 되었고, 적어 둔 TODO 중에서 제일 만만해 보이는 걸로 우선 스타트를 끊기로 했다. 그 만만하다는 작업이 "비밀번호 입력값 검증 강화"이다. 이미 joi 라이브러리를 이용해서 기본적인 입력값 검증을 하고 있었기 때문이다. const schema = Joi.object().keys({ username: Joi.string() .alphanum() .min(3) .max(20) .required() password: Joi.string() .min(6) .max(20) .required() }); 이.. 2024. 1. 5. FlowForge(GTDList) 01 - 04 일지 react-redux의 적용 원래는 어제 로그인 페이지와 회원가입 페이지를 만들고자 했다. 근데 다른 사람들이 만든 좋은 코드를 보고, redux를 적용하는 예제를 보니까 내가 코드를 얼마나 잘못 짰는지가 보였고 아무래도 리팩토링을 해야 할 것 같다는 생각이 들었다. 물론 가능하다면 위에 있는 두 개의 페이지를 만들면서 진행할 예정이다. 현재 소스파일 구조는 이렇다. 보면 지금 pages 아래에 모든 컴포넌트가 몰려 있는데 페이지 단위로 컴포넌트가 나뉘어 있다. 좋지 못한 방식으로 짜여진 구조라는 게 코드를 짜면서 조금씩이지만 느껴졌다. 거기서 redux를 보고 나니까 확실히 문제가 있는 구조라는 것을 알았다. 다시 쓰일 가능성이 있다면 데이터 주입을 담당하는 컨테이너, 뷰를 담당하는 컴포넌트를 분리해야 했다. 리덕스를 제대로 학습.. 2024. 1. 4. 이전 1 2 3 4 ··· 11 다음 728x90 반응형
