모바일 기획자 + 퍼블리셔 (쇼핑 리스트 만들기)

모바일 기획자 + 퍼블리셔 (쇼핑 리스트 만들기)

2022. 3. 7. 23:53ㆍCS (computer Science)/Web (HTML, CSS, JS, React, NodeJS)

728x90

See the Pen Untitled by LateButGood (@latebutgood) on CodePen.

'드림코딩 엘리' 수업 들으면서 작성 중입니다. :)

첫번째: 설계의 시작은 UI, UI 시작은 '해상도'

기획자 공부를 하면서 드림코딩 수업을 듣고 있다. '쇼핑리스트'를 만드는 걸 연습 중인데,

이런 화면을 만드는게 목표다. 하지만, 막상 UI를 시작하려고 보니 내가 설계하려는 모바일 어플의 '화면 해상도'를 고려하지 않았다는 걸 알게 되었다. 따라서 아래의 브런치를 방문해서 '모바일 화면 점유율'을 확인했다.

https://brunch.co.kr/@plusx/6

해상도의 기준이 있어야 UI디자인을 시작할 수 있다

author - 파워포인트러버│UX 디자이너 | “000백화점 모바일앱을 리뉴얼 하고 싶습니다. " “000 멤버스 모바일앱/웹과 PC 웹사이트를 리뉴얼 하고 싶어요” 위와 같이 업무 의뢰를 받게 되면 기본적

brunch.co.kr

문제는 해당 통계가 나온 시점이 2017.02 ~ 2018.02. (대한민국 기준)이라는 건데, 따라서 해당 브런치에서 참고한 사이트를 들어가보기로 했다.

https://gs.statcounter.com/android-version-market-share/mobile/south-korea/#monthly-202109-202202-bar

Mobile Android Version Market Share Republic Of Korea | Statcounter Global Stats

This graph shows the market share of mobile android versions in South Korea based on over 10 billion monthly page views.

gs.statcounter.com

Edit Chart Data를 선택해서 'Korea, Republic of'/ Screen Resolution(Mobile)/ Chart Type(Bar)/ Perioud(Last 6 months)를 선택했다. (한국, 모바일 화면, 막대그래프, 기간은 지난 6개월 동안) 한국만 선택했음에도, 모바일 화면 해상도는 14개가 넘고 (other를 제외하면) 1위부터 6위까지 차이가 최소 0.23%에서 최대 2.17%로 무언가 하나를 선택하기 애매했다.

그래서, 어떻게 할까 고민하다가 웹화면에서 '검사하기'를 눌러 기기별 화면 사이즈를 검색해봤다.

보시다시피 삼성 갤럭시 S20의 세로 X 가로는 412x915이다. 그리고, Iphone 12 Pro는 390 x 844이다. 우선 삼성 갤러시 20을 기준으로 HTML과 CSS를 정리하고 Iphone 사이즈에 따라 디자인이 변경되도록 제작할 예정이다.

두번째: HTML, CSS를 이용해서 대략적인 UI 작성

<body>

<div class="title"> Shopping List</div>

</section>

</div>

</body>

우선 간단하게 HTML 코드를 짰습니다. 문제는 여기서 fontawesome이 적용이 안되었다는 건데요. 처음에는 그냥

https://fontawesome.com/

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

폰트 어썸으로 들어가서 바로 작업을 진행하려고 했지만 ㅜㅠ 아무리 복붙을 해도 아이콘이 보이질 않는겁니다... 그래서 이것저것 뒤지다가 찾아낸 게 바로

https://fontawesome.com/v4/icon/plus-circle

fa-plus-circle: Font Awesome Icons

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

font awesome V4 입니다. 이 버전에서 상위의 메뉴바를 보시면, Icons 버튼이 보입니다. Home에서 오른쪽으로 3번 가면 있네요. 이 버튼을 클릭해보시면

이렇게 search bar가 나오게 됩니다. 이때 search bar에서 검색을 하시면 아이콘 클릭하시면 아이콘을 복사할 수 있는 화면이 뜹니다.

이거를 그대로 복사해서 붙여넣으시면 그때부턴 제대로 나올 겁니다. 너무 대충 UI를 설계한거 같아 많이 부끄럽지만 그래도 이렇게 쇼핑리스트 첫 화면이 나왔네요.

세번째: Javascript를 이용해서 Plus 버튼 클릭 시 쇼핑몰 상단에 리스트 추가

생각보다 거쳐야할 단계가 많습니다.

<'클릭 이벤트'>

1. 동그란 플러스 버튼을 '클릭'할 경우에 이벤트가 발생해야 합니다. 해당 이벤트는 함수 표현식으로 외부에서 인스턴스를 받아와서 호출하는 식으로 만들 예정입니다.

2. '클릭' 했을 때 상단의 'Title' 바로 아래의 공간부터 차례 차례 한 개씩 리스트가 쌓여서 위에서 밑으로 내려와야 합니다. ~ 따라서 '추가된 태그'들이 '동일한 부모태그' 안에서 추가되도록 설정해야 합니다.

3. 메뉴가 생길 때 'creat'을 통해서 'input'의 value가 새로 추가되어야 하며 동시에 title 바로 아래에 있는 휴지통 역시 리스트 맨 오른쪽에 '추가' 되어야 합니다.

4. 메뉴가 생긴 후 바로 'input'에 입력된 value는 삭제 되어야 합니다.

<실행 과정>

우선 1번을 위해서 'input' 태그에 사용자가 값을 입력하면, 그걸 그대로 화면 상에 출력하고자 했습니다. 따라서 input 태그에 onkeyup을 적용 (키를 눌렀다 떼면 작동)했고, valueToList라는 함수 안에는 입력한 값을 value로 받아와서 .list라는 태그에 입력되도록 했죠.

그래서 이렇게 아래 입력칸에 '가나다라마바사를 입력하니 위에도 '가나다라마바사'가 입력된 걸 확인할 수 있습니다.

문제는 지금부터인데, 'plus' 아이콘을 fontawesome에서 받아와서 넣는데는 성공했지만, 문제는 이게 '클릭'이 안된다는 겁니다.

해결방법을 찾았는데, input태그를 button태그로 바꾸는 거였습니다.

<button type="button" id="listup" onclick="listupgoods()">클릭</button>

다음, 이제 '클릭' 이벤트가 생길 경우에만 input 태그에 사용자가 입력한 값이 상품 리스트에 올라가야 합니다.

function listupgoods() {
    const newlist = document.createElement('div');
    const typedvalue = document.querySelector('#goods').value;
    const itemlist = document.querySelector('#listitems');

    newlist.className = 'list';
    itemlist.appendChild(newlist);
    newlist.innerHTML = typedvalue;
}

1. Div 태그를 createElement로 만들고 그걸 변수에 저장하고

2. 해당 변수를 이용하여 div 태그에 기존에 지정했던 'list' 클래스 네임을 붙이며

3. 상품 목록 Section의 ID인 listitems를 queryselector로 잡아 변수 itemlist에 할당하고

4. 할당된 itemlist에 새로 만드는 div 태그를 할당한 newlist를 자식 태그로 상속시키고

5. input에 사용자가 입력한 값을 할당한 typedvalue를 newlist에 innerHTML로 넣는 것

을 위의 listupgoods()라는 function으로 만들었습니다.

1. button 태그가 아닌 icon이 클릭이 가능하도록 바꾸거나
2. span이나 div태그를 opacity를 통해 투명하게 바꿔서 icon위에 씌우거나

하는 2가지 방법이 존재합니다.

일단, 1번 방법으로는 불가능합니다. 그래서 2번 방법으로 시도했습니다.

div 태그로 씌워서 '클릭'을 시도했고, listupgoods() 함수에 클릭 시 div태그와 input 안에 value 그리고 trashcan이 들어가도록 바꿔놓았습니다.

그래서 보라색 'plus'아이콘 클릭 전에는 아무것도 없다가,

클릭 후에는 이렇게 '가나다'라고 input 태그 안에 사용자가 입력한 값이 shoppinglist로 올라가게 됩니다.

다만, 아직 해결 못한 문제가 있습니다. '쓰레기통' 아이콘이 '가나다'에 너무 붙어있는데, 고정적으로 '쇼핑리스트 칸' 맨 오른쪽에서 약간의 여백에 위치하도록 해야합니다. 'input' 태그안의 글자 수에 따라서 위치가 변동되면 안되니까요. 그런 다음 '네번째'를 시작하도록 하겠습니다.

네번째: Javascript를 이용해서 trash-can 아이콘 클릭 시 추가 된 '쇼핑리스트' 삭제하기

이건 무척 간단하게 끝났습니다. 처음에 '+' 버튼 클릭 시 '상품 리스트'를 업로드할 때 'Div' 태그를 만들고, 그 안에 appendchild로 span 태그를 넣고, span태그 안에 appenchild로 i 태그 (fontawsome 이모티콘)을 넣었었죠.

그래서 'Div' 태그만 삭제해버리면 모든 게 삭제됩니다.

Element.remove();를 사용하면 바로 삭제가 되는데, '부모' 태그를 삭제하면 '자식' 태그도 바로 같이 삭제가 되더군요.

그래서 이렇게 상품 'ㅇㅇ'를 추가하면

그래서 상품리스트를 넣을 container인 section에 'list'(상품 입력 칸의 value를 받아와서 업로드한 그 상품 리스트) 가 생기고, 그 밑에 span 태그가 생기면서 i태그를 안에 넣게 되는거죠.

다만, getridof() 함수는 setAttribute를 통해 'span'태그를 만드는 함수에서 따로 설정해줘야 합니다. 'span'태그도 '특정 조건'에서 만들어지는 함수인 만큼, 해당 함수의 Attribute도 함수로 그 조건이 발동 될 때 같이 들어가도록 만든것이죠.

다섯번째: Javascript를 이용, '엔터키' 입력 시 +버튼 클릭처럼 상품 업로드

그런데 여기서 '문제'에 봉착합니다. 제가 위에서 div 태그에 'click'이벤트를 넣기 위해서 아래의 방법을 사용했습니다.

문제는 '엔터키 입력'과 'click' event가 발생할 때 '입력 칸'의 상품이름이 리스트에 업로드 되어야 하는데, 'onclick'에는 함수가 하나 밖에 안들어갑니다. listupgoods()에 if함수를 넣어서 또 처리하자니 복잡해 보이기에 'onclick'을 우선 삭제했습니다.

그리고 나서 아래처럼 'addEventListener'를 사용했죠. 문제는 이게 '안먹히는' 겁니다.

아래처럼 querySelector로 plus 아이콘인 i태그를 감싼 div 태그인 .plusicon을 가져와서 upload에 할당하고 그걸 '클릭했을 때' 이벤트에 따라 함수가 호출되도록 작성을 했지만 소용이 없었죠.

그.래.서. '원리'는 모르지만 window.onload를 적용해봤습니다. 그랬더니 문제 없이 다시 '플러스 아이콘' 클릭으로 상품 업로드가 가능했습니다. 아마

이 부분이 전부 'load' 되기 전에 아래의 함수가 실행되어서 그랬던 것 같습니다. 이제,

'엔터키 입력 시 상품 업로드'만 함수에 포함시키면 됩니다.

1. input 태그에 onkeyup으로 '함수' 넣기

이 방법은 기존에 만들어뒀떤 listupnewgood() 함수를 바로 적용시킨 것이고, 바로 작동도 되었습니다. 하지만, 전 addeventlistener를 사용하라는 조언에 따르기로 했죠.

1. input 태그에 onkeyup으로 '함수' 넣기

우선, '엔터키'를 입력했을 때 이걸 인식하는게 먼저입니다. 아래처럼 'keydown' 일때 event의 key가 'Enter'라면 콘솔창에 '안녕하세요'를 출력시키도록 작성했죠.

문제는 이게 'input' 태그에 사용자가 어떤 값을 입력했을 때, '안녕하세요'가 출력되도록 조정해야 합니다. 그렇지 않다면 '엔터키'를 칠 때마다 함수가 출력될 테니까요.

그래서 uploadtag에 #goods (인풋 태그의 아이디)를 할당하고, 여기에 값을 입력 후 '엔터키'를 눌렀을 때 콘솔창에 '안녕하세요'가 나오도록 코드를 다시 짰지만, 아래와 같은 에러가 떴습니다.

해당 에러의 원인은 'HTML' 요소가 다 로드되기 이전에 JS에서 해당 요소를 '참조' 했기 때문이죠.

문제는 이렇게 window.onload를 적용했더니 이번엔 아무것도 출력이 안됩니다.

그걸 '해결한 방법'은

이렇게 window.onload에 모든 걸 넣는 방식입니다. 'click' 했을 때, 그리고 Enter키를 입력했을 때 각각을 addEventListener로 작성해준 후 모두 window.onload에 넣었더니 작동이 잘 됩니다.

마지막으로, 제가 직접 작성한 코드는 '코드펜'으로 복사할 수 있게 올려놓겠지만 해당 강의를 올리신 '엘리'님 강의는 유료이므로 엘리님 코드를 직접 보고 싶으신 분들은 아래 사이트 주소를 클릭해서 직접 수강 신청하시길 바랍니다.

100달러니까 한국 돈으로는 12만원 ~ 12만 5천원 사이일 겁니다. 결제는 '체크카드'로도 가능하며, 우리은행 카드 등록하면 바로 결제 가능합니다 :)

https://academy.dream-coding.com/courses/browser101

프론트엔드를 위한 자바스크립트 강의

실전 프로젝트를 통해 자바스크립트를 배워봅니다. DOM APIs부터 시작해서 실제로 브라우저가 우리의 웹페이지를 어떻게 표기 하는지 성능까지 고려해서 웹앱을 작성 하는법, 바닐라 자바스크립

academy.dream-coding.com

저작자표시 비영리 변경금지 (새창열림)

Upgrader

태그

최근글

댓글

공지사항

아카이브

'드림코딩 엘리' 수업 들으면서 작성 중입니다. :)

첫번째: 설계의 시작은 UI, UI 시작은 '해상도'

두번째: HTML, CSS를 이용해서 대략적인 UI 작성

세번째: Javascript를 이용해서 Plus 버튼 클릭 시 쇼핑몰 상단에 리스트 추가

생각보다 거쳐야할 단계가 많습니다.

<'클릭 이벤트'>

1. 동그란 플러스 버튼을 '클릭'할 경우에 이벤트가 발생해야 합니다. 해당 이벤트는 함수 표현식으로 외부에서 인스턴스를 받아와서 호출하는 식으로 만들 예정입니다.

2. '클릭' 했을 때 상단의 'Title' 바로 아래의 공간부터 차례 차례 한 개씩 리스트가 쌓여서 위에서 밑으로 내려와야 합니다. ~ 따라서 '추가된 태그'들이 '동일한 부모태그' 안에서 추가되도록 설정해야 합니다.

3. 메뉴가 생길 때 'creat'을 통해서 'input'의 value가 새로 추가되어야 하며 동시에 title 바로 아래에 있는 휴지통 역시 리스트 맨 오른쪽에 '추가' 되어야 합니다.

4. 메뉴가 생긴 후 바로 'input'에 입력된 value는 삭제 되어야 합니다.

<실행 과정>

그래서 이렇게 아래 입력칸에 '가나다라마바사를 입력하니 위에도 '가나다라마바사'가 입력된 걸 확인할 수 있습니다.

문제는 지금부터인데, 'plus' 아이콘을 fontawesome에서 받아와서 넣는데는 성공했지만, 문제는 이게 '클릭'이 안된다는 겁니다.

해결방법을 찾았는데, input태그를 button태그로 바꾸는 거였습니다.

다음, 이제 '클릭' 이벤트가 생길 경우에만 input 태그에 사용자가 입력한 값이 상품 리스트에 올라가야 합니다.

1. Div 태그를 createElement로 만들고 그걸 변수에 저장하고

2. 해당 변수를 이용하여 div 태그에 기존에 지정했던 'list' 클래스 네임을 붙이며

3. 상품 목록 Section의 ID인 listitems를 queryselector로 잡아 변수 itemlist에 할당하고

4. 할당된 itemlist에 새로 만드는 div 태그를 할당한 newlist를 자식 태그로 상속시키고

5. input에 사용자가 입력한 값을 할당한 typedvalue를 newlist에 innerHTML로 넣는 것

을 위의 listupgoods()라는 function으로 만들었습니다.

하는 2가지 방법이 존재합니다.

일단, 1번 방법으로는 불가능합니다. 그래서 2번 방법으로 시도했습니다.

div 태그로 씌워서 '클릭'을 시도했고, listupgoods() 함수에 클릭 시 div태그와 input 안에 value 그리고 trashcan이 들어가도록 바꿔놓았습니다.

그래서 보라색 'plus'아이콘 클릭 전에는 아무것도 없다가,

클릭 후에는 이렇게 '가나다'라고 input 태그 안에 사용자가 입력한 값이 shoppinglist로 올라가게 됩니다.

네번째: Javascript를 이용해서 trash-can 아이콘 클릭 시 추가 된 '쇼핑리스트' 삭제하기

이건 무척 간단하게 끝났습니다. 처음에 '+' 버튼 클릭 시 '상품 리스트'를 업로드할 때 'Div' 태그를 만들고, 그 안에 appendchild로 span 태그를 넣고, span태그 안에 appenchild로 i 태그 (fontawsome 이모티콘)을 넣었었죠.

그래서 'Div' 태그만 삭제해버리면 모든 게 삭제됩니다.

Element.remove();를 사용하면 바로 삭제가 되는데, '부모' 태그를 삭제하면 '자식' 태그도 바로 같이 삭제가 되더군요.

그래서 이렇게 상품 'ㅇㅇ'를 추가하면

그래서 상품리스트를 넣을 container인 section에 'list'(상품 입력 칸의 value를 받아와서 업로드한 그 상품 리스트) 가 생기고, 그 밑에 span 태그가 생기면서 i태그를 안에 넣게 되는거죠.

다섯번째: Javascript를 이용, '엔터키' 입력 시 +버튼 클릭처럼 상품 업로드

그런데 여기서 '문제'에 봉착합니다. 제가 위에서 div 태그에 'click'이벤트를 넣기 위해서 아래의 방법을 사용했습니다.

그리고 나서 아래처럼 'addEventListener'를 사용했죠. 문제는 이게 '안먹히는' 겁니다.

아래처럼 querySelector로 plus 아이콘인 i태그를 감싼 div 태그인 .plusicon을 가져와서 upload에 할당하고 그걸 '클릭했을 때' 이벤트에 따라 함수가 호출되도록 작성을 했지만 소용이 없었죠.

그.래.서. '원리'는 모르지만 window.onload를 적용해봤습니다. 그랬더니 문제 없이 다시 '플러스 아이콘' 클릭으로 상품 업로드가 가능했습니다. 아마

이 부분이 전부 'load' 되기 전에 아래의 함수가 실행되어서 그랬던 것 같습니다. 이제,

1. input 태그에 onkeyup으로 '함수' 넣기

1. input 태그에 onkeyup으로 '함수' 넣기

우선, '엔터키'를 입력했을 때 이걸 인식하는게 먼저입니다. 아래처럼 'keydown' 일때 event의 key가 'Enter'라면 콘솔창에 '안녕하세요'를 출력시키도록 작성했죠.

문제는 이게 'input' 태그에 사용자가 어떤 값을 입력했을 때, '안녕하세요'가 출력되도록 조정해야 합니다. 그렇지 않다면 '엔터키'를 칠 때마다 함수가 출력될 테니까요.

그래서 uploadtag에 #goods (인풋 태그의 아이디)를 할당하고, 여기에 값을 입력 후 '엔터키'를 눌렀을 때 콘솔창에 '안녕하세요'가 나오도록 코드를 다시 짰지만, 아래와 같은 에러가 떴습니다.

해당 에러의 원인은 'HTML' 요소가 다 로드되기 이전에 JS에서 해당 요소를 '참조' 했기 때문이죠.

문제는 이렇게 window.onload를 적용했더니 이번엔 아무것도 출력이 안됩니다.

그걸 '해결한 방법'은

이렇게 window.onload에 모든 걸 넣는 방식입니다. 'click' 했을 때, 그리고 Enter키를 입력했을 때 각각을 addEventListener로 작성해준 후 모두 window.onload에 넣었더니 작동이 잘 됩니다.

100달러니까 한국 돈으로는 12만원 ~ 12만 5천원 사이일 겁니다. 결제는 '체크카드'로도 가능하며, 우리은행 카드 등록하면 바로 결제 가능합니다 :)

티스토리툴바