Ideveloper's software blog

ETC:컨트리뷰톤 크로미움 오프라인 세미나 모임 정리 (고병권, 방진호 멘토님) 1. Let’s get to be familiar chromium (고병권 멘토님) | git 명령어 관련 Git new-branch ‘branch-name’ => 크로미움 프로젝트에서만 있는 명령어 (권장) create new branchswitch to new branchset upstream브랜치당 cl 하나 Git checkout -b ‘branch-name’ 위와같이 체크아웃으로 그냥 브랜치를 만들면 업스트림이 없음)업스트림: 리모트 서버와 연결이 되어있느냐 없느냐 Git rebase-update 리베이스 하고 동일한 브랜치 삭제까지 해줌이걸 쓰는 사람들은 git new branch로 했을때만 사용안그러면 다삭제 될..

ES6:reduce에서 array of object의 합 구할때 주의사항 (get sum of array of object) | 시작하기에 앞서js에서 loop를 돌며 array안에있는 object의 합을 구할때 reduce를 자주 쓰는데 자주 하는 실수가 있다. (나만 한건 아닐거다.. 아마)어떤 실수인지 아래에서 살펴보자!| 설명 > 잘못된 코드 (wrong code) const sum = reviewScores.reduce(function(prev, next) { return prev.score * prev.count + next.score * next.count; }); https://stackoverflow.com/questions/5732043/javascript-reduce-on-array-..

React:svg 파일 컴포넌트로 만들어서 스타일링 하기 | 시작하기에 앞서 리액트로 개발을 하다보면, svg파일을 좀더 확장성 있게 사용하기 위해 부모컴포넌트에서 받아온 props에 따라 조건부 렌더링 (ex: 다른 배경색)을 해주고 싶을때가 있다. 각각의 svg파일을 색만 다를 뿐인데 파일을 여러개 만들어 import하면 비효율적이기 떄문이다. 따라서 아래와 같이 확장성 있게, svg 컴포넌트를 만들어 배경색만 props에 따라 바꿔주면 디자인 리소스도 줄어들게 될것이다. (ex) svg 파일을 넘어온 props에 따라서, 배경색이 다르게 보여주고 싶을때 | 해결방법 그럴때는 간단히 svg파일을 리액트 컴포넌트로 export 해주기만 하면 되고, 이러한 컴포넌트를 import 하고, 이 컴포넌트에 클..

일상:리액트를 다루는 기술 (책 리뷰) | 책 리뷰에 앞서 책 저자 velopert님의 블로그https://velopert.com/ 저는 처음 한 스타트업에 입사하여, 리액트를 시작하게 되었고, 개발 입문시기에(아직도 입문이지만 ㅎㅎ) velopert님의 블로그 를 통해 간단한 예제들을 따라해 보며 이렇게 제작해본 예제를 조금씩 바꿔 사내 토이프로젝트를 진행해보기도 하고, 본인의 사이드 프로젝트도 조금씩 이를 활용하여 개발하는 식으로 도움을 얻어가며 개발을 해나갔었습니다. 실무에서 사용되는 리액트에서 쓰이는 스타일링, 또 리액트 자체로는 많은 한계가 있기에 이와 연계한 여러 미들웨어들을 사용하는 예제, 그리고 어떻게 api를 연동하는지 등등, 리액트를 개발하면서 막히는 부분이 있으면, 항상 찾아갔던 곳이..

FrontendSkills :loader | css 파일 - css loadercss를 import하면 더 편하게 관리컴포넌트 단위개발 시작, js,css 등등의 파일을 컴포넌트 단위로 모아서 개발하기 시작함 -> 통째로 import 하면 재사용성 증가 따라서 웹팩은 css를 import하자!라는 결론 (loader를 통해 css를 분석해서 js화, import 결과물이 js의 형태로 나옴) -> 로더의 역할 이기도 함. https://webpack.js.org/loaders/css-loader/#usage 참고 > css-loader적용시 file import 1.import css from './Hello.css'; 2.import './Hello.css'; loader안에 여러개 쓰면 배열, 하나만..

Web :haml이란? | 시작하기에 앞서 haml을 봐야 할 일이 생겨 간략히 haml에 대해 정리해본다. | haml이란 html preprocessor중하나이다! (조사하는 도중 html preprocessor라는 개념에 대해서도 알게됬고, haml 말고도, markdown jade, slim 등이 있다는 것도 알게 됬다.. 싱기방기 ) 1) HAML ( HTML Abstraction Markup Language ) - Ruby 프레임워크의 일부로 사용 2) Markdown - 경량 마크업 언어. 지원하는 에디터를 통해 쉽고 빠르게 시각적인 효과를 줄 수 있다. 3) Slim - Ruby의 HTML 템플릿 엔진. 4) Jade - JavaScript의 Node.js로 구현 된 템플릿 엔진. 5) E..

FrontEnd Skillsmobx 사용시 Decorating class property failed.~~ 에러 뜰때 해결방법 | 시작하기에 앞서 mobx 사용시, Error: Decorating class property failed. Please ensure that transform-class-properties is enabled. 와같은 에러가 뜰때 가있다. | 해결방법yarn add transform-class-propertiesbabelrc 파일 plugin 부분에 "transform-class-properties" 추가 { "presets": [ "next/babel" ], "plugins": [ "transform-decorators-legacy","transform-class-prope..

ETC:vscode 에서 experimentalDecorators warning 와 같은 에러 뜰때 해결방법 | 시작하기에 앞서 mobx를 사용하다보면 위와 같은 decorator 문법을 쓸때가 많은데, 그때 vscode에서는 에러가 뜬다. 이를 해결하는 방법은 아래와 같다. | 해결방법 root 폴더에 tsconfig.json 파일을 만들어 아래와 같은 코드를 넣으면 해결된다. { "compilerOptions": { "experimentalDecorators": true, "allowJs": true }}