soso-tip

soso-tip copied to clipboard

Flex를 사용해도 되고, transform을 사용해도 된다. ## transform ```css .parent{ 　position:relative; } .child{ 　position:absolute; 　top:50%; 　left:50%; 　transform: translate(-50%,-50%); 　background-color:#666; } ```

SoYoung210

## Description GitHub을 이용해서 npm package를 관리할 수 있는 기능이 오픈되었다. (2019.12.2 기준 아직 Beta) 이 과정에서 몇 가지 알게 된점과 삽질기는 다음과 같다. ### cli를 사용할 수 있는 이유...

SoYoung210

## 📘 Desc eslint 설정으로 코딩 Formatting을 자동화 하고, 이를 **저장할때마다 자동으로 고쳐주는** 셋팅이다. CRA를 기반으로 설정할때에는 dependency들이 기본으로 설치되어 있는데, CRA없이 직접 셋팅하는 경우에는 plugin이나 config를 하나하나 잡아주어야 한다....

SoYoung210

## Desc eslint설정 파일이 폴더의 root가 아니라 특정 폴더에 있는 경우 `workingDirectories` 를 명시해주어야 한다. ```js "eslint.workingDirectories": ["./client"], ``` ### Plus, Autofix 설정 auto fix를 적용한 전체 vscode설정은 이렇다. ```js...

SoYoung210

css만으로 반응하는(?) ui만든 예시모음 https://dev.to/adrianbdesigns/you-can-create-these-elements-without-javascript-525a

SoYoung210

 모든 타입을 잘 맞춰주었음에도.. 위와같은 에러가 나는 경우가 있다. 이때 `tsconfig.json` 에서 `allowJS: true` 설정시 삭제해주면 된다. > JS 파일을 app.tsx에서 해석되지 않도록 함. (썩 좋은 방법은 아닌것 같지만,...

SoYoung210

## Desc 이미지 `onLoad` 를 통해 이미지 로드가 완료된 시점에 필요한 작업들을 수행할 수 있지만, 이를 조금더 효율적으로 관리할 수 있다. ```jsx componentDidMount() { const img = new Image(); img.src...

SoYoung210

## Desc 웹팩 셋팅할때 꽤 좋았던 점들 ### CSS path name ``` { test: /\.s?css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1, modules: true, localIdentName: '[path]_[local]', sourceMap:...

SoYoung210

Code splitting mistake

1

## Desc `vendor.bundle.js` , `app.bundle.js` 로 파일이 분리되었는데, 이 부분을 놓쳐서 브라우저에서 동작하지 않았다. express와 pug파일을 이용해서 그리는 부분인데, pug파일에 script를 명시적으로 추가해주어야 한다.

SoYoung210

## Desc [CRA Issue Rise](https://github.com/facebook/create-react-app/issues/7657) ~~현재는 닫힌 상태이다.~~ Create React App 으로 프로젝트를 생성하고, [craco](https://github.com/sharegate/craco) 를 이용해서 post css 설정을 잡아주어도 여전히 `.pcss` 를 불러올 수 없는 문제가 있다. >...

SoYoung210