킹바구니

class 이름을 그냥 쓰거나, 변수로 넣거나, 조건을 걸거나 하는 경우가 있는데 헷갈려서 정리를 해보았음. 추가될 수 있음 1. 기본 그냥 html에 대놓고 쓴다면 쌍따옴표 안에 써주면 된다. 2. 변수 변수라면 중괄호 안에 써주면 된다. 나같은 경우 module.scss를 style이라는 이름으로 import했기에 className에 { style.container } 이렇게 써줌. 3. 기본 + 변수 조합버전은 중괄호 안에 백틱을 넣고 변수는 달러중괄호를 써서 써주면 된다. 아니면 조건문같은 경우 이런 방법도 있다. + 좀 더 고차원적인 방법 const classProperties = { "main-class": true, // 일반 string인 경우 styles: true, // 변수인 경우 }..

next.js에 손을 조금 대보기로 했다. 그런 의미에서 기본적인 설치부터 scss 및 폰트 적용하는 방법까지 정리하겠음. 1. 설치 npx create-next-app@latest 터미널에 입력하면 폴더 이름 뭘로 할건지, 타입스크립트 쓸껀지 물어보는데 알아서 선택해서 엔터엔터해주면 된다. 2. 실행 npm run dev 3000번으로 실행이 된다. 3. scss 설정 npm install --save-dev sass 깔아주고 그냥 scss파일 하나 만들어서 쓰고 해당 컴포넌트에 가서 import해서 써주면 된다. 3-1. 여러 scss 파일을 하나로 설정 및 공통 css로 만들기 하지만 보통 공통 css가 있기때문에 적용하는 방법을 설명해보자면, 기본적으로 생성되어있는 styles 폴더에 각종 scs..

Message compilation error: Invalid linked format Message compilation error: Unexpected lexical analysis in token Message compilation error: Unexpected empty linked key 이런 메세지들이 뜨면서 안되기 시작했는데 알고보니 특수문자는 별도로 처리를 해줬어야했음. 1. 특수문자 앞뒤로 {''} 붙여주기 // 틀림 const string = "특수문자 !,@,#,$를 넣어주세요."; // 맞음 const string = "특수문자 {'!'},{'@'},{'#'},{'$'}를 넣어주세요."; 이렇게 해주면 되는데 꼭 따옴표(쌍따옴표 말고)로 써야함! https://github.com/..

vuex에서 getters, mutations를 작성한 후 각종 파일에서 store 변수를 활용하여 써놓은 함수를 불러오는데, 만약 위와 같은 에러가 나타난다면 두가지를 확인해봐야함. 1. namespaced 유무 const state = { // ... } const actions = { // ... } export default { namespaced: true, // 여기 state, actions } 2. 모듈화 되어있다면 이름을 써주었는지 확인 // index.js import user from "./user.js"; export default createStore({ modules: { // 이런식으로 모듈화 되어있다면 user, } }); // user.js const states = { n..

예전에 외주업체에서 퍼블파일을 받았는데 아무리 기다려도 안열리고 그나마 live server와 같은 vscode 익스텐션으로 여니까 좀 떴던 적이 있었는데 이유는 1. 파일 내 태그 및 스크립트 확인 안녕하세요 제목 3번은 앞에 https:붙여줘야함. 아니 진짜 본인들 작업하면서 못느끼나....

가끔 작업하다보면 focus가 어디에 있는지 확인해야할때가 있는데 이럴때 브라우저에서 제공하는 기능이 있음. 1. f12 - console - 눈모양 아이콘 클릭 document.activeElement 그리고 이렇게 그냥 써주면 된다. 이건 엣지인데 어느 브라우저든 된다!

api를 날려서 데이터를 return받는 함수를 만들었고 이 함수의 실행값(=데이터)를 변수로 받으려했는데 자꾸 저렇게 뜬다면 await를 썼나 확인해주면 된다. 1. await 확인 const setInfo = async () => { const data = await getInfo(); // await 썼나 확인 }

다른건 없고 css로 제어하는 것이 방법. 1. css 만들기 .ell { .ag-cell-wrapper { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } css가 길어서 일부러 클래스로 따로 만들어서 적용하기로 함. 참고로 ag-grid에서 글이 .ag-cell-wrapper > span에 있길래 한번 더 저렇게 자세하게 써줌. 2. 클래스 붙여주기 columnDefs: [ { headerName: "댓글 내용", field: "replyText", cellClass: ["left", "ell"], // 클래스 추가 }, ] 그러면 이..

vscode가 메인이라 이클립스는 잘 안쓰는데 요새 조금 볼일이 있어 자주 들리다보니 폰트가 영 마음에 안들어서 이것저것 깔아보다가 한번 정리해야지 싶어서 정리함. 캡쳐처럼 기본경로에 들어간 다음 해당 폴더([basic])에 있는 메뉴명(text font)를 더블클릭해서 설정하면 된다. 1. 기본 경로 window - prefencse - general - appearance - colors and fonts 이곳에서 화면에 있는 폰트를 수정함. 2. 설정창 간략 소개 메뉴 검색은 [이름 검색창]이라고 되어있는 부분에서 하면 된다. 폰트 변경 후 apply를 눌러주고나서 한번 쭉 보고 마음에 안들면 reset을 눌러 초기화해주면 된다. + xml 폰트 변경 얘는 똑같이 기본경로에 들어가서 structur..

vscode 익스텐션중 하나인 prettier는 코드를 가독성 좋게 정렬해주는 기능을 가지고 있는데, 기본값 그대로 쓰면 캡쳐와 같은 사단이 벌어지게 됨. 길어도 한줄로 나왔으면 한다면 이렇게 설정해주면 됨. 일단 설정창(컨트롤+쉼표해서 prettier검색)에서 설정하는 방법과 옵션값으로 설정하는 방법이 있는데, 설정창에서 아래와 같이 설정해도 전혀 안먹혀서 방법이 없는줄 알았는데 옵션으로 설정하면 되더라. [옵션값으로 설정] 1. .prettierrc 이라는 파일을 폴더 내에 생성 일할때는 이것만 빼고 커밋하면 된다. 2. 옵션값에 이렇게 설정 { "printWidth": 3000 } 한줄로 정렬이 되서 아주 좋다. 인터넷에 prettier 설정 이라고 치면 정리가 잘된 포스팅이 나오기때문에 참고하면 ..