Record

1. CSS-in-JS 간단하게 말하자면 Javascript 코드에서 CSS를 작성하는 방식 2. CSS-in-JS 라이브러리 중, styled-components 설치 npm i styled-components - emotion 등등.. 2-1) styled-components용 babel 플러그인 및 preset 설치 npm i --save-dev babel-plugin-styled-components npm i babel-preset-next 2-2) 프로젝트 루트 폴더 바로 밑에 .babelrc 파일 생성하여 플러그인 활성화 { "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] } https://github..

import css from "styled-jsx/css"; import { NextPage } from 'next' interface Props { data: object } const Table:NextPage = (data) => { const style = css` // 스타일 객체 생성 .table_wrap { width: 100%; max-width: 800px; height: auto; max-height: 500px; overflow-y: auto; margin-bottom: 50px; } .table_wrap::-webkit-scrollbar { width: 8px; } .table_wrap::-webkit-scrollbar-thumb { background-color: #dee2e6; ..

The method get(String) is undefined for the type Object The method getJSONObject(String) is undefined for the type JSONObject​ JSP에서 다국어 지원을 해야하는 상황이 생겨서 json 파일을 파싱하여 화면에 맞게 데이터를 출력하려고 했는데 위와 같은 비슷한 에러들(찾는 데이터가 undefined, 즉 데이터를 찾을 수 없다는..)이 계속 떴다. // lang.en.json { "content":{ "example":"???", "example-array": { "text": [ "text1", "text2" ] } } } 뭐 json 파일도 고쳐보고 getJSONObject, getAsString 등 써봤..

eject는 아직 git에 commit이 되지 않은 변화가 있다면 진행되지 않기 때문에 먼저 변경 사항을 커밋한 후, eject을 실행해주어야한다. git add . git commit -m "Commit before npm run eject" npm run eject Are you sure you want to eject? This action is permanent. » (y/N) y customizing 등 가능 webpack.config.js sassRegex 수정하면 @import 'utils.scss'; 이런식으로 사용 가능 https://xtring-dev.tistory.com/55 https://stackoverflow.com/questions/48854585/error-with-run-n..

1. 설치 1. node 설치 후 확인 node -v npm -v 2. npm을 이용해 sass 설치 npm install -g sass 3. sass 설치 확인 npm show sass version 2. 사용법 // example.scss // 1. 변수 선언, 변수 사용 가능 $white: #fffffff; $colors: ( red: #e03131, orange: #ff922b, yellow: #ffd43b, green: #69db7c, blue: #74c0fc, indigo: #3b5bdb, purple: #7048e8, gray: #ced4da ); .example-btn { background-color: $white; } // 2. 중첩 기능을 이용하여 편리하게 사용 가능 .btn { pa..

여러 사람과 협업할 때 코드 스타일 통일 프로젝트 루트 디렉터리(src, public)에 .prettierrc 파일 추가 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 수동 코드 정리 단축키 VsCode F1 - format - prettier 자동 코드 정리 VsCode 설정 - format on save 체크

만약 자신이 잘못한 일이라면 잘못을 인정하고 진심으로 반성하고 같은 실수를 반복하지 않으려 노력하면 되지만 지금 헛소문으로 인해 힘들어하고 있다면 소문에 대해서 내가 작게나마 해주고 싶은 말이 있다. 주변 친구들에게 두 세 번정도는 해명한 뒤, 내 이야기를 가볍게 하는 사람들을 멀리 뒤로하고 그저 꾸준하고 묵묵히 내 일을 계속해 나가면 된다고. 물론 자신이 받은 피해의 크기에 따라 대처해야하는 방식은 다르게 해야한다고 생각하지만(명예훼손으로 고소 등) 그런게 아니라면 위와 같은 방법이 좋다고 생각한다. 저들에게는 딱 그 정도의 관심만 주면 된다. 그 때도 왜인지 무의식적으로는 알고 있었지만 시간이 한참 지나고나니 내 생각이 더 확실하다고 느낀다. 어차피 그 사람들은 그 사람을 직접 겪어볼 때까진 절대 모..

1. map이란 Javascript 배열 객체 내장 함수인 map을 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성합니다. 2. map 사용법 var numbers = [1, 2, 3, 4, 5]; var processed = numbers.map(function(num) { return num * num; }); 1) 실제로 적용 const Example = () => { const imgSrc = ["images/example.png", "images/example2.png"]; const imgAlt = ["example.png", "example2.png"]; ret..

1. Prettier Prettier를 사용하여 자동으로 코드 정리를 하면 코드가 깔끔하게 정렬됩니다. 세미콜론이 빠진 곳에는 세미콜론이 자동으로 추가되고, 작은따옴표/큰따옴표/탭 간격 등을 설정할 수 있습니다. 이는 협업을 하는 과정/규칙을 정하는데 있어 많은 도움이 됩니다. 2. 설치 먼저 VSCode에 prettier 확장 프로그램을 검색하여 설치합니다. 3. 설정 File - Preferences - Settings 에 들어간 후에 { ... /* Prettier 정의 */ "prettier.printWidth": 200, /* 줄바꿈 하여 보여줄 길이 지정 */ "prettier.tabWidth": 2, /* 탭 간격, 공백 수 */ } 위 아이콘 모양을 누르면 setting.json 파일이 열..

Beautify Live Sass Compiler Live Server Path Intellisense Prettier indent-rainbow auto rename tag color highlight highlight matching tag : 매칭되는 태그 강조 bracket pair colorizer React-Native/React/Redux snippets for es6/es7 - Themes https://www.freakyjolly.com/top-and-best-vs-visual-studio-code-themes/ Github Theme Dracula Official CRT Themes Dracula Official Panda Theme SynthWave '84 Synthwave x Flu..