Frontend Study - 2/Etc (11) 썸네일형 리스트형 컴포넌트에 style 인라인으로 주기 + 컴포넌트에서 style 인라인으로 주기 ! Public폴더 , 절대경로 이용하고 싶을 때. 환경변수 Public 폴더의 절대경로를 이용하고 싶을 때 html 에서는 %PUBLIC_URL% 기본 정규식 사용 코테를 풀면 다른 사람들의 풀이를 보며 놀라곤 한다. 무조건 짧은 코드가 좋은 것은 아니겠지만 내가 줄줄이 써놓은 코드를, 누군가 한 두줄로 끝내 놓은 걸 보면 아무래도 비교가 된다. 종종 정규식을 이용한 간단한 풀이를 보았는데, 구글링 해서 쓰면 되지라며 공부를 미뤄왔다. 어디서 어떤 업무를 맡게 될지도 모르고, 몰라서 손해보는 것보다는 역시나 알고 있는게 좋을 것 같다. /regex/i 기본적인 생김새는 이렇다. / 사이에 정규식이 들어가고 그 뒤에 i flags가 들어온다. 맨 뒤의 플래그는 정규표현식의 옵션이다. 정규식으로 검색을 하는데 그 검색에 어떤 옵션을 넣을 것인지를 결정한다. 예를 들면 g는 (g)lobal의 g로 대상 문자열내의 모든 패턴들을 찾아 내는 것을 의미한다. i는 (i)gno.. WYSIWYG - Quill Rich Text Editor. 위글 기업 협업을 하면서 판매자 페이지를 만들게 되었는데, 판매자가 상품을 등록할 때 상세 정보를 입력할 수 있는 인터페이스가 필요했다. Quill이라는 rich text editor가 마음에 들어 사용하게 되었다. Rich Text Editor 란 위지윅(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다" - 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식) 편집 영역을 제공하여 브라우저 내에서 서식 있는 텍스트를 편집하기 위한 인터페이스를 말한다. 최종 구현한 화면은 아래와 같다. 1. 세팅 react에서 사용할 것이기 때문에 react-quill 을 설치해 주었다. npm install react-quill // or npm in.. 최근 검색 내역 지정된 개수 만큼 보여주기. 유저가 항공권 검색을 했을 때, 검색했던 내용을 '최근 검색한 항공권' 에 3개씩 띄워주고 있다. 우선 검색을 눌렀을 때 그 검색에 해당하는 값들을(목적지, 기간, 승객 수, 왕복/편도 ) 오브젝트로 만들어서 로컬스토리지에 저장한다. 그리고 메인화면이 렌더링 되면 그것들을 다시 가져와서 출력해주는 방식으로 구현해 보았다. 검색값을 단순히 오브젝트로 저장한 것이 아니라, 배열을 만들고 그 안에 검색을 할 때마다 쌓이게 했다. 그렇게 함으로서, 배열 length의 인덱스 값을 이용하여 가장 최근 3개 값을 가져올 수 있었다. const recentData = JSON.parse(localStorage.getItem('recentData')); const newRecentData = [ ...recentDat.. 22.07 week 4 - 구조분해할당, 프롭스의 활용, 컴포넌트 관리, useState 최소화, mouse over / enter차이 1. 프롭스의 활용 단순히 컴포넌트에 state를 넘겨주거나, 함수를 넘겨줄 때 위주로 사용했는데 다양하고 영리하게 사용이 가능했다. 컴포넌트 자체에 데이터를 넘겨줄 때 도 데이터를 넘겨줄 수 있다. 1) 2) data.map((list) => return ()); 2. mapping시 key 속성은 제일 바깥의 요소에 부여한다. Array.map(el => { return ( {el.content} ) }) 3. input 구조분해 할당 예시 // Before if (event.target.value.includes("@") && event.target.value.length >= 5) { setIsIdValid(true); } else { setIsIdValid(false); } // After co.. 22.06.22 TIL 매개변수(parameter)와 인자(argument) 함수가 외부에서 입력 받은 데이터를 처리하는 경우 정의된 함수의 소괄호 내부에 name 이라는 단어가 들어 있습니다. 이처럼 함수 이름 옆 소괄호 자리에 적혀 있는 단어는 **매개변수(parameter)**라고 부릅니다. function getName(name) { return name + '님'; } 매개변수는 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할을 합니다. 함수 외부로부터 들어온 값이 담길 '자리' 혹은 **'변수의 이름'** let result1 = getName('개발자'); console.log(result1); // 콘솔에 '개발자님'이 출력 한 번 만든 함수는 여러 번 호출할 수 있습니다. 반환값을 변수.. 22.06.23 TIL - 컴퓨터처럼 사고하는 것이 무엇인지 설명할 수 있다. 논리적이며 순차적으로 해결할 수 있도록 문제를 구조화 한다. 작게 쪼개어 분석, 해체, 과거의 문제들과 어떤 연계가 되는지 패턴을 이해 문제를 이해하고, 문제를 작게 분해해서 어떻게 해결할 지 생각해보자. 개발자란? 문제를 해결하는 사람. - 객체의 키에 동적(변수)으로 접근하기 Object 두번째 강의에서, 객체의 키를 사용하는 여러 방법을 배웠습니다. 이 방법을 사용하면 객체의 특정 키의 값을 가져오는것도 가능하지만, 반대로 객체에 특정 키를 만들고 값을 할당하는것도 가능합니다. const information = { name: '김개발' } 여기에 키 하나를 생성하고, 그 키에 값을 할당해주려고 합니다. 그런데 키와 값을 변수를 통해 받아온다면.. 이전 1 2 다음 목록 더보기
