Angular

Today I Learned 날짜 2023년 12월 14일 목요일 내용 테스트 서버에 데모버전 어드민 페이지 기능이 배포되었다. 환경변수 이전 TIL에서도 언급했듯, 유저에게 체험할 기회를 줄 데모 쇼핑몰과 데모 어드민 사이트는 우리가 환경변수로 계정 정보를 설정해야 했다. 이 계정 정보가 Shopify인지, 알파리뷰인지가 헷갈렸다. local에서 입력했던 정보로 알파리뷰와 Shopify 에서 각각 로그인했을 때, Shopify에서만 로그인이 되길래 Shopify 계정 정보라고 생각했다. 그런데, “우리가 Shopify 계정을 검증할 수 없는데 왜 받아야 하는가?”에 대해 대답할 수 없었다. 관련 코드를 열심히 찾다가 내가 간과했던 사실을 깨달았다. 데모버전 로그인에서는 비밀번호에 대한 검증 로직을 지웠다! 계정 정보를 우리가 설정한다는 이유로 지웠던 기억이 이제야 났다. 내가 테스트 했던 계정은 같은 ID로 알파리뷰와 Shopify에 모두 가입되어있다보니 헷갈렸던 문제였다. ...

Today I Learned 날짜 2023년 12월 7일 목요일 내용 어제 확실히 해야하는 부분을 정리했기 때문에 질문으로 해결할 수 있었다. 기간을 2주로 잡았는데, 더 빨리 끝났다. 굿 Task 완료! Shopify에서 변경한 샵 정보를 shop 테이블에도 반영해야 하는가? 기존 코드에선, Shopify에서 샵의 정보가 변경되면 shop_detail 테이블만 업데이트 되었다. 샵의 이름은 2종류인데, Shopify에서 설정한 것과 알파리뷰에서 설정한 것이다. 기존에 파악했던 대로 shop 테이블은 Shopify에서 받아온 데이터를 그대로 저장해주는 테이블이고, shop_detail은 알파리뷰에서 생성된 데이터를 저장하기 위한 테이블이다. 그런데, Shopify에서 수정된 데이터를 shop_detail 에만 반영되는 기존의 코드는 이해가 잘 안됐다. 내가 모르는 또 다른 뜻이 있진 않을까 걱정됐다. 여쭤보니 없었다. 그래서 바로 고쳐버렸다. 슈퍼관리자 페이지에서 병기되는 두 이름 중 무엇이 우선인가? 기존 Shopify에서 설정한 이름만 출력되는 상황에서 두 종류의 이름 모두 출력하도록 변경해야 했다. 둘 중 하나는 괄호 내에 출력되야 하는데, 어떤 것을 집어넣야 할까? 질문을 통해 알파리뷰 이름이 우선인 것을 확인하고 Shopify 에서 설정한 이름을 괄호안에 집어넣었다. Shopify에서 샵의 이름을 변경하였을 때, 알파리뷰에서 설정한 이름도 변경되야 하는가? 1번 질문과 연계되는 이야기인데, Shopify에서 수정 시 웹훅을 통해 shop_detail 이 수정되기 때문에 기존에도 두 이름은 연관이 있었다. 혹시 아예 따로 관리되도록 해야 하는 지에 대해 궁금했지만, 질문을 통해 이대로 두는 것으로 결정했다. 좌상단에 나타나는 이름은 어떤 이름이여야 하는가? 좌상단에는 ALPHA REVIEW FOR { 샵 이름 } 이 나타난다. 기존에는 Shopify에서 설정한 이름이 나타나도록 되어있었으나 알파리뷰에서 설정한 이름이 출력되도록 변경하였다. 로그인 과정에서 해당 계정과 연관된 Shop들을 가져와서 세션에 저장한다. 이 데이터를 바탕으로 출력하기 떄문에, 세션에 알파리뷰에서 설정한 이름도 추가로 저장해주었다. 회고 개발 개꿀잼!!! 발목 깁스한건 노잼 ...

Today I Learned 날짜 2023년 11월 22일 수요일 내용 로컬에 개발 환경을 구축하는데 성공했다.. 역시 막힐땐 차근차근 적으면서 해야 잘 풀린다. Docker 에 대한 이해가 너무 없다… 서버 가동을 위한 데이터베이스 설정 과정(장문주의) 초기 세팅(기존 시도들로 인한 오류를 방지하기 위해) 생성된 postgres 폴더 삭제 docker system prune -a 로 모두 삭제 docker volume prune -a 로 볼륨도 삭제 이후 각 단계마다 b,c 는 반복 docker-compose -f .\docker-compose.local.yml up 으로 구동 2. 가설 : local-postgres가 superuser 계정을 이용할 수 없어서 DB를 새롭게 못만든다. 계정 비밀번호 설정해주자 ...

Onboarding 회고 시작 전의 생각 꽤 흔한 CRUD 사이트를 만드는 과제였다. Angular나 FastAPI는 처음이라 걱정은 되었지만, 크게 복잡한 기능도 없어서 많이 낙관했다. 유저와 관련된 기능도 회원가입과 비밀번호 암호화가 제외된 로그인 뿐이었고 내부에 Todo와 관련된 기능들도 생성, 삭제, 조회 ,수정 뿐이라 조금 공부하면 해볼만할 것이라고 판단했다. 파이썬이라는 언어의 측면에서도 알고리즘 공부때 많이 사용했으므로 걸림돌이 되지 않을 것이라고 생각했다. 문제 정의 구현에 매몰되어 구현이 늦어졌다. 온보딩 과제를 진행하는데 태용님의 권유로 ChatGPT를 배제하였다. 기존에도, 공식 Document를 읽고 원하는 지식을 얻는 습관이 필요하다고 생각하였기에 충분히 납득하였다. Document마다 다르긴 하지만 FastAPI와 Angular는 개념들에 대한 설명과 사용 예시가 나와있었고 작은 프로젝트를 진행하는 과정도 나와있었다. ...

Today I Learned 날짜 2023년 11월 17일 금요일 내용 화요일부터 너무 바빠다는 핑계로 TIL 작성을 미뤘다. 습관화하는 이유는 어떤 상황에서도 루틴을 유지하기 위함이니 반성해야겠다. 꼭 적자. 온보딩 종료 지난주 월요일(구현은 화요일부터)에 시작된 온보딩 과제가 종료되었다. 목요일에 다른 개발자 분들 앞에서 발표를 마쳤다. 나와 같이 입사한 주영님이 기가 막히게 잘 하셨는데 그에 비해 내 결과물이 참 초라하긴 했다. 부끄럽긴 했지만, 갈 길이 머니 계속 노력해야 하고 갈 길이 정말 멀다는 걸 느꼈다는 것만으로도 만족한다. Angular를 제대로 이해하지 못했다. Todo 상세보기를 위한 데이터를 query parameter로 넘긴 것, 화면 출력 값 업데이트를 위해 새로고침 한 것, Subscribe 와 비동기의 개념 , 자신이 작성한 코드에 대한 이해와 고민이 부족한 것 등에 대해서도 감사한 피드백을 많이 받았다. 사실 발표 전에는 내 수준이 너무 부족해서 지적 받을게 산더미같아 발표하기 싫었다. 오늘 대표님이 피드백은 다른 사람이 시간을 들여 제공하는 것이기에 감사해야 한다는 말씀을 하신걸 듣고 생각해보니 정말 감사한 시간이었다는 생각이 든다. 덕분에 끝났다는 생각보단, 더 보완해서 완성도를 높이고 싶다는 욕심이 생겼다. ...

Today I Learned 날짜 2023년 11월 13일 월요일 내용 진행은 못하고 여기저기 늪에 빠져 허우적거리다 하루가 끝나버렸다. 2등 뽑기 대회의 1등 오늘 API를 구현 중에 이상한 상황을 맞닥뜨렸다. 내가 구현하던 것은 로그인을 시도하는 메서드로서, 성공하면(정확히는 입력인 아이디와 비밀번호가 데이터베이스 존재한다면) 해당 유저가 DB에서 가진 고유 id(회원가입할 떄 입력하는 user_id가 아님)를 반환하도록 하는 기능이였다. 문제는 첫번째 호출 때는 response를 반환하지 않는 문제였다. 같은 payload를 보내도 첫번째는 response가 나타나지 않고 두번째만 나타났다. 여기서 첫번째라함은 해당 페이지가 로드된 이후의 가장 첫 호출이다. 꽤 오래 고생했는데, 원인은 CORS로 인한 것으로 판단되었다. 따라서 현재 Local 상황에서는 CORS의 Origins를 제한없이 풀어놨더니 해당 문제가 해결되었다. 물론 CORS를 무력화시킨 것이기 때문에 정확한 원인을 찾아 해결하고 Cors를 정상화시켜야 하지만, 우선 갈길이 멀기 떄문에 해결한 것만으로도 다행이다. ...

Today I Learned 날짜 2023년 11월 10일 금요일 내용 Angular 공부 특정 유저의 할일 관리 조회 및 생성 API 구현 서버에서 받은 데이터 화면 출력 및 일정 변경(11월 10일 금요일 ⇒ 11월 15일 수요일 완성 목표) Response 출력하기 서버에 Request를 보낸 후 Response로 받은 것을 어떻게 처리해야 할지 감을 잡는데 꽤 오래 걸렸다. 원하는 Data를 받는 것 자체는 생각보다 쉽게 해결되었는데, 해당 Data를 화면에 출력하는 부분이 문제였다. 지금 생각해보면 괜히 어렵게 생각한 것 같아 어처구니가 없긴 한데.. ...

Today I Learned 날짜 2023년 11월 9일 목요일 내용 프론트엔드 부분 구현을 시작했다. 유저의 입력 값을 서버 DB에 저장하는 데 성공했다. Angular Document를 읽었는데 꽤나 이해하는데 어려웠다. 읽으면 알 것 같으면서도, 어디부터 손을 대야할 지 막막하다고 해야하나.. 그래도 유저가 입력한 값을 서버에 넘겨서 DB에 저장하는 데는 성공했다. 오늘 계획했던 양에 비해선 많이 부족하긴 하지만 내일 속도 붙여서 열심히 해봐야겠다. 클라이언트 입장에서 서버가 보낸 Response를 어떻게 받아서 처리해야할 지 잘 모르겠다. 아무래도 이 부분을 중점적으로 내일 잘 읽어봐야겠다. 특정 조건(입력한 회원 정보가 일치하지 않을 때)만 메시지를 출력해야 하는데, 이 부분만 따로 컴포넌트로 만들면 될까? 이전 프로젝트에서 산성비 게임에서 아이템을 구현했었다. 상대 화면을 이미지로 가리는 아이템을 구현할 때는 특정 DOM을 만드는 방법을 사용했었는데, 내일 찾아봐야겠다. ...

Today I Learned 날짜 2023년 11월 8일 수요일 내용 과제 중 백엔드 부분을 완성했다. 기능 설명에 관련된 부분들은 모두 완성하였다. 데이터베이스 테이블 문제 아마 프론트 부분을 구현하면서 약간의 수정만 필요하지 않을까 싶다. 어제 DB에 Table이 생성되지 않아 문제를 겪었는데 생각보다 수월하게 해결되었다. 기존에 model에 작성한 대로 table을 생성하는 코드가 database.py에 위치해 있었는데, 이것을 main.py로 옮기니 바로 해결됐다. 그 위치에서는 그 코드가 작동되지 않았던걸까? 문제는 해결됐지만 어제의 추론들은 주말에 공부해서 스스로 답변을 작성해봐야겠다. ...