개인공부 (206) 썸네일형 리스트형 scss 자주쓰는 mixin 말줄임 @mixin Nellipsis ($lines: null) { @if ($lines == null) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @else { display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: $lines; -webkit-box-orient: vertical; } } 줄바꿈 속성 @mixin wordWrap { word-break:break-word; word-wrap:break-word; } css를 이용해 화살표 그리기(4방향) $sqrt_2: 1.41421356237; @mixi.. CSS 말줄임 후 더보기 버튼 (React) 3줄 말줄임후 자세히 보기 버튼을 활성화 시킬려고 한다. 처음에는 CSS와 padding으로만 해결하려 했지만 잘되지 않았다. 인스타그램 PC버전을보니 인스타에서는 Js로 글자수를 카운팅햇허 줄이는 방법을 활용한다. {/* [D] span.text 3줄 이상일시 짜르고 span.moreButtonWrap 추가.*/} {text.substring(30)} {text.length > 30 && ( {"···"} 자세히 보기 )} moreButtonWrap은 {text}가 일정숫자 이상일 때 subString을 이용해서 자르고 moreButton을 활성화 시킨다. (간단하게는 이런식으로 접근하고 width 넓이에 따른 fontSize를 계산해서 몇글자에서 말줄임을 해야할지에대한 수식을 세우면 될거같다.) 분명.. SHA-256 해싱알고리즘의 하나인 SHA-256은 비트코인에서도 사용하고 있는 유명한 알고리즘이다. 개발시에서도 암호를 해싱알고리즘을 사용해 서버에 저장하는 등 많이 사용한다. 단방향 해싱의 장점은 복호화하는 기술이 어렵기 때문에 사용자의 비밀번호를 서버에서 저장하다고 하여도 관리자는 그비밀번호를 알수가없다. 메세지 전처리 SHA-256를 적용해야할 데이터를 메시지 라고 합니다. 이때 메시지 bit 의 길이가 512의 배수가 되도록 padding 을 추가하는 것이 전처리 단계에서 수행하는 작업입니다. 원본 메시지의 바로 뒤에 비트 ‘1’ 을 하나 추가한다. 메시지의 길이가 512의 배수가 되도록 메시지에 0을 추가한다. 메시지의 마지막 64bit에는 원본 메시지의 bit 길이를 적는다. 출처 : https://nvl.. React : 자식에서 부모 컴포넌트로 값 전달 constructor(props){ super(props); this.setParentValue = this.setParentValue.bind(this); } 부모에서 자식으로 값을 상속할때는 props를 이용해서 값을 전달 한다. // 부모 컴포넌트에서 자식으로 id, name 값 전달. // 자식에서 부모 값 받기. const {id} = this.props; 그렇다면 자식에서 특정한 함수, 또는 조건시에서 부모컴포넌트로 값을 전달하는 방법은 어떻게 할까? 부모에서는 받을 수 있는 방법은 없지만 함수를 자식에게 전달하고 그 함수를 조작하는 것으로 자식에서 부모의 값을 컨트롤 할 수 있다. 부모 컴포넌트에서 함수를 설정한다. setState는 리액트 분기중 화면에 값들이 렌더링 된후 setState를.. SSR , CSR 읽어볼만한 거 d2.naver.com/helloworld/7804182 css관련 읽어볼만한 속성 wit.nts-corp.com/2017/09/25/4903 CSS에 대한 깊은 이해: 폰트 매트릭스, line-height와 vertical-align | WIT블로그 원문: http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align 본 번역문은 원작자인 Vincent De Oliveira의 동의하에 번역 및 게시되었습니다. line-height와 vertical-align은 아주 간단한 CSS 속성들입니 wit.nts-corp.com React : 다양한 프로퍼티 사용 React에서는 프로퍼티를 이용해서 상위 콤포넌트에서 하위콤퍼넌트로 값을 전달한다. 이대 다양한 자료구조를 사용하는데 prop-types라는 리액트 라이브러리를 이용해서 변수를 설정할 수 있다. import React, { Component } from 'react'; import PropTypes from 'prop-types'; class ChildComponent extends Component { render() { const { boolValue, numValue, arrayValue, objValue, nodeValue, funcValue, }=this.props; return ( 불리언값: {boolValue} 숫자값: {numValue} 배열값: {arrayValue} 객첵밧: {objVa.. gulp watch 동작안할 때. gulp 4.0을 쓰면서 문법이 대대적으로 변경되었다. 기존 gulp.task 함수를 불러오기위해서 ['ssas'] 처럼 사용하던 문법이 gulp.series(['sass'])로 변경. 내가 할려던 것은 browser-sync와 gulp.watch를 동시에 실행시키는 것이였는데 browser-sync만 동작되고 watch는 실행되지 않았다. 기존 코드 var browserSync = require('browser-sync'); gulp.task('browser-sync', function () { browserSync.init({ server: { baseDir: "./src", } }); }); gulp.task('watch', gulp.series(['browser-sync']), function (.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 26 다음
