[Flutter] flutter_webview 를 사용한 웹뷰 앱 제작 후기
회사에서 얼마 전까지 flutter를 사용한 웹뷰 앱을 만드는 프로젝트를 진행했었다. 진행하며 겪었던 문제들과 해결법들을 정리하고자 한다.
[React-Query] useQuery, useMutation
React에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트할 수 있는 라이브러리. 비동기 로직을 쉽게 처리할 수 있다.Local State : React 컴포넌트 안에서 사용되는 stateGlobal State (Client State) : Global St
기프티콘 거래 웹앱 with Cypress
프로젝트 시작 모바일 중고 쿠폰 거래 웹앱 구현하는 과제가 주어졌다. 구현해야 할 부분은 Api 함수 구현, 결과 타입 정의, 공통 리스트 카드 컴포넌트 그리고 카테고리 상세 페이지, 브랜드 상세페이지이다. Api 함수 구현 및 타입 정의 구현해야할 Api 요청 함
[Next.js] 공유 미리보기 오류 (CSR, SSR)
Next.js로 작업하던 프로젝트가 거의 마무리되어서 카카오톡 공유 기능을 추가하고 테스트를 해보았다.분명 og tag를 제대로 입력해주었는데도 오류가 났고, 카카오톡 공유 뿐만 아니라 url을 복사해서 sns나 페이지에 붙여넣어도 미리보기가 없다고 나왔다. 며칠 동안
메신저 페이지 with redux-toolkit
회의 채팅, 답장, 삭제 기능이 포함된 메신저 페이지를 구현하는 과제가 주어졌다. 와이어 프레임을 제작하여 팀원들과 디자인을 회의하였고, 이후 역할을 분배했다. 내가 1차로 맡은 부분은 공통 스타일 구현이다. 공통 스타일 구현 1. GlobalStyles.ts
readAsDataURL vs createObjectURL
readAsDataURL, createObjectURL 두 가지 모두 브라우저에서 로컬 파일을 읽을 때 사용하는 방법이며 특히 이미지 미리보기에서 주로 사용된다. 두 방법의 차이는 뭐고 어떤 방법이 더 효율적일까?비교하기 전에, 파일을 읽는 방법부터 알아보자. <
어드민 상품 등록 페이지 with Recoil
🎉어드민 상품 등록 페이지 회의 결과 두 번째 과제로 어드민 상품 등록 페이지를 구현 하게 됐다. 팀원들과 회의 결과, 공통 컴포넌트를 가장 먼저 구현하는 것으로 결정되었다. 그 중에서 나는 이미지 첨부 부분을 맡았다. ✨이미지 첨부 첨부 시, 이미지의 타이틀만
.jpg)
환율 계산기 제작 with TDD 였던 것
얼마 전, 지인으로 부터 원티드 프리 온보딩 프론트엔드 과정이 있다는 얘기를 들었고, 곧바로 사전과제를 완료하고 제출했었는데 최종 합격했다고 연락이 왔다! 지난 24일 월요일에 OT가 시작되었고, OT라서 대충 넘어갈 줄 알았지만 그 날 팀 편성이 완료되고 수요일까지
first-child vs first-type-of
Next.js로 하던 프로젝트에서 위와 같은 경고 문구가 떳다. SSR 환경에서 first-child는 unsafe 하니까 first-of-type으로 바꿔라고 한다.바꾸니까 경고 문구가 사라지고, 제대로 동작하는 것을 볼 수 있었다. 그래서 first-of-type이
[감성82] 모달창 스크롤 원위치 시키기
이전 글에서 만난 버그이다. 모달을 닫았을 때, 스크롤을 원위치 시키고 싶은데, 제대로 동작하지 않는다. 어떻게 해결하면 좋을지, 구글신에게 물어보았다.출처 : https://newbedev.com/how-to-scroll-to-the-top-of-a-moda
[감성82] 프로젝트 시작 / 게시글 이미지 숨김처리 및 모달창
팀원들과 당근마켓을 클론하는 감성82를 만들어보기로 했다. 디자인 figma는 주어졌고, 내가 맡은 부분은 프로필 페이지다 !프로필 페이지에 들어오면, 프로필 설명과 판매중인 상품, 게시글이 보인다. 아래는 샘플 데이터를 넣은 게시글의 모습이다.이미지가 여러 장일 때,
inline 요소 사이의 공백, 어떻게 없앨까
위 코드대로 작성하면, 안녕하세요 사이가 공백으로 띄어진 것을 볼 수있다. 공백을 넣은 적이 없는데 왜? 기본적으로 설정되는 margin 인 것일까? 이것을 없애려면 어떻게 해야할까?개발자 도구에서 해당하는 곳에 마우스를 올려보면 아래 사진처럼 <body> 영역으