반응형 분류 전체보기167 ⚛️ JSX, 컴포넌트(Component) 개요 JSX JSX란? 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JS의 확장 HTML과 비슷한 개발 경험을 제공하나 JS,HTML과는 다름 JS는 Babel에 의해서 Transcompile 되어 JS가 된다 JSX의 장점 개발자 편의성 향상 협업에 용의 / 생산성 향상 문법오류와 코드량 감소 JSX 특징 / HTML과의 차이점 HTML 태그 내에 JS 연산 class -> className 스타일은 object로 닫는 태그 필수 최상단 element는 반드시 하나 (간단히 라고 입력해도 됨) JSX 예시 const element = ( Hello, elice! ); 객체 표현 방식으로도 가능은 하지만 안 쓰임 (Babel에 의해 객체 표현으로 바뀜) 엘리먼트 렌더링 ReactDOM.render(e.. 2023. 4. 15. ⚛️ React란? React 입문하기! SPA(Single Page Application) 전통적인 페이지에서는 변경이 필요할 때 서버에서 요청(Form Post)받으면 HTML을 클라에 전달하며 페이지를 처음부터 다시 불러오게 됨 SPA는 데이터 전달을 서버로 데이터 전달을 AJAX 통신으로 하며, 변경이 필요한 부분만 JSON으로 전달하며 변경된 부분만 수정. React의 기본 Compoent React에서 서비스를 개발할 때 독립적인 단위로 쪼개어 구현, 후에 조립 Virtual DOM 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념 뒤에서 미리 그려보고 바뀐 부분만 다시 그려줌 JSX JS 내에서 HTML과 유사하게 UI 작성 쉽게 가능 React의 역사 페이스북은 성.. 2023. 4. 14. 100일 CSS #2 : 메뉴 아이콘 문제 https://100dayscss.com/days/2/ Menu Icon: Used on almost every website by now, simple but impressively animated it becomes a real eye-catcher 메뉴 아이콘 : 현재 거의 모든 웹사이트에서 사용됨, 간단하지만 인상적인 애니메이션으로 시선을 사로잡어보자 클릭하면 애니메이션이 나와 X자가 되는 메뉴 아이콘. 다시 한번 클릭하면 원래의 ☰ 형태로 되돌아온다. 내 풀이 See the Pen 100 DAYS CSS CHALLENGE : Day #2 by dobbyjang0 (@dobbyjang0) on CodePen. 두 번째 문제부터 바로 어려워서 죽는줄 알았다... SCSS BEM 명명법이 SCS.. 2023. 4. 12. 📱 CSS 미디어 쿼리 요약! 미디어 쿼리란? 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문 (자연스러운 변화는 반응형, 끊기는 변화는 적응형) 브라우저 가로폭에 따라 CSS 속성이 달라지도록 함 .media { /* PC의 경우 */ background-color: red; } /* 미디어쿼리 */ @media (min-width: 320px) and (max-width: 800px) { /* 모바일의 경우 */ background-color: yellow; } min-width와 max-width로 브라우저 가로폭 설정 브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css 속성으로 대체 미디어쿼리 테스트 방법 크롬 개발자 도구 이용 미디어쿼리 사용시 주의사항 viewport 입력하.. 2023. 4. 10. 100일 CSS #1 : 시작! 문제 https://100dayscss.com/days/1/ 100 Days CSS: An easy start into the challenge with a custom build number with gradient. 100일 CSS : 직접 만든 숫자, 그라디언트와 함께하는 챌린지의 쉬운 시작 배경을 그라디언트로 만들고, 숫자 모양을 직접 만들어주면 되는 문제 내 풀이 See the Pen 100 DAYS CSS CHALLENGE : Day #1 by dobbyjang0 (@dobbyjang0) on CodePen. SCSS 이번 기회에 SCSS를 처음 사용해보았는데, 자식 선택자를 >*로 표시하는 것을 몰라서 좀 해매었다. 또 SCSS 쓰면 BEM 명명법은 필요없는게 아닌가 느끼기도 하였다. 정 가.. 2023. 4. 10. 100일 CSS 챌린지(100 DAYS CSS CHALLENGE)란? 100일 CSS 챌린지(100 DAYS CSS CHALLENGE)란? https://100dayscss.com/days/1/ 100일 CSS 챌린지(100 DAYS CSS CHALLENGE)란 100일간 주어진 문제를 CSS로 구현해 보는 챌린지입니다. 위 링크를 클릭해 사이트에 들어가면 1일 차부터 시작할 수 있습니다. 한 가지 특이한 점은 Javascript를 쓰지 않고 CSS로만 하는 것을 지향한다는 점입니다. 실제로 예시 답들을 보면 js는 거의 쓰지 않은 것을 확인할 수 있습니다. CSS(SCSS) 실력을 늘리고 싶으신 분, 특히 CSS의 애니메이션을 잘 쓰고 싶으신 분들이 해보시면 좋을 것 같습니다! 100일 CSS 챌린지 하는 법 https://codepen.io/ 우선 첫 번째로 Codep.. 2023. 4. 9. 이전 1 ··· 9 10 11 12 13 14 15 ··· 28 다음 반응형
