놀러와요 버그의 숲

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습범위: p254~p288 1. react-icons를 처음 써봤다. 링크: https://react-icons.github.io/react-icons/ 장점 같은 경우는 SVG 형태로 이루어진 아이콘을 리액트 컴포넌트처럼 쉽게 사용을 할 수 있다는 점이다. material UI보다 불편했던 점은 import ~ from ~ 이거를 일일이 다 써주는게 불편했다. 2. rem 아직도 어떻게 쓰는지 잘 모르겠다. 기준을 모르겠다. const ItemCont = styled.div` padding: 1rem; display: flex; align-items: center; &:nth-of-type(even)..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p218 ~p.252 Today I Learned 1. CSS Module: 타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션. 2.styled-components: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다. 3. 기본 CSS 이름짓는 규칙: 이름이 컴포넌트 이름-클래스 형태로 지어져 있다(예: App-header). 클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p190 ~p.215 학습목표 1. Hook을 대체 왜 쓰는가? 2. useState와 useEffect는 왜 쓰고, 어떻게 쓰는가? 3. 그외에 Hook들은 개념만 알아두고, 실전에 쓰일 상황에 필요할 때 다시 찾아보자! Hooks란? Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다. 8.1 useState 리액트 JS 어플내에서 데이터를 보관하고, 자동으로 리렌더링을 일으킬 ..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p172 ~p.188 새로 알게된 사실 1. 모든 리액트 컴포넌트에는 라이프사이클(생명주기)이 존재한다. 2. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 3. 라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다. 4. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이다. 5. Did 접두사가 붙은 메서드는 어떤 작업을 작동 한 후에 실행되는 메서드이다. 6. 라이프 사이클은 총 세가지, 마운트, 업데이트, 언마운트 카테고리로 나뉜다. ※중간정리 마운트 • constructor: 컴포넌트를 ..

이번 포스팅은 니콘내콘 어플의 마이페이지 화면에 대해서 분석 & 비교 해볼 것이다. 🔎 니콘내콘 어플의 마이페이지 니콘내콘 어플같은 경우 메인 홈 화면에서 왼쪽 상단에 버튼을 누르면 마이페이지와 비슷한 기능이 모달로 구현되어있다. 이곳에서 나의 니콘머니, 결제수단, 기프티콘 판매 등 여러 탭들이 존재한다. 이것은 조금 취향차이가 존재할 수 있긴한데, 개인적으로 나는 네비게이션 바가 있고, 마이페이지가 그쪽에 따로 있는 것이 편하다고 느낀다. 니콘내콘에는 네비게이션 바가 없다. 개인적으로 여러 페이지를 이동 할 수 있는 네비게이션 바가 있었으면 훨씬 더 편한 UI가 될것이라 생각한다. 🤔 경쟁업체 '팔라고' 어플의 마이페이지 경쟁업체인 '팔라고'의 나의 메뉴 페이지이다. 나는 개인적으로 이렇게 사용가능금액..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p158 ~p.170 6.2.1 예제를 하면서 실수를 하였다. .map()함수를 이용해서 를 반복적으로 렌더링해주는 예제였는데, 실수로 fashion을 {}로 안치니까 그냥 fashion 글자 그대로 렌더링이 되어서 당황하였다. 올바른 코드는 다음 아래와 같다. const IterationSample = () => { const data = ["스트릿", "아메카지", "캐쥬얼", "데님", "포멀"]; const dataList = data.map((fashion, index) => {fashion}); // 여기서 그냥 {}쓰지 않고, fashion 해버리면 fashion이라는 글자만 반..

이번 포스팅에서는 니콘내콘에서 아예 존재하지 않는 기능에 대해서 써보려고 한다. 🤓 (이 기능을 추가한다면 더 나은 어플이 되지 않을까싶다) 경쟁업체 팔라고의 '즐겨찾기' 기능 '필라고' 어플 같은 경우 즐겨찾기 기능을 제공한다. 🛒 자신이 관심있는 상품의 경우 ❤️표시를 눌러서 즐겨찾기에 추가할 수 있다. 그리고 이는 '나의 메뉴' 탭에서 -> 내 관심 리스트 -> 즐겨찾는 상품 탭에서 내가 즐겨찾기한 상품을 모아서 볼 수 있다. 즐겨찾기 기능이 없으면, 내가 사려고 고민했던 상품들을 다시 찾아가기 번거롭다. 이렇게 유저가 불편하다고 느낀점은 분명 상품 구매율 하락에 영향을 줄 것이다. 나는 소비자는 합리적인 구매를 원하기 때문에, 여러 측면에서 상품을 비교해보고 고민을 많이 한다고 생각한다. 분명 즐..

이번 포스팅에서는 니콘내콘 어플의 상품 상세 페이지를 분석해보고, 다른 어플들과 비교해볼 것이다. 🤗 니콘내콘 상품 목록 페이지 분석 위 이미지는 니콘내콘 메인화면으로 부터 상품 상세 목록 화면까지를 캡쳐해놓은 것이다. (상품은 스타벅스 카페를 선택해서 들어가보았다. 이유는 카테고리안에서 상품이 제일 많이 등록되어있을 것이라고 예상해서이다.) 우선 메인화면 UI가 굉장히 깔끔하다는 인상을 받았다. 카테고리 별로 분류를 해놓았고, 그림이 들어가서 훨씬 직관적이었다. 조금 아쉬웠던 점은 스타벅스 카테고리 안에 들어갔을 때 정렬기능이나 필터 기능이 없었다는 점이다. 무려 스타벅스 카테고리 안에는 50개의 상품이 있음에도 불구하고, 필터 기능이 없기에 일일이 스크롤을 다 내려야했다. 🙀 (나는 개인적으로 이 과..

이번 포스팅은 처음 어플을 쓰면서 먼저 사용하게 되는 '회원가입' 창을 분석해볼 것이다. ✍️ 1. 니콘내콘 회원가입 창 분석 / 배달의민족 회원가입창과 비교 니콘내콘 어플의 로그인 화면을 눌렀을 때 나오는 모습이다. 나는 개인적으로 제일 상단에 나오는 서비스에 대한 소개를 굳이 회원가입창에 넣을 필요가 있나 싶다. 🧐 "당신의 텅장을 ~ 니콘내콘" 까지가 거의 화면의 절반을 차지한다. 개인적으로 회원가입 창에는 회원가입과 관련된 UI만 있었으면 좋겠다. (오히려 시선을 조금 분산 시키는 느낌이고 스마트폰은 위에서 아래로 시선이 가기에 오히려 이 화면의 본질인 로그인과 회원가입창이 더 나중에 눈에 들어오게 되는 느낌이다) 그래도 네이버, 카카오톡, 페이스북, 애플 등 다른 sns와 연결된 회원가입이 많다..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p120 ~ p140 새로 알게된 사실 1. 이벤트: 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것 2. Form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다. 3. div, input,span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할수 없다. 4. onChange 이벤트 핸들러에서 e.target.name은 해당 인풋의 name을 가리킨다. 5. 객체 안에서 key를 []로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제값이 key값으로 사용된다. const name = ‘variantKey‘; cons..