반응형 분류 전체보기142 [실무적용 CaseStudy] 체크박스 체크해야 버튼 눌리게 해주세요~ 오래 전부터 인연을 만들고 있는 한 고객사로부터 업무요청이 들어왔습니다. 쇼핑몰을 운영하고 있는 곳인데요, 도예 관련한 재료를 판매하는 곳이라 흙덩이 같이 덩치 큰 재료가 많습니다. 그러다 보니 무게와 크기가 각각 달라서 일반 배송을 해야 할지, 트럭을 이용해 배송을 해야 할지 결정해야 하고 주문된 제품의 가짓수에 따라 배송료도 다양하게 산정되는 실무가 존재하는 곳입니다. 그러나 어디서나 무조건 고객분들은 성격 급하시죠^^; 배송비 차등정책을 쇼핑몰 곳곳에 안내해두었지만 해당 안내를 챙겨서 읽는 분은 많지 않을 겁니다. 그러다 보니, "고객분들이 제발 배송비 정책을 사전에 잘 인지할 수 있도록 해주실 수 없나요?" 라는 요청을 받게 되었고 어라? 이거 요즘 공부하는 javascript로 처리가능할 것 같.. 2022. 12. 4. 누구냐, 넌? Javascript 구조분해 할당(Destructuring) 기초개념 정리 자바스크립트 코딩 공부를 간간히 하다보니 언제부턴가... 구조분해할당 또는 디스트럭처링이라는 단어가 심심치 않게 보이기 시작합니다. 느낌적인 느낌으로는 화살표 함수 ( => )처럼 등장한 새로운 문법이 아닐까 생각하곤 했습니다. 이 참에 가볍게 정리해보기로 합니다. JavaScript의 구조 분해 할당은 무엇인가? 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구문은 배열이나 객체의 .. 2022. 12. 3. 재미있게 Flex 공부하기 - Flexbox Froggy 문제풀이 13~24 재미 있게 Flex를 공부하는 방법 그 두 번째 시간 이전 포스팅에 이어 Flexbox Froggy 후반부를 풀어봅시다. Flex를 익혀두면 HTML문서로 Layout 잡을 때 정말 간단하면서도 강력함을 느낄 수 있으니 이참에 꼭 익혀두면 좋겠습니다. 문제 13 flex-direction + justify-content + align-items 이상 3가지를 조합하면서 개구리들이 어떻게 배치되는 지 살펴보는 문제입니다. 곰곰히 살펴보면, row정렬에 center에 end라는 키워드가 떠 오른다면 당신은 이미 실력자!! #pond { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-end; } 문제 .. 2022. 12. 2. 재미있게 Flex 공부하기 - Flexbox Froggy 문제풀이 1~12 재미있게 Flex를 공부하는 방법 CSS를 한창 재미있게 공부하면서 요즘은 예전에 한번 공부했던 Flex를 다시 복습하고 있습니다. 그러던 차에 라는 게임을 다시 한번 풀어보고 있습니다. https://flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 또는 codepip.com 에서도 같은 내용을 만날 수 있습니다. 일단 무료로 제공되는 게임은 Flex와 Grid를 이용한 게임입니다. 게임을 하면서 Flex나 Grid의 동작방식에 익숙해지고 그러다가 무릎을 탁~! 치게 되는 재미 있는 교육용 게임이라는 생각이 들었습니다. 문제 1 워밍업 문제라서 쉬운 편입니다. 문제 아래에는 제가 푼 해답이 있으니 문제를.. 2022. 12. 1. 이전 1 ··· 30 31 32 33 34 35 36 다음 반응형
