본문 바로가기

전체 글

 (147)
Deployment Github package.json 파일에 프로젝트 주소 연결 "homepage": "https://myusername.github.io/my-app" 커맨드에 yarn add gh-pages 명령어 입력 package.json 파일에 아래 데이터 추가 "scripts": { + "predeploy": "npm run build", + "deploy": "gh-pages -d build", "start": "react-scripts start", "build": "react-scripts build", } 커맨드에 yarn build 명령어 입력 커맨드에 npm run deploy 명령어 입력 깃허브 repo 페이지 설정에서 연결할 branch를 master => gh-pages로 변경 Netlify n..
Function Component | memo, React Hooks How to make Function component? +) 함수형 컴포넌트는 클래스 컴포넌트와 달리, state와 life chcle method를 직접 가질 수 없다. 따라서 간단한 static component를 만들 때 이용할 수 있다. 함수 선언 이용하기 function Avatar(props) { return ( ); } arrow function 이용하기 const Avatar = props => { return ( ) } props에 있는 user 객체가 반복적으로 사용되고 있을 때에는 deconstructing 문법을 이용해서, 중복 작성을 피할 수 있다. ( props ) 대신 ( { user } ) 라고 작성하면 된다. user에서도 deconstructing이 가능한데, 그 때에는..
Class Component | Life cycle method State and Lifecycle 자주 사용하는 Life Cycle Methods componentDidMount( ) { /* code to execute */ } | 리액트 element가 UI로 렌더링되었을 때 자동으로 호출 componentWillUnmount( ) { /* code to execute */ } | 리액트 element가 UI에서 삭제되기 전에 자동으로 호출
Class Component | state, ref, pureComponent setState setState( { dataKey in stateObj : any value, callBack? } ) class 문법을 이용해서 만든 component는 state를 가질 수 있다. 리액트는 컴포넌트의 state가 변경 되면, 자동으로 render 함수를 다시 호출한다. 이 때 state에 정의되어있는 데이터를 직접 바꾸는 것이 아니라, setState라는 API를 이용해야 한다. encapsulation의 관점에서 데이터를 관리하는 것과, 리액트가 setState에 의해 변경되는 state의 변화만 알아차릴 수 있다는 사실 때문이다. class Habit extends Component { state = { count: 0, }; handleDecrement = () => { // ..
Window & Document object 브라우저에서 js 코드를 실행하면, 최상위 객체로 윈도우 객체가 만들어진다. 윈도우 객체의 유용한 property와 method에는 무엇이 있는지 알아보자. Window Object Size 모니터의 사이즈 | 콘솔에 위의 코드를 입력하면 모니터의 width와 height 값이 포함되어있는 "Screen"이라는 객체를 확인할 수 있다. window.screen; 브라우저의 사이즈 | 브라우저 사이즈의 너비와 높이를 나타내는 데이터는 크게 outer와 inner로 나누어진다. outer는 전체 브라우저 창의 사이즈를 나타내는 값인데, 여기에는 웹 페이지를 나타내는 Document 파일뿐만 아니라 주소 검색창, 페이지 탭, 스크롤 바가 포함되어있다. 따라서 우리가 창의 크기를 조정하면 줄어들거나 늘어난다. ..
Request & Response | API, JSON, fetch... what is Request? | API 사용자가 웹 페이지에 처음 접속하는 과정을 정리해 보자. client가 주소창을 이용해서 HTTP request로 URL을 요청한다. URL에 해당하는 server가 html, css, js 파일을 Client에게 전달한다. client의 브라우저가 해당 파일들을 rendering해서 client에게 보여준다. 웹 페이지에 접속한 뒤에도 사용자는 다양한 요청을 할 수 있다. 무언가를 검색할 수도 있고, 마음에 드는 검색 결과가 나올 때 까지 스크롤을 내릴 수도 있다. 이 때 사용자는 주소창에 새로운 url을 입력하지 않는다. 즉, 사용자가 직접 어떤 요청을 하지않더라도 새로운 데이터를 볼 수 있다. 내가 검색한 키워드에 맞는 추천 검색어 목록, 스크롤을 끝까지 내..
etc git blame 파일명 | 파일에 작성된 내용의 커밋 정보(누가, 언제 작성했는지)를 터미널에서 line by line으로 알 수 있다. vscode에서 코드를 리뷰하다가, 누가 언제 이런 코드를 작성했는지 궁금할 때에는 "git lens" 라는 익스텐션을 이용할 수 있다. git bisect | 이전에는 잘 동작하던 코드가, 최근에 잘 동작하지 않을 때 커밋과 커밋 사이에서 어떤 커밋에 문제가 발생했는지 찾을 수 있다. 이진탐색 알고리즘 드림코딩 8.3 문제의 원인을 빠르게 찾는 법 tig
git의 원리 git init 명령어를 입력하면 만들어지는 " .git " 이라는 숨겨진 폴더에 파일들이 어떤 일을 하는지 살펴봄으로써, 깃의 원리에 대해 알아본다. index와 objects/ add의 원리 깃 프로젝트 폴더에서 "hello" 라는 내용이 적혀있는 "greet.txt"라는 파일을 새로 만들었다고 가정해보자. 그런 다음 git add greet.txt 명령어를 입력하면, greet 파일은 staging area에서 commit을 대기하고 있는 상태가 된다. 이 때 .git 폴더에서는 무슨 일이 일어날까? 폴더에는 index라는 새로운 파일이 추가된다. 이 파일에는 우리가 add한 파일의 이름과 복잡하고 긴 문자열이 기록된다. 이 복잡하고 긴 문자열은 objects폴더 안에 새로 생기는 파일의 이름인데,..

티스토리툴바