본문 바로가기
반응형

전체 글133

누구냐, 넌? 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.
prettier 설정 - 닫기 태그 괄호 > 가 따로 표시될 때(ft. 코드를 한줄로) VSCode에 익스텐션을 설치해서 사용을 하다보면 편리하기도 하지만 코드 포맷팅 형식이 너~무 나랑 달라서 코드 가독성에 혼란을 겪는 경우가 생길 수도 있습니다. 저의 경우에는 Prettier를 설치한 후 저장할 때 마다 코드를 자동으로 포매팅을 해주는 형태로 사용중인데 VSCode설정은 이렇게 해줍니다. Settings에 들어가서(Ctrl + 콤마) 디폴트 포매터를 Prettier로 선택. 스크롤을 내리다 보면 Forat On Save 항목에 체크. 그러면, 코드 작성을 하다가 저장(Ctrl + S)를 누를 때 마다 지저분한 코드를 자동으로 정렬해줍니다. 이 또한 은혜롭지 않은가!!. 자동정렬 세팅이 안 되어 있는 경우에는 매번 수동으로 [ Shift + Alt + F ] 를 눌러줬더랬습니다. 기존까지.. 2022. 11. 30.
티스토리 - Google Search Console 연동 티스토리 블로그에 도메인을 연동한 후 구글 검색엔진에서 검색이 되도록 하기 위해 Google Search Console을 연동해보기로 합니다. 먼저 구글 서치콘솔에 접속합니다. https://search.google.com/search-console/about Google Search Console Search Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다. search.google.com 본인이 사용하는 구글 계정을 이용해서 서치 콘솔에 가입해줍니다. 구글 서치 콘솔을 처음 사용하는 것이라면 위와 같이 접속하려는 도메인을 등록해줘야 합니다. 그리고 DNS 레코드 추가를 통해 소유자임을 인증해.. 2022. 11. 29.
SVG 기초 - 도형 그리기 Part 3 (패스, path) svg는 사실 코드를 이용해서 직접 그려서 사용하는 것보다는 일러스트레이터 등의 툴에서 작업한 결과물을 가져와서 활용하는 측면이 크기는합니다. 그래도, svg가 그려지는 동작원리를 한번 살펴보고 이해해두면 여러 모로 공부가 클 것이라 생각됩니다. 그런 의미에서 이번 포스팅은 svg의 꽃 패스(path)에 대해 살펴보기로 합니다. 패스(path)로 그리기 - 직선(Line) 패스로 도형을 그려보기 위해 다음과 같이 코드를 작성해봅니다. 기존 예제 코드들은 제거하고 패스를 위한 아래 코드를 작성하였습니다. path : 패스로 그리겠다. d : data M : Move to (=그리지 않고 첫 좌표로 이동) L : Line to 선을 그리겠다. 좌표 원소 2개 필요 H : Horizontal Line to =.. 2022. 11. 28.
반응형

티스토리툴바