신발 벗고 들어오세요 신발 벗고 들어오세요

z-index : CSS z-index 속성은 static인 요소 간에는 HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 원소 위로 올라온다. 닫기창 만들 때 텍스트에 &times 넣으면 X 모양이 된다. Tab.is export const Tab = () => { // TIP: Tab Menu 중 현재 어떤 Tab이 선택되어 있는지 확인하기 위한 // currentTab 상태와 currentTab을 갱신하는 함수가 존재해야 하고, 초기값은 0 입니다. const [ currentTab, setCurrentTab ] = useState(0) const menuArr = [ { name: 'Tab1', content: 'Tab menu ONE' }, { name: 'Tab2', content: 'T..

React는 DOM을 직접 조작하는 것을 지양하고 useRef라는 Hook 함수를 사용한다. 예외적인 상황에서 useRef로 DOM 노드, 엘리먼트, React 컴포넌트 주소값을 참조할 수 있다. 장점은 선언형 프로그래밍 원칙과 배치되기 때문에 조심해서 사용해야함. const 주소값을_담는_그릇 = useRef(참조자료형) // 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다. return ( {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/} {/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */} {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */} ); 주소값은 컴포넌트가 ..

1. 컴포넌트 만들기 const 컴포넌트이름 = styled.태그종류` const BlueButton = styled.button` CSS속성1 : 속성값; ➡️ background-color : blue; CSS속성2 : 속성값; color : white; `; `; Styled Components는 따옴표가 아닌 백 틱(`)`을 사용 컴포넌트를 선언 후, styled.태그종류를 할당하고 백 틱 안에 기존에 CSS를 작성하던 문법과 똑같이 속성을 작성 2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기 const 컴포넌트이름 = styled(재활용할 컴포넌트)` const BigBlueButton = styled(BlueButton)` 추가할 CSS속성1 : 속성값; ➡️ padding : 10px 추가..

앱 넷플릭스 Figma로 구현하기! 일단 로딩화면, 로그인 연결 페이지, 로그인 페이지, 비밀번호 재설정, 메인화면으로 구분해줬다. 아이디와 비밀번호 입력하게 로그인 페이지 컴포넌트를 만들어줬다. 공용 컴포넌트로 넷플릭스 로고를 줬고 로그인 연결 페이지 컴포넌트로 hover 효과를 줘서 로그인 버튼을 눌렀을 때 색이 변하게끔 만들어줬다 로그인 페이지 컴포넌트에는 아이디와 비밀번호를 입력하여 로그인 버튼을 눌렀을 때 hover 효과를 줬고 비밀번호 재설정 버튼을 눌렀을 때 비밀번호의 폼과 비밀번호 재설정 버튼을 마찬가지로 hover 효과를 줬다. 실제 아이폰처럼 구현하기 위해 하단에 바를 만들어 주고 바를 위로 밀게되면 화면이 전환되는 것을 볼 수 있다 메인화면은 콘텐츠를 나열한 뒤 가로 스크롤을 해줬고 ..

자동완성 구현된 것처럼 보이게 만들기! 커서는 검색창을 눌렀을 때 After delay 3초간격으로 줬고 커서를 어떻게 해야할지 하다가 | 키보드에 있는 것으로 해줬다! 그리고 C를 입력했을 때 자동완성처럼 보이기 위해 Code states가 뜨도록 만들어주고 커서가 움직이게끔 하나 더 만들어줬다 Prototype은 연결될 수 있도록 Code States 섹션3 → Code States 섹션, 닫기 버튼을 눌렀을 때는 빈 창으로 가게끔 연결해줬다 자동완성은 할 수 있을 거 같으면서도 어떻게 해야할지 막막해서 고민을 많이하고 검색도 해봤는데 페어분의 도움으로 생각보다 간단히 해결했다! Figma 처음 해보는데 생각보다 재밌었다 내가 하는 것들이 눈에 바로 보이면서 하나씩 해나가는 것들이 신기했다 비록 컴포..

Array.flat() 함수는 지정한 깊이까지 재귀적으로 이어붙인 1차원 배열을 생성한다. const arr = [['1', '2'], '3', ['4']] const flatArr = arr.flat(); console.log(flatArr); // ['1', '2', '3', '4']

UI (User Interface, 사용자 인터페이스) ➡️ 사람들이 컴퓨터와 상호 작용하는 시스템 (화면상의 그래픽 요소, 키보드, 마우스 등 물리적 요소와 컴퓨터와 상호작용하기 위한 시스템) GUI (Graphical User Interface, 그래픽 사용자 인터페이스) ➡️ 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 (운영체제의 화면, 애플리케이션 화면, UI는 GUI를 의미한다고 생각하면 됨) UX (User Experience, 사용자 경험) ➡️ 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하는 총체적 경험 UI와 UX의 관계 UX는 UI를 포함한다. 좋은 UX가 좋은 UI를 의미하거나 좋은 UI가 항상 좋은 UX를 보장하는 건 아니다. 이 둘은..

JSON (JavaScript Object Notation) ➡️ 데이터 교환을 위해 만들어진 객체 형태의 포멧 전송할 수 있는 조건 (transferable condition) 수신자(reciever)와 발신자(sender)가 같은 프로그램을 사용 또는, 문자열처럼 범용적으로 읽을 수 있어야 한다 ➡️ 객체타입 변환을 이용해 String으로 변환할 경우 객체를 포함하지 않음, JS에서 개게를 문자열로 변환하기 위해 (message.toString())나 형 변환(String(message))을 시도하면, [object Object]라는 결과를 리턴함 해결방법 JSON.stringify : 객체를 JSON으로 변환 JSON.parse : JSON을 객체로 변환 let transferableMessage ..