프로그래밍 잡동사니

Why React? 2021년 말 기준 상위 1만개 웹사이트 중 44.76%가 React JS 사용 페이스북의 막대한 투자와 지속적인 업데이트 프론트엔드 JS 라이브러리 중 가장 큰 JS 커뮤니티 Start React! CRA 없이 React를 사용하려면 우선 index.html에서 React JS와 ReactDOM 코드를 import해준다 React JS는 element를 생성하고 이벤트 추가, ReactDOM은 element들을 HTML로 바꿔준다 element는 createElement로 생성되며 ‘HTML 태그/props를 포함한 object/content’로 구성 ReactDOM이 body의 id가 root인 비어있는 div에 생성된 element들을 랜더링한다 addEventListener나 ..

심플한 레이아웃을 위해 Campus Map 메뉴를 드롭 다운으로 재구성하려고 했는데,, 생각보다 styled-components를 활용해 드롭 다운을 구현한 자료가 없어서 고생 좀 했다 그런 의미에서 여차저차 구현한 내용을 블로그에 정리해 공유하려 한다! 우선 각각 li, ul 역할을 해줄 컴포넌트들을 정의해준다 const Li = styled.li` list-style: none; `; const Ul = styled.ul` list-style: none; font-style: normal; font-weight: bold; font-size: 16px; color: #666666; line-height: 22px; `; 상위 리스트와 하위 리스트를 요로코롬 구성해주고 (권한 관련 코드는 무시해주자) ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

React를 왜 쓸까? 설치 및 셋팅 ‘npx create-react-app (앱 이름)’: 리액트 프로젝트 생성 ‘npm start’: 실행 결과 미리보기 (Ctrl + C -> 서버 종료) js파일 상단에 /* eslint-disable */ 을 추가해 warning 제거 App.js 파일: 메인 페이지(index.html)에 들어갈 HTML 짜는 곳 node_modules 폴더: React 구동에 필요한 라이브러리들을 모아 놓은 폴더 public 폴더: 동적으로 바뀌지 않는 static 파일 보관함 src 폴더: 실질적으로 개발하는 소스코드를 모아 놓은 폴더 JSX 사용법 App.js 파일 function App() 내부에 HTML처럼 생긴 JSX로 코딩할 수 있다 서버에서 데이터를 받아와 변수로 ..

21세기에 부활한 미니홈피 2021 MINI HOMEPAGE 사진첩 아기하마 게시판 티벳토끼의 잡동사니입니다 게시판 둘러보고 가세요~ 사진첩 아빠가 왕도마뱀이면? 다이어리 0/25 사진첩 0/25 게시판 0/25 방명록 0/25 joseph-106.github.io 네이버 카페 '코뮤니티'에서 진행한 한 입 웹개발(H,C) 3월 모각코 과정으로, 15일간 싸이월드 미니홈피를 모델로 각자의 미니홈피를 구현해보는 프로젝트형 스터디. 기능보다는 디자인과 프론트엔드(HTML, CSS)의 활용에 초점을 맞췄다. 주요 기능 및 구현 수단은 다음과 같다. position과 flex를 활용한 적절한 아이템 배치 a태그에 HTML파일의 상대경로를 설정한 페이지 이동 페이지가 변하는 부분마다 분리한 CSS 파일 Googl..

보호되어 있는 글입니다.