#vite

객체 배열에 대해서 컴포넌트를 어떻게 설계하시나요??

안녕하세요. 객체배열에 대해서 컴포넌트를 여러분은 어떻게 제작하고 계실까요?? 처음에는 첫번째 처럼 컴포넌트를 제작하다가 다른 곳에서도 재활용 할수있는 컴포넌트가 좋을것같아서 두번째 코드처럼 설계를 했는데 단점이 이중 for문을 쓰게 되는것 입니다… 제머리로는 더 깊게는 생각이 안나서 혹시 다른방법을 사용하고 계신분이 계실까요?? 첫번째(정적인 설계) function example() { const object = [ { id: 1, age: 17, name: 'strict' }, { id: 2, age: 16, name: '"love"' } ] return ( <> {object.map((item, index) => ( <div key={item.id}> {item.age} {item.name} </div> ))} </> ) } 두번째(동적인 설계) function example() { const object = [ { id: 1, number: 17, title: 'strict' }, { id: 2, number: 16, title: 'love' } ] const object2 = [ { id: 1, age: 17, name: 'strict' }, { id: 2, age: 16, name: 'love' } ] const value1 = ['number', 'title'] const value2 = ['age', 'name'] const TwoFor = ({obj, value}) => obj.map((item) => value.map((v) => { return <div>{item[v]}</div> }) ) return ( <> <TwoFor obj={object} value={value1} /> <TwoFor obj={object2} value={value2} /> </> ) }

vite에 관하여 질문드립니다.

프로덕션에 vite를 사용하여 개발환경을 구성하려고 공부 중인데, 궁금한 점이 생겼으나 정보가 파편화되어있어 정확한 이해가 어려워 질문 올립니다! 제가 vite 공식 가이드와 구글링하면서 이해한 바로는 “기존 브라우저 환경에서는 모듈화된 코드들을 브라우저가 읽을 수 없어 webpack과 같은 번들러를 이용해 하나의 파일로 합치는 과정을 거쳤고, 이것이 일반적인 번들러의 역할이었으나 브라우저가 ESM을 지원하면서 import, export를 별도의 도구 없이 브라우저 자체에서 해석할 수 있고 처리할 수 있게 되었으며 vite는 이 점을 활용하여 번들링 과정 없이 바로 실행하여 파일이 import되어 필요할 때 불러오는 방식을 사용한다. “ 라고 이해했는데 혹시 맞을까요? 추가로 vite의 공식 가이드에는 “프로덕션에서 번들 되지 않은 ESM을 가져오는 것은 중첩된 import로 인한 추가 네트워크 통신으로 인해 여전히 비효율적입니다” 라고 나와있는것을 보았을때, 위에 적힌 번들링없이 실행하는 것은 개발모드에만 사용되며, 프로덕션에는 여전히 webpack과같이 번들링을 진행하며 webpack대신 Rollup을 사용한다는 점만 다르다고 이해하였는데 이부분에서 틀린내용이 있을까요? 만약 그렇다면 vite가 강조하는 장점이 프로덕션에는 크게 작용하지않는다고 느껴져서요. 질문 자체가 잘못되었거나 ,틀린내용이 있다면 편하게 지적주시고 알려주시면 감사드리겠습니다!

react-google-recaptcha를 다루기가 너무 어려워요.

안녕하세요. 이번 프로젝트에서 reCaptcha를 사용하여 로그인을 구현을 하고 있습니다 :) 그래서 react-google-recaptcha라는 라이브러리를 활용하고 있는데, 2가지 정도의 난관이 있더라구요. 내용은 아래와 같습니다. 1. ReCAPTCHA 컴포넌트의 width값을 반응형으로 조절하기가 어렵습니다. 인라인 스타일, 상위에 래핑하여 width를 먹여도 그대로이며, ReCAPTCHA 컴포넌트의 속성인 size를 활용해도 더 나아지는 부분이 보이질 않습니다. 2. google reCaptcha에서 sitekey와 secretkey를 받고 아래와 같이 코드를 작성하였습니다. 그런데도 계속 다음과 같은 모습만 보이네요.. 잘 작동하는 key인데 말이죠. 저도 열심히 경험을 많이 쌓아서 다른 분들의 고민을 해결해주는 그런 사람이 되고 싶네요. 감사합니다 :) + 아, 참고로 개발환경은 React + Typescript + Vite입니다. 해당 라이브러리 주소 : https://www.npmjs.com/package/react-google-recaptcha

vitest toHaveStyle

Input 컴포넌트를 클릭 했을 때, border-color가 제대로 변경되는지 확인하는 테스트 코드를 작성하고 있습니다. Input이 Focus 되었을 때 사진과 같이 border-color가 #3182ce로 변경되는데 테스트 코드 상에서는 에러가 발생합니다. expect($input).toHaveStyle({ borderColor: '', }); 이런 식으로 작성했을 땐 통과가 되는데 #3182ce 값으로 변경됐는지 확인 할 수 있도록 테스트 코드를 작성하는 방법이 있을까요?

리액트 프로젝트 vite로 빌드후 서버에 배포시 cannot get...

react-router-dom 을 사용중에있습니다. vite로 빌드하고 서버에 올렸는데... 경로 이동시 cannot get 이 뜹니다. 찾아본결과 서버에서 요청 url을 찾아서 그렇다 , 모든 서버 요청을 /index.html로 리디엑션하도록 하면 된다고 하는데 혹시 vite에서 그런 설정을 할 수 있나요?

브라우저 API KEY 노출 관련

안녕하세요 프론트엔드 개발자 취업을 준비 중인 취준생입니다 다름이 아니라 프로젝트를 진행함에 있어 궁금증이 생겼는데 생각보다 답을 찾기가 어려운 것 같아 질문 올려 봅니다 오어스나 지도, open ai 등의 api를 사용할 때, 개발자도구 네트워크 란에 들어가니까 api키가 쉽게 노출되더라구요 인증 토큰까지야 어치피 자신의 것이 노출된다고 생각하긴 하는데 api key나 다른 시크릿 키 등은 위험할 수도 있겠단 생각이 들었습니다 env가 생각보다 쉽게 노출되기 때문에 보안에 중요한 부분은 넣지 않아야 한다고 들었습니다만 위와 같은 경우, 브라우저에서 키를 보이지 않게 하는 방법이 어떤 게 있을까 해서 여쭤봅니다 조금 찾아 봤더니 사실 플랫폼 도메인과 redirect uri 같은 것을 등록하기 때문에 외부 오리진에서 api 키를 이용하는 것은 막혀 있다고 알고 있긴 한데 이렇게 잘 구성되어 있지 않은 부분이 있을 수도 있고, 말 그대로 민감한 정보가 노출될 수도 있다고 생각해서 가릴 수 있는 방법을 알고 싶습니다 FE는 ts vite react에 배포는 vercel로 진행했고 환경 변수는 버셀 프로젝트 세팅 환경 변수에 넣었습니다

프론트엔드 테스트코드 어떻게 하세요?

안녕하세요. 2년차 프론트엔드로 일하고 있는 주니어입니다. 사내에 테스트코드 도입 전 혼자 해보고있는데요, tdd를 하고 계시는 다른 현직자 분들에게 궁금한점이 있습니다. 유닛 테스트 : jest, vitest E2E 테스트: cypress, playwright 위의 도구로 이것저것 해보고있는데 하면서 까다로운 점이 있습니다. 일반 유틸 함수 같은 것은 유닛테스트가 비교적 간단하지만 프론트 엔드이다 보니 컴포넌트 테스트를 하려면 무조건 DOM 으로 불러와야하고, 사이즈가 큰 컴포넌트는 뭔가 잘 되지도 않고, 이럴거면 그냥 E2E만으로 하면 되지 않나 라는 생각도 들고... 실제로는 unit 테스트 도구로 컴포넌트 dom으로 불러와서하고 e2e도 따로 하시나요? 아니면 e2e로만, unit으로만 이렇게 한가지로만 하시나요??

react key error가 생깁니다.

브라우져에서 원하는 화면대로 잘 나오는데 콘솔창에 아래와 같은 에러가 생깁니다. Warning: Each child in a list should have a unique "key" prop. 왜 발생하는 걸까요?? 그리고 해결해야하나요??? import React from 'react'; function Test() { const items = ['hello', 'world', 'hi', 'javascript']; return ( <div> {items.map(item => ( <h1>{item}</h1> ))} </div> ); } export default Test;

프론트엔드인데 AWS, CICD에 대해 몰라요.

3년 차인데 물 경력인 것인 지, 요즘 다들 스펙보면 화려해보이던데 제가 할 줄 아는거라곤, JavaScript(TypeScript), HTML5, CSS3, React정도입니다.. 적고나니 엄청 물경력같네요; 요즘 Next가 핫하기에 Next.js까진 공부하려고 하는데 Vitest도 공부해야할 것 같고.. CICD 파이프라인도 공부해야하는 건 지, AWS도 요즘 스펙에 자주 언급되는 것 같고.. 막막하네여 스펙을 무엇부터 채워야할까요..?

react 배포할 때 vite vs create-react-library

React용 라이브러리를 개발하고 이제 배포를 준비하고 있습니다. 지금까지는 Vite를 사용했는데 리액트 라이브러리 배포에는 보통 Create-React-Library를 쓴다고 들었습니다. 그래서 Vite로 계속 진행해도 괜찮은지, 아니면 변경하는게 좋을지 고민이 되는데 개발자 선배님들은 어떻게 생각하시나요?

신입 개발자 기술 스택 수준

안녕하세요. 웹 개발 쪽으로 입사한 지 1년 정도 되어가는 신입 개발자입니다. 이전에 "IT 신입 포지션 변경"이라는 질문 글을 쓰고, 많은 관심 가져주셨었는데 그 이후가 현재 상태입니다 ㅎㅎ 약 1년 정도 회사를 다니면서 요즘 궁금한 점이.. 제가 하고 있는, 또는 했었던 것들이 신입 개발자에게 요구되는 당연한 것들인지가 궁금해서 질문드립니다. 먼저, 저희 회사는 중소 기업치고는 사원수가 꽤 있는 편에 속합니다. (2~300전후) 저는 백엔드 공부 후에 어쩌다 보니 프론드 개발자로 입사했고, 추후 백엔드도 같이 맡게 될 거라 듣고 들어왔습니다. 먼저 제가 와서 사용한 기술 스택입니다. (git, postman 등과 같은 툴 또는 라이브러리는 제외) React, Next, Vite, TypeScript, Keycloak, Nginx, Docker, Jenkins, MySQL, MongoDB, Spring, JSP.. 일단.. 생각나는 건 이 정도이고, 막상 적고 보니 많은 걸 했네요.. 지식의 깊이는 물론 신입 입장이기에 깊지는 않지만, 해당 기술들을 사용하고 활용하는 부분에 있어서는 문제 될 정도는 아닌 것 같습니다. 프론트 쪽은 소규모부터 대형 프로젝트(진행 중)까지 거의 혼자? 진행을 했고..(현재 프로젝트의 서버는 시니어분이 하고 계심) 지금도 하고 있습니다. 서버 쪽은 혼자 직접 파이프라인 설계 및 빌드, 배포까지 해봤고 서버에 도커 올리는 것까지도 다 해본 것 같습니다. (물론 정말 힘들었지만 동작은 잘 됨.. 왜 되는지는 그때나 지금이나 저도 모름) 같은 개발자 친구들은 저보고 많이 하는 편이라고는 하는데, 같은 신입이라 정확히 얼마나 많이 하는 건지 감이 잘 안 옵니다. (그냥 하라면 해야지라는 마인드라..) 시니어 분도 조금씩 시키시다가 잘 해내서 점점 업무를 많이 주시는 건 알고 있는데, 현직 자분들의 생각이 궁금합니다.

react 테스트 코드 작성할 때 어떤 걸 사용하나요?

안녕하세요 프엔 신입입니다! 태스트코드를 적용시켜보려고 합니다. 찾아보니 jest가 제일 유명한 것 같은데 저희는 react, ts, vite를 사용하고 있습니다. cra의 경우 jest를 많이 쓰는 것 같은데 vite 환경이여도 상관 없는지 궁금합니다ㅠ vue 공식에서는 vitest라는 것을 사용하라고 하는데 정확히 무슨차이인지 와닿지 않아서ㅠ

프론트엔드 웹뷰 질문입니다.

1. 웹뷰 작업은 vite react 로 해도 괜찮을까요? 구글링 했을때 레퍼런스가 많지 않아서 정확하게 결정을 못내리겠습니다 2. Next 로 작업을 한다면 SSR 이외에 이점은 뭐가 있을까요? 3. 웹뷰 작업 후 React 는 AWS 를 이용한다면 S3 버킷에 올려 퍼블릭 엑세스 할당 후 클라우드 프론트를 태워서 호스팅 하면 될 것 같은데 Next 는 어떤 방식으로 호스팅을 할까요? 기존에 Vercel 과 EC2 위에 Next 프로젝트를 호스팅 한 경험이 있습니다. 4.앱에서 로그인이 된 상태에서 웹뷰를 띄었을때 세션을 유지하는 방법은 어떻게 될까요? 로그인 인증은 JWT 방식입니다. 네이티브 앱에서 로그인 된 상태에서 웹뷰를 띄어서 세션을 유지하는 방법의 플로우를 알려주시면 감사하겠습니다.

주니어 프론트엔드 고민 ㅜㅜ

프론트 개발자로 1년이 되어 이직을 하게 되었는데 질문이 있습니다. 최종합격을 통보받고, 입사해서 어떤 라이브러리와 프레임워크로 개발할지 궁금하여 물어봤는데, vue, nuxt.js, vite를 사용한다고 답변이 왔었고 Next.js를(심지어 전 직장에서는 생판 처음써보는 JSP로 Vue를 CDN으로 불러와 로우레벨로 유지보수를 해서 실무 사용 경험은 또 없습니다 ㅜㅜ) 가장 잘 다루는 저에게는 vue는 너무 생소한것 같습니다. 물론 하나를 알고 있으면 다른 하나도 쉽게 배울 수 있는건 알지만, 저는 한참 부족하고 머리가 남들보다 좋지않아서 많은 시간이 필요할 것 같습니다. 제가 입사하고 일을 잘 할지도 모르겠고 수습기간에 짤리지는 않을까 너무 걱정입니다 ㅜㅜ. 또 이사람들은 저를 왜 뽑은건가 싶기도 하구요... 역시 1년차라 신입과 다를게 없으니, 그냥 처음부터 알려준다고 생각하고 개발 외의 부분을 좋게 봐주셔서 저를 뽑았다고 생각하고 편안한 마음으로 다니는게 맞는거겠죠...? 이번에 연봉이 정말 많이 올라서 심적으로 더 걱정되는 것 같아요..

Vite를 사용하는게 좋을까요? CRA를 대체할 수 있는 방법이 궁금합니다.

클론코딩으로 React를 배우고 있습니다. Create React App 말고 직접 리액트를 세팅해보고 싶은데 Vite를 사용해보는게 좋을까요? CRA와 비교했을 때 장점등이 궁금합니다!

프론트엔드 배포 시 보안관련 질문드립니다.

안녕하세요. 신입으로 일하고 있는 프론트엔드 개발자입니다. 최근에 포트폴리오 사이트를 만들고 배포 경험도 해볼 겸 리액트 프로젝트를 생성하고 배포에 성공했습니다. EC2에 아마존리눅스와 nginX를 사용했고 프로젝트는 vite로 생성한 react입니다. 첫 배포기도 하고 혼자 진행하는거다보니 보안 위협에 대한 걱정이 생기는데요. 프론트엔드에서 보안을 책임질 수 있는 방법이 뭐가있을까요? 일단 계획상으로는 포트폴리오 사이트기 때문에 백엔드 없이 프론트에서 제 이력사항을 보여주려합니다. ps. 배포를 했는데 500에러가 발생해서 검색을 해봤습니다. chmod 711 /home/ec2-user 이러한 명령어를 입력해서 본인은 읽기 쓰기 실행 권한을 얻고 다른 사용자는 실행 권한만 갖게한다고 하길래 이대로 해서 배포에 성공했습니다. 근데 이 설정에는 보안적인 문제가 없을까요? https는 아직 설정안했지만 추가할 예정입니다.

다른 웹의 타이틀과 미리보기 이미지 가져오기

안녕하세요. 다른 웹의 오픈그래프의 타이틀이나 미리보기 이미지 데이터를 활용하고싶어 혼자 개발하다 조금 어려움을 겪고 있어요. 구글링 해도 잘 나오질 않네요.. fetch 함수를 사용하여 가져오는게 맞나요? 클라이언트 환경은 react vite 사용하고 있어요.