728x90 반응형 TIL147 git은 파일명/폴더명 대소문자 구별 못함 1. Memo.styles.ts 로 처음 세팅하고 git에 push 한 후 2. memo.styles.ts 로 이름을 바꾸었다 그리고 3. ㅎㅎ 방금 만든 컨벤션을 지키기 위해 대문자로 작성된 styles.ts 모두 소문자로 바꾸었다 다시 git에 push 하고 혹시 몰라 clone 받아 확인해봄 4. 실행 안 됨 (마감 30분 전) 상황 1. 폴더명 바꾸었던 파일은 오류 없이 잘 돌아감 2. clone 받은 파일만 난리남 3. 그러면 git 문제 원인 git 원래 폴더명/파일명 대소문자 구별 못함 해결방법 1. 대소문자 무시 하지 말라는 명령어 git config core.ignorecase false 2. 로컬에 남아있는 캐시 삭제 git rm -r --cached . 3. git에 다시 push g.. 2023. 4. 29. 웹 최적화 - Image LazyLoading Image LazyLoading 페이지 내에서 실제로 필요할 때까지 리소스의 로딩을 미루는 것 👆 전체 페이지에서 모든 이미지를 받아오지 않고 스크롤을 내릴 때마다 받아옴 페이지 초기 로딩 시 필요한 이미지 수를 줄일 수 있음 필요한 부분 먼저 받아오면서 필요하지 않은 사진들을 받아오지 않아도 되므로 유저가 빠르게 이용할 수 있고 비용이 감소함 적용 방법 html 은 img 태그의 src="이미지 주소" 를 읽으면 이미지를 무조건 로드함 lazy loading 을 위해서 src 속성이 아닌 다른 태그를 사용해서 이미지 url을 지정함 이렇게 이미지 로드를 사전에 막고, 언제 로딩할 것인지(뷰포트에 들어오면 로딩하라!) 알려주면 된다. 방법으로는 1. window scroll event 2. observe.. 2023. 4. 17. 프로그래머스 다음 큰 숫자 풀이 문제 내 풀이 function solution(n) { let hex = [...n.toString(2)] let count = 0; hex.filter(x=> x==="1" ? count +=1 : ""); let minCount = 0; let i = n+1; while(true){ let min = [...i.toString(2)] min.filter(x=> x==="1" ? minCount +=1 : "") if (count === minCount){ break; } minCount = 0 i+=1 } return i } filter / map 안에 삼항자를 돌려 1의 갯수를 구했고 while 문을 사용해 count === minCount 가 같을 때 break 를 해주었다 그리고 chatGPT .. 2023. 4. 17. 코드 스플리팅 코드 스플리팅 : 빌드-번들링(하나로 압축) 시 파일을 분리하는 작업 어플리케이션 크기가 커지면 번들 파일도 커짐 이때 스플리팅을 통해 큰 파일을 맞닥뜨리는 문제점을 해결할 수 있음 예를 들어 react 에서 구현한 페이지가 main / login / about 로 이루어진 spa를 구현한다고 했을 때 main 페이지를 들어가는 동안 다른 페이지 정보는 사용자에게 필요하지 않음 이때 웹팩은 동기적으로 로드하기 위한 청크 파일을 만듦 그리고 login 모듈이 필요한 상황이 발생하면 청크 파일을 비동기적으로 로드하여 login 모듈을 사용할 수 있도록 함 즉, 코드 스플리팅을 사용하면 필요한 모듈만 로드하기 때문에 초기 로딩 시간이 줄어들고 애플리케이션 성능이 개선됨 자동 코드 스플리팅 next.js 나 c.. 2023. 4. 16. next.js 학습 (1) next.js 👇 네트워크 확인하는 법 ssr (server side render) 서버가 그리는 것 -> 새로고침할 때마다 바로바로 서버에서 시간대를 받아옴 서버에서 데이터를 가져오고 props로 데이터를 전달해주는 방식 getServerSideProps 안에 console.log(111) 찍으면 터미널에 콘솔이 찍히고 브라우저에는 안 찍힘 csr (client side render) 클라이언트가 데이터를 가져와서 그린다 -> csr 를 담당하는 함수는 없음 기존 리액트 사용법과 동일 useEffect, useState 사용해서 시간을 넣어주는 방식 console.log(1111) 찍을 시 클라이언트에서 찍힘 : ttfb : 리소스를 요청하고 난 후 해당 요청에 대한 첫번째 바이트가 걸리는 시간 : f.. 2023. 4. 14. 2023.03.26, weekly memoirs weekly memoirs 이번 주에 한 일 ✅ 공부 1. 이제... 드디어 포트폴리오를 만들 때가 되었다 🤗 한 페이지로 react 사용해서 만드려하는데 생각보다... 디자인의 벽이 커서... 놀라고 있다... 내가 이렇게 디자인 감각이 없었나..? 내일은 코드를 작성하기보단 레퍼런스와 코드를 좀 찾아봐야할 거 같다... 기획이 튼튼해야 나중에 덜 고생한다... 포트폴리오 만들면서 ts랑 emotion.js 사용한 김에 보일러 플레이트 레포 하나 만들었다. 진짜 세팅하는 거 너무 귀찮았는데 (특히 타입 때문에) 이번 기회에 잘 만들었다 느낀다. 2. 아키텍처가 중요하다길래 찾아보았는데 react의 hook 이 나온 이후로는 딱히 그렇다할 유명한 아키텍처가 없어서 놀랐다. 찾아보니 아토믹 디자인 정도.... 2023. 3. 26. Create-React-App 에서의 npm run eject CRA 개인 프로젝트를 구현하면서 CRA는 쓰지 않을 이유가 없었다 중요한 라이브러리나 웹팩 설정 없이 명령어 하나로 간편하게 프로젝트를 실행할 수 있기 때문 CRA를 사용하면 필요한 웹팩 / 바벨 / eslint 등 연결에 대해서 신경쓰지 않아도 된다 autoprefixer 를 지원해주어 자동으로 -webkit-, -ms- 를 적용해주기도 한다 (이건 웹팩 설정, 크로스 브라우징 용도) => emotion styled 를 사용하면 알아서 붙기도 함 styled-components는 보통 styled-reset method 로 브라우저의 초기값을 초기화 시킨다. npm run eject 주의할 점 : 한번 eject를 하게 되면 이전 상태로 되돌릴 수 없다 eject는 숨겨져 있던 모든 설정을 모두 볼 .. 2023. 3. 20. react) inline style 단점 react 는 jsx 문법을 사용한다. jsx 는 react.createElement 를 통하여 변환이 되고 모든 속성이 props 객체의 부분이 된다 inline style 카멜케이스로 작성한다. inline style의 단점으론 html 파일 사이즈를 크게 만들어 화면에 웹페이지가 로딩 되는 시간이 따로 걸리고 html, css 코드가 섞이게 되어 유지 보수가 힘들기도 하다(가독성) 하지만 가장 큰 단점은 inline style에서 사용한 {}는 이전 값과 비교했을 때 다른 객체로 인식하기 때문에 (참조하는 주소값이 달라짐) 리렌더링을 일으키게 되는 것이다. 그러니까 한번 돔을 만들어 놓고 또다시 돔을 그린다 => 비효율적 이를 memo를 통하여 메모이제이션 한다는 해결방안도 있지만 css-in-js.. 2023. 3. 20. css-in-js 와 css-in-css html을 꾸며주기 위해 등장한 css 하지만 웹이 복잡해지고 동적 기능 요구가 증가하며 html 과 css 로는 모든 스타일링을 제어하기 어렵게 되었다. 이를 해결하기위해 css-in-css 가 등장했다 css-in-css css 모듈은 css를 모듈화하여 사용하는 방식이다. 고유한 클래스네임을 만들어서 scope를 지역적으로 제한한다 클래스 이름이 중복되어도 새로운 이름이 입혀지기 때문에 중복 위험성이 적다. css 전처리기 자신만의 특별한 구문을 가지고 css를 생성하는 프로그램 공통 요소 또는 반복적인 항목을 함수로 대체할 수 있는 재사용성, 중첩-상속과 같은 요소로 구조화 된 코드를 유지할 수 있다는 장점이 있다. 다만 전처리기를 위한 도구가 필요하고 웹에서 동작 가능한 표준의 css로 다시 컴.. 2023. 3. 20. 이전 1 ··· 5 6 7 8 9 10 11 ··· 17 다음 728x90 반응형
