반응형 전체 글715 React + Vite .env 환경변수로 개발 환경(profile)나누기 우선 Vite는 아래의 설명처럼 빌드도구입니다.Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)는빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구!참고 : https://ko.vite.dev/guide/env-and-modeReact에서 Vite를 사용하고 있다면 환경변수에 접근하기 위해서는import.meta.env객체를 이용해서 접근합니다.예를 들어 소스에서의 사용은 아래와 같이 사용합니다.이제 dev, prod환경별 변수를 사용하기 위해서. env파일을 생성하고 환경별로 가져다가 사용해 보겠습니다..env는 공통적으로 사용할 내용.env.development는 dev환경에서 사용할 내용.env.production은 pr.. 2024. 12. 18. 2024년 리뷰 보호되어 있는 글 입니다. 2024. 11. 27. 커리어 코칭 4번째 어려운 대화기대관리 : 놀랄 준비는 해야한다. 안좋은게 분명히 있기 때문에시작의 중요성 : 아무것도 하지 않으면 아무일도 일어나지 않는다.문이 두개다! 실패하면 되돌아올수 있다.실패한다고 내가 실패한게 아니다.커리어가 길어질수록 나에게 맞는 환경을 찾는게 중요! -> 좋은 상사와 동료와 친구들과 가족나이가 들수록 까닭롭다! 주변에서 기대치도 올라감!기술지향적 말고 결과지향적인 사람이 되야한다.다른사람 말 잘듣고 좋은 질문하고 좋은평판을 시작으로 영향력이 좋은 사람이 되야함.점진적으로 좋은사람이 어떻게 될까? 회고와 습관으로 복리활동을 해야한다.잠깐으로는 좋은 성과가 나오지 않는다.단계 회고 : 행동-> 몰두 -> 회고 루프ㄴ 아쉬운거 잘한거 모두 체크!내 장점을 인지하고 상처의 인지가 중요해짐!문제 해.. 2024. 11. 18. 커리어 코칭 3번째 문제정의를 잘하자!흐름을 하나 따라가라 (Backend, FrontEnd, Domain등)ㄴ Backend와 검색 도메인, 이커머스, 통신회고- 마음건강을 위한 회고- 평정심(일희일비 하지 않기), 꾸준함, 호기심- 건강한 학습 방법 : 필요와 호기심 기반! ㄴ 지금 당장 필요하지 않고 뒤쳐져있는 느낌만으로 학습하지 말라 ㄴ 먼저 문제 정의 능력이 중요함! - 잘 듣는 능력 -> 질문 능력 -> 의사소통 능력 -> 문제 정의 능력 ㄴ 문제 해결을 위해 필요한 학습 - 조직적일 필요가 있음 - 무엇에 집중할까? 무엇이 필요한가? FOMO vs JOMO(Joy Of Missing Out) ㄴ 학습 후 행동이 이어져야 의미가 있음. ㄴ 그냥 일만 하지 말고 .. 2024. 11. 11. 11) ENS Project - Naver 로그인을 구현해보자! 사이트에서 로그인이 필요하다!네이버 관련 프로젝트이니 네이버 로그인을 구현해보자:)https://developers.naver.com/docs/login/devguide/devguide.md이전에 Oauth2.0을 스프링시큐리티로 인증서버와 리소스서버를 만들었던적이 있었는데네이버 로그인 역시 Oauth2.0을 따르고 있다.대충 아래처럼 만들면 될것 같다! ㅋㅋ1. 네이버로그인 버튼을 클릭!// authProvider.tsconst authProvider = { generateRandomString :() => { const randomBigInt = bigInt.randBetween("1e130", "1e131"); // 130자리 난수를 생성 return randomBigInt.toStri.. 2024. 11. 8. 10) ENS Project - CSS Framework 사용해보기 OverviewReact로 개발 시 디자인을 무에서 유를 창조하기에는 힘들다.이런 힘듬을 보완하기 위해 CSS Framework인 MUI를 사용하여 Ui 구성요소를 살펴보고 사용해보기로 한다.Example아래의 예제를 셋팅해서 띄워보고 컴포넌트들을 살펴보자.https://github.com/marmelab/material-ui-react-admin?tab=readme-ov-filehttps://marmelab.com/react-admin/Features.htmlhttps://marmelab.com/react-admin/CreateReactAdmin.htmlCreateReactAdminCSS Framework를 통해 우선적으로 개발 진행여러가지 Framework가 있지만 우선 아래의 Framework를 사.. 2024. 11. 4. 9) ENS Project - 프론트엔드 후딱 학습하기(React Deep Dive!!) 2024.10.15 - [Front/React.js] - 8) ENS Project - 프론트엔드 후딱 학습하기(리액트 컴포넌트, JSX, 속성, 상태)저번시간에 이어서 오늘은 더욱 더 깊은 심화과정 입니다! 저장을 잘하면서 포스팅 해보도록 하겠습니다:)Point!!- JSX를 꼭 사용하지 않아도 되는 이유- 컴포넌트 트리를 설계하는 방법 + 프로젝트를 더 효율적으로 구성하는 방법- State 사용의 상급 개념과 특정 상급 개념을 살펴봅니다. ㄴ 저번시간엔 useState()를 사용했습니다.- 자주 사용되는 중요 패턴과 Best Practices를 살펴봅니다.JSX를 꼭 사용하지 않아도 되는 이유?React Code는 Build Process를 통해서 변경 됩니다. 결과적으로 배포가능한 파일로 말.. 2024. 10. 31. 8) ENS Project - 프론트엔드 후딱 학습하기(리액트 컴포넌트, JSX, 속성, 상태) 해당 포스팅은2024.10.11 - [OpenSource/Spring Boot] - 7) ENS Project - DB로 전환02에서 이어지는 포스팅 입니다.frontend는 vue.js도 분명히..학습을 했는데 시간이 지나면 지날수록 새로운것이 나오고머릿속에 있던 지식들이 다 날아가버린다..말 그대로 내머릿속에 지우개ㅋㅋ이번에는 개인 프로젝트를 수행하면서 명확한 그림을 그려가면서 프론트엔드를 학습하려고 한다.학습은 옛날에는 항상 책을 사다가 학습을 했는데 요즘은 강의가 많아서 좋은거 같다ㅎㅎ그러므로 강의를 통해 학습하고자 한다.학습 후에는 아래와 같은 플랜을 가진다!1. 프로젝트 설정2. 프로젝트 구조 이해3. 컴포넌트 설계 ex) header(페이지 최상단 - 네비게이션 메뉴 부분) con.. 2024. 10. 15. 커리어 코칭 두번째 나에 대해서 알자현재 하고 있는 일에 집중! in 나에게 맞는 환경에서단, 내가 살아있음을 느끼는 곳에서조바심내지 말고 긴 호흡으로!물경력이라고 생각하지 말라!손들기 : 내가 하지 않았던 일이라도 해봐라!안해본 일을 할 때는 1. 빨리 따라갈 수 있고 2. 지인 활용3. 손해보는 느낌으로잘 되는 일 안되는 일도 있을 것이다. -> 회고(더 나은 사람으로 성장, 밸런스 중요!)자신감 == 성취감 - 환경이 중요, 성취감을 느낄수 있는 곳인가?평정심(큰 기대 X, 일희일비(一喜一悲) X)꾸준함영향력좋은 평판(발 없는 말이 천리를 간다)ㄴ 평판이 좋지 않으면 지인추천 X, 이력서 내고 이직해야 함.긍정적인 태도와 결과를 낼 수 있는 사람이 되자경력과 경험을 이용해서 나혼자만 잘하는게 아니라 주변사람들과 함께 .. 2024. 10. 12. 커리어 코칭 첫번째 커리어 코칭 첫번째성취하는 커리어와 행복한 인생을 위해 호기심을 가지고 평균을 높이자!시작이 매우 중요하다!긴 호흡 또한 중요!개발자로써 기술지향적인것도 좋지만의사소통 능력같은 다른 능력도 중요하다.회사라는 환경 또한 중요!현재 10년동안 다녔는데지금 내가 여기에서 성장하고 있는가?긍정적인 마인드는 필수!어느새 불만이 쌓여가고 있는 나커뮤니티 활동을 해보자!처음 C언어를 배울 때도 다음카페 활동을 통해서정말 엄청난 실력이 향상되었었다 ㅎㅎ남과 비교하지말고 나에 대해서 더욱 더 알아가보고 경험해보자!내 커리어를 5개의 키워드로 요약1. 자바 2. 검색 3. 스프링 3. 어플리케이션 아키텍트 5. Daum대학시절 컴퓨터공학을 전공하면서터보C라는 파란색 화면을 시작해서 MFC, Java 등을 공부하고 졸업.. 2024. 10. 11. 7) ENS Project - DB로 전환02 저번시간에는 DB설계와 MySQL 셋팅을 해보았습니다.오늘은 JPA연동 작업 입니다.제일 먼저 Dependency를 걸어줍니다.JPA 관련, MySQL 관련, h2는 테스트 코드에서 MySQL이 아닌 h2를 바라봐야해서 필요 합니다 // jpa setting implementation 'org.springframework.boot:spring-boot-starter-data-jpa' // MySQL - https://mvnrepository.com/artifact/mysql/mysql-connector-java runtimeOnly 'mysql:mysql-connector-java:8.0.33' // h2 for in-Memory test testRuntimeOnly 'c.. 2024. 10. 11. 6) ENS Project - DB로 전환01 오늘의 개발 목표!LLM 호출을 최소화하여 비용을 절감하는 로직을 구현!!!네이버 API를 통해 데이터를 조회한 후, 데이터가 변경되었을 때만 LLM을 호출하여 결과를 저장하고, 그렇지 않으면 기존 데이터를 그대로 사용하는 방식이다.로직은 대충 아래와 같다.naver api를 호출 -> modify date(naver)를 구해서 -> 기존 저장된 modify date(naver)랑 비교! -> 변경이 되었다면 -> open ai 호출 -> 결과 Json을 얻고 그 Json을 db에 저장! -> modify date(naver) 어려운것은 없다. 단지 없는 기능을 구현해야할 뿐!기능 구현에 필요한 것은?바로 JPA~!! 아래를 참고하면 될것 같다.2016.11.28 - [OpenSource/JPA] - S.. 2024. 10. 9. 제주 2024 테크 인공지능이 세상을 보여줬더니 그것을 인식하고 대답을 한다.정말 앞으로 스마트폰이 사라지고 다른 무언가가 나올까?스마트폰 카메라로 들고나니면서 인공지능에서 보여주기에는 팔이 아플려나? ㅋㅋ시계로 홀로그램을 쏴서 공중에서 이리저리 손짓하며 다닐라나? 아니면 메타버스? 아니면 애플안경?정말 A.I의 속도와 변화는 대단한것 같다.생성형 a.i가 세상을 제대로 알아보고 느끼고 표현하는 날이 기대가 된다.이를 위해 50만대 이상의 GPU를 보유하고 있는 마이크로소프트같은 거대 기업을 상대로토종기업인 네이버나 카카오가 생성형 a.i를 상대로 이길수 있을까? 네이버는 많아봐야 2천대일텐데..반도체 기술도 패키징기술을 가진 대만이 삼성전자보다 우위를 가지고 있다고 했다.그래서 삼전 주식이 오르질 못하고 있구나..라고 생.. 2024. 10. 7. 커리어 코칭!! 등록~ 제주도에서 같이 스터디 하던 회사 동료가 퇴사 후 판교에 올라갔다.이직을 성공하고 출장을 가게 되면 밥도 먹고 커피도 마시곤 하였다.종종 화상으로 이야기도 나누는데!!커리어 코칭이라는걸 소개해줬다.물론! 공짜는 아니다ㅋㅋ 225달러!!!한국돈으로 294,816원인 약 30만원!!현재 회사에서 전공책이나 강의 제공의 복지도 없어진 상태!바로 내돈내산이다!!일단은 10월5일부터 시작이다!짧은 1분 자기소개라..제주도에서 개발자로 지낸지 10년!! 총 16년차 개발자인 지금..커리어 코칭을 듣고 좋은 자극을 많이 받았으면 좋겠다 ㅎㅎ사실 요 근래에 내 커리어에 대해 고민이 많다.16년차..즉, 나이를 먹었다는 말이다.또한 보통 이정도 연차면 팀장급, 시니어 개발자라 볼 수 있다.수평문화인 구조안에서 10년동안.. 2024. 9. 28. 5) ENS Project - 상품코드 가져오기 저번 시간에 하드코딩이였다!!2024.09.27 - [OpenSource/Spring Boot] - 4) ENS Project - open ai와 놀기(발주 개발)1건에 대해서만 일단은 처리를 한 것이다.이제는 현재 판매중이며 전시중인 상품들에 대한 데이터들이 필요하다.이 상품번호들은 파는 것들만 하드코딩하여 할 수도 있지만 귀찮다!!!naver api를 통해서 해당 정보들을 가져와서 자연스레 데이터를 만들도록하는것이 목표이다!결과아래와 같이 데이터들을 뽑아냈다!!Controller에서는 내가 원하는 서비스들을 호출만 하였다.String responseBody = naverStoreApiService.getChannelProductNumbers(accessToken);naverStoreApiService.. 2024. 9. 28. 4) ENS Project - open ai와 놀기(발주 개발) Json에서 오류 발생!오잉? 내용이 짤려서 응답을 받는다..그래서 max_tokens을 3000으로 requestBody.put("max_tokens", 3000);prompt_tokens는 4790인데 응답으로 3000 했더니..짤려서 나왔다.그래서 이번엔 5000으로 지정!requestBody.put("max_tokens", 5000);아래처럼 4096이 최대라고 한다.requestBody.put("max_tokens", 4096);4096으로 했지만 이름과 회사명을 null에서 채워넣기 때문에 토큰이 더 필요하다!!토큰 소비가 8886이나..역시나 부족하다!!!한번 돌릴때마다..돈이 나간다고 생각하니..방법을 생각해내야한다!해결방법으로는..토큰을 늘리는것보다 input쪽을 줄여야할것 같다!즉, .. 2024. 9. 27. 3) ENS Project 시작을 위한 결제 :) Project 진행을 위해 결제 완료! A.I를 연동해서 만들어야 기능은?- 발주 시스템!! - 조건 : 하나의 네이버스토어에서 여러가지 업체 물건을 팔아야할 때 유용하다!Spring진영에서 제공하는 AI를 가지고 개발하려고 했는데 생각이 바뀌었다.기존 LangChain으로 만들었던 걸로 우선적으로 테스트를 하려고 하니..AI 이녀석...정말 빠르게 발전하고 있었다.이미 이전에 개발했던 소스는 Deprecated 되었다!!! 럴수럴수 이럴수가..차라리 Open AI에서 제공하는 api를 사용하는게 더 좋다고 판단하였다.아래처럼 여러가지 기능들을 제공하고 있었다.음성관련 STT/TTS도 보이고 파인튜닝이며 여러가지를 제공하는 것을 보고 우선은 간단한 기능을 구현해보겠지만 추후에 좀 더 유용하다고 판단했다... 2024. 9. 26. The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.] [n/a]] with root cause CBT에 배포를 했는데 아래와 같은 오류가 발생하였다.오류 내용SQLState: 08S01The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server."}{"service": "cruise-admin-backend","timestamp": "2024-09-25T15:54:57.068+09:00","level": "ERROR","log": "Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing fai.. 2024. 9. 26. 알아두면 좋은 Kafka 이모저모 :) Kafka란?데이터파이프라인 구축에서 꼭 들어가는 친구 입니다.그런데 아직 경험해보지 못했습니다...!!경험할 기회가 있다면...꼭! 경험해보고 싶습니다:)그 날을 위해 Study~!! GoGo!어색한 용어들과 개념들부터 정리해보도록 합니다.우선 데이터 파이프라인(Data Pipeline)이란?데이터의 흐름을 자동화하는 프로세스를 의미합니다.다양한 출처에서 데이터를 수집하고 변환하고 처리한 후에 저장하거나 분석 도구에 전달하는 일련의 단계를 포함 합니다.데이터 파이프라인의 유형은배치 처리와 실시간 처리가 있습니다.요 근래에 Airflow라는 친구를 알게 되었는데 데이터 파이프라인 도구 중 하나 입니다.또한 kafka 역시 실시간 스트리밍 데이터 처리를 위한 데이터 파이프라인 도구 중 하나 입니다.그런데 .. 2024. 9. 16. 2) ENS Project - 노가다 하지마! ㅋㅋ(홀딩!) 지인이 NaverStore 발주와 송장입력 때문에 고통받는것을 보고!효율적으로 노가다 없이 일을 할 수 있게 도와주기 위해 IT전문인력으로써 무일푼으로 간단하게 만들어주기로 하였다 ㅋㅋ 잘 만들면 팔아먹어야쥐~일단 아래처럼 NaverStore api를 먼저 연동하였다.아래 api는 간단히 소개하면..신규주문건이 들어오면 발주를 해줘야한다.즉, 판매자가 확인했어요~고갱님~이라는 표식을 해주는 것이다.표식이 된 상품들은 중간업체라면 실질적으로 제품을 picking&packging을 하는 업체에게 어떤 상품이 몇개 팔렸는지 알려줘야한다.그때 필요한 api들이 Support와 Option 상품들 관련 api들이다.그 이후에는 송장처리를 해줘야하는데 요건 일단 Pass :)LLM의 경우는 하나의 업체라면 상관이 .. 2024. 9. 11. k8s환경에서 리소스 파일을 읽을 경우 유의 사항 오류발생오류는 Graphql Query Validation때문에 동작을 하지 않아서 schema.graphql을 다시 만드는 과정에서 오류가 발생했다. 로그를 확인해보니 resources아래의 파일을 못읽어오고 생성도 못하고 오류가 빵빵 터지는 상황이였다ㅋㅋ아래처럼 path를 잡아주니 로컬에서는 잘 돌아가지만 jar로 배포되는 Docker환경에서는 리소스파일이 jar파일에 포함이 됩니다.그래서 경로말고 클래스패스를 통해 리소스를 읽어야합니다.public GraphQLSchema getGraphQLSchema() throws IOException { // 스키마 파일 경로 String schemaFilePath = "src/main/resources/graphql/schema.graphql"; .. 2024. 9. 11. 이전 1 2 3 4 ··· 35 다음 반응형
