png, jpeg 등의 파일 외 svg파일을 사용하면 이미지가 깨지지않고 용량이 적으며 출력이 빠르다. 또한, 수정과 애니메이션이 가능하다는 장점이 있다. 0. 가장 베이직한 방법 기본적으로는 img의 src로 svg를 넣어줄 수 있다. import Reservation from 'assets/icon-24-reservation.svg' 1. svg 파일을 react component처럼 사용하는 방법 svg 파일 주소를 복사한다. src 폴더(보통 src > assets > images)에 svg 확장자명의 파일(e.g. MySvg.svg)을 만들어 추가한다. something.svg 파일에 복사한 주소를 붙여넣는다. svg 파일을 component로 불러온다. (이때 { ReactComponent a..
box-sizing의 속성값 content-box (box-sizing의 default value) Content 영역을 기준으로 box의 size 적용 width값이 400px이더라도 padding을 50px로 주면 500px의 width를 가진 box가 된다. 👾 위와 같은 이유로 일반적으로 모든 요소의 box-sizing을 border-box로 맞춰주고 시작하는 경우가 많다. border-box Border 영역을 기준으로 box의 size를 적용 content와 padding을 포함한 box 사이즈가 width 값이 되는 것 Inline요소 vs Block 요소 div, p, span, h1, h2 등 수많은 HTML 태그는 블록요소와 인라인 요소로 분류한다. CSS에서 display 속성은 웹 ..
GitLens 를 사용하려면 Git이 활성화되어 있는 지 확인해야한다. (Git이라는 기본 extension이 켜져있는 지 확인해보자.) + 추가적으로 Error Lens 익스텐션이 있다. 에러 메세지가 내 코드 위에서 바로 보이기 때문에 조금 정신 사나울 수 있지만 바로 에러가 난 것을 확인할 수 있으므로 추가적으로 설치해도 좋을 익스텐션 같다. 🟡 Sourcetree에서 GitLens로 이동한 이유? 기존에 사용하던 Git GUI sourcetree에서 vscode의 익스텐션 GitLens로 이동했다. 이유는 간단하다. vscode 내의 터미널을 이용하는 CLI 방식이 훨씬 더 편하다. 또한, 내 git, github 이슈 중 가장 오류가 많았고 헤맸으며 시간적으로 소모가 심했던 툴이 sourcetr..
🟡 문제 상황 git status 명령어로 현재 commit 상태를 확인할 때,한글로 작성된 파일들이 제대로 보이지 않는 현상이 발생했다. 아래와 같이 숫자로 표현되고 영어로 작성된 파일들은 제대로 보인다. 🟡 원인 core.quotepath 설정: 일반적이지 않은 문자를 탈출문자로 처리하는 기능 core.quotepath가 큰 바이트를 가진 문자를 탈출문자로 인식하여 파일명이 깨지게 된다고 한다.(기본 세팅이 true값으로 되어있기 때문이다.) 한글 인코딩이 UTF-8에 들어가 0x80 보다 큰 바이트를 가진 escape 문자 처리가 되어 "unusual"인 케이스로 포함되기 때문에 위와 같은 문제상황이 발생한 것이므로 해당 세팅을 false로 지정해주면 정상적으로 작동한다. 🟡 해결 방법 터미널 창에..
모든 내용은 맨 하단의 원작자분이 작성해주신 포스팅 내용을 제가 이해할 겸 축약하여 작성한 것입니다. 문제시 알려주시면 삭제하겠습니다! 자세한 내용을 원하시면 링크를 타고 본 포스팅을 확인해주세요. 실행 컨텍스트 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 실행 컨텍스트는 어떤 필요에 의해서? -> 아마 코드의 실행 순서와, 각각의 실행에서 참조해야하는 변수, 식별자 등을 효과적으로 관리하기 위한 목적으로 도입되었다. 실행 컨텍스트란 "실행할 코드에 제공할 환경 정보들을 모아놓은 객체" -> 정보들을 어딘가에 모아두는 이유? A. "언젠가 필요할 때 꺼내어 쓰기 위함이다." 실행 컨텍스트 요소 Variabl..
배열의 유사도 //for ... in 반복문: key 를 뽑을 때 주로 사용 (배열에 사용하기엔 의미가 없음) //for ... of 반복문: es6에 추가된 새로운 컬렉션 전용 반복 구문, iterable 객체의 value 반복문 function solution(s1, s2) { let answer = []; for (i of s1) { for (j of s2) { if (i === j) { answer.push(i); } } } return answer.length; } //내 답은 이중 for문을 사용하였는데 성능적으로 좋은 코드는 아니다. //그렇다면 가독성이라도 좋아야 하는데 내장 메서드를 활용하지 못한 점이 아쉽다. // 다른 사람 풀이 // 검색 키워드로 js "교집합"을 구하는 공식 같은 ..
우리가 많이 사용하는 react hook 중 useState의 인자 값으로 리터럴 값 외에 함수를 넘겨줄 수도 있습니다. 이를 Lazy initial state라 하는데 자세한 내용은 맨 하단의 react 공식 문서 ref를 확인해보시면 됩니다. 🟠 Lazy initial state( 지연 초기값 ) initialState 인자는 초기 렌더링 시에 사용하는 state이다. 그 이후의 렌더링 시에는 이 값은 무시됩니다. 즉, 설정해 놓은 초기값을 필요로하는 순간이 맨 처음 화면이 랜더링될 때 한번이고 입출력 계산이 필요한 경우라면 lazy init 함수를 통해 성능 최적화 작업이 가능합니다. 구체적인 예시로는 localStorage(웹스토리지) 접근, map, filter, find, new Date등 데..
왜 이 WebAPI에 대해서 찾아보게 됐나? - query string을 업데이트해야 할 때 사용하기 좋은 WebAPI입니다. 혹은 URL Validation을 할 때 유용할 거 같습니다. - 어렴풋이 URLSearchParams()를 사용해본 거 같은 느낌이 들어 찾아보니 이전에 리액트 프로젝트를 했을 때 사용한 React router dom v6의 useSearchParams()와 비슷한 거 같네요. 🟡URLSearchParams ❗URL 전체를 인자로 넘기는 것이 아니라 query string 부분만 인자로 넘겨준다. URLSearchParams 인터페이스는 URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의한다. 이 생성자(new 키워드로 새 인스턴스 반환)를 통해 구현되는 객..
- Total
- Today
- Yesterday
- 타입스크립트 장점
- 원티드 FE 프리온보딩 챌린지
- 항해99프론트후기
- aspect-ratio
- 항해99프론트
- tilde caret
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- nvm 설치순서
- reactAPI
- && 셸 명령어
- float 레이아웃
- 형제 요소 선택자
- 원티드 프리온보딩 FE 챌린지
- getServerSideProps
- fs모듈 넥스트
- 부트캠프항해
- grid flex
- 항해99추천비추천
- getStaticPaths
- 프리렌더링확인법
- 프리온보딩 프론트엔드 챌린지 3월
- D 플래그
- nvm경로 오류
- 틸드와 캐럿
- Prittier
- text input pattern
- is()
- 타입스크립트 DT
- ~ ^
- 원티드 3월 프론트엔드 챌린지
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |