본문 바로가기
728x90
반응형

전체 글188

헬키 개발일지 8. 2024 06 29 React의 복잡한 hooking react-native도 결국은 react를 기반으로 돌아가다보니까 react를 알고 들어가야 한다는 건 눈 감고도 알 수 있는 사실이다. 그래도... 100% 알고서 개발을 시작하는 사람이 어디있겠는가? 안 되는게 생기고, 그거 고치려고 찾아서 하다보니까 배우는 것이 사실은 더 많다.어떻게든 되는 코드 찾겠다고. 오늘이 그런 날인 것 같다. 아래가 결론적인 코드다.const expand = useCallback((memo: string, onSaveMemoHandler: (memo:string) => void) => { //왜 인지는 모르겠지만 이렇게 prev값을 이용해서 함수형식으로 setState를 처리하면 //제대로 동작이됩니다... 근데 왠지는 모름...????? setMemo(.. 2024. 6. 30.
헬키 개발일지 7. 2024 06 26 React Native + Expo 앱 배포 방법 정리 결국 앱을 배포하는 때가 머지 않은 것 같다. 그래서 어떻게 하는게 좋은지 알아가보면서 정리하려고 한다. 우리 팀의 앱은 React Native기반이고, 거기에 expo를 올려둔 상황이다. expo는 React를 이용해서 앱을 Android, iOS, Web등에 올리는 프레임워크를 제공한다. 생각하건데 macbook이 없어도 iOS앱을 개발할 수 있는 몇 안되는 방법 중에 1개일 것이다.(추천한다고는 못하겠지만.) 지금 내가 파악한 빌드 방법은 크게 이렇다.1. react native의 자체적인 빌드 기능을 이용한다.expo를 이용하지 않는 방법이라고 할 수 있겠다. 지금은 Web으로 더 이상 개발을 진행하지 않고 있고, (어느 정도 해보니까 같이 들고 가는게 거의 불가능한 수준이라는 것을 webpack.. 2024. 6. 27.
헬키 개발일지 6. 2024 06 25 때 아닌 iOS Xcode 빌드하기 기록을 위해서 적는다 개발 환경 세팅은 아무래도 미리 기록 안해두면 잊어버리는 경우가 잦아서...특히 macbook가지고 하는건 처음이라 100% 하긴 해야할 듯하다. 1. expo ios 프로젝트 빌드를 한다.npx expo prebuild --platform ios 2. expo 빌드 스크립트를 못 찾겠다는 버그가 뜰 때가 있다. readable 하지 않다나 뭐라나 ->xcodeproj 파일을 연다음, build settings 에서 code sandboxing을 no로 바꾼다.(다만 이후 대부분의 작업은 xcworkspace파일로 xcode를 이용합니다. xcodeproj로 열어도 제대로 앱 빌드가 되지 않습니다. 혹여나 sourcemap문제가 자주 발생한다면 자신이 다른 프로젝트 파일을 열지 않았.. 2024. 6. 26.
[Node.js] 헬키 개발일지 5. backend schema 확인과 endpoint 만들기 흠... 이번 만큼은 node.js으로 태그를 바꾸어 두겠다. 확실히 backend를 더 만질 듯하니까. 뭐가 어떻게 되든 이젠 front-back을 오가면서 작업을 해야한다. 원래는 1명정도는 보조로 개발을 할 것 같았는데 일어나지 않을 일일 듯 하고... 이렇게 되면 이미지를 인식하는 AI는 어떻게 만드는 것이 좋을까 의문이기는 하다. 뭐 언젠간 하겠지. 우선은 있는 것 부터 합시다. 우선은 제 아무리 backend라도 mail을 바로 쏘는 건 불가능한데... 그나마 linux에서 동작을 하신단 말이죠? mail server를 깔아도 무리가 없다. 그래서 일단 mail발송을 해주는 서비스를 생각해보기로 했다. 결국은 그냥 공식 google 계정을 파서 거기서 메일 쏴주는 것으로 대신 했다. 그게 훨씬.. 2024. 5. 11.
[React-native + Web] 헬키 개발일지 4. CI 파이프라인 완성, 간단한 테스팅 https는 기본적으로는 도메인을 필요로하기는 하는데, 그냥 그거 없이 production 환경만 테스팅해보고 싶을 때는 우리가 직접 pem을 만들어서 테스팅하는 것이 가능하다...사실 기본적으로는 그걸로 하는 수 밖에. 아님 뭐 서버 코드를 또! 고쳐야 한다.openssl genrsa -out key.pem 2048openssl req -new -sha256 -key key.pem -out csr.pemopenssl x509 -req -days 365 -in csr.pem -signkey key.pem -out cert.pem 다행히 아직 history에 살아 계시기 때문에 빠른 아카이빙.그리고 root로 서버를 실행하는건 그다지 좋은 생각이 아니기 때문에, 돌릴 유저한테 다른 포트를 주고, 포트포워딩.. 2024. 5. 11.
[React-native + Web] 헬키 개발일지 3. HTTPS + 배포 도전기 2 2024-05-07T02:10:23 ERROR [codedeploy-agent(23562)]: InstanceAgent::Plugins::CodeDeployPlugin::CommandPoller: Missing credentials - please check if this instance was started with an IAM instance profile... 원래하던 프로젝트(GTDList)는 어떻게 되었냐고, 왜 넌 맨날 하고 싶은게 바뀌냐고 물으실지도 모르겠다만, 원래 하던 것도 결국 마무리할 계획이 있고, 사실상 그쪽에서 쓰던 백엔드를 가지고 작업하고 있다! 프런트는 원래 망해가고 있었으니, 실제로는 어느정도 이어지고 있는지도 모르겠다. 계속 코드를 짜다보면 결국 기본적인 건 비슷하달까. 이.. 2024. 5. 7.
[React native + Web] 헬키 개발일지 2. HTTPS + 배포 도전기 오늘은 다소 짜증날 수도 있는 구현을 해보려고 한다.어제 대충 회원가입/로그인 페이지 기틀을 짜두었다. 뭐 엄청난 디테일을 준 건 아니고 적당히 이쁘면 된다.내가 UI/UX 디자인까지 다 하는게 아니기 때문에... 이 정도 해주면 나중에 UI/UX가 들어와도 수정 가능할 것이다. 이젠 백엔드 서버와 통신이 제대로 되기 때문에(네트워크 문제가 없다는 전제하에), 구현해야할 건 대략 3가지가 남았다. 1. App의 AuthContext.2. HTTPS로 보안 챙기기3. 배포하기. 인데... 흠. 앱 배포는 그렇다치는데, backend 배포를 해야지 android / ios 기종에서 테스트가 가능해지니까 빠르게 하는게 좋다. 이걸 제외하고도, 기획단에서 더 저장해달라고 부탁한 사항도 있기 때문에 빠르게 완성해.. 2024. 5. 7.
[React-native + Web] 헬키 개발일지 1. 이번엔 크게 형식 신경 쓸 것 없이 여태껏 뭘 해왔는지를 대충 말해보도록하겠다.  https://github.com/heeboy007/Integrated3DDevEnv GitHub - heeboy007/Integrated3DDevEnv: Android + iOS + Webpack + React Native + FiberAndroid + iOS + Webpack + React Native + Fiber. Contribute to heeboy007/Integrated3DDevEnv development by creating an account on GitHub.github.com일단 이걸 만들어보고 있었는데, 이게 어쩌면 제일 큰 시간을 차지했을지도 모르겠다.react-native는 기본적으로 안드로이드와 .. 2024. 5. 5.
[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에 넣을 instanc.. 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.
728x90
반응형

티스토리툴바