본문 바로가기

전체 글

 (133)
(React 오류) Assign array to a variable before exporting as module default HA(Hire Assesment) 1차 리액트로 간단한 썸네일 뷰와 라우터 기능을 구현하는 것이다. 결과는 사실 좋지 않다. 1. 정상적인 작동 기능을 구현하였어도 컴포넌트를 통해서 썸네일 이미지를 map함수를 사용 해서 보여줘야 하는데 자바스크립트와 html 지식이 혼재되고 props으로 무엇을 받아야 하는지 감을 잡지 못해서 그냥 바로 return 안에서 썸네일 이미지를 map함수로 표시해 주었다. 2. 자정을 40분 넘긴 지금. 여전히 테스트 결과는 100%로 나오지 않지만 테스트 기준에 어느정도 부합하게 컴포넌트도 사용했다. =========== 리액트 에러메세지가 많이 나와서 그 부분을 정리해 두려고 한다. Assign array to a variable before exporting as mo..
이스케이프 문자 원래의 의미에서 달아나버린 문자들, 이스케이프(탈출, 도망) 이스케이프 문자는 이스케이프 시퀀스를 따르는 문자들로서 다음 문자가 특수 문자임을 알리는 백슬래시(\)를 사용한다. 일부 제어 시퀀스인 이스케이프 문자들은 미리 예약되어있다. 예약문자 내용 참고 \n 줄바꿈 개행문자(캐리지 리턴) \ 시퀸스 문자 시작 \" \t 현재시간 \u 사용자 이름 \033--- 컬러 색상 관련 \033[0;31m 텍스트 빨간색 \w 현재 작업중인 로컬 디렉토리 전체경로명 /home \[ 비출력문자열 시작 \] 비출력문자열 종료
Fontawsome in React 폰트어썸을 리액트에서 사용하는 방법 import 하는 방법과 script 로 연결하는 방법, 작업 컴퓨터에 다운로드 받는 방법 등이 있다. 폰트어썸에서는 script 연결을 권장한다. 그래서 script로 연결하는 방법을 알아보자. React을 설치하고 생성된 폴더를 보면 public이라고 있다. 해당 폴더는 reate-react-app이 만들어낸 파일로 npm이나 yarn start으로 사용이 가능하다. 이 public 폴더에 index.html 파일에 를 설치해주면 된다. src안에 들어갈 폰트어썸 kit 주소는 폰트어썸에 가입하고 나면 여기서 알려준다. "https://kit.fontawesome.com/14d687cae1.js" crossorigin="anonymous" 해당 주소는 가입자 마다 ..
정규표현식을 통한 문자 공백 제거 자주 쓰이는 정규표현식 기호 $ : 끝나는 점 ^ : 시작하는 점 * : 뒤에 이어지는 문자까지 모두 선택 d : 숫자 s : 공백 문자열의 모든 공백을 제거할 때 replace 메소드를 이용한다. str_text.replace("찾을 문자열", "변경할 문자열") 찾을 문자열에 정규표현식의 모든 공백을 표현하는 기호를 넣어주고 변경할 문자에는 '' 빈문자열을 넣어준다. let newStr = str.replace(/(\s*)/g,'').split('');
parseInt 의 특이한 점 parseInt javascript를 검색하면 대다수의 함수 기능은 문자열을 숫자로 변환한다는 내용이다. MDN에도 해당 내용으로 나오고 있다. 그런데 parseInt에 소수점이 있는 수를 넣어주면 소수점을 버리고 정수만 반환해준다는 내용은 찾을 수가 없다. 언젠가는 찾겠지...
맥 터미널에서 code . 작동 안하는 경우 해결 맥 터미널에서 특정 프로젝트 폴더에서 code . 이라는 명령어를 치면 해당 프로젝트를 vs code의 프로젝트로 열리게 된다. 그런데 code . 이 작동하지 않는 경우가 있다. 해결방법 1. application 폴더에 vs code가 설치되어 있는지 확인 2. vscode 에서 cmd+shift+p 누르고 'Shell Command' 검색 install 명령어를 선택 하여 설치 3. 맥터니멀 닫고 터미널에서 code . 명령어를 입력하니 vs code가 열린다.
(CSS) 100vh, 100vw CSS 레이아웃 레퍼런스 코드를 보니 min-height: 100vh가 눈에 띄인다. CSS를 구현할 때 흔히 디스플레이 화면 사이즈에 맞게 구현하는 경우가 많다고 한다. vw 나 vh를 사용한다.(vh & vw (vertical height & vertical width) vw는 스크린 너비의 1% vh는 스크린 높이의 1%를 표시하는 거다. 그래서 min-heigth: 100vh는 현재 스크린의 화면의 100%에 CSS레이아웃을 꽉 채운다는 의미다. 특히 요츰처럼 다양한 사이즈의 기기를 사용하는 경우 반응형 웹으로 웹페이지를 많이 만들기 때문에 자주 사용된다. 예를 들어 브라우저의 높이 값이 900px면 1vh는 9px가 된다. 이외에도 너비나 길이를 나타내는 CSS unit은 아래의 사이트를 참조한..
(CSS) background 와 background-color의 차이 둘의 차이는 background-color는 background의 color 요소만 지정이 가능하고 background 는 color외에 image, attach, repeat, position 등 다양한 백그라운 옵션을 지정해 줄 수 있다. MDN에 나와 있는 구성요소 background-attachment background-clip background-color background-image background-origin background-position (en-US) background-repeat background-size MDN에 나와 있는 사용예제 /* 사용 */ background: green; /* 와 사용 */ background: url("test.jpg") repeat-y; /..

티스토리툴바