[Javascript] window bottom 값 알아내기 window의 top 값은 window.top으로 값을 알아낼 수 있지만 bottom 값은 알아내기 어렵다. 따라서 계산식으로 bottom값을 도출해낼 수 있다. 하단 scrollBottom 변수 값이 window bottom 값이 된다. footer가 없을경우 제일 하단에 있는 블록 높이값이 footer 높이값으로 대체된다. var footerHei = $('.footer').outerHeight(); var scrollBottom = $(document).height() - $(window).height() - footerHei; [React.js] 여러 개의 컴포넌트를 쉽게 만들 수 있는 map() 함수 React.js를 배우고서 사용하지 않은 때가 오면 어쩌지 하고 걱정이 앞서는데, Javascript 로 작성되어 있기 때문에 나중에 그런 날이 오더라도 그동안 배우고 사용한 Javascript 지식은 그대로 있으니 안심이다. map()함수는 Javascript의 함수중 하나인데, 이 함수를 통해서 여러 개를 손쉽게 출력할 수 있다. 아래는 React.js에서 map()함수를 사용한 예시이다. import React from 'react'; function Movie({ title, year, summary, poster, genres }) { return( { genres.mapp((genre) => { return {genre}; }) } ); } export default Movie; map 함수는.. [React.js] props란? props란? 컴포넌트 간에 데이터를 전달해주는 역할. 함수를 예를 들면, 매개변수를 통해 해당 변수의 값을 이용하여 함수안의 코드를 따라 실행 결과가 달라지는 것을 생각하면 쉽다. import React from 'react'; import Food from './Food' function App() { return( Hello ); } export default App; Food 컴포넌트에 fav라는 props를 전달할때, ES6 Javascript 문법인 구조 분해 할당을 이용하면 훨씬 코드가 간결해진다. 아래는 구조 분해 할당을 이용한 예이다. import React from 'react'; function Food({fav}) { return I like {fav}; } export defaul.. [React.js] state와 클래스형 컴포넌트의 관계 state란? 동적 데이터를 다루는 객체이며 클래스형 컴포넌트에서 사용할 수 있는 개념이다. 직접적으로 state를 변환 할수 없고, 간접적인 방법인 state를 받아서, this.setState()를 통해 간접적으로 데이터를 변경할 수 있다. setState()함수는 바뀐 데이터 값만 변환해준다. 바뀌지 않은 데이터에 대해선 그대로 둔다. 여기서 React.js의 장점이 발휘되는 것인데, React.js는 데이터 변경이 생기면 해당 데이터만 변경해주고 그렇지 않은 것에 대해선 그대로 두기 때문에 속도가 빠른 장점이 있다! 즉, React.js는 필요한 부분만 바뀌니까, 화면 구성이 빠르다. state는 반드시 클래스형 컴포넌트 안에서 추가되어야 한다. 이 객체 형태의 데이터(state)를 사용하기 위해.. [React.js] 클래스형 컴포넌트 생명주기 우리에게 태어나고, 살고, 죽고 하는 생명주기가 있듯이 React.js 클래스형 컴포넌트에도 일종의 생명주기의 사이클이 있다. 마운트(Mount) 호출 순서 constructor() 함수 호출 (constructor함수는 생명주기 함수가 아니지만 클래스형 컴포넌트가 생성될 때 호출) render() 함수 호출 componentDidMount() 함수 호출 : 컴포넌트가 처음 화면에 그려지면 실행되는 함수 업데이트(Update) componentDidUpdate() 함수 호출 : 화면이 업데이트 되는 시점에 실행되는 함수 언마운트(Unmount) componentWillUnmount() 함수 호출 : 컴포넌트가 화면에서 떠날 때 실행되는 함수 [Javascript] 싱글스레드인데 비동기함수를 처리할 수 있는 이유 결론 부터 말하면, 단순하게 Javascript만으로 비동기함수를 처리할 수 없다. 런타임환경(Web APIs)에 비동기 작업을 위임하여 대신 처리할 동안 다른 코드를 처리한다. 따라서 동시성을 갖는다. 대신 처리해 준 것을 그 외의 자바스크립트 코드를 해석, 실행하는 Javascript 엔진의 작업이 끝난 후에 실행을 시켜준다. Javascript는 하나의 메인스레드와 하나의 콜스택을 갖는다. 그렇기에 Javascript만으로 비동기 작업을 처리 할 수 없다. Javascript가 싱글스레드라는 예) alert를 발생 시키면, 그창의 확인을 누르기전까지 UI조작이 불가능하다. Javascript가 Rendering Engine인 런타임환경(Web APIs, Node.js)에 비동기 작업을 위임하여 그들.. [Linux] 리눅스 명령어 살펴보기(폴더 및 파일 관련) mkdir : make directory의 약자로 새로운 디렉토리를 만들 때 사용하는 리눅스 명령어. 리눅스를 기반으로 한 쉘 스크립트를 기본적으로 bash에서는 사용한다. ls : 리눅스의 기본 명령어로 해당 디렉터에 있는 내용을 출력 ls -a : 숨김파일을 포함한 경로안의 모든 파일과 디렉토리 표시해준다. ls -l : 지정된 디렉토리의 내용을 자세히 출력 ls -d : 지정된 디렉토리의 정보 출력 ls -n : 파일 및 디렉토리 정보 출력시 UID, GID를 사용 ls -F : 파일 형식을 알리는 문자를 각 파일 뒤에 추가 ("*", "/", "@", "|", "=", "NULL") ls -R : 하위 경로와 그 안에 있는 모든 파일들도 같이 나열 ls -t : 파일 수정 시간순으로 정렬 cd :.. [Github] GitHub Pages 서비스 이용하기 무료로 앱을 배포할 수 있는 GitHub Pages. React 관련 서적을 보다가 알게되었다. (React 기반의 앱으로 GitHub Pages를 만들었다.) 1. package.json 파일 값 추가 { "scripts": { ... "predeploy" : "npm run build", "deploy" : "gh-pages -d build" }, "browserslist" : { ... }, "homepage" : "https://깃허브계정이름.github.io/저장소이름" } 2. 최종 깃허브에 업로드 git add . git commit -m "최종 반영" git pull origin main git push origin main 3. gh-page 설치 npm install gh-pages 4.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 31 다음