DEVELOP (150) 썸네일형 리스트형 [Publishing] position 상쇄 ie 대응 기존 스타일에 position이 정의되어 있을 때 상쇄하는 스타일로 'initial'를 사용하였을 때 ie에서 인식하지 못한다. position: intial; left: initial; bottom: initial; width: initial; 익스를 고려한다면 initial 보단 static를 사용하여 상쇄시킨다. 참고 url: https://www.w3schools.com/css/css_positioning.asp CSS Layout - The position Property W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subje.. [Publishing] 이미지 블러 처리 및 텍스트 위치 CSS 위의 예시로 1770px 과 1130px window 사이즈를 들어보았는데, 이야기 하고자하는 바는, 이미지 블러처리 + 하단에 "2022.03 Sample Onboard Training Programme" 텍스트 위치가 window 사이즈를 줄였을 때에도 같은 위치에 떨어지게 구현하는 것이다. CSS 1. blur 영역의 부모 및 blur 클래스 .blur-parents { display: inline-block; position: relative; } .blur { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 14%, r.. [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)에 비동기 작업을 위임하여 그들.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 19 다음
