#이미지

NextJs에 따로 백엔드를 두는경우

안녕하세요. 토이프로젝트로 글, 댓글, 로그인 기능을 포함한 블로그를 만들어보고있습니다. 원래 프론트엔드는 ReactJs, 백엔드는 Golang으로 만들려고 했는데, 글 기능을 구현하던 중 글기능은 SEO가 필요한데, React는 그게 잘 안되서 원래 React프로젝트 구조를 유지하고 SSR로 렌더링 하기 위해서 NEXTJs로 바꾸려고 합니다. 또 이미지 최적화 기능이나 폴더기반때문에 편하기도 하고요. 근데 Next로 프론트엔드만 바꾸고 GO 백엔드는 유지하려고 하는데, NEXTJS를 프론트로 사용하고 따로 백엔드를 두는게 많이 쓰이는 방식인가요..? NEXT가 백엔드기능까지 제공하는 풀스택 프레임워크로 알고있는데 백엔드서버를 따로 두는게 바보같은 방식인가 궁금합니다.

게시글 이미지 업로드를 구현하는데 궁금한 점이 있습니다.

velog를 참고하여 Spring + Vue를 이용하여 마크 다운 기반 게시글을 구현하고 있습니다.. 글을 쓰는 도중에 이미지를 올리면 s3에서 url를 반환하여, 이것을 통째로 Post 테이블 Content 필드에 저장하여 순서를 보장하는 식으로 진행하고 있습니다. 로직 흐름은 이렇습니다. 1. 사용자가 이미지를 올린다면, 클라이언트에서 글쓰기 버튼을 눌렀을 때 미리 만들어 놓은 UUID와 이미지를 서버로 보낸다. 2. 서버에서는 s3객체에 임시 저장 여부를 확인하는 isTemp를 태그를 넣어서 서버를 걸쳐서 S3에 쏜다. 3. S3에서 객체를 찾아서 key값과 클라이언트에서 보낸 uuid를 Image 테이블에 저장해서 Post와 간접적으로 연관 관계를 맺는다. 4. 글쓰기를 누른다면 내용과 UUID를 보내서 UUID를 Post의 primary key로 사용하고, UUID 기반으로 Image 테이블에서 key들을 갖고 와서 S3 객체의 isTemp 태그를 false로 바꾼다. 4-1 . 뒤로 가기나 임시 저장을 눌렀을 때는 isTemp를 true로 설정하고 저장한다. 5. 30일이 지날 때마다, Post에 있는 isTemp를 통해 임시 여부를 확인하여 임시 저장된 글을 삭제하고, S3에서는 수명 주기를 설정하여 태그를 기반으로 true인 이미지들을 삭제한다. 객체를 삭제하는 이유는 불필요한 데이터가 공간을 차지하는 것이 별로라고 판단했습니다. UUID는 글을 다 쓰기도 전에 서버로 쏘기 때문에, 어떤 게시글에서 쓰였는지 확인하기 위해서 사용했습니다. 성능이나 용량 면에서 안 좋다고 하지만, 이는 데이터를 넣어 놓고 조회를 하여 성능을 확인하였고 현재 프로젝트 크기를 생각했을 때 접목해도 상관없을 것 같아 넣었습니다. 하지만 이런 식으로 진행하니, 만약 사용자가 중간에 이미지 링크를 삭제한다면? 이라는 시나리오를 생각했을 때 이를 대처할 방도가 떠오르지 않습니다. 다른 분들은 어떤 식으로 처리했는지, 제가 너무 어렵게 생각하고 짜는지 궁금합니다.

백엔드 신입 개발자 이력서입니다. 피드백 좀 부탁드려도 될까요?

https://drive.google.com/file/d/127XondGWATg74CSjV6lrPYtFQcVQixpd/view?usp=sharing 여기저기 참고하면서 작성하였는지라, 좀 길고 부족한 점 양해부탁드립니다. ㅎㅎ 여러모로 부족한 점이 많다고 느껴, 현업 분들 입장에서 의견을 듣고 싶어 조심스럽게 질문드립니다. 객관적인 경험이 부족한 건지(더 교육을 이수해야 한다 등), 내용 면에서 무엇이 부족하다고 느끼시는지 피드백 좀 부탁드리겠습니다. 꾸벅. (포트폴리오도 있지만, 중복된 내용에 이미지가 다수라, 너무 벅찰 거 같아서 안 넣었습니다.)

선배님들의 고견을 여쭙고자 합니다.

안녕하십니까!!... ​ 저는 최경호 라고 하며, 현재 울산에서 MRO소모성 자재(건설업) 납품업체 에서 건축자재 및 공구 또, 산업.안전용품 의 유통회사 에서 배송납품 기사 로 일하는 40대 남성 입니다. ​ 건설업 MRO 라는 키워드 로 검색을 하게되었고, 정확한 내용은 아래 링크 를 보시면 더 자세하실 겁니다. https://blog.naver.com/mmoonhs91hy/221934607016생활안전시장_안전용품 ​ 다름이 아니오라, 제가 현재 일하고 있는 회사는 울산지역 에서 S-oil 이나 금호석유화학, SK에너지 등의 회사의 협력업체들 에게 공구 및 작업복 흔히 말하는 산업.안전용품 기타 관련용품들 을 배송.납품 하는 업무를 하고있습니다. ​ 제가 문의글을 올리게 된 이유는, ​ 울산의 공구상가 에서 (사업자 를 가진 회사에게 도매 가격으로 판매를 하고, 개인고객 에게는 소매가격으로 판매를 하는) 업장을 방문해서 물건을 구입후 에 배송을 하고 있습니다. 여러 카테고리 가 있다보니. 품목에 따라 다른 업체들을 방문하여 물건구입 후 배송을 하는데, 저희 회사자체 의 창고에서 물건을 찾아서 가는 경우는 거의 없습니다. (원체 많은 품목들이 있고, 판매를 될지 안될지 모르는 제품들이기에 창고에 미리 갖추고 있을 여유는 없습니다.) ​ 또한 KEP(코리아이플랫폼) 라는 MRO회사의 네트워크 에 가입이 되어있고-실제 배송.납품건이 많지는 않은것 같습니다. 크레텍 책임&웰딩 이라는 대구에 본사를 둔 회사에서 공구 관련 품목을 납품 받고, 기타 타지역에서 화물로 물건을 받아 그때그때 주문에 맞추어서 발주를 하고 물건을 받아,판매하고 있습니다. KEP 나 서브원 같은 대기업 에서 운영하는 MRO업체들 에게서 물건을 납픔받아 재판매를 하는 식 입니다. 구비하고 있는 기계? 를 일정기간 임대 하고 비용을 받는 부분도 있는것 같습니다. ​ 제가 대표님 에게 듣기로는, 울산 이라는 지역에서 같은 업을 하는 경쟁사 가 약250여개 가 된다고 합니다. 아주 오래된...지금 의 7~80대 어르신 들이 예전에 하던 유통방식 에서 달라진것이 없는 상황 입니다. (물론 연합을 해서 이 물건은 이 가격에 팔자! 라는 방식은 잘 모르겠으나, 공구상가 주변에 모여들어 사업자가 있는 사람에게는 도매가로 판매하고 개인에게는 소매가 로 판매를 하는..) ​ 또한, 건설 프로젝트 를 대기업에서 입찰을 해서 공사를 시작하게 되면 그 협력업체 사람들과의 인맥 과 또 그를 통한 다른 인맥을 만들며 공사에 참여하여 자재를 납품 합니다.. 인맥이 없으면, 장사를 못한다! 라는 그런 이야기 도 들은것 같습니다. ​ 이런 현 상황에서 소상공인들이 대부분 이다보니, 정부에서 기관을 만들어 지원해 주는 경우도 있는데 대부분이 마케팅 과 온라인 유통 에 관련된 교육들이고, 사업자 가 있어야 참여를 할수가 있더군요.. ​ 온라인 유통에 대해 아는것이 없습니다.. 전문성 을 어필하기 위해 홈페이지 에서 구독서비스 를 만들고 공구나 기타자재 들도 풀필먼트 라는 물류시스템을 빨리 갖추어야 한다! 라는 이야기를 들었습니다만... ​ 홈페이지 에서 클릭해서 장바구니 담고 택배로 물건 보내준다.. 건축자재 들이 원체 부피가 크고 무게가 많이 나가다보니, 그게 가능한가? 이런 수준의 생각밖에는 못하고 있습니다. ​ 산업.안전용품 를 유통하는 회사로써, 유통업,서비스업 의 범주에 포함된다고 생각합니다만, ​ 이 업계에서 저희 회사의 포지셔닝 부터 찾아야 한다고 생각을 하고, 포지셔닝 을 찾은후에 다른 경쟁사 와 다른 저희 회사만의 KSF(Key success factor) 를 만들수 있다고 생각합니다. ​ 저의 짧은 생각으로는, 서비스업 의 특징은 , 고객이 이미 가지고 있는 기대치 를 넘어서는 무언가를 제공해 줄수 있어야 한다고 생각 합니다. 정확하고 빠른 배송 과 친절함? 이런 부분은 누구나 다 생각하고 가지고 있다고 생각 합니다. ​ 유통업 에서 포지셔닝 을 찾기위해 어떤 부분들이 고려되어야 하는지? 저희만의 KSF를 가지기 위해 무엇을 할수있는지? 이 부분에 대해 여쭙고자 합니다. ​ 저는 타 경쟁사 와 다른 저희만의 독점성 을 가지기 위해 개인적으로 해외소싱,구매 를 생각하고 있습니다. 그 이유는 한국에서 산업,안전용품 은 보급품 이라는 이미지 가 있다고 생각을 하고있으며, 품질적인 부분은 아직 국제사회에서 경쟁을 할 정도는 아니다.라고 알고있습니다. ​ 그리고 항상 편안함 과 안전 이라는 부분이 가장 우선시 되기에. 타업계에 비해 품목의 트렌드 에 영향을 많이 받지는 않는다고 생각합니다. ​ 그러나 중소기업 의 부족한 부분을 채워주기 위해. 이미 많은 대기업들이 MRO를 하기에, 해외소싱 이 저희만의 KSF가 되어줄수 있을지에 대해서 더 많은 고민이 필요하다고 생각합니다. ​ 현재 국내에 유통이 되지않는, 그런 품목이 필요하다고 생각만 하고있습니다. 많은 전문가 분들은 산업,안전용품 과 공구 등은 해외소싱 및 구매를 할 만한 아이템이 이젠 거의없고 또 아이템 마다 너무다른 방식들이 많아서 그다지 좋은 방법은 아니라고 합니다. ​ 소모성자재 이니 만큼 건설업 만이 아닌. 자동차 ,조선업 ,입찰,항공 또한 조달..등의 이야기 와 온라인 유통에 대해 많은 지식을 갖추라고 이야기 하십니다. ​ 제가 얻은 답변 중 회사의 일원으로써 갖추어야 하는 능력은.. AI UI/UX 설계 데이터 분석 어디서 부터 어떻게 시작해야 하는지 어떤 커리큘럼 을 가지고 따라갈수 있을지 문의 드리고자 합니다. 제가 현재 많은 지식을 갖추고 있는 사람이 아닌지라, 어리석은 우문 만 드리게 되었습니다만, 여기 계신 분들의 고견을 부탁 드려도 될런지요?

자바스크립트의 이벤트 처리 질문

리액트로 이미지 inpainting 컴포넌트를 만들고 있습니다. 사용자가 이미지 업로드를 하면 canvas 영역에 그 이미지가 채워지고 그 이미지에 mask 영역을 칠할 수 있는 이미지 에디터 컴포넌트인데요, 궁금한게 생겨 질문드립니다. 첨부한 코드는 컴포넌트의 코드중 이미지 업로드 시 onChange 이벤트의 처리기인 handleImageUpload 함수와, handleImageUpload 함수에서 호출되는 loadImage 함수의 코드입니다. 사용자가 input 요소에 이미지를 업로드하면 onChange 이벤트가 발생해 handleImageUpload 함수가 실행되고 loadImage 함수가 실행됩니다. loadImage 함수가 실행되면 img 객체가 생성되고 img 객체의 src를 지정하죠. 그러면 브라우저는 이미지 로딩을 시작하고 이미지 로딩이 완료되면 onload 콜백함수가 실행됩니다. 저는 이 과정을 자바스크립트의 콜스택, 이벤트 루프, 태스크큐 구조에서 나타내보자면 다음과 같다고 생각했습니다. 1. 초기상태 콜스택 : [ ] 태스크큐 : [ ] 2. 사용자가 파일을 업로드 -> onChange 이벤트 발생 콜스택 : [handleImageUpload] 태스크큐 : [ ] 3. handleImageUpload 내부에서 loadImage 함수 호출 콜스택 : [handleImageUpload, loadImage] 태스크큐 : [ ] 4. loadImage 내부에서 img 객체 생성 및 src 할당 콜스택 : [handleImageUpload, loadImage] 태스크큐 : [ ] Web API : 이미지 로딩 시작 5. loadImage 함수 종료, handleImageUpload 함수 종료 콜스택 : [ ] 태스크큐 : [ ] Web API : 이미지 로딩 진행중 6. 이미지 로딩이 완료되면 Web API가 onload 콜백을 태스크큐에 추가 콜스택 : [ ] 태스크큐 : [onload] Web API : 이미지 로딩 완료 7. 이벤트 루프가 콜스택이 비어있음을 확인하고 태스크큐에서 onload 콜백을 콜스택으로 이동 콜스택 : [onload] 태스크큐 : [ ] 8. onload 콜백 실행 (캔버스에 이미지 그리기 등) 콜 스택 : [onload, drawImage, ...] 태스크큐 : [ ] 일단 이 과정이 맞나요? 만약 이게 맞다면 생기는 궁금증이 있습니다. Web API에서 이미지 로딩이 진행되는동안 loadImage 함수 및 handleImageUpload 함수가 종료되면 loadImage 함수 내에서 생성된 img 객체는 가비지 컬렉터에 의해 지워져야 하지 않나? 그렇게 img 객체가 GC에 의해 사라지면 이미지 로딩이 완료되었을 시점엔 img 객체의 onload 함수도 없어진것이니 onload 함수의 로직은 실행이 되지 않아야 하는 거 아닌가? 하는 생각이 들어 질문드립니다

인강 추천부탁드립니다.

현재 프론트엔드 개발자로 취업을 준비중입니다. 자바스크립트와 리액트를 위주로 공부를 하다보니 UI만드는 부분이 많이 부족한데 사이트에 들어 갔을 때 이미지들이 순차적으로 나오는 기능들과 슬라이드 등 HTML, CSS, JS를 가지고 실무처럼 사이트를 만드는 그런 인강이 있을까요? 괜찮은 인강이 있다면 추천부탁드립니다.

비주얼스튜디오 파일에 대해 질문있습니다.

현재 프론트엔드로 취업을 위해 공부중이고 맥북을 사용하고 있습니다. 비주얼 스튜디오로 html, css, js 를 공부하고 리액트도 설치하면서 공부를 하고 있는데 맥북 바탕화면 만들때는 괜찮은데 외장하드에 폴더를 만들고 비주얼스튜디오에 파일을 생성하니 아래 이미지처럼 파일이름 앞에 ._ 이런게 붙더라구요. 그래서 삭제를 하면 나중에 또 생기는데 이런거 안나오게 하는 방법이 있을까요?

프론트엔드 취업에 대해 질문있어요

현재 프론트엔드로 취업을 준비중인 프론트엔드 개발자 취준생입니다. 국비학원 포함해서 공부한지는 1년 조금 넘었는데 그 동안 이력서를 낼려고 해도 제 실력이 아직 많이 부족하다는 생각에 선뜻 이력서를 내지 못하고 계속 공부만 했는데 우선 지금도 실력이 아직 부족하지만 리액트로 axios사용, api 불러와서 화면에 출력, 라우터사용, 지도api 정도는 할 줄 아는 정도이고 무한스크롤, 그 외 기능은 챗GPT와 구글링을 통해 코드를 찾는 정도입니다. 지금은(아래이미지) 한국관광공사API를 가지고 연습겸 정말 간단하게 현재 제가 살고있는 지역의 관광명소를 이미지로 보여주고 이걸 클릭하면 모달창으로 상세정보와 카카오지도 연동으로 위치를 보여지게 만들었는데 혹시 이 정도도 신입으로 이력서를 내면 안되는 실력일까요?

한국관광공사API 에 대해 질문있습니다.

안녕하세요 현재 리액트를 공부중이고 한국관광공사API를 사용해서 제가 살고있는 지역의 관광명소를 이미지로 보여주고 클릭시에 모달창이 나오면서 해당 관광명소의 이름과 전화번호 설명이 나오는 간단한 사이트를 연습중에 있습니다. 이미지와 전화번호 이름은 데이터로 잘 가지고 왔는데 해당명소의 설명이 나와있는 데이터가 안보이더라구요. 이미지처럼 저 데이터들중에 어떤걸 사용해야 해당명소의 설명이 적힌 데이터가 나오나요?

프론트엔드 공공데이터포탈 사용법 질문있습니다.

안녕하세요 현재 프론트엔드로 취업을 위해 공부중이고 공공데이터포탈 사이트를 통해서 간단한걸 한번 만들어볼려고 하고 있습니다. 공공데이터포탈 사이트에 있는 한국관광공사_국문 관광정보서비스라는 API를 가지고 제가 살고 있는 대구지역에 있는 관광정보의 이미지, 설명, 해당장소 지도표시 등 간단하게 만들어 볼려고 하는데 활용 메뉴얼을 보니 아래이미지에 있는 주소에 api_key를 넣어서 우선 자바스크립트로 fetch를 이용해서 데이터가 들어오는지 확인해봤는데 데이터가 잘 나오긴 하지만 데이터 내용이 이미지처럼 저렇게 밖에 데이터가 들어오지 않는데, 지역 장소들, 위치, 이미지등이 나오게 할려면 어떻게 하면 되나요?

[구인] 오픈노트, AI 기반 영상/이미지 분석 - 전문가 및 협업자 모집

안녕하세요, 현재 AI를 활용한 수위 측정 프로젝트를 진행 중에 있습니다. ai 영상/이미지 분석에 능숙하신 분들의 협업을 구하고자 합니다. <프로젝트 개요> *문제점: 현재 IoT 기기를 활용한 수위 측정 중 오탐이 간헐적으로 발생. 이로 인해 부득이하게 업무가 증가하는 상황. *목표: AI를 통해 정확한 수위 측정을 구현하여, 오탐을 줄이고 업무 효율을 높이는 것. <제공 가능 데이터> 1.수위 값 데이터 (센서 측정 값) 2.수위 관련 이미지 3.추가적인 데이터 요청도 협의 가능 <협업 관련> *AI 분야 전문가 또는 관련 연구를 하고 계신 분들 중에서 개발에 도움을 주실 분들을 찾습니다. *특히 이미지 분석 관련 구현할 수 있는 경험이 있으신 분을 우대합니다. <기간> * 이번 주 9월 29일까지 모집 * 작업 10월 내(작업 기간 2~3주 예상) * 프로토타입 시연 10월 말 금액과 프로젝트 세부 사항은 협의 후 진행될 예정입니다. 관심 있으신 분들은 하단에 네이버폼 작성해주시면 감사하겠습니다. https://naver.me/FxFyw9vl

리액트 설치에 대해 질문있습니다.

안녕하세요 리액트를 공부하고 있는 프론트엔드 취준생입니다. npx create-react-app ./ 이걸로 리액트를 설치하니 아래 이미지 처럼 packge.json 파일이 있고 packge.json 앞에 ._ 이걸 붙어서 하나씩 더 생기더라구요. 이건 왜 그런건가요?

신입 프론트엔드 개발자 이력서 피드백 부탁드립니다!

프론트엔드 개발자 직무로 지원하기 위해 이력서를 작성해 보았습니다. 경력자 분들의 따끔한 피드백 부탁드리겠습니다! https://traveling-creek-527.notion.site/tiny-bf-color-838383-7881d64d8bba47a49df376e7ddf8825c pdf로 변환 시 이미지처럼 나옵니다

웹 UX/UI 프로젝트 디자이너 모집합니다!!

스타트업 'Gapture'에서 모바일 반응형 웹서비스 피그마 디자인 프로젝트 팀원을 구합니다.😊 디자인 내용&과정 - 기획자들이 작성한 데이터플로우, 기획, 컨셉 이미지와 컬러는 구성되어 있음. - 와이어프레임 작업 + 디자인 작업 약 12페이지 내외 - 실무 개발자(주니어개발자 2인, 풀스택 17년 경력자 1인)와 지속적인 소통을 통한 협업 근무형태 - 서울 거주자 : 재택, 줌 - 원주 거주자 : 연세대학교 미래캠퍼스 컨버젼스홀, 줌 보수 : 100만원 작업물에 따라 추후 추가 프로젝트 요청 계획 있음 시작일 : ASAP 디자인 데드라인 : 10/30일(일) 해당 작업에 시간을 충분히 할애할 수 있는 분 휴학생, 졸업생, 고학번 우대🔥 자세한 내용은 아래 링크로 문의주세요!! https://open.kakao.com/o/sIuiDJNg 위 링크로 접속해서 성함/연락처/생년월일/학번 그리고 최신 작업물이나 포트폴리오 보내주세요!!

리액트 설치에 대해 질문있습니다.

안녕하세요 프론트엔드 개발자로 공부를 하면서 준비중에 있습니다. 노트북을 사용하고 외장하드에 폴더를 만들어서 공부를 하는데 오늘도 리액트를 공부할려고 외장하드에 폴더를 만든 후 npx create-react-app ./ 이 명령어를 사용해서 설치를 하는데 계속 이미지처럼 저런 오류가 계속 나오더라구요. 갑자기 왜 이런지 모르겠는데 어떻게 하면 오류가 없어지나요?

포트폴리오 사이트 고민

안녕하세요. 부트캠프에서 프로젝트 2개 다른 프로젝트 2개해서 포트폴리오 사이트를 만들어 해당 목록에 올릴예정입니다. 문재가 있다면 부트캠프에서 진행한 프로젝트가 백엔드와 협업한 프로젝트라 프로젝트가 끝남과 동시 백엔드에서 서버를 닫아 따로 보여줄 링크가 없습니다. 그나마 영상이나 사진 정도이고 프로젝트 특성상 로그인작업으로 인해 프론트엔드만 연결해도 무용지물이라 어떻게 보여야할지 고민입니다.. 깃허브에 이미지 및 유튜브 영상 링크정도는 올릴 수 있을 것 같은데 이정도도 괜찮을까요..?

프론트엔드 포트폴리오에 대해 질문있습니다.

안녕하세요 개인포트폴리오 사이트를 만들어볼려고 하는데 제가 예전에 국비학원에서 백엔드반과의 협업해서 만든 프로젝트가 몇개 있는데 처음엔 배포한 사이트가 잘 나오다가 어느순간 주소연결이 되지않아 사이트가 나오지 않더라구요. 그래서 개인 포트폴리오 사이트를 만들때 그냥 주소로 들어가서 보는것이 아닌 그냥 이미지만 보여주면서 설명하는것도 괜찮을까요?

자연어처리든? 이미지처리든? 인공지능??

1. 어느 분야든 개발자 역량은 꼭 필요하다고 봐야 하나요? 프론트엔드, 백엔드 개발자····이런 멘트가 꼭 있던데요 그렇다면 자연어처리든 이미지처리든 이런 일을 하는 직무는 개발자로 봐야하는 건가요? 2. 인공지능 관련 직무는 개발자 말곤 없다고 봐야하나요?

자연어처리 VS 이미지처리

이제 공부를 시작하는 입장에서 자연어처리와 이미지처리 중 어떤 분야를 가고 싶은지에 대한 것을 미리 정해야한다는 조언을 받았습니다 여기서 문득 생긴 궁금증이 있습니다 자연어처리를 하는 직무에서 이미지처리를 하는 직무로 변경하는 것이 뿌리부터 바꿔야할정도로 많이 다른 분야일까요? 1. 이미지처리 쪽에 하고 싶은 분야가 있는데 이 분야가 딥러닝을 필요로 하는 것에 있어서 석사를 고려해야하는 것에 부담이 있습니다 2. 공기업 준비한다면 자연어처리가 더 나을 거라는 생각이 드는데요(금융권을 생각하고 있습니다) 이걸 사기업과 공기업의 차이로 볼 순 없겠지만, 자연어처리와 이미지처리의 직무 이동을 고려한다면 거의 불가능이라고 봐야할까요?

포트폴리오를 만들 때 질문있습니다.

안녕하세요 프론트엔드 개발자로 취업을 위해 공부중입니다. 부족하더라도 우선 간단한 사이트의 포트폴리오를 만들려고 하는데 예를 들어 간단한 전국 캠핑정보 (캠핑이미지, 주소 등)를 보여주는 사이트를 만들려고 한다면 구글에 캠핑api 이런식으로 검색을 해서 찾아서 사용을 하면 되는건가요? 캠핑 뿐만 아니라 혼자서 포트폴리오를 만든다고 하면 여러 api를 어떻게 찾을 수 있는지 방법 알려주시면 너무 감사드리겠습니다.

php + 그누보드5 관련 웹사이트 질문입니다

안녕하세요. 저는 React + TS 기반 프론트엔드 개발자 신입입니다. 회사에서 제작했던 사이트 중 하나가 php + 그누보드5로 제작 되었는데 해당 사이트를 리뉴얼 해야합니다. 그나마 수정 할 부분은 이미지 하나로 이루어진 랜딩페이지여서 목업은 php를 몰라도 진행이 가능하다 생각되는데 JS 라이브러리를 사용할 수 있는건지 몰라서 질문드립니다. 예를들어 AOS를 사용한다 치면 CDN SOURCES를 이용해서 라이브러리를 사용하면 되는걸까요? php와 그누보드를 하나도 모르다보니 간단한 페이지 수정은 가능하지만 기능 구현에 있어서는 기존 JS 개발하듯이 하면 되는지 모르겠네요.

환경변수 주입 및 빌드(모노레포)

모노레포 프로젝트 환경 및 요구사항 - 프로젝트는 front(React), back(Node), common 패키지로 구성되어 있으며, 모노레포로 되어있음 - Dockerfile 스크립트에서는 build → run 순서로 실행되도록 구현되어 있음 - 서버 배포 시에는 하나의 포트만 사용해야 하므로 back(Node)에서 front의 정적 파일(index.html)을 실행해야 함 - Docker 빌드 시, front(webpack 빌드)와 back 둘 다 build 스크립트를 실행하고, 이미지 실행 시에는 back만 run 스크립트를 실행하여 back에서 front의 정적 파일을 실행해야 함 - 환경변수는 이미지 실행 시 docker-compose.yml의 env_file 속성을 사용해 외부에서 주입해야 함(환경변수가 바뀌는 상황이 있다면 .env 파일을 수정한 후 다시 빌드해야 합니다.) 예외 상황 Docker 빌드할 때 .env 파일을 포함하지 않고 run 스크립트를 실행(이미지 실행) 시 주입하는데, front 패키지에는 run 스크립트가 존재하지 않습니다. (back에서 front의 정적 파일을 실행) 즉, 환경변수가 주입되지 않고 있음 해결 방법 첫번째는 back에서 front의 dist 파일 호출 시 환경변수 객체를 만들어 value 값을 key 값으로 치환해서 함께 넘기고, index.html의 head에서 window 객체를 활용해 값을 받는 방법 하지만 이 방법은 개발자 도구에서 환경변수 값이 노출되고, window 객체를 활용하기 때문에 새로운 브라우저를 생성할 때마다 사이드 이펙트가 발생할 수 있음 두번째는 모노레포 root 패키지에서 prerun 스크립트로 front의 build 스크립트를 실행하는 방법 스크립트 -> "prerun": "lerna run build --parallel --scope @projectname/front --stream", 이 방법은 빌드를 두 번 실행하므로 자원을 많이 소모하지만, 예외 상황이 없는 것으로 보임 질문 받은 내용 Q. 환경변수를 바꾸는 상황이 존재할까요? A. 회사의 인프라 환경에 따라 다르지만, 포트나 IP가 변경될 수 있는 상황이 있음 예를 들어, 외부 서버에 요청을 보낼 경우 그 서버의 정보가 바뀌면 설정을 변경해야 하며, 다른 서버에 요청할 때 인증 정보를 입력해야 하는데, 토큰이나 사용자 패스워드 값이 변경될 경우에도 수정이 필요함 고민되는 부분 다른 해결 방법이나 비슷한 상황이 있다면 함께 논의하고 싶습니다. ㅎㅎ *프로젝트 구조 root ├── packages │ ├── back │ │ ├── package.json │ │ ├── index.ts │ │ ├── .babelrc │ │ └── ... │ ├── common │ ├── front │ │ ├── public │ │ │ └── index.html │ │ ├── package.json │ │ ├── src │ │ │ └── index.js │ │ ├── src │ │ ├── webpack.config.js │ │ └── ... ├── package.json ├── lerna.json ├── docker-compose.yml ├── Dockerfile * 프로젝트의 중요 정보는 제외했습니다.

공공데이터 활용시 이미지는 어떻게 하시나요

공부중인데 공공데이터를 들고오는거까지 성공했는데 들고오는 데이터중에 이미지가 있어서 선택했는데 이미지값이 ="" 빈값이더라고요. 데이터포털사이트에 문의를 했는데 빈값이라면 이미지가 없는게 맞다고 하는데, 활용사례보면 이미지를 넣어서 작업한것도 있더라고요. 다른분들은 어떻게 하는지 궁금합니다.

next.js의 캐시와 react query 캐시 질문

next.js와 react query를 사용해 프로젝트를 진행하다가 이해가 안되는 현상이 있어서 질문드립니다. 어떤 A 라는 페이지에 들어오면 포스트와 포스트의 댓글들이 보이는 상황입니다. 첨부한 코드는 A 페이지를 담당하는 page.tsx 코드와 page 에서 사용중인 컴포넌트중 댓글 컴포넌트인 Comments 컴포넌트, 그리고 Comments 에서 useQuery의 queryFn으로 지정한 getComments 함수의 코드입니다. Comments 컴포넌트의 useQuery의 staleTime은 10초로 해두었고, queryFn인 getComments 함수의 fetch는 revalidate를 60초로 해둔 상황입니다. useQuery의 staleTime보다 fetch의 revalidate 시간을 길게 한건 react query로 인한 클라이언트측의 캐시와, next.js의 fetch에 의한 서버 측의 캐시의 차이점을 확인해보려고 그런것입니다. A 페이지에 처음 들어와 page 컴포넌트가 실행되면 ['posts', id, 'comments'] 쿼리로 인해 받아온 댓글(comments) 데이터가 화면에 보입니다. 이 댓글에는 랜덤으로 생성된 이미지가 있습니다. 우선 10초가 지나기 전에는 새로고침에도 기존의 데이터 그대로 보이고, fetch 요청을 받는 백엔드 api에도 요청이 들어오지 않습니다. react query로 인해 쿼리가 실행되지 않아서 그런 것이겠죠? 그러고 10초가 지나 ['posts', id, 'comments'] 쿼리가 stale 상태가 된 후에 A 페이지를 새로고침하면 ['posts', id, 'comments'] 쿼리는 다시 fresh 해지는데 백엔드 api에는 요청이 들어오지 않았더라구요. 화면상의 댓글의 이미지들도 이전과 동일하게 나옵니다. 저는 이게 "A 페이지에 들어와 page 컴포넌트가 실행되면 ['posts', id, 'comments'] 쿼리가 실행되어 fetch 요청이 실행되는데 이 ['posts', id, 'comments'] 쿼리는 서버 컴포넌트에서 프리패치 되는 거니까, 즉 fetch가 서버쪽에서 실행되는 거니까 react query의 캐시가 아닌 fetch의 캐시 설정을 따른다. 그렇기 때문에 ['posts', id, 'comments'] 쿼리가 실행되어 fetch가 실행되지만 fetch의 캐시는 남아있으니까 캐싱된 값을 사용해서 백엔드 api에는 요청이 안들어온것이다." 라고 생각했고 이걸 확인하기위해 새로고침을 해본것이었기 때문에 이 결과에 대해 납득하긴 했는데요.. 이 생각이 맞는건지가 일단 궁금합니다. 그리고 진짜 이해가 안되는건 이겁니다. A 페이지에 들어오고 10초가 지나 ['posts', id, 'comments'] 쿼리가 stale해지면 이번에는 다른 페이지로 이동했다가 A 페이지로 다시 돌아옵니다. A 페이지에서 새로고침을 하지 않고 사이트 내에서 페이지 이동으로 A 페이지에 다시 들어오는거죠. 이러면 백엔드 api에 요청이 들어오더라구요. 이게 왜 그런건지 모르겠습니다. 10초가 지나 ['posts', id, 'comments'] 쿼리는 stale 해졌지만 60초는 안지나서 fetch의 캐시는 유효한... 위의 새로고침 경우와 동일한 상황인데 새로고침 시에는 api로 요청이 안들어오고, 다른 페이지로 이동했다가 다시 돌아온 경우는 api로 요청이 들어오네요. A 페이지에서 새로고침을 하나, 다른 페이지에서 A 페이지로 페이지 이동을 하나, 둘 다 page 컴포넌트가 실행되고 ['posts', id, 'comments'] 쿼리가 서버에서 프리패치되니까 fetch가 서버에서 실행되는거 아닌가요? 근데 왜 새로고침하면 fetch의 캐싱이 적용되는것처럼 백엔드 api로 요청이 안들어오고 페이지 이동 시에는 들어올까요... 이걸 아무리 생각해도 모르겠습니다. 60초가 지난 후에는 새로고침 시에도 백엔드 api로 요청이 들어오더라구요. 이것으로보아 60초 전에는 새로고침 시 요청이 안들어오는게 fetch의 캐시 때문인것도 맞는 거 같은데, 왜 페이지 이동 시에는 60초 전에도 캐싱값을 안쓰고 api로 요청을 보내는지 모르겠습니다. 어떤 메커니즘으로 이렇게 되는것일까요? 아직 Next.js의 캐싱과 react query에 대해 잘 알지 못해서 이해가 안됩니다.. ㅠ 도와주십쇼..!

Next.js 코드 가독성..

안녕하세요 프론트앤드 1년차에 다가가고 있는 신입 개발자입니다. 현재 Next14를 사용하고 있으며 코드의 가독성, 효율성을 많이 고려하면서 코드를 짜려고하는데 너무 고민이 되네요 저보다 앞서서 달려가고 있는 개발자 선배님의 생각을 듣고싶습니다 ㅠㅠ... 2가지가 궁금합니다. 먼저 첫번째 이미지처럼 Version에 관련된 파일을 저렇게 분리했을 때 저는 Version의 최상위 Layout.tsx에서 모든 것을 선언하기가.. 너무 오히려 가독성이 안좋다고 생각을 하고 있습니다 즉, 변수나 함수를 모두 최상위 Layout.tsx에서 선언 및 정의를 해두고 props로 내려주는게 이상하다고 생각을 합니다. 변수, 함수, useEffect 모두 직접 해당 변수나 함수를 컨트롤하는 부분에서 선언 및 가공을 하는게 맞다고 생각을 합니다. 최상위 Layout.tsx가 너무 무거우면 오히려 나는 VersionDataTable에 관련된 변수나 함수만 보려고 하였으나 최상위 Layout.tsx를 보고 아 이게 VersionDataTable에 필요하구나 뭐가 필요없구나, useEffect의 의존성 배열까지 고려하는것이 불필요하다고 생각을 하고 있습니다.. 근데 같이 프론트 앤드 개발하시는 분께서는 '단기적으로 절대 코드가 변하지 않는다고 생각하면 그 말씀이 맞는데 그건 아니잖아요? 우리는 계속 유지보수를 할거고 그러면 결과적으로 A에서만 사용하던 변수나 함수들을 A,B,C에서 같이 사용할 수 있게 변경하게 되면 그때 변경하면 유지보수 측면에서 너무 안좋습니다. 최상위에 모두 선언이나 정의를 해두고 props로 내려주는게 맞다 이런 형식으로 코드를 작성하면 몇개월 뒤에 코드를 수정할 때 A가서 수정했다가 C가서 수정했다가 D가서 수정하실 거에요? 바로 알아보실 수 있겠어요?' 라고 말씀을 하시더라구요.. 물론 몇개월 뒤에 코드를 보거나 하면 제가 작성한 코드인데도 저는 헷갈리는 경우가 많습니다. 그러나 최상위에 모두 선언 및 정의해둬도 마찬가지 아닌가..? 유지보수 측면에서 뭐가 안좋은거지..? 라고 생각되게 됩니다.. 선배님의 말씀을 따라가고는 싶은데 이해가 안돼서요 제가 아직 기본기가 많이 부족한 상황이라 이 상황에서 말씀드리면 이론부터 말하며 설득시키기가 부족하다고 생각하기 때문에 말씀드리면 오히려 '저는 이렇게 생각해요 틀렸는데요?' 라고 말하는 것 같아 말다툼이 될 것 같습니다. 2. 밑 사진을 보면 modalTemplate라는 폴더, ConfirmTemplate이라는 폴더가 존재하는데요 이것에 대해서 저는 사용하는 용도에 따라서 Create면 Create Create와 Update를 동시에 할 수 있는거면 BundleCreateAndUpdate 이런 형식으로 각각의 파일을 생성을 하고 문법상 공유되는 부분은 중복이 되어서 실제로 보여주는 부분을 영역으로 나눠서 BasicOptions, SelectList, VersionDetail, VersionOptions로 나누고 각각의 파일에서 사용하는 부분만 불러와서 쓰는 형식으로 코드를 작성했습니다. 그러나 이렇게 용도에 따라 구분하지 않고 최상위 Layout.tsx파일 하나만 만들고 ModalType이라는 props를 받아서 ModalType이 create, update, create&update, delete ... 등 JSX에서 삼항 연산자를 써서 처리를 할수도 있습니다. 저는 ModalType으로 처음에 구분하다보니 나는 'create' 속성일 때 어떤 형식으로 되는지 코드로 보고싶은데.. 그러면 너무 뜯어서 봐야하더라구요 그래서 용도에 맞게 파일을 만들고 거기서 form을 불러오기만해서 중복 코드를 줄이는 방식을 택했습니다.. (더 나은 코드라고 생각했습니다.) 그랬지만 선배님께서 'ModalType으로 나누는게 더 좋아요 저렇게 지으면 가독성이 너무 떨어지고 파일의 이름이 너무 길어지잖아요 이상하지 않나요?' 라고 말씀을 하시더라구요... 물론 가독성은 사람마다 다른거 알고있습니다. 그러나 ModalType으로 나누기 시작하면 한도 끝도없이 나누고 ModalType이 delete일 때만 사용하는 함수, create일 때만 사용하는 함수 등 필요없는 함수도 너무 많아져서 용도에 맞게 파일을 구분하고 거기서 중복 코드만 최대한 줄이자! 라고 생각하여 코드를 작성했는데 이 내용도 말씀드려 봤지만 '가독성' 이라는 이유 하나만으로 너무 안좋다고 합니다.. 진짜 안좋은건가요..? Next 도 그렇고 프론트 앤드 너무 어렵습니다..

프론트엔드 취업에 대해 몇가지 질문있습니다.

안녕하세요 프론트엔드 취업을 준비중인 비전공자입니다. 취업관련 2가지 질문이 있습니다. 1. 작년 국비학원에서 백엔드팀과 협업 프로젝트를 했는데 당시 백엔드에서 스웨거를 이용하여 데이터를 받았는데 수료후에 스웨거 자체에서 오류가 있어 현재 배포한 프로젝트 주소로 들어가면 오류가 발생합니다. netlify로 다시 배포를 해서 나오긴하지만 이미지같은 데이터는 나오지 않는데 무슨 방법이 없을까요? 2. 국비학원 수료후 혼자 계속 공부한지 약 1년이 다되가지만 개발자분야로 취업이 힘들고 또 개인사정까지 생겨 정말 어쩔수없이 개발자분야가 아닌 단순업무 분야로 일을 다니면서 퇴근 후에 계속 프론트엔드 공부를 하고 있는데 인강을 보면서 할땐 코드가 해석이 되고 쉽다고 생각을 했는데 막상 혼자 코드를 작성을 할려고 하면 코드작성이 힘들더라구요. 혼자 코드를 작성한다고 해도 인강에서 봤던 코드를 외워서 적는 느낌도 드는데 혼자 코드를 작성할 수 있고 응용까지 가능한 공부방법이 있을까요? 실력이 많이 늘 수 있는 공부방법 조언부탁드립니다.

리액트 네이티브에서 mms를 보내는 방법이 있을까요?

예를 들어, 서버에서 이미지 파일(png)를 받아오고, 그걸 리액트 네이티브에서 다른 유저에게 문자 메시지 형태로 이미지를 보내려고 하는데 잘 안되네여 ㅠㅠ

인공지능 공부 순서 추천해주세요.

인공지능 관련 대학원을 진학하려고 하는 대학생입니다. 파이썬은 어느정도 다룰줄 알고 수학은 미적분, 확률 등등 배웠는데 선형대수는 아직 배운적이 없습니다. 머신러닝 -> 딥러닝 -> 이미지처리 -> 자연어처리 -> 생성모델 순으로 공부를 시작하려고 하는데 혹시 더 좋은 인공지능 공부 로드맵이 있을까요?? 대학원을 졸업하고 자율주행 쪽으로 가고 싶습니다!!

리액트에서 스크롤로 opacity 조절할때, ref vs opacity

안녕하세요. 리액트로 스크롤할 때 opacity를 조절하는 기능을 만들고 있습니다. 이 컴포넌트에는 작성자, 이미지 등 다양한 값들이 존재하는데요. 스크롤할 때는 style의 opacity만 변경됩니다. 그렇다보니.. 굳이 리렌더링을 트리거하는 state로 이걸 관리해야되나 싶긴한데요. 이런 상황이라면 다들 어떻게 개발하시나요?

리액트에서는 호이스팅이 다른이유?

순수 자바스크립트에서는 함수선언문으로 만든 경우에만 호이스팅단계에서 선언과 초기화가 코드 실행 전에 이뤄져서, 선언부보다 윗라인의 코드에서 사용할 수 있다고 배웠습니다. 그런데 첨부한 이미지처럼, 리액트에서는 함수형 컴포넌트를 화살표함수로 만들고, const를 사용해서 변수를 선언해도 선언부보다 윗라인의 코드에서 사용이나 참조가 가능한 이유가 뭔가요?? 구글에서 글을 여러개 찾았는데 이야기 하는게 다 달라서 너무 햇갈리고 궁금합니다.