분류 전체보기
-
[CSS] animations실무/CSS 2021. 8. 13. 01:53
- CSS animations 구성 요소 animation property @keyframes - animation property : animation 할 요소의 스타일을 지정 => CSS animation 시퀀스 생성 animation-name animation keyframe을 설명하는 @keyframes의 이름을 지정 animation-duration animation 한 주기를 완료하는데 걸리는 시간 animation-timing-function animation 타이밍을 구성 가속 곡선을 설정하여 animation이 keyframe을 통해 전환되는 방식 예) linear, ease-in-out, step, cubic-bezier 등 https://developer.mozilla.org/en-U..
-
[CSS] transitions실무/CSS 2021. 8. 12. 00:24
- CSS transitions CSS 속성(properties)을 변경할 때 애니메이션 속도를 조절하는 방법을 제공 속성 변경은 즉시 영향을 미치는 대신, 일정 기간에 걸쳐 일어나도록 가능 초기 상태와 최종 상태 사이의 중간 상태는 자동적으로 계산된다. 애니메이션 시작 시기(지연 설정), 전환 지속 시간(기간설정), 전환 실행 방법 속성 지정 가능 transition-property transition을 적용해야 하는 CSS 속성의 이름을 지정 명시된 CSS 속성들만 애니메이션 발생 transition-duration transition이 발생해야 하는 기간을 지정 모든 속성에 동일한 기간을 지정하거나 각 속성에 다른 기간 지정 가능 transition-timing-function 속성에 대한 중간 값..
-
[Interview] 야놀자 면접 후기Interviews 2021. 7. 21. 17:00
FE 취준생에게 조금이나마 도움이 되고자 이 글을 남깁니다. 결론적으로 나는 2차 면접(CTO 면접)에서 떨어졌다. 면접을 준비하면서 참고할만한 내용이 많이 없었다. 면접 과정에서 겪었던 경험을 공유하고자 한다. 간략하게 내 경력을 나열하자면, 프로젝트 위주로 진행해왔고 FE 경력은 5년 반 정도 되었다. 5년 반 동안 프로젝트는 20개정도 구축하였고 주로 jQuery를 사용하였고 Vue는 1년, React는 실무경험이 없다. 그러다보니 React나 Vue를 능숙하게 다루는 개발자를 원하는 채용공고는 서류에서 탈락되더라.. 난 아직 부족한게 많은데 사회에서는 나를 시니어로 보더라.. 그러다보니 기준치도 높게 적용되는 듯 했다. 첫 경력 이직이다보니 어떻게 준비해야할지도 몰랐고, 프로젝트 중간에 이직을 하..
-
[Instagram] Header(2) - Font Awesome Icons 적용Clone Coding/Instagram 2021. 7. 19. 21:47
Font Awesome 적용 Package 설치 @뒤에 fontawesome이 아닌 fortawesome 주의 npm install @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons Icons Module 파일 생성 사용할 icon을 개별로 export iconName은 Fontawesome Icons에 표시되는 명칭 solid(fas)는 해당 Icon의 화면일 경우에 표시. 해당 화면이 아닌 Icon은 regular(far) Icon 표시 // js/modules/icons.js import { library, icon } from '@fortawesome/fontaw..
-
[Instagram] Header(1) - 공통 Layout 및 ImportClone Coding/Instagram 2021. 7. 17. 23:32
Logo 이미지 webpack 5 이전에는 파일을 출력하기 위해 file-loader 설치 필요 webpack 5 부터 내장된 Asset Modules를 사용 Asset Module은 loader를 추가로 구성하지 않아도 Asset파일(폰트, 아이콘 등)을 사용할 수 있도록 해주는 모듈 loader를 대체하기 위해서 Asset Module에 4개의 새로운 모듈 유형 추가 asset/resource: 별도의 파일을 내보내고 URL 추출. 이전에는 file-loader를 사용하여 처리 asset/inline: Asset의 data URI를 내보낸다. 이전에는 url-loader를 사용하여 처리 asset/source: Asset의 소스 코드를 내보낸다. 이전에는 raw-loader를 사용하여 처리 asset..
-
[Instagram] 프로젝트 설정(5) - favicon 적용Clone Coding/Instagram 2021. 7. 12. 21:52
[ favicon ] 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘 - favicon 아이콘 변환 https://icoconvert.com/ - 프로젝트에 favicon 적용 변환한 favicon.ico 파일 프로젝트에 추가 webpack.config.js plugin 속성에 favicon 설정 // webpack.config.js const path = require('path'); const HtmlPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'index...
-
[Instagram] 프로젝트 설정(4) - Bootstrap 적용 + reset.cssClone Coding/Instagram 2021. 7. 11. 01:38
[ Bootstrap ] 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 동작 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. - Bootstrap 적용하는 이유. Why ? 디자이너 없이 웹사이트 개발 가능 다양한 인터페이스 제공 반응형 웹 제공 - 프로젝트에 Bootstrap 적용 Bootstrap 설치 npm i bootstrap Bootstrap Import & Customize Bootstrap에 정의되어 있는 변수의 값을 재정의하여 사용할 수 있다. Bootstrap scss Import 하여 Bootstrap Components 등을 사용한다. // Defaul..
-
[Instagram] 프로젝트 설정(3) - Babel 적용Clone Coding/Instagram 2021. 7. 11. 01:03
[ Babel ] JavaScript Transcompiler - Babel 적용하는 이유. Why ? ES6+ 코드를 이전 버전의 JavaScript로 변환하여 ES6+ 코드를 지원하지 않는 구 브라우저에서도 동작할 수 있도록 하기 위함 - 프로젝트에 Babel 적용 Babel 설치 npm i -D @babel/core @babel/preset-env babel-loader webpack.config.js 파일에 babel-loader 추가 // webpack.config.js const path = require('path'); const HtmlPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js',..