FrontEnd 썸네일형 리스트형 [HTML/CSS] 1차, 2차, 3차 드롭 다운 메뉴 바 구현하기 안녕하세요 인포돈 입니다. 백엔드를 학습하고 있는 입장에서 정말 css를 구성하는 것만큼 귀찮은 작업은 없다고 생각합니다 ㅜㅜ 그러나 테스트를 위해서, 간단한 메뉴 바 정도는 정말 빠르게 만들 수 있도록 틈틈이 연습해 두시면, 도움이 되는 것을 알아두세요! 때문에 이번 포스트에서는 1차, 2차, 3차 드롭 다운 메뉴 바를 만든는 법을 이해해봅시다. 1차 드롭다운 메뉴 바 HTML 코드 더보기 아이템 1 아이템 2 아이템 3 css 코드 더보기 /* 초기화 작업 */ body, ul, li{ margin : 0; padding : 0; list-style : none; } a{ text-decoration: none; color:inherit; font-weight : bold; } .box { text-.. 더보기 [HTML/CSS] display와 positon의 이해 안녕하세요 인포돈 입니다. 기업에는 CSS에서 가장 기초지만, 많이 사용하고 모르면 CSS를 다루기 힘들어지는 display와 position에 대해 이해해 보자 Display css를 활용하기 위해서 display의 개념을 확실히 이해하는 게 좋다. display에 넣을 수 있는 값들이 굉장히 많지만, 전문적인 frontend를 꿈꾸고 있지 않는 이상, 많은 개념을 알 필요가 없다. 크게 2가지만 알고 있으면 된다. 1) display : block 해당 block의 기능은 아래 특성만 기억하면, 완벽하다. - 설정되어 있지 않으면, 너비는 최대한으로 넓어진다. - 설정되어 있지 않으면, 높이는 최소한으로 줄어든다. - 세로 배열로 정렬된다. - 이를 블록화라고 부른다. 정말 별로 어렵지 않다. 너비가.. 더보기 [React] 팝업 창 만들기 - daum - post - code (회원가입 - 주소 팝업) 안녕하세요 인포돈 입니다. 최근에 변화된 React v6에 의거하여 작성되었습니다. (인텔리제이 활용) react프로젝트를 진행하면서, 회원가입 창을 만들어야 했습니다. 그러던 중 주소의 입력을 넣기 위해서 react에서 재공 하는 daum-post-code에 대해서 간략히 파악해 보고 이를 활용해 파업창을 이해해보자 Daum-postcode란? 다음과 kakao에서 제공하는 우편번호 검색 api로 우리가 쉽게 주변에서 우편번호를 입력할 때 가장 많이 보는 형식이다. 나는 이제 해당 api를 활용하여 회원가입의 주소 입력 칸을 해결할 것이다. 팝업창 이란? 팝업창은 특정 웹사이트가 어떠한 내용을 표시하기 위해서 갑자기 생성되는 창을 의미한다. 여기서 우리는 해당 api를 하나의 컴포넌트로 만들어서 특정 .. 더보기 [React] axios를 활용한 srping연동(get, post) 안녕하세요 인포돈 입니다. 최근에 변화된 React v6에 의거하여 작성되었습니다. (인텔리제이 활용) react와 spring을 활용해 프로젝트를 진행하던 도중 서버와 클라이언트의 통신을 보다 간편하게 할 수 있는 방법이 fetch와 axios를 활용하는 방법이 대중적이라고 파악하였습니다. 그래서 저는 이번에 axios에 대해서 이해해보고 직접 간단한 실습을 통해 프로젝트에 적용해보려고 합니다. 언제나 그렇듯이 저는 정말 쉽게 누구나 이해할 수 있도록 axios에 대해서 조사해 보았습니다. 물론 더 딥하게 들어간다면, 완성도 높은 프로젝트가 되겠지만, 누구나 그렇듯 step1부터 차례대로 적용해보며 구현해보도록 하겠습니다. 간단히 axios에 대해서 이해해보고 적용해봅시다. Axios란? axios는 .. 더보기 React useEffect, useState (Hook의 이해) 안녕하세요 인포돈 입니다. 최근에 변화된 React v6에 의거하여 작성되었습니다. (인텔리제이 활용) Hook이란? hook은 react v16.8에서 새롭게 출시된 기능으로 함수형 컴포넌트에 state를 제공하여 로직의 재사용성을 높여주는 기능이다. 여기서 컴포넌트는 리액트에서 가장 기본이 되는 단위 컴포넌트이며, java의 객체와 유사한 개념이다. hook 이전에는 여러 컴포넌트들의 재사용하기 위해서 HOC나 Render Props패턴을 주로 이용하였지만, hook을 활용해여 함수 컴포넌트의 state나 lifecycle을 보다 쉽게 접근하고 사용할 수 있게 해줍니다. 우리는 그 중 Hook에서 제공하는 useEffectm useState API에 대해서 이해해하고 활용해보겠습니다. - useSta.. 더보기 React v6 카드 목록 작성하기(4*4 상품 페이지 만들기, 쇼핑몰) 안녕하세요 인포돈 입니다. 최근에 변화된 React v6에 의거하여 작성되었습니다. 실행코드 ide는 vscode를 활용합니다! 리액트 이전에 html, css, js에 대한 기본 지식이 있어야 합니다. 4*4 상품 목록 카드 작성하기 저희가 일반적으로 카드 목록을 작성하게 되면, 아래 글과 같이 상품들이 나열되는 목록을 보여줘야 할 때가 있습니다. 이러한 목록을 만들어주는 방법을 소개해드리겠습니다! - HTML 기본적으로 저희는 아주 간단하게 코드를 작성하였습니다. 카드에 들어갈 내용은 이미지, 상품 제목, 상품 내용 요약, 가격, 상품 상세페이지 보러 가기 총 5가지의 정보를 담고 있는 카드를 만들어 보겠습니다. function App(){ return( 상품 목록 카드 작성하기 상품 제목 상품 내용.. 더보기 React v6 변화한 router 사용하기 (Link, Routes, Route 태그) 안녕하세요 인포돈 입니다. 최근에 변화된 React v6에 의거하여 작성되었습니다. 실행코드 ide는 vscode를 활용합니다! 리액트 이전에 html, css, js에 대한 기본 지식이 있어야 합니다. React Router란 웹 프런트엔드를 개발하다 보면 항상 document를 활용해 페이지를 넘겨주는 작업이 귀찮고, 사이트가 방대해질수록 점점 복잡한 구조 때문에 어려움을 겪기 일상입니다. 우리는 이러한 문제점을 보다 쉽게 해결하기 위해서 React에서 제공하는 Router를 사용하면 이러한 어려움을 해결할 수 있게 됩니다. 리액트에는 이러한 페이지 이동을 보다 쉽게 해주는 많은 라이브러리가 있지만, 대중적으로 가장 많이 사용하는 라이브러리가 바로 React Router입니다. 이러한 router는 .. 더보기 [Javascript] ajax활용 - fetch()란? 사용법 안녕하세요 인포돈 입니다. 오늘 알아볼 것은 Javascript를 이용하여 ajax의 fetch() 사용법에 대해 알아보겠습니다. ** 참고사항 - 해당 글은 web에서의 활용을 집중적으로 다루고 있습니다. 웹에서 자바스크립트에 대해 공부를 하다 Ajax라는 라이브러리를 알게 되었습니다. Ajax의 경우 자바스크립트에서 웹 페이지를 부분적으로 바꾸고 싶어 만들어진 라이브러리입니다. 쉽게 말하면 바뀌어야 될 웹페이지만 바뀌고 바뀌지 않아야 할 웹페이지는 그대로 내버려 두도록 도와주는 라이브러리다. 예를 들어 웹페이지 카테고리, 대표 이미지 등은 해당 웹에서 다른 카테고리로 넘어가더라도 상단에 계속 남아있어야 됩니다. 만약 이러한 페이지가 수십억 개 있다면, 많은 용량을 잡아먹게 됩니다. 이러한 단점을 해결.. 더보기 이전 1 2 다음
