개발자의 주머니 (104) 썸네일형 리스트형 React 문서 주요개념 요약 jsx란? react 엘리먼트를 생성하는 javascript를 확장한 문법 const name = 'Josh Perez'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); 바벨이 JSX를 React.createElement() 호출로 컴파일 const element = ( Hello, world! ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); 엘레멘트 렌더링 react element는 react의 가장 작은 구성 요소이며, 브라우저 DOM 과는 다르게 순수 오브젝트이다. 따라서.. 블로그에 codepen 코드 가져오기 1. codepen.io 회원가입을 합니다. 회원가입 후 코드를 작성해 주세요. 2. Save 버튼을 누르면 우측 하단에 Embed 버튼이 생성됩니다. Save 버튼을 누른 후 Embed 버튼을 눌러주세요. 3. 테마를 선택하고 우측 하단 iframe을 선택합니다. iframe 안의 코드를 복사해 주세요. 4. 블로그 텍스트 편집기를 HTML로 바꾼 후 코드를 붙여 넣으세요. 완성! See the Pen gOgjWwa by leepro (@leepro225) on CodePen. block 레벨과 inline block 레벨 요소 HTML태그는 블록 레벨 요소와 인라인 요소로 나눌 수 있습니다. 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 블록을 만듭니다. 따라서, 블록 레벨 요소는 언제나 새로운 줄에서 시작합니다. 블록 레벨 요소는 또다른 블록 레벨 요소와 인라인 요소를 포함할 수 있습니다. 이러한 특징으로 인해 인라인 요소보다 큰 구조를 생성할 수 있습니다. block 레벨 요소 리스트 문서의 분할 페이지나 구역의 푸터 입력 폼 ~ 제목 페이지나 구역의 헤더 구분선 목록 탐색 링크를 포함 문단 웹페이지의 구역 표 연락처 정보 단락 콘텐츠 부가 콘텐츠 긴 인용구 상세 정보 위젯 대화상자 inline 요소 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소가 필요한 공간만 차지합니다. 인라인 요소는 새로운.. 실무에서 자주 쓰는 필수 CSS 선택자 정리 실무에서 자주 쓰는 필수 CSS 선택자 아래 리스트는 실무에서 자주 쓰는 CSS 선택자입니다. 종류 선택자 예시 설명 클래스선택자 .class .intro intro를 클래스로 가진 모든 요소 Both .class1.class2 .name1.name2 name1과 name2를 둘 다 가진 모든 요소 자손선택자 .class1 .class2 .name1 .name2 name1의 자식 중 name2를 클래스로 가진 모든 요소 아이디선택자 #id #firstname firstname을 아이디로 가진 모든 요소 전체선택자 * * 모든 요소를 선택, 렌더링 성능 저하 가능 요소선택자 element p 모든 p 요소 And element,element div, p 모든 div 요소와 모든 p 요소 자손선택자 elem.. 시멘틱 마크업이란? 시멘틱 마크업이란? Semantic은 '의미론'이라는 뜻입니다. HTML을 시멘틱하게 마크업한다는 것은 의미론적인 요소를 사용하여 문서를 만든다는 것을 의미합니다. 단순히 div와 span으로 이루어진 문서가 아니라 의미를 가진 태그 요소를 사용해 문서를 만드는 것입니다. 의미론적인 요소들 의미 : 재사용할 수 있는 구획을 나타냄. 예제 : 게시판, 블로그 글, 뉴스 기사 등 의미 : 문서의 주요 내용과 간접적으로 연관된 부분 예제 : 사이드바, 광고 의미 : '열림'상태일 때만 내부 정보를 보여주는 위젯 예제 : summary와 함께 쓰임 의미 : 디테일 요소의 제목 역할 예제 : details 자식으로 상세요소가 열리기 위한 제목 역할 의미 : 부모 요소 콘텐츠의 설명, 범례 예제 : 이미지에 대한 .. display:none 과 visibility:hidden 의 차이 display:none 과 visibility:hidden 의 차이 이 둘은 사용자의 눈에 보이지 않는다는 공통점이 있습니다. 하지만, 전자는 렌더링 트리에서 없고, 후자는 렌더링 트리에 있다는 큰 차이점이 있습니다. visibility:hidden은 브라우저 렌더링 과정에서 본인의 크기만큼 차지하며 레이아웃을 그립니다. 요소를 완전히 없애고 싶은지, 혹은 차지하는 공간은 놔둔채로 사용자 눈에서만 보이지 않고 싶은지에 따라 구분에서 사용하면 됩니다. 아래 예시에서, 버튼을 눌러 차이점을 확인해 보세요. See the Pen xxgJqNJ by leepro (@leepro225) on CodePen. 정리 display:none 은 렌더 트리에서 없어짐 vs visibility:hidden은 렌더 트리에 .. git 명령어 정리 터미널에 깃이 설치되어 있는 지 확인 git --version window terminer 추천 : cmder git 관련 모든 환경설정 파일 리스트 git config --list 이 파일을 열어 편집하고 싶다면 git config --global -e 현재 경로에 있는 파일을 에디터로 열기 // 에디터에서 설정해줘야함. code . git config --global core.eitor "code" // 문서를 닫을 때까지 터미널 비활성화 git config --global core.eitor "code --wait" 사용자 설정하기 git config --global user.name "haha" git config --global user.email "hoho@gmail.com" git confi.. 알고리즘 필수 개념과 메서드 (프로그래머스 레벨 1) 해시 알고리즘(Hash Algorithm) 해시는 Key-value 쌍으로 데이터를 저장하는 자료구조입니다. key-value를 이용해 어떤 것과 다른 것 사이의 관계를 모형화할 수 있고, 중복을 막을 수 있습니다. 평균적인 경우 해시 테이블은 모든 항목에 대해 O(1)시간(상수 시간)이 걸립니다. 이는 해시 테이블의 크기에 상관없이 항상 똑같은 시간이 걸린다는 의미로, 해시 테이블에서 무언가를 찾을 때 굉장히 빠릅니다. 알고리즘 테스트에서는 해시를 이용하면 더 효율적으로 해결할 수 있는 문제들을 제시합니다. // Object.keys() 오브젝트의 key를 배열로 가져오기 const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object... 이전 1 ··· 8 9 10 11 12 13 다음
