Frontend
-
tailwind theme에 색상을 지정해줬는데 적용이 안될 때 해결하는 방법 text-어떤색상 이렇게 적용하고 싶었는데 화면에 적용이 안된다. tailwind.config.js에 추가 설정을 해주어야한다.safelist: [ { pattern: /^text-|^bg-|^border-/, // You can display all the colors that you need }, ],
tailwind custom color가 적용이 안될때tailwind theme에 색상을 지정해줬는데 적용이 안될 때 해결하는 방법 text-어떤색상 이렇게 적용하고 싶었는데 화면에 적용이 안된다. tailwind.config.js에 추가 설정을 해주어야한다.safelist: [ { pattern: /^text-|^bg-|^border-/, // You can display all the colors that you need }, ],
2024.05.13 -
Vite로 리액트 프로젝트를 진행하다가 빨간 줄이 거슬려서 해결 방법을 찾아 봤다. eslint에서 나는 에러이다..eslintrc.json 또는 .eslintrc.cjs 페이지 중 한곳rules에 "react/prop-types": "off" 이 조건을 추가해주면 된다. rules : { "react/prop-types": "off"}
[eslint] react/prop-types, missing in props validationVite로 리액트 프로젝트를 진행하다가 빨간 줄이 거슬려서 해결 방법을 찾아 봤다. eslint에서 나는 에러이다..eslintrc.json 또는 .eslintrc.cjs 페이지 중 한곳rules에 "react/prop-types": "off" 이 조건을 추가해주면 된다. rules : { "react/prop-types": "off"}
2024.05.13 -
네이버 스마트 에디터가 생각보다 좋아서 리액트에 적용하고 싶은데... 네이버 스마트 에디터는 npm으로 설치가 불가한 것 같다. 그래서 생각해 낸 방법이 public 폴더에 에디터 html 을 만들고 그 html 파일을 컴포넌트 iframe에 넣어서 가져오는 방식이다!! 해봤더니 잘돼서 공유한다. https://github.com/naver/smarteditor2/releases Releases · naver/smarteditor2 Javascript WYSIWYG HTML editor. Contribute to naver/smarteditor2 development by creating an account on GitHub. github.com smarteditor2를 받아준다. 나는 표시한 파일을 받..
React에 네이버 SmartEditor2 적용하기네이버 스마트 에디터가 생각보다 좋아서 리액트에 적용하고 싶은데... 네이버 스마트 에디터는 npm으로 설치가 불가한 것 같다. 그래서 생각해 낸 방법이 public 폴더에 에디터 html 을 만들고 그 html 파일을 컴포넌트 iframe에 넣어서 가져오는 방식이다!! 해봤더니 잘돼서 공유한다. https://github.com/naver/smarteditor2/releases Releases · naver/smarteditor2 Javascript WYSIWYG HTML editor. Contribute to naver/smarteditor2 development by creating an account on GitHub. github.com smarteditor2를 받아준다. 나는 표시한 파일을 받..
2024.03.16 -
React에 CKEditor5을 적용하는데 설명이 너무 없는 것 같다... (내가 문서를 잘 이해 못하는 것일수도...) npm으로 CKEditor를 설치하게 되면 안깔린 플러그인들은 또 별도로 설치해줘야하는데 그렇게 하면 중복? 되었다는 에러가 계속난다... 그래서 찾은 방법이 CKEditor 홈페이지에 내가 필요한 플러그인들을 넣고 파일을 다운로드해서 프로젝트에 적용하는 것이다. 에디터 타입은 클래식으로 선택했다. UI 보고 원하는 것 선택하면 될듯!!! 필요한 플러그인들을 ADD 해준다. PREMIUM 뱃지가 붙은건 넣지말자! 아래 처럼 나중에 돈든다고 나온다... 30일만 사용가능하게된다. 나는 왠만한 플러그인들을 다 넣어줄 것이다!! 내가 추가한 플러그인들이다! 툴바에 보여졌으면 하는 플러그인들..
React에 CKEditor5 적용하기 (Online Builder)React에 CKEditor5을 적용하는데 설명이 너무 없는 것 같다... (내가 문서를 잘 이해 못하는 것일수도...) npm으로 CKEditor를 설치하게 되면 안깔린 플러그인들은 또 별도로 설치해줘야하는데 그렇게 하면 중복? 되었다는 에러가 계속난다... 그래서 찾은 방법이 CKEditor 홈페이지에 내가 필요한 플러그인들을 넣고 파일을 다운로드해서 프로젝트에 적용하는 것이다. 에디터 타입은 클래식으로 선택했다. UI 보고 원하는 것 선택하면 될듯!!! 필요한 플러그인들을 ADD 해준다. PREMIUM 뱃지가 붙은건 넣지말자! 아래 처럼 나중에 돈든다고 나온다... 30일만 사용가능하게된다. 나는 왠만한 플러그인들을 다 넣어줄 것이다!! 내가 추가한 플러그인들이다! 툴바에 보여졌으면 하는 플러그인들..
2024.03.15 -
분명 tsconfig.paths.json에 alias를 설정했는데 경로가 상대경로로 잡힌다. "typescript.preferences.importModuleSpecifier": "relative", vscode setting.json에 저 값이 relative로 되어있어서 그랬다. "typescript.preferences.importModuleSpecifier": "non-relative", non-relative로 바꿔준다. settings에서 바꿔줘도 된다.
react에서 alias가 상대경로로 지정 될 경우분명 tsconfig.paths.json에 alias를 설정했는데 경로가 상대경로로 잡힌다. "typescript.preferences.importModuleSpecifier": "relative", vscode setting.json에 저 값이 relative로 되어있어서 그랬다. "typescript.preferences.importModuleSpecifier": "non-relative", non-relative로 바꿔준다. settings에서 바꿔줘도 된다.
2024.01.15 -
✏️ context context는 전역적으로 데이터를 관리할 수 있게 도와 줄 수 있는 리액트 Hook 부모 -> 자식 -> 손자 이런 구조로 되어있고, 부모에서 손자까지 데이터를 공유하고 싶은면 항상 차례대로 데이터를 전달해 줘야했는데 context를 사용하면 바로 부모 -> 손자로 넘겨줄 수 있다. 🔥 주의점 다양한 레벨에 네스팅된 많은 컴포넌트들에게 데이터를 전달하는 용도 context를 사용하면 컴포넌트를 재사용하기 어려워진다. context 또는 컴포넌트 합성 둘 중에 더 상황에 맞는 것을 이용하도록! 나는 작업할 때 context 폴더를 만들어서 context를 관리하는 편! 응집도는 높이고, 결합도는 낮추기 위해 context 관련 소스는 해당 폴더, 해당 파일 안에서 관리하는 것이 좋은 ..
리액트 context 사용하는 방법✏️ context context는 전역적으로 데이터를 관리할 수 있게 도와 줄 수 있는 리액트 Hook 부모 -> 자식 -> 손자 이런 구조로 되어있고, 부모에서 손자까지 데이터를 공유하고 싶은면 항상 차례대로 데이터를 전달해 줘야했는데 context를 사용하면 바로 부모 -> 손자로 넘겨줄 수 있다. 🔥 주의점 다양한 레벨에 네스팅된 많은 컴포넌트들에게 데이터를 전달하는 용도 context를 사용하면 컴포넌트를 재사용하기 어려워진다. context 또는 컴포넌트 합성 둘 중에 더 상황에 맞는 것을 이용하도록! 나는 작업할 때 context 폴더를 만들어서 context를 관리하는 편! 응집도는 높이고, 결합도는 낮추기 위해 context 관련 소스는 해당 폴더, 해당 파일 안에서 관리하는 것이 좋은 ..
2024.01.06 -
구글 앱 비밀번호 생성하는 방법 구글 계정관리 보안 -> 2단계 인증 앱 비밀번호 젤 밑으로 스크롤 내리면 앱비밀번호라고 있다. App name에 아무 이름이나 작성해준다. (그냥 구분용) 만들기 클릭하면 앱 비밀번호가 나온다 바로 ctrl + c 해서 메모장에 작성해놓자!! 확인 누르면 다신 볼 수 없는 것 같다. 중간에 띄어쓰기가 들어가 있는데 .env 파일에 작성할 때는 띄어쓰기는 모두 붙이면 된다. 끝이다!
구글 앱 비밀번호 생성하는 방법구글 앱 비밀번호 생성하는 방법 구글 계정관리 보안 -> 2단계 인증 앱 비밀번호 젤 밑으로 스크롤 내리면 앱비밀번호라고 있다. App name에 아무 이름이나 작성해준다. (그냥 구분용) 만들기 클릭하면 앱 비밀번호가 나온다 바로 ctrl + c 해서 메모장에 작성해놓자!! 확인 누르면 다신 볼 수 없는 것 같다. 중간에 띄어쓰기가 들어가 있는데 .env 파일에 작성할 때는 띄어쓰기는 모두 붙이면 된다. 끝이다!
2024.01.03 -
nvm 사용법 nvm ls-remote - node 버전들 다 모아놓은 목록 nvm ls 설치된 node.js 목록 확인 nvm install 버전이름 nvm install 10.16.3 nvm install 10 => 10.X 전부 nvm install --lts => lts 최신버전 nvm use 버전이름 nvm current - 현재 사용중인 버전 확인 nvm uninstall 버전명 - 필요없는 node 버전 삭제 nvm alias default node - 설치되어 있는 가장 최신버전의 node를 디폴트로 사용 nvm alias default 10.16.3 which node - node.js 설치 경로 확인 nvm -v nvm version nvm list available - 사용가능한 no..
nvm 명령어nvm 사용법 nvm ls-remote - node 버전들 다 모아놓은 목록 nvm ls 설치된 node.js 목록 확인 nvm install 버전이름 nvm install 10.16.3 nvm install 10 => 10.X 전부 nvm install --lts => lts 최신버전 nvm use 버전이름 nvm current - 현재 사용중인 버전 확인 nvm uninstall 버전명 - 필요없는 node 버전 삭제 nvm alias default node - 설치되어 있는 가장 최신버전의 node를 디폴트로 사용 nvm alias default 10.16.3 which node - node.js 설치 경로 확인 nvm -v nvm version nvm list available - 사용가능한 no..
2023.12.22 -
Form Submit하는건 프론트엔드 하면서 많이 하는 일 중에 하나일 것이다. 일단 Form Submit하는 방식은 여러가지가 있는데 내가 아는 것만 적자면... 1. form태그 안에 submit 버튼을 이용한 방식 2. 스크립트를 이용한 form.submit() 3. 비동기 통신을 이용한 submit 방식 그 외 등등 다양한 방식으로 form submit을 할 수 있다. 내가 짜는 코드에 맞게 적절한 방식으로 사용하면된다. 1번과 2번 케이스 경우에는 알아서 name과 value값을 백단으로 넘겨주지만 비동기 통신을 이용했을 때는 내가 직접 데이터를 말아서(?) 보내줘야한다. 어떻게 데이터를 말아서 보내야할까? 그것도 다양한 방식이 있지만 오늘은 FormData를 이용해서 데이터를 말아보겠다. Fo..
FormData 사용하기Form Submit하는건 프론트엔드 하면서 많이 하는 일 중에 하나일 것이다. 일단 Form Submit하는 방식은 여러가지가 있는데 내가 아는 것만 적자면... 1. form태그 안에 submit 버튼을 이용한 방식 2. 스크립트를 이용한 form.submit() 3. 비동기 통신을 이용한 submit 방식 그 외 등등 다양한 방식으로 form submit을 할 수 있다. 내가 짜는 코드에 맞게 적절한 방식으로 사용하면된다. 1번과 2번 케이스 경우에는 알아서 name과 value값을 백단으로 넘겨주지만 비동기 통신을 이용했을 때는 내가 직접 데이터를 말아서(?) 보내줘야한다. 어떻게 데이터를 말아서 보내야할까? 그것도 다양한 방식이 있지만 오늘은 FormData를 이용해서 데이터를 말아보겠다. Fo..
2023.12.06 -
이벤트 버블링과 캡쳐링 이해하기 2023.11.25
-
NextAuth를 이용해서 Github 로그인을 간단하게 구현할 수 있다. 1. next-auth를 설치한다 yarn add next-auth 2. github에 OAuth 셋팅하기 github 로그인을 이용하기 위해서는 github에 가서 약간의 설정을 해줘야한다. New OAuth App를 클릭해서 권한을 만들어준다. 표시한 부분을 입력해준다. Client ID와 그 아래 Secret key가 필요하다. 3. NextAuth.js 공식문서 참고해서 적용하기 그리고 나서 NextAuth.js 공식 문서에 있는거 그대로 따라해주면 된다. Getting Started | NextAuth.js The example code below describes how to add authentication to a ..
NextAuth 사용해서 Github 로그인 구현하기NextAuth를 이용해서 Github 로그인을 간단하게 구현할 수 있다. 1. next-auth를 설치한다 yarn add next-auth 2. github에 OAuth 셋팅하기 github 로그인을 이용하기 위해서는 github에 가서 약간의 설정을 해줘야한다. New OAuth App를 클릭해서 권한을 만들어준다. 표시한 부분을 입력해준다. Client ID와 그 아래 Secret key가 필요하다. 3. NextAuth.js 공식문서 참고해서 적용하기 그리고 나서 NextAuth.js 공식 문서에 있는거 그대로 따라해주면 된다. Getting Started | NextAuth.js The example code below describes how to add authentication to a ..
2023.11.24 -
📌 공식문서 Routing: Route Groups | Next.js Route Groups can be used to partition your Next.js application into different sections. nextjs.org 📌 이게 뭔가? 일단 나는 nested 되는 레이아웃을 가지고 싶지 않았다. 그리고 1depth 페이지에서는 모두 같은 레이아웃을 가지고 있었다. 이걸 어떻게 적용해야할까 고민하다가 드디어 찾았다. 1. Root Layout 설정 일단 내가 지금 혼자 공부하고 있는 프로젝트에서 공통인 부분은 이미지에 표시한 헤더와 푸터이다. 저 부분이 RootLayout이다. 2. 각 메뉴 Sub Layout (?) 설정방법은? 하지만 나의 문제는 각 메뉴(기관소개의 이용안내..
Route Groups에 대해서📌 공식문서 Routing: Route Groups | Next.js Route Groups can be used to partition your Next.js application into different sections. nextjs.org 📌 이게 뭔가? 일단 나는 nested 되는 레이아웃을 가지고 싶지 않았다. 그리고 1depth 페이지에서는 모두 같은 레이아웃을 가지고 있었다. 이걸 어떻게 적용해야할까 고민하다가 드디어 찾았다. 1. Root Layout 설정 일단 내가 지금 혼자 공부하고 있는 프로젝트에서 공통인 부분은 이미지에 표시한 헤더와 푸터이다. 저 부분이 RootLayout이다. 2. 각 메뉴 Sub Layout (?) 설정방법은? 하지만 나의 문제는 각 메뉴(기관소개의 이용안내..
2023.11.15