분류 전체보기 249

[react] className 쓰는 법(총정리)

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

react 2023.05.04

[next.js] 설치, 실행, scss 설정하기, public 경로 설정

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..

라이브러리 2023.05.02

vue-i18n 특수문자 에러

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/..

vue 2023.04.28

[vue] [vuex] unknown mutation type

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..

vue 2023.04.25

[ag-grid] ... 밑줄임 사용하기

다른건 없고 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"], // 클래스 추가 }, ] 그러면 이..

라이브러리 2023.04.19

이클립스 폰트 설정 정리(+개발 폰트 추천)

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

백엔드 2023.04.14

[prettier] html 태그 한줄로 쓰기

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

라이브러리 2023.03.30