designer DK의 블로그

리액트와 같은 프레임워크를 안쓰고 사이트를 구축해보려고하니가장 부딪혔던 부분이 바로 주소창 URL과 내 화면 간의 일치 작업이 매우 힘들다는 부분이었다.그 작업이 복잡해지다보니 자꾸 뒤로가기를 눌렀을 때 두번 뒤로가기를 하면 인덱스로 가버리는 현상이 발생했다. 사실 이 부분의 경우 지난번 프로젝트때 Vanilla JS 기반으로 해결해보는걸 시도는 했었으나 그땐 실패했었다.결국 이번 프로젝트 어드민 구축에 있어서 그런 문제가 또 발생했고이번에 풀지 않으면 계속해서 발생하겠다고 판단이 되어서 커서와 함께 다시 이 문제를 해결해보았다. 화면에 맞는 주소반영, 원활한 뒤로가기, 페이지 관리 등이 중요했고이를 해결하는 방법으로 State와 Router 파일을 구축해서 사용하게 되었다.(리액트를 안썼지만 결국 작업..

지난번 포스팅에서 이어지는 포스팅인데 aws에서 I AM 사용자 생성과 S3 버킷 생성이 되었으면이제 실제로 파일을 올려보고 받는 연습이 필요했다. 제대로된 파일 다운로드 기능 구현은 유저 권한 및 상품과도 연계시켜야하는 복잡함이 있어서일단은 S3를 이용한 다운로드가 잘 되는지 안되는지만 테스트해보기 위해순전히 다운로드 테스트용 코드만 구성해서 테스트해보았다. 먼저 파일의 업로드가 필요한데 이것도 두가지로 나뉜다.1. 코드를 통한 업로드2. 직접 aws S3에서 업로드 1번의 경우 상당히 복잡한 과정을 거쳐야하기 때문에 나의 프로젝트 특성을 감안했을 때2번의 방법 편하고 좋을 것 같아서 2번의 방식으로 하기로 결정했다. 실제로 직접 업로드 방식은 굉장히 편했다. 먼저 s3에 접속한다. 지난번에 만들어 둔..

디자인 마켓플레이스 프로젝트를 진행하면서 유저가 파일을 받을 수 있는 시스템이 필요했다.그러기 위해서는 필연적으로 파일서버가 필요하고 그 방법으로 아마존 AWS의 S3를 사용해보기로 했다. 과정이 꽤 복잡해서 나도 이렇게 블로그로 정리해둔다. 최초 가입 과정은 생략한다. (국적 및 카드정보가 필요하다는 것이 특이사항!) 가입을 하고나서 콘솔에 로그인을 한다.AWS의 경우 제공하는 서비스가 너무나 방대하기 때문에 검색하는게 일일이 찾는것 보다 훨씬 낫다.검색창에 I AM을 검색하면 그 이후부터는 이렇게 최근 방문 서비스에 필요한 서비스가 뜬다.  I AM에 들어가서 좌측메뉴 사용자를 선택하면 이렇게 사용자 생성을 할 수 있다.   여기서 사용자 이름 설정  권한 설정 부분인데 여기는 직접 정책 연결을 선택..

새로운 프로젝트를 시작하며 (디자인 마켓프레이스)대부분 직전에 진행해보았던 쇼핑몰 프로젝트와 유사했고그 과정과 유사하게 많은 부분들을 진행 중이다. 하지만 기존 쇼핑몰에서 내가 패스하고 지나갔던 게 바로 카테고리 부분이었는데디자인 마켓플레이스 프로젝트의 경우 이 카테고리 부분이 매우 중요해서초기 설계부터 잘 해두고 진행하고 싶었다. 그래서 나의 새로운 코딩 선생님. Cursor와 함께 이 카테고리 설계를 체계적으로 진행해보았다.사실 이게 대략하려면 크게 안어려울 부분 같았으나, 나름 체계적으로 구축하려다보니 꽤 복잡하고 어려웠다. 내가 나에게 요청하는 카테고리 요구사항은 이러했다.- 메인카테고리가 있고 그 하위로 서브카테고리가 있다. (서브카테고리가 필터 역할도 할 것)- 메인카테고리는 하나만 선택 가능..

모든 문제는 결국 두가지로 귀결된다. 내가 통제할 수 있는 문제.내가 통제할 수 없는 문제. 내가 통제할 수 있는 문제에 집중하자.

디자인 마켓플레이스 프로젝트를 드디어 시작했다. 노션에서 러프하게 기획을 진행하고  DB 구성요소들을 대략 짜보았다.   그리고 피그마에서 각 화면에 대한 대략적인 설계들도 진행했다.  디테일한 기획은 개발을 진행해가면서 계속해서 추가 보완을 해나갈 생각이다.이전에 몇몇 프로젝트를 진행해보니 나름 아무리 기획을 꼼꼼하게 잡더라도 결국 실질적인 개발이 이루어지다보면계속해서 기획이 틀어지고 변경되는 경우를 많이 목격했다. 그래서 너무 완벽한 기획을 하고 프로젝트에 들어가는 것 보다는큰 뼈대는 제대로 잡고 디테일 한 부분은 개발을 해가면서 추가 보완 해나가는 것이 좋다고 생각한다.그게 일반적인 스타트업들에서 이야기하는 애자일 방식이 아닐까. 다음주부터 개발 시작!

평생 윈도우 유저로 살아오다가 mac으로 컴퓨터를 바꿨을 때 가장 당혹스러운 부분은 키보드였다. 한글로 바꾸지 못해서 쩔쩔매고, 커맨드가 햇갈려서 쩔쩔매고… 이런 부분을 해결하기 위해 맥에서 윈도우 키보드 구조를 그대로 매핑해서 사용했더니 os 전환에도 어려움 없이 유연하게 대응할 수 있었다. 그래서 나 자신도 참고할 겸 맥에서 윈도우처럼 키보드 설정을 해서 사용하는 방법을 소개하고자 한다. 사실 다른 부분은 쉬운데 한영키를 맵핑하는 부분이 꽤 난이도가 있어서 이 부분부터 다뤄본다. 먼저 맥-윈도우 간 한영키 맵핑을 위해서는 Karabiner라는 애플리케이션을 설치해야한다.  설치된 Karabiner element 실행  설치하면 ‘응용프로그램이 키보드 입력 모니터링 허용’에 대한 창이 뜬다.입력 모니터..

아직 개발에 서툰 단계이지만쇼핑몰 프로젝트를 속성으로 잔행하면서 풀스택 과정을 경험해보았고현재 이 경험을 베이스로 커서 및 gpt 도움을 받아 나의 비즈니스 몰을 한번 만들어보려고 한다. 비즈니스 컨셉은 내가 직접 제작한 디자인 에셋들을 판매하는 사이트이다.디자이너로써 여러가지 디자인 에셋 사이트들에서 많은 에셋들을 서치하고 구매도 해보았지만생각보다 마음에 드는걸 고르기 쉽지 않았다. 그 이유는 여러가지가 있겠지만 내가 느끼기에 디자인들이 전반적으로 제너럴하지않고어느정도 특이한 구석들이 있다보니 무난하게 원하는 곳에 적용하기 쉽지 않았다.설령 퀄리티가 좋은 에셋이더라도 나의 프로젝트에 안어울릴 정도로 개성이 강하면 말짱 꽝이었다. 그래서 그런 경험을 바탕으로 정말 디자이너들이 범용적으로 자주 쓸 것 같은..

한달 좀 넘게 열심히 공부한 쇼핑몰 프로젝트를 드디어 완료했다!디자인 진행도 하지 않았고 여러가지 예외처리들도 모두 제외하고 진행하긴 했지만그래도 DB설계부터 프론트~백엔드 전 작업을 풀스택으로 경험해보는 좋은 공부였다. 마지막 배포는 지난번 포스팅의 절차처럼 DB 배포가 먼저 진행되고https://designerdk.tistory.com/28 mongoDB Atlas로 DB 무료로 배포하기강의를 통해 풀스택으로 '할일 앱'을 만들었고 배포하는 과정으로 들어갔다.가장 먼저 DB 배포를 진행했다. mongoDB atlas를 가입하고 클러스터라는 걸 만들어준다. (shared가 클러스터 1개까지 무료)designerdk.tistory.com백엔드 배포를 진행했다.https://designerdk.tistor..

평소에 chatGPT와 함께 개발 공부를 해나가고 있었는데이번에 엄청나게 강력한 ai 툴을 발견하게 되었다. 바로 Cursor  물론 GPT도 굉장히 친절하게 잘 알려주는 편이지만코딩에 있어서 기존에 소통하던 코드내용을 반영안한 채 대화를 이어나가서코드가 꼬일 때가 많았다. 하지만 커서의 경우 코드의 맥락을 이어나감에 있어서 굉장히 진보했다는 느낌을 받았다.커서가 메인으로 내세우는 대화 모델이 Claude-3.5-sonnet인데 이 모델이 특히 코딩에 특화된 느낌이었다.(gpt모델도 사용 가능) 사용방법에 있어서도 정말 코딩에 적합하게 잘 설계되어있는데일단 설치를 하게되면 vs code와 똑같은 환경을 제공해준다.(실제 사용도 단축키 일부 제외하고는 거의 흡사, 이미 깔려있던 extention도 가져올 ..