개발자모드가 아닐 땐 빠르지만 개발자 모드에서 페이지 이동시 느려지는 이유ㅠㅠ네트워크에서 혹시 Fast 3G나 Slow 3G로 되어있지는 않은지 확인해보기!No throttling으로 바꿔주면 끄읏!

이번 주는 모던 리액트 딥다이브 첫 번째 북스터디 시작 주차다.1장은 리액트 개발을 위해 꼭 알아야할 자바스크립트 라는 주제로 리액트의 역사 부터 미래,자바스크립트와 함수, 클래스, 클로저 등의 개념 정리와 타입스크립트 활용까지 간단하게 살펴보았다. 우선 리액트는 모르는 사람이 있어도 페이스북을 모르는 사람은 없을 것이다.페이스북 현재 메타는 리액트를 활용한 대표적인 예시이다.페이스북 개발 중 제안 되었던 아이디어 중 하나는 애플리케이션에서 API의 변화에 따라 무어가 변경되면 단순히 UI를 초기화하고 새로 렌더링 하자는 아이디어로 시작되어채팅 수준과 같은 댓글과 좋아요 기능을 갖게 되었다.과거의 리액트는 클라이언트에 초점을 맞추고 있었고, 앞으로도 브라우저와 클라이언트에서의 작동을 개선할 예정이라고 한..

제가 난독증인줄 알았읍니다..........문제가 넘나 길................어..........그리고 무슨 말인지도 한참 읽어보고 이해했습니다... 빈 딕셔너리를 생성해주었고,for 루프를 이용하여 nums들을 하나 하나 살펴보고 num의 갯수를 카운팅하고,폰켄몬 길이와 nums의 길이 중 최솟값으로 나누기 2를 해줍니다.꼭 두가지 중 최소값으로 해야 가지가지 여러가지 수로 접근할 수 있다. 다른 분들의 코드당 ㅎㅎ....와우,,, 저는 감탄하고 갑니다 ㅠㅠㅠ 1년만에 파이썬도.. 알고리즘도.. 처음 해본 것 같은데 여전히 무섭읍니다 ㅠㅠ그래도 한달동안 열찌미 해보기....!

select 태그 : 드롭다운으로 목록에서 옵션을 선택 할 수 있습니다. optgroup : select 내 옵션을 그룹화 하는데 사용됩니다. 의 속성 그룹에 대한 레이블을 나타내는 label 그룹 내 옵션들을 비활성화할 수있는 disabled 가 있습니다. option : select 리스트의 옵션을 정의합니다. 의 속성 옵션에 대한 레이블을 나타내는 label (아래 예시 코드에서 포메라니안에 label 로 사용) 옵션을 비활성화할 수있는 disabled 기본적으로 선택 상태로 두는 selected 서버에 보낼 값을 지정할 수 있는 value가 있습니다. 동물 선택 진돗개 시바 코숏 렉돌 혹시 햄스터? select 태그 내에서 option 태그 사용 시, label을 사용하던, option 태그 내 ..

웹 표준이란 우리가 css 스타일을 적용하기 전에도 html 만으로도 어디에 쓰이는지 명확하게 명시 되어있어야하고, 태그는 의미에 맞게 사용해야한다. 웹 접근성 4대 원칙에 대해서 알아보자 웹 접근성 검사하기 https://validator.w3.org/#validate_by_input The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org 웹 접근성이란 사용자의 ..

label 태그 : 요소의 제목 / 타이틀 처럼 이름표를 나타내기도 하고, input 태그 및 여러 컨트롤 요소들을 label로 감싸 함께 사용하며, 접근성을 높이며, 가독성을 높이는 역할도 합니다. 아래 컨트롤 요소들과 함께 사용할 수 있습니다. label의 속성 for : 함께 사용 될 input 등의 태그에서 사용하는 id값을 label의 for 값에 넣어주어 두 태그의 상관관계를 나타냅니다. form: form 태그를 사용하고, 디자인적이든 어떤이유로든 해당 form 밖에서 label을 사용 시 form 속성을 사용하여 관계를 명시하여주고, 접근성을 향상 시켜줍니다. 회원가입 약관 필수약관 선택약관 전체 동의 필수 약관만 동의 선택 약관만 동의 label 태그가 form 태그 밖에 있지만 form..

figure / figcaption : 독립적인 콘텐츠를 표현 / 콘텐츠와 설명 등 : figure 요소에 대한 설명 test 이미지에 대한 캡션 티스토리 블로그에서도 이미지 아래 설명하는 부분에도 사용되고 있는 것을 개발자 도구를 통해 알 수 있었습니다! mark : 강조 하고 싶은 영역에 태그를 감싸 강조 효과를 줄 수 있음. (형광펜 효과랄까요?) 강조하고 싶은 부분에 강조 할 수 있음 아래와 같이 노란 색으로 효과가 적용 되었습니다. 기본 스타일은 노란 색이네요! background-color로 강조 배경색을 바꾸고, color로 폰트 색상을 바꿀 수 있습니다. abbr text에 약어를 추가 할 수 있다. title 속성에 설명을 넣어주면 됩니다. 커서를 JMTGR 올리면 설명 캡션이 생겨요! ..

Server side Rendering | SSR 특징 - 서버에서 html 콘텐츠가 생성되어 클라이언트에 전송 됨 - 그래서 초기 화면이 빠르게 보여진다. - 이후 javascript가 읽히기 때문에 실제 인터렉션은 자바스크립트가 불려지고 나서 가능하다. 큰 흐름은 이렇습니다. 요청(사용자가 페이지 요청) ▶ 서버(화면에 필요한 DB 혹은 API에서 필요한 데이터를 준비) ▶ HTML 렌더링(사용자로 부터 요청된 페이지에 대한 HTML을 동적으로 렌더링) ▶ 응답 (렌더링 된 HTML을 클라이언트로 보냄) ▶ 브라우저에 표시(브라우저는 HTML을 수신하고 즉시 사용자에게 html, css, jacascrip 순서로 페이지에 보여줌) 장점 초기 로드 시간이 빠름(서버에서 필요한 HTML 먼저 렌더링 해오..