티스토리

해본거 정리할라고

검색하기

블로그 홈

해본거 정리할라고

jenyglee.tistory.com/m

재원쓰 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[Docker] elasticsearch + kibana 세팅 Elasticsearch 설치 이미지 pull 먼저 docker pull 명렁어로 Docker hub에서 Elasticsearch 이미지를 다운받습니다. docker pull docker.elastic.co/elasticsearch/elasticsearch:7.9.1 컨테이너 실행 docker run 명령어로 Elasticsearch 컨테이너를 실행합니다.Elasticsearch가 클라이언트가 통신하기위한 기본 포트는 9200이며 이미 사용중일 경우 9200~9299 사이의 값을 차례대로 사용합니다. 또한 노드간의 통신에서 사용되는 기본 포트는 9300이며 이미 사용중일 경우 9300~9399 사이의 값을 차례대로 사용합니다. docker run -d -p 9200:9200 -p 9300:9300 -e .. 공감수 0 댓글수 0 2023. 8. 28.
[Docker] elasticsearch 비밀번호 바꾸기 엘라스틱 서치 버전 8부터는 기본적으로 보안처리가 되어있다. 비밀번호를 세팅해주어야 하는데, docker exec -it es01 /usr/share/elasticsearch/bin/elasticsearch-reset-password -u elastic 이렇게 친 뒤 yes(y)를 입력하면 임시 비밀번호를 받는다. 그걸로 로그인할 수 있다. 예) 사용자 이름 : elastic 비밀번호 : oSJQ6p7AK=PwHJb6bEtg 공감수 0 댓글수 0 2023. 8. 28.
[Next js] SEO에 대하여 SEO는 웹사이트가 검색 결과에서 더 높은 순위를 차지할 수 있도록 최적화하는 작업이며, 이를 통해 브랜드 신뢰도를 높이고 더 많은 방문자를 유지할 수 있습니다. 검색 시스템의 네 가지 주요 역할은 다음과 같습니다: 크롤링: 웹을 통해 모든 웹사이트의 콘텐츠를 파싱하는 과정입니다. 현재 3억 5천만 개 이상의 도메인이 있으므로 이는 막대한 작업입니다. 인덱싱: 크롤링 단계에서 수집된 모든 데이터를 저장할 위치를 찾는 것입니다. 이렇게 하면 데이터를 쉽게 접근할 수 있습니다. 렌더링: 페이지에 있는 JavaScript와 같은 리소스를 실행하여 사이트의 기능을 향상시키고 콘텐츠를 풍부하게 만드는 과정입니다. 검색 엔진에서의 렌더링은 크롤러가 웹 페이지의 콘텐츠를 이해하고 인덱싱하는 데 필요한 단계입니다. 웹.. 공감수 0 댓글수 0 2023. 8. 7.
[Next js] robots.txt 에 대하여 robots.txt는 파일은 웹사이트를 방문하는 컴퓨터 프로그램들에게 어떤 페이지를 볼 수 있고, 볼 수 없는지 알려주는 지시서 같은 것입니다. 목적 : 일반 사용자들이 접근할 수 있는 웹사이트의 특정 부분(예: 관리자 페이지)을 숨기고 싶을 때 사용합니다. 장점 : 원하지 않는 부분이 검색결과에 나타나지 않게 할 수 있습니다. 사용법: robots.txt라는 파일을 웹사이트의 루트에 만듭니다. 이 파일에는 어떤 프로그램이 어떤 페이지를 볼 수 있는지, 볼 수 없는지를 적습니다. 예를 들면, /accounts라는 경로를 모두에게 보이지 않게 하고 싶다면: User-agent: * Disallow: /accounts 라고 적으면 됩니다. Next.js에서의 사용법: 프로젝트의 public 폴더 안에 rob.. 공감수 0 댓글수 0 2023. 8. 7.
[NEXTJS]_app 과 _document _document와 _app에는 페이지에 공통적으로 적용될 내용을 작성하곤 하는데, 둘이 정확히 어떻게 다른지와 어떤 내용을 작성해야 하는지에 대해 정리해 보겠습니다. 📝 App 페이지 _app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 합니다. 🎯 주요 사용 목적 모든 컴포넌트에 공통으로 적용할 속성 관리 function MyApp({ Component, pageProps }) { return } export default MyApp ⚙️ 규칙 Component 속성값은 서버에 요청한 페이지가 됩니다. (Ex. http://localhost:3000/home에 접속하면, Component는 home 컴포넌트를 가리킵니다.) pageProps는 g.. 공감수 0 댓글수 0 2023. 7. 17.
[NEXTJS]디렉토리 구조 정리 프로젝트를 생성 후 처음으로 하는 세팅 중 하나인 디렉토리 구조 짜기. 매 새로운 프로젝트마다 디렉토리 구조가 조금씩 다른데, 나도 나만의 디렉토리 구조를 하나 정하려고 한다. 크게는 pages, app, public 세개로 나눈다. 🗂 app api : API 호출을 위한 기능들을 모은다. 인스턴스 설정(axios.tsx), 호출 통합 로직(send.tsx), 호출 함수들 components : 화면 구성에 재사용되는 컴포넌트를 모은다. constants : 공통으로 사용되는 상수들을 정의하고 관리한다. API 엔드포인트 URL(apiEndPoint.tsx), 디자인시스템(theme.tsx), 타입과 인터페이스(types) containers : 모든 페이지에 전체적으로 적용되는 레이아웃 컴포넌트를 모.. 공감수 0 댓글수 0 2023. 7. 17.
[REACT] useQuery 키를 여러개 전달하여 응용하기 useQuery 요청시 첫 매개변수 자리는 식별자 키(key)이다. 보통 이 부분은 스트링 형태인 것으로 알지만 아래와 같이 배열 형태로 여러개의 키를 가질 수 있다. 특정 상황에서 useQuery를 직접 다시 호출하기 useQuery를 다시 호출하고 싶을 때는 queryClient.refetchQueries를 이용해서 useQuery의 키를 넣어주면 된다. 이렇게 해주면 되는데 그전에 세팅이 되어있는지 살펴보아야 한다. queryClient를 상위 컴포넌트 쪽에 세팅해줘야 한다. _app.js export default function App({ Component, pageProps }) { const client = new QueryClient({ defaultOptions: { queries: { .. 공감수 0 댓글수 0 2023. 5. 16.
[EXPRESS] MySQL, 시퀄라이즈 설치부터 Node 연결까지! MySQL 설치 및 실행 맥에서는 Homebrew를 통해 MySQL을 설치하는 것이 좋다. Homebrew는 다음 명령어로 설치할 수 있다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" Homebrew 설치를 완료하고 나면 Homebrew를 통해 MySQL을 설치한다. $ brew install mysql $ brew services start mysql $ mysql_secure_installation 설치 후 brew services start mysql 명령어로 MySQL을 시작하고 mysql_secure_installation 명령어로 root 비밀번호를 설정한다. val.. 공감수 0 댓글수 0 2023. 4. 21.
[REACT] 유용한 라이브러리 모음 ShortId 랜덤한 id를 자동으로 생성해준다. npm i shortid // 사용시 id: shortId.generate() Faker 데이터를 자동으로 생성해준다. npm i @faker-js/faker npm i @faker-js/faker npm i @faker-js/faker https://www.npmjs.com/package/@faker-js/faker?activeTab=code @faker-js/faker Generate massive amounts of fake contextual data. Latest version: 7.6.0, last published: 6 months ago. Start using @faker-js/faker in your project by running `n.. 공감수 0 댓글수 0 2023. 4. 18.
[REACT] 엄격한 ESLint 만들기 eslint 중에서도 악명높은 airbnb 규칙을 설정해보자. npm i -D babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react-hooks babel-eslint: Babel과 함께 사용되는 Eslint 구문 분석기입니다. JavaScript 코드를 트랜스파일링 하기 전에 Linting 검사를 실행할 수 있습니다. eslint-config-airbnb: Airbnb 스타일 가이드를 따르는 Eslint 구성 파일입니다. 이 구성 파일은 Airbnb에서 사용하는 코드 스타일을 따르며, 코드 품질을 향상시키기 위한 권장 사항과 규칙을 포함합니다. eslint-plugin-import: Eslint에서 모듈 import 및 ex.. 공감수 0 댓글수 0 2023. 4. 17.
☑️Warning: Prop `className` did not match. Server: "ant-input-group-wrapper ant-input-search ant-input-search-with-button sc-jWUzzU jRnErk" Client: "ant-input-group-wrapper ant-input-search ant-input-search-with-button sc-dkPtRN cCLTGK" 공감수 0 댓글수 0 2023. 4. 12.
[REACT] 해시태그가 포함된 내용에 해시태그를 이동되는 버튼으로 만들기 놀러왔음~ #나들이 #여행 이런 내용이 있을 때 #나들이, #여행 을 각각 이동가능한 해시태그로 바꾸어주려면 어떻게 하면 될까?? 아래 코드를 참고하자. const PostCardContent = ({ postData }) => ( {postData.split(/(#[^\s#]+)/g).map((v, i) => { if (v.match(/(#[^\s#]+)/g)) { return ( {v} ) } return v })} ) 여기서 postData 파라미터가 '놀러왔음~ #나들이 #여행' 공감수 1 댓글수 2 2023. 4. 12.
[REACT] Styled Component 응용하기 컴포넌트의 자식 태그까지 컴포넌트로 만들기 버거울 때 만약 라는 태그 안에 이 들어있는데, 이런 사소한 태그들까지 컴포넌트로 만들기 버거울 때가 있다. 이럴 때는 '&'를 사용해서 자식 태그에 스타일을 이어서 줄 수 있다. const Header = styled.header` height: 44px; background: white; position: relative; padding: 0; text-align: center; & h1 { margin: 0; font-size: 17px; color: #333; line-height: 44px; } 다양한 선택자도 사용 가능하다 & > h1 { ... } 라이브러리에서 제공하는 컴포넌트에 스타일 주고싶을 때 styled.div`` 이 형태가 아니라 styl.. 공감수 0 댓글수 0 2023. 4. 11.
[REACT] 퍼블리싱용 라이브러리 모음 react-slick npm i react-slick initialSlide 몇번째부터 시작할건지 afterChange 슬라이드할 때 숫자를 저장 infinite 무한반복 arrow 화살표 보이기/숨기기 slidesToShow 몇개씩 보여줄 지 slidesToScroll 몇개씩 넘길 지 등등... 공감수 0 댓글수 0 2023. 4. 11.
[REACT] PropTypes에서 객체 키값 여러개 정의할 때 shape() PropTypes.shape로 감싼뒤 괄호() 안에 키값의 타입을 정의해준다. PostCard.propTypes = { post: PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, content: PropTypes.string, createdAt:PropTypes.object, Comments: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object) }).isRequired } 공감수 0 댓글수 0 2023. 4. 11.
[REACT] 이미지 업로드 버튼 꾸미고 연결하기! const PostForm = () => { const imageInput = useRef(); const onClickImageUpload = useCallback(() => { imageInput.current.click() }, [imageInput.current]) return ( 이미지 업로드 ) } 공감수 0 댓글수 0 2023. 4. 11.
[REACT] indent(들여쓰기) Prettier, ESLint 설정 React 프로젝트에서 들여쓰기 설정을 변경하는 방법은 프로젝트의 설정에 따라 다를 수 있습니다. 일반적으로 React 프로젝트는 Prettier와 ESLint를 함께 사용하여 코드 스타일을 유지하도록 구성됩니다. 들여쓰기를 2칸에서 4칸으로 변경하려면 다음과 같은 방법을 시도할 수 있습니다. Prettier 설정 변경 프로젝트 루트 폴더에 .prettierrc 또는 prettier.config.js 파일을 만들어 설정을 변경합니다. 다음과 같이 설정 파일을 열고 tabWidth를 4로 변경합니다. { "tabWidth": 4, "singleQuote": true } 이것만 설정하면 들여쓰기가 변경된 모든 코드에서 컴파일 에러를 발생시킬 수 있습니다. 이땐 ESLint의 indent 설정도 해줘야 합니다.. 공감수 0 댓글수 0 2023. 4. 5.
No `Podfile' found in the project directory. 프로젝트 클론 후 'pod install' 을 입력했을 때 발생했다. Podfile은 ios 폴더에 있어야 하는데 위치가 달라서 발생한 에러이다! cd ios ios 폴더로 들어가서 'pod install'을 입력하면 해결! 공감수 0 댓글수 0 2023. 4. 4.
[REACT NATIVE] 스크린에 지정한 타입에 대하여 화면 컴포넌트에 타입스크립트를 사용해서 매개변수 타입을 지정해주려고 한다. function HomeScreen({navigation}: HomeScreenProps) { const onClick = useCallback(() => { navigation.navigate('Details'); }, [navigation]); return ( Home Screen Second ); } 여기서 매개변수에 지정된 'HomeScreenProps'를 구현하려면 아래와 같은 내용을 추가해준다. import { createNativeStackNavigator, NativeStackScreenProps, } from '@react-navigation/native-stack'; type RootStackParamList .. 공감수 0 댓글수 0 2023. 3. 31.
[REACT NATIVE] html과는 너무 다른 react native 태그 모음집 구조 내용 버튼 버튼이 눌렸을 때 투명도가 감소하고, 손가락이 버튼 영역을 벗어나면 다시 원래대로 돌아가는 효과가 있는 버튼입니다. 속성 이름 속성 타입 설명 underlayColor number 버튼을 눌렀을 때 배경 컬러 activeOpacity function 버튼을 눌렀을 때 불투명도(opacity) 값. (0에서 1 사이의 값, 기본값은 0.2) 버튼이 눌렸을 때 투명도가 감소하는 효과만 있는 버튼입니다. 손가락이 버튼 영역을 벗어나도 투명도가 원래대로 돌아가지 않습니다. 속성 이름 속성 타입 설명 activeOpacity function 버튼을 눌렀을 때 불투명도(opacity) 값. (0에서 1 사이의 값, 기본값은 0.2) 안드로이드에서만 사용 가능한 버튼으로, 버튼이 눌렸을 때 An.. 공감수 0 댓글수 0 2023. 3. 31.
[REACT NATIVE] 실제 기기로 앱 테스트하기! 안드로이드 스튜디오를 설치하고 프로젝트를 실행했으나 계속 에뮬레이터와 연결이 안된다... AVD Manager, SDK Manager, 환경변수 세팅 모든것을 다 해봤는데도 해결이 되지 않는다... 'abd device'를 입력하면 디바이스 목록에 에뮬레이터도 뜨는데 문제가 해결되지 않는다.. 결국 최후의 수단으로... 하나 있는 공기계 안드로이드를 USB 연결하기로 했다. 연결방법 가장 먼저 android기기(나의 경우 s10)의 설정탭> 개발자 옵션으로 들어가 USB 디버깅을 활성화시킨다. 개발자 옵션은 처음에 보이지 않을 것인데, 이것을 보이게 하는 방법은 '휴대전화 정보 > 소프트웨어 정보' 를 7번 연타하면 개발자 모드로 변경되며 '개발자 옵션' 버튼을 노출시킬 수 있다.' 기기가 잘 연결되면.. 공감수 0 댓글수 0 2023. 3. 31.
For input string: "" 스웨거에서 숫자로 된 타입에 example 속성을 추가해주면 된다. 공감수 0 댓글수 0 2023. 3. 6.
[GIT&AWS] 깃헙액션으로 CI/CD 배포 자동화 하기! 📖 EC2에 프로젝트 빌드하여 올리는 것까지 완료했다. 이제는 CI/CD 배포 자동화를 해볼 차례! 실제 배포된 인스턴스는 ubuntu이지만 포스팅이 죄다 linux 인스턴스로 되어있어서 일단 연습할 겸 새 인스턴스는 linux 기반으로 생성했다. 연습은 linux대로 하고 실제 적용할 땐 ubuntu 기준으로 살짝만 변경해주면 될 것이다. 1. ec2 인스턴스에서 자동배포를 위해 필요한 codedeploy를 설치해줘야 한다. # 패키지 매니저 업데이트, ruby 설치 sudo yum update sudo yum install ruby sudo yum install wget # 서울 리전에 있는 CodeDeploy 리소스 키트 파일 다운로드 cd /home/ec2-user wget https://aws-.. 공감수 0 댓글수 0 2023. 2. 27.
[AWS] aws에 프로젝트 배포 깔끔하게! 2탄 - 프로젝트 빌드해서 EC2에 올리고 실행 📖 2탄이다. 이번에는 본격적으로 프로젝트를 EC2 인스턴스에 올려서 실행시키고, 여기에다가 API 요청하기까지 해볼 것이다. 1. EC2에 접속한다. 2. 첫 인스턴스 실행 시에는 우분투 업데이트와 자바 설치를 진행한다. $ sudo apt update $ apt list openjdk-17* $ sudo apt install openjdk-17* (버전확인) $ java -version 3. 스프링부트 프로젝트를 빌드한다. 우측 Gradle 탭에서 Build를 더블클릭하면 빌드가 진행되며, [build] > [libs] 폴더 안에 .jar 파일이 있는데, 이걸 인스턴스에 올리면 된다. 4. 빌드 파일 업로드한다. 파일질라를 주로 쓴다던데 나는 하란대로 해도 안먹히니 터미널에서 진행할 것이다. EC2 .. 공감수 0 댓글수 0 2023. 2. 27.
[AWS] aws에 프로젝트 배포 깔끔하게! 1탄 - RDS MySQL 생성하고 서버와 연결 1. 데이터베이스를 생성하러 간다. 2. 설정할 것이 많다. 아래와 같이 따라하자. 사용할 때, 알아보기 위한 식별자와 마스터 이름, 암호가 필요하다. 까먹지 않도록 본인이 기억할 수 있는 것으로 한다. 퍼블릭 액세스를 반드시 "예"로 변경해줘야 한다. 그래야 접속을 할 수 있다. 보안그룹도 새로 설정할 것이기 때문에 만들어준다. 가용영역은 아무거나. 포트도 그대로. 3. 여기까지 설정하고 데이터베이스를 생성하면 목록에 추가된 것을 볼 수 있다. 4. 이번엔 데이터베이스 전용 보안그룹을 설정해보자. 어차피 마스터 이름과 암호는 우리 팀만 알고 있기 때문에 아무나 접근할 수 있게 해줬지만, 실무에서는 지정해둬야 할 것이다. 5. MySQL workbench에 연결해보자. 박스 친 부분을 채워야 한다. Co.. 공감수 0 댓글수 0 2023. 2. 26.
☑️[AWS] S3 버킷 권한 설정 방법 https://velog.io/@doohyunlm/AWS-S3-%EB%B2%84%ED%82%B7-%EA%B6%8C%ED%95%9C-%EC%84%A4%EC%A0%95 공감수 0 댓글수 0 2023. 2. 22.
JdbcSQLIntegrityConstraintViolationException: Referential integrity constraint violation 객체를 삭제할 때 난 에러이다. 삭제하는 객체의 연관관계로 되어있는 쪽에서 FK가 사라지는 문제가 발생한다. 연관되어있는 것을 먼저 삭제 후 삭제하면 된다. 공감수 0 댓글수 0 2023. 2. 22.
Not supported for DML operations 이걸 추가해달라는 얘기다. 공감수 0 댓글수 0 2023. 2. 22.
[SPRING] bulk delete 벌크딜리트 하기 커뮤니티 프로젝트를 하면서 게시글/댓글/좋아요까지 연관되어있는 테이블을 쿼리최적화 하면서 삭제하는 방법을 찾고 있었다. 우선 댓글과 연관되어있는 좋아요를 삭제 해줄것이다. 게시글 ID로 모든 댓글을 불러온다. List comments = commentRepository.findAllByCommunityBoardId(boardId); 여기서 일단 쿼리가 한번 쓰였다. 다음은 이 댓글에 있는 좋아요를 다 지워줘야 하는데... for (CommunityComment comment : comments) { likeCommentRepository.deleteAllByComment(comment); } 이렇게 했다가는 엄청난 쿼리가 나가는 것을 볼 수 있다.... 스프링데이터 JPA의 'In'이라는 것을 써보는 건.. 공감수 0 댓글수 0 2023. 2. 22.
For queries with named parameters you need to provide names for method parameters; Use @Param for query method parameters, or when on Java 8+ use the javac flag -parameters 이걸 추가해주라는 얘기다. 공감수 0 댓글수 0 2023. 2. 21.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.