본문 바로가기

Web

scss line-clamp module line-clamp.module.scss@mixin line-clamp($lineCount: 1) { display: -webkit-box; -webkit-line-clamp: $lineCount; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} example.scss@import "./line-clamp.module";.text { @include line-clamp(1);} 더보기
fork 해온 repository 잔디 심는 방법 1. 새로운 레포지토리를 만든다. 2. 복사하고자 하는 repository를 bare clone한다. // git clone --bare [fork한 저장소 주소] git clone --bare https://github.com/yg1110/pilot-react.git bare clone을 진행할경우 [fork한 저장소 이름].git라는 이름으로 폴더가 생깁니다. 3. 새로운 repository Mirror-push // cd [fork한 저장소 이름].git // git push --mirror [새로운 저장소 주소] cd pilot-react.git git push --mirror https://github.com/yg1110/pilot-react-login.git 더보기
리액트 네이티브 명령어 m1 Pod 설치 sudo arch -x86_64 gem install ffi IOS 빌드 pod install arch -x86_64 pod install pod 라이브러리 정리 pod deintegrate pod clean 빌드파일 삭제 rm -rf ~/Library/Developer/Xcode/DerivedData/*​ 더보기
this와 binding 참고문서 : https://bohyeon-n.github.io/deploy/javascript/this.html 자바스크립트 this, bind 그리고 화살표 함수 | 구보현 블로그 자바스크립트 this, bind 그리고 화살표 함수 20180806 this this 는 생성자 혹은 메소드에서 객체를 가리킬 때 사용하는 키워드입니다. this 는 이럴 때 사용합니다! 새로 만들어지는 객체에 생성자의 속 bohyeon-n.github.io this란? this는 생성자 혹은 메소드에서 객체를 가리킬 때 사용하는 키워드입니다. this는 어떠한 문맥이냐에 따라서 그 값이 바뀝니다. Global Scope에서 사용될 때 const rootScope = "root"; console.log(this.rootSco.. 더보기
Event Loop 참고문서 : https://zereight.tistory.com/855 이벤트 루프란? - 이벤트 루프란 무엇인가요? Callback Event Queue에서 하나씩 꺼내서 동작시키는 Loop를 말한다. 자바스크립트는 싱글 스레드 기반 언어이기 때문에, 한번에 하나씩 작업을 진행한다. 그러나 자바스 zereight.tistory.com 참고문서 : https://velog.io/@thms200/Event-Loop-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84 더보기
Scope 참고문서 : https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html [JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog Step by step goes a long way. gmlwjd9405.github.io 참고문서 : https://www.zerocho.com/category/JavaScript/post/5740531574288ebc5f2ba97e https://www.zerocho.com/category/JavaScript/post/5740531574288ebc5f2ba97e www.zerocho.com 함수레벨 스코프 (var) 전역변수 함수 밖에서 선언한 함수 스코프 변수는 전역 범위를.. 더보기
웹페이지 동작 원리 & 브라우저 랜더링 과정 참고문서 : http://www.tcpschool.com/webbasic/works 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 참고문서 : https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/ 브라우저 렌더링 과정 이해하기. 최근에 백엔드 팀원들과 CS공부를 하면서, 주소창에 을 입력했을 때 일어나는 일에 대해 공부하였다. 이때 백엔드 팀원이 받아온 HTML… tecoble.techcourse.co.kr 웹의 동작 원리 ①② 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력함. ③ 사용자가 입력한 URL 주소 중에서 도메인 .. 더보기
Vanilla Javascript 라우터 구현 1. 컨셉 하나의 라우터 엘리먼트를 생성한 뒤 라우터 엘리먼트의 자식노드로 정해둔 컴포넌트를 추가한다. 경로이동시 히스토리 변수에 해당 경로를 추가하여, 추후 이전 경로에 사용한다. 2. 구현 (1) webpack.config.js devServer: { contentBase: path.join(__dirname, "public"), historyApiFallback: true, port: 8080, }, 기존의 webapck.config에서 historyApiFallBack을 추가하여 history기능이 가능하도록 하였습니다. (2) utils/selecter.ts // 엘리먼트 검색함수 export function $(key, elemnent = null) { if (!key) { return fal.. 더보기