언어(JS,TS) (64) 썸네일형 리스트형 CSS [Styled-Component : 가상셀렉터(::before content)동적변환 ] 결론 : content 요소는 따옴표(')로 감싸져있어야 함 상황 : styled-component에서 가상 셀렉터 ::before의 content를 동적으로 변환 시키려고 하였는데 되지 않았다 React Component const Test = (props) => { return ( {props.children} ); }; Styled Component(Not Work) const Text = styled.span` &:before { content: ${props => { console.log(props.before); // I see '12345' in log. return props.before; } } `; Styled Component(This works fine) const Text = st.. TS [코드 : 오늘 날짜 or 이전 날짜 구하는 코드 (getSomeDayDateStr) ] const getSomeDayDateStr = (beforeDay: number = 0) => { let today = new Date(); if (beforeDay != 0) { today.setDate(today.getDate() - beforeDay); } let year = today.getFullYear(); // 년도 let month = String(today.getMonth() + 1); // 월 let date = String(today.getDate()); // 날짜 // let day = today.getDay(); // 요일 if (month.length === 1) { month = "0" + month; } if (date.length === 1) { date = "0" + da.. JavaScript [궁금증 : .forEach, .map and .reduce vs for and for..of (속도나 효율비교)] 결론 return 값이 있으면 map을 사용하고 없으면 forEach를 사용하는 것이 기능적으로 조금더 좋아보이고 기능을 빼더라도 의미론적으로 좀 더 좋은 것 같음 https://leanylabs.com/blog/js-forEach-map-reduce-vs-for-for_of/ Performance of JavaScript .forEach, .map and .reduce vs for and for..of Declarative programming is better 95% of the time. However, when performance matters, imperative style is the go-to solution. leanylabs.com https://medium.com/web-develop.. 정보 [ 데이터 양식 : XML, JSON, YAML ] 개발을 하다보면 JSON형식으로 파일을 자주 주고 받았는데 JSON이 정확히 어떨때에 사용이되고 왜 사용이 되는지 그리고 다른 방법으로 데이터를 보낼 수는 없는지 궁금해져서 찾아보았다. 본문 JSON, XML, YAML은 기본적으로 프로그램 상에서 전달되는 데이터의 한 양식이다. 데이터를 전달할 때는 기본적으로 쭉 연결되는 text의 형태이기 때문에 구조회된 정보를 보내기 위해서 사용된다. 예를 들어 지도 앱을 사용한다고 하면, 특정 위도와 적도 주소를 서버에 보내면, 서버는 해당 장소의 주소와, 로드뷰, 주변 정보들을 어떠한 양식으로 정리해서 보내줄 것이다. 정보의 양식이 JSON이 될 수도 있고, XML이 될 수도 있는 것이다. XML XML은 형식을 사용한다. 마치 index.html에서 사용되는 .. JavaScript [ ES6 : 이터레이터(iterator)와 제너레이터(generator) ] ES6에서 도입된 이터레이터(iterator)와 제너레이터(generator)는 알고는 있었지만 실제 개발할 땐 거의 사용하지 않았던 것 같다. 그래서 이번 기회에 한번 정리해 보았다. 본문 1. 이터레이터란? 이터레이터는 반복을 위해 설계된 특정 인터페이스가 있는 객체 MDN에서는 '시퀀스를 정의하고 종료시의 반환값을 잠재적으로 정의하는 객체'라고 되어 있다. 두 개의 속성 {value, done}을 반환하고, next 메서드를 가진다. Array.prototype.values() 사용시 배열의 각 인덱스에 대한 값을 가지는 새로운 Array Iterator 객체를 반환하여 이터레이터를 만들 수 있다. const book = [ 'a', 'b', 'c', 'd', ]; const it = book.va.. JavaScript [ 정보 : tc39/proposals Stage 란? ] 어느날 데코레이터에 대해서 궁금해서 찾아보다가 데코레이터가 tc39/proposals stage 3에 있다는 정보를 찾았다. 그래서 각 스테이지별로 무엇을 나타내는 건지 궁금해서 찾아보았다. 내용 0단계 : ECMAScript에 대한 아이디어 자유 형식 제출 단계 1단계 : 문제를 설명하고 적절한 솔루션을 제안하는 공식적인 제안 단계 2단계 : 제안 사양의 초기 초안 단계 3단계 : 거의 최종 단계이지만 마지막 피드백을 받을 준비가 된 초안 단계 4단계 : 제안 사양이 완전히 준비되어 다음 에디션에 포함될 예정 단계 결론 즉 ECMAScript 문법에 보함될 단계이다. 데코레이터는 stage 3이므로 문법에 포함되지는 않지만 포함될 가능성이 높다는 말이다. Reference https://tc39.es/.. JavaScript [파일 : package.json vs package.lock.json] package-lock.json이 필요한 이유 전에는 이런것이 있구나 하고 대충만 알고 넘겼는데 이번 기회에 package-lock.json 파일이 왜 생겼는지 찾아 보았습니다. package-lock.json 파일이란? package-lock.json 파일은 npm을 사용해서 node_modules 트리나 package.json 파일을 수정하게 되면 자동으로 생성되는 파일입니다. 이 파일은 파일이 생성되는 시점의 의존성 트리에 대한 정확한 정보를 가지고 있습니다. 예시코드 { "name": "typeclient", "version": "0.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "typeclient", "ver.. JavaScript [스코프 : 함수스코프 vs 블록스코프] 스코프(scope) 변수에 접근할 수 있는 범위 전역 스코프(global)는 어디에서든 해당 변수에 접근 가능한 걸 의미한다. (전역변수) 지역 스코프(local)의 경우, 한정적인 범위에서 해당 변수에 접근이 가능하다. (지역변수) 지역 스코프에는 함수 스코프와 블록 스코프가 있음 변수에 접근할 수 있는 범위 컨텍스트(context) this 키워드 값이 무엇인지를 나타내는 용어 현재 실행 컨텍스트 내에서 어떤 객체를 참조하고 있는지를 의마한다. 컨텍스트는 객체를 기반으로 한 용어이다. # 함수스코프 자바스크립트는 기본적으로 함수 스코프를 따르는 언어 새로운 함수가 생성될때마다 새로운 스코프 형성 - 함수 안에 선언한 변수는 해당 함수 안에서만 접근할 수 있음 if(ture) { var variable.. 이전 1 2 3 4 5 ··· 8 다음