개발38 술담화 쇼핑몰 Form 에러 처리 변경하여 결제페이지 체류 시간 감소, 이탈률 감소 시키기 술담화 쇼핑몰(https://sooldamhwa.com/)에서 8월 말 선물하기 기능을 추가하면서 결제 페이지의 대대적인 디자인 변경이 있었다. 결제 페이지 쪽 개발을 하면서 기존 결제 기능에 개선하고 싶은 부분을 발견했다. 술담화에는 장바구니에 상품을 담아서 결제하거나, 제품을 바로 구매하는 경우 결제 페이지로 이동한다. 결제 페이지에서 배송지 확인 및 수정, 주문하는 상품 확인, 결제 방법 선택, 쿠폰 선택, 포인트 입력, 정보제공 동의를 한 뒤에 결제 버튼을 누르면 결제가 진행된다. 기존에는 결제 버튼은 항상 비활성화되어 있고, 결제에 필수인 항목인 결제 방법과 개인정보 제공 동의를 하면 결제 버튼이 활성화되어 결제를 할 수 있는 방식이었다. 이 방식은 유저가 어떤 항목이 필수로 입력해야 하는지 알.. 2022. 10. 10. [코드숨 리액트 강의] 7주차 회고 이번 강의는 지난 번 강의에 이어 로그인 기능을 만들었다. 지난번 다짐이었던 월요일부터 강의 듣기 시작은 실패했지만 화요일부터 듣기 시작하면서 그래도 순조롭게 들었던 것 같다. 과제 자체는 짧았지만 강의가 2시간 30분으로 매우 길어서 강의 들으면서 타이핑 하고, 에러 잡고 하느라 꽤 오래 걸렸다. 1. https://www.npmjs.com/package/eslint-plugin-import eslint-plugin-import Import with sanity.. Latest version: 2.26.0, last published: 2 months ago. Start using eslint-plugin-import in your project by running `npm i eslint-plugin.. 2022. 6. 19. [코드숨 리액트 강의] 6주차 회고 6주차 강의는 라우팅이었다. React Router Dom 을 이용해 라우팅을 개발하고 테스트 하는 방법을 배웠다. historyApiFallback, MemoryRouter 등을 사용하는 것을 알게되었다. 좋았던 점은 불금에도 불구하고 친구와 약속을 만나고 온 뒤 개발을 했다는 것이다. 하기 싫음을 이겨내고 과제를 했다. 아쉬웠던 점은 과제를 늦게 시작했던 것이다. 잘 알고 있는 라우팅이니까 조금 늦게 시작해도 되겠지 라는 생각에 수요일부터 강의를 듣기 시작했다. 이 점을 고쳐서 다음 주는 월요일부터 강의를 듣기 시작하겠다. 이제 7주차구나 강의가 곧 끝나간다. 유종의 미를 잘 거둬야겠다! 2022. 6. 13. [코드숨 리액트 강의] 5주차 회고 - 비동기 코드에서 Thunk를 쓰는 이유 드디어 강의의 절반을 넘게 들었다! 8주차까지면 끝인데 벌써 5주차가 끝나다니 시간 참 빠르다. 이번주는 수요일 휴일이 있어서 여유가 있었다. redux와 비동기 fetch를 TDD로 개발하는 것을 배웠다. 지난번 첫 TDD를 개발해서 그런가 이번 과제는 처음 TDD를 접했을 때 보단 수월했다. 과제를 월요일부터 시작해서 제출하면 더 좋을 것 같다. 코드 리뷰를 좀 더 받는게 나에게 큰 도움이 될 것 같다. -> 내일부터 과제 해보자! Fetch 테스트 jest로 테스트하는 것은 런타임 때 테스트하는 것이 아니기 때문에 실제로 fetch 이후 response를 받아서 테스트가 진행되지는 않는다. useSelector.mockImplementation((selector) => selector({ categ.. 2022. 6. 6. [코드숨 리액트 강의] 4주차 회고 4주차 강의는 TDD와 Redux로 개발하는 것을 배웠다. redux를 사용하기 위해서는 useSelector.mockImplementation 를 사용해야하고 jest.mock을 사용하는 것도 특이했다. 이번 주는 바빠서 과제를 못했다 ㅠ 뭐가 그리 바빳나 생각해봤는데 월요일은 기억 안나고 화요일은 누룩 수업 듣고 오니 뻗어서 잤고 수요일은 개발팀 워크샵 다녀왔고 목요일은 강의 들었고 금요일은 약속 다녀오니 시간이 엄청 늦어서 못했다. 그냥 앞으로는 강의가 끝날 때 까지는 최대한 약속을 안 잡아야겠다 ㅠㅠ 다음주는 수요일 쉬는 날이 있으니 시간을 최대한 잘 활용해보자! 2022. 5. 29. [코드숨 리액트 강의] 3주차 회고 이번 강의를 통해 처음으로 TDD를 해봤다. 사용한 프레임워크는 Jest와 testing-library/react 였다. TDD(Test-Driven Development)는 Red Green Refactoring 을 이용해서 개발한다. 먼저 테스트에 실패할 테스트 코드를 작성한다. 적당한 코드를 작성해(특이한 케이스) 테스트를 통과시킨다. 이후 코드를 보완해 보편적인 케이스들도 통과할 수 있도록 한다. 개인적으로 테스트 코드를 먼저 작성하고 코드를 나중에 개발하는 방법은 처음이었는데 굉장히 신기했다. 처음에 이런 방법을 고안한 사람은 천재가 아니었을까. 아래는 TDD를 이용한 코드이다. import { render, screen, fireEvent } from '@testing-library/react.. 2022. 5. 23. [코드숨 리액트 강의] 2주차 회고 이번 강의에서는 본격적으로 React가 어떤 것인지 배울 수 있었다. 그런데 강의를 들으며 메모했던 파일이 다 날라갔다 ㅠ 안돼 이럴수가 -> 앞으론 메모를 노션에 정리해둬야겠다. 코드를 기능 별로 나누는 것을 "관심사의 분리" 라고 표현하셨는데 처음 듣는 용어라 흥미로웠다. -> 같은 기능을 수행하는 코드라도 어떤 구조로 만드느냐에 따라 코드의 퀄리티가 달라짐을 알 수 있었다. 이번 주도 코드 리뷰를 모두 반영하여 과제를 완성하지 못했다. 월요일, 화요일이 너무나 바빴다 ㅠ 이후는 매일 강의를 듣고 과제도 꾸준히 제출했는데 금요일까지 완성하는게 빡센 것 같다. 다음주는 강의를 월요일에 다 듣고 과제도 매일 매일 빡세게 해보겠다! 그래도 코드 리뷰로 받았던 내용을 정리해보겠다. 1. 변수와 핸들러 사이에.. 2022. 5. 15. [코드숨 리액트 강의 회고] - 1주차 회사의 지원으로 코드숨 리액트를 듣게 되었다. 매주 강의에 대한 회고를 해보고자 한다. [학습 내용] 개발 환경 구축(Node.js / NPM / Webpack Dev Server / ESLint) DOM, Array JSX, Babel, Webpack [과제] let을 사용하지 않고 구현하기 간단 계산기 만들기 [좋았던 점] 프론트엔드 웹 개발의 기초 지식인 DOM, JSX, Babel, Webpack에 대해 자세히 알 수 있었다. 지금까지는 create-react-app 으로만 웹 서버를 실행시켰는데 Webpack Dev Server로 서버를 실행시키는 경험을 해볼 수 있어서 좋았다. Babel이 어떻게 크로스 브라우징 이슈를 해결하는지 실제 예시를 통해 알 수 있어서 좋았다. (babeljs.io .. 2022. 5. 8. [D3JS] 7. 데이터 준비하기 이 글은 https://youtu.be/2LhoCfjm8R4 강의를 정리하였습니다. 이번 강의에서는 html 표에서 데이터를 뽑는 방법, csv를 만들고 정리하는 방법, Github Gist를 이용해 데이터를 publish 하는 방법을 배웁니다. https://developer.mozilla.org/ko/docs/Web/CSS/color_value - CSS: Cascading Style Sheets | MDN CSS 자료형은 sRGB 색 공간의 한 색을 표현하며, 추가로 알파 채널 투명도 값도 가질 수 있어 자신이 가리키는 색상과 배경이 어떻게 합성되어야 하는지 지정할 수 있습니다. developer.mozilla.org css named color에 대해 들어보신 적이 있나요? 우리가 html에서 속.. 2021. 10. 21. 이전 1 2 3 4 5 다음
