누구에게는 무모한 도전이고 누구에게는 설레이는 도전일 수 있습니다.어제는 내가 봐도 무모해 보였지만 오늘은 설레일 수 있는거잖아?그렇게 나의 도전은 시작되었다.거창한 것은 없었다.내일의 큰 고민없이 오늘을 사는 나였는데,통장에 넉넉한 돈이 꽂혀도, 이런 저런 취미생활을

호스트모드에서 숙소를 등록할 때 사진을 업로드 해야한다.단순히 미리보기만 하는 것이 아니라, 숙소 등록이 완료된 후 DB에 사진 정보를 포함한 모든 정보들이 등록이 되어야 하고, 숙소리스트에서 방금 호스트가 등록한 숙소가 보여야 한다. 이를 위해 사용한 것이 FormD

URLSearchParams interface defines utility methods to work with the query string of a URL.유연한 환불 정책에 동의 여부, 슈퍼호스트 여부 및 숙소유형, 주류 종류를 선택하면 그 값들을 query st

현재까지 배운 기술 스택으로 러쉬코리아 웹싸이트 클론하기처음으로 Backend와 팀으로 진행되는 프로젝트인 만큼 협업의 큰 틀 이해하기동료 Frontend와 협업하기Frontend : 2명Backend : 3명2021.05.10 ~2021.05.21(12일간)Front

quiz1에 의해 원래 배열인 arr의 변형이 일어났다.quiz1의 결과 주목! map은 결국엔 배열을 뱉어낸다. 이 경우, 배열 안의 요소 수만큼 "천재"가 담긴 배열이 탄생하였다.원래 배열에는 변형이 없지만, 아무것도 뱉어내지 못한 quiz2는 undefined을

constructor()컴포넌트 생성자 함수.컴포넌트가 새로 만들어질 때마다 이 함수가 호출componentDidMount()컴포넌트가 화면에 나타나게 됐을 때 호출되는 API.DOM 을 사용해야하는 외부 라이브러리 연동: D3, masonry etc해당 컴포넌트에서

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. 부모 컴포넌트 DOM 계층 구조에

1\. 여러 인스타그램 계정의 정보가 담긴 Mock data를 fetch로 불러오기2\. 사용자가 입력한 keyword 저장하기3\. Mock data 내의 user id 중 keyword를 포함한 계정만 사용자에게 보여주기이 한 가지 기능을 구현하기 위해서는 다양한

📝 또 한번 배움의 기쁨을 느꼈던 순간이다. 이것을 구현하기 위해 정규표현식을 새로 공부하였기 때문이다. TIL015\_정규표현식에도 기록했듯이 어려워만 보였던 정규표현식을 공부하고 나니 여러 문자열 조건들을 간단하게 표현할 수 있는 방법이 생긴것이다. 앞으로도 va

하나의 컴포넌트는 한 가지 일을 하는가? 하나의 컴포넌트가 커지게 되어 보다 작은 하위 컴포넌트로 분리하였는가? JSON 데이터를 불러왔을 때, 각 컴포넌트가 데이터 모델의 한 조각을 나타내도록 분리하였는가? 데이터 모델을 가지고 UI를 렌더링은 되지만 아무

React에서는 부모 컴포넌트에서 자식 컴포넌트로 전달한 props를 통해 자식 컴포넌트는 데이터를 수정하고 재렌더링 되어 UI에 반영되는 것이 기본이다. 하지만 예외적으로 직접 DOM에 접근하여 요소를 불러와서 수정해야 하는 경우가 생긴다. 이때 사용할 수 있는 것이

부모 component에서 alices를 props로 받아와서 변수에 할당하고배열인 alices에 map() method를 써서 그 결과를 새 변수 aliceList 에 할당하고(Destructuring)jsx가 들어가야하는 return에서 변수 aliceList

/^\[a-z]{5}/ 여러 글자 중 앞 5 글자/\[a-z]{5}$/ 여러 글자 중 뒤 5 글자/^\[a-z]{5}$/ only 5 글자만 유효 /gr(a|e)y/ gr로 시작하고 a 또는 e 가 오며 y로 끝나는 단어/gr\[ae]y/ 위와 같은 뜻으로 a

float: left - 요소를 왼쪽 방향으로 부유하게 설정float: right - 요소를 오른쪽 방향으로 부유하게 설정float: none(default)float는 이미지와 텍스트의 레이아웃을 구성할 때 쓰던 속성이지만 전체 웹 레이아웃을 생성하는데 사용되기도 한

HTML의 모든 요소는 box다.display: block, display: inline, display: inline-black, display: flexwidth, height, padding, border, margin값 모두 줄 수 있다.block 요소 옆에 충

문서 상에서 요소의 위치를 지정하는 속성은 position이다.position의 속성값에는 static(default), relative, absolute, fixed 그리고 sticky가 있다.Type - 어떤 종류의 position을 사용할 것인지이동의 기준점 -

프로그래밍에서 "semantic하다" 는 것은 의미를 가지고 있음을 나타낸다.HTML 마크업을 할 때, 컨텐츠(데이터)를 대표할 수 있는 태그를 사용하여 작성되어야 한다.브라우저와 개발자 모두에게 코드에 담긴 컨텐츠(데이터)의 의미를 명확하게 전달할 수 있는 요소로 그

🎯 API를 이용하여 Weather app 만들기 도전! 😎 Result 오늘의 목표는 외부 API를 이용하여 날씨앱 만들기였다. 외부 API를 사용할 줄 알면 다양한 주제로 변형이 가능하기 때문에 꼭 해보고 싶었다. 검색 지향 개발자 되기를 연습하고 있기에 새

현재 시간 보여주기저장된 이름이 없는 경우 입력창 보여주기페이지 새로 고침 후, 저장된 이름이 있는 경우 이름 디스플레이하기1) 시간설정하기2) 저장된 사용자 유무에 따라 첫 페이지 다르게 하기localStorage.setItem('key', 'value') :현재

🎯Datatype을 바꾸는 방법을 익혀보자 🔑방법1. 자동형 변환 이용 1. From Number to String 2. From String to Number * 장점: 가장 간단하게 변환 시킬 수 있다. * 단점: 타인이 보면 어떤 의도로 작성한 코드인지