#style

프론트엔드 이직 준비로 어떤 것들을 하는게 좋을까요?

안녕하세요. 경력 2년차 프론트엔드 개발자입니다. 이전에 두 개의 회사에서 프론트엔드 개발자로 일했는데 불행하게도 두 회사 모두 임금체불로 인해 퇴사를 하게 되었습니다. 그래서 이번에는 50인 이상의 규모를 가진 회사로 이직하는 것을 목표로 이직을 준비하고 있습니다. Next.js, React, Typescript @tanstack/react-query, Context API, Recoil Vanilla-extract, emotion, styled-components, tailwind-css, Sass 위와 같은 스킬들을 공부 및 경험해보았고, Vanilla-extract, tailwind-css를 제외한 스킬들은 실제 업무에서도 활용하였습니다. 현재 저는 [1. 코딩테스트, 2. 기술블로그, 3. 개인프로젝트] 를 매일 반복하며 이직을 준비하고 있습니다. 이대로 계속 이직을 준비하면 될지, 아니면 다른 무언가를 더 준비해야할 지, 앞으로의 이직 준비 방향에 대해 알려주시면 감사하겠습니다. 추가로 혹시 이력서 피드백 해주실 수 있는 분 계시면 말씀 부탁드립니다... 서류에서 계속 떨어지다보니 개발자 입장에서 피드백을 꼭 받아보고 싶습니다...!

RAG 를 짜는 중에 도무지 어떤 부분이 문제인지 모르겠습니다.

# JSON 파일에서 FAQ 데이터를 로드하는 함수 def load_faq_data_from_json(file_path): with open(file_path, 'r', encoding='utf-8') as f: faq_data = json.load(f) return faq_data # FAQ 데이터 로드 json_file_path = '' faq_data = load_faq_data_from_json(json_file_path) # ChromaDB 클라이언트 및 Embedding 설정 chroma_client = chromadb.Client() # ChromaDB 클라이언트 생성 # 고유한 컬렉션 이름 생성 collection_name = "faq_data_" + datetime.datetime.now().strftime("%Y%m%d_%H%M%S") collection = chroma_client.create_collection(collection_name) # LangChain의 Text Splitter 설정 text_splitter = RecursiveCharacterTextSplitter( chunk_size=512, chunk_overlap=50 ) # OpenAI 임베딩 설정 openai_api_key = '' embedding_function = OpenAIEmbeddings( model="text-embedding-ada-002", openai_api_key=openai_api_key ) # 텍스트 스플리팅 및 임베딩 생성 함수 def split_and_embed_text(text): splitted_texts = text_splitter.split_text(text) print(f"Splitted texts: {splitted_texts}") try: # OpenAIEmbeddings는 embed_documents를 사용합니다. embeddings = embedding_function.embed_documents(splitted_texts) except Exception as e: print(f"임베딩 생성 중 오류 발생: {e}") return None # 임베딩이 제대로 생성되었는지 확인합니다. if embeddings is None or len(embeddings) == 0: print("임베딩 생성 실패") return None # 임베딩을 numpy 배열로 변환 embeddings = np.array(embeddings) print(f"Embeddings shape: {embeddings.shape}") # 임베딩 벡터의 차원을 확인하고 처리합니다. if embeddings.ndim == 1 and embeddings.shape[0] == 1536: # 임베딩이 1차원 배열이고 길이가 1536인 경우 final_embedding = embeddings elif embeddings.ndim == 2 and embeddings.shape[1] == 1536: # 임베딩이 2차원 배열이고 두 번째 차원이 1536인 경우 final_embedding = np.mean(embeddings, axis=0) else: print("임베딩 벡터의 차원이 예상과 다릅니다.") return None print(f"Final embedding shape: {final_embedding.shape}") return final_embedding # FAQ 데이터를 Vector DB에 저장 def store_faq_data_in_vector_db(faq_data, collection): for faq in faq_data: # 'question'과 'answer'가 있는지 확인하고, 'answer'가 None이 아닌지 확인 if 'question' not in faq or 'answer' not in faq or faq['answer'] is None: print(f"누락된 'question' 또는 'answer'로 인해 항목을 건너뜁니다: {faq}") continue # 다음 항목으로 넘어감 # 텍스트 스플리팅 및 임베딩 생성 question_embedding = split_and_embed_text(faq['question']) if question_embedding is None: print(f"Embedding generation failed for question: {faq['question']}") continue # 임베딩이 없으면 다음 질문으로 넘어감 print(f"Generated embedding for question '{faq['question']}': {question_embedding}") # 각 질문에 고유한 ID 생성 faq_id = str(uuid.uuid4()) # 메타데이터에서 None 값을 제거 metadata = {k: v for k, v in {"answer": faq['answer']}.items() if v is not None} # Vector DB에 저장 collection.add( documents=[faq['question']], metadatas=[metadata], ids=[faq_id], embeddings=[question_embedding] ) # 추가 후 임베딩 확인 (저장된 후 곧바로 확인) stored_results = collection.get(ids=[faq_id], include=["embeddings"]) if stored_results['embeddings'] is not None and len(stored_results['embeddings']) > 0: print(f"Embedding for question '{faq['question']}' successfully stored.") else: print(f"Failed to store embedding for question '{faq['question']}'") # FAQ 데이터를 JSON에서 로드하고 저장 store_faq_data_in_vector_db(faq_data, collection) 이렇게 데이터를 저장하고 # 환경 변수에서 API 키 로드 openai_api_key = os.getenv("OPENAI_API_KEY") if not openai_api_key: raise ValueError("OpenAI API 키가 설정되지 않았습니다. 환경 변수 OPENAI_API_KEY를 설정하세요.") # OpenAI 임베딩 설정 embedding_function = OpenAIEmbeddings( model="text-embedding-ada-002", openai_api_key=openai_api_key ) # LangChain의 Text Splitter 설정 (일관성 유지) text_splitter = RecursiveCharacterTextSplitter( chunk_size=512, chunk_overlap=50 ) # ChromaDB 클라이언트 및 컬렉션 설정 chroma_client = chromadb.Client() collection_name = "faq_data_collection" try: # 이미 존재하는 컬렉션인지 확인하고, 있으면 가져옴 collection = chroma_client.get_collection(name=collection_name) except chromadb.errors.CollectionNotFoundError: # 컬렉션이 존재하지 않을 경우에만 생성 collection = chroma_client.create_collection(name=collection_name) # Vector DB에서 유사 질문 검색 (ChromaDB) def find_similar_question_in_vector_db(new_question_embedding, collection, k=5): results = collection.query(query_embeddings=[new_question_embedding], n_results=k, include=['documents', 'metadatas', 'embeddings']) best_similarity = 0 best_question = None best_answer = None # 검색 결과에서 각 질문의 유사도와 답변을 처리합니다. if 'documents' in results and 'metadatas' in results: documents = results['documents'][0] metadatas = results['metadatas'][0] embeddings = results['embeddings'][0] for i in range(len(documents)): stored_embedding = embeddings[i] metadata = metadatas[i] if stored_embedding is not None: # 코사인 유사도를 통해 유사도를 계산합니다. similarity = cosine_similarity([new_question_embedding], [stored_embedding])[0][0] print(f"유사도: {similarity} for {documents[i]}") # 유사도가 가장 높은 결과를 선택하며, 임계값 이상일 경우에만 선택 if similarity > best_similarity and similarity >= SIMILARITY_THRESHOLD: best_similarity = similarity best_question = documents[i] if isinstance(metadata, list): metadata = metadata[0] best_answer = metadata.get('answer') if isinstance(metadata, dict) else None return best_question, best_answer # Fine-tuned GPT를 사용해 새로운 답변 생성 def gpt_generate_response_from_finetuned_gpt(question, style="의사 A 말투"): prompt = f"다음은 환자의 질문입니다: \"{question}\". 아래 말투를 사용하여 질문에 대해 성실하고 정확한 답변을 작성해주세요.\n\ 말투: {style}" response = client.chat.completions.create( model="", # Fine-tuned된 GPT 모델 ID messages=[ {"role": "system", "content": "You are a helpful medical assistant."}, {"role": "user", "content": prompt}, ], max_tokens=300, temperature=0.7, # 답변의 다양성을 조절합니다. ) return response.choices[0].message.content.strip() # 새로운 질문 처리 및 최종 응답 생성 def generate_final_response(new_question, collection): # 텍스트 스플리팅 및 임베딩 생성 splitted_texts = text_splitter.split_text(new_question) new_question_embedding = np.mean(embedding_function.embed_documents(splitted_texts), axis=0) # ChromaDB에서 유사 질문 검색 similar_question, answer = find_similar_question_in_vector_db(new_question_embedding, collection) if similar_question and answer: final_response = f"질문: {new_question}\n유사 질문: {similar_question}\n기본 답변: {answer}" else: generated_answer = gpt_generate_response_from_finetuned_gpt(new_question) final_response = f"질문: {new_question}\nGPT로 생성된 답변: {generated_answer}\n(이 답변은 벡터데이터에서 유사한 답변을 찾을 수 없어 GPT에 의해 생성되었습니다.)" return final_response # 사용자로부터 새로운 질문 입력 받기 new_question = input("새로운 질문을 입력하세요: ") # 최종 응답 생성 response = generate_final_response(new_question, collection) print(response) 로 데이터베이스에서 유사한 질문-답변 쌍을 끌어오려는데 정확히 같은 질문을 넣어도 (이러면 유사도가 1인데) 저장되어있는 답변이 끌어와지질 않네요...

[사이드 프로젝트] 패션 이커머스 플랫폼 '푸츠(PUTS)' 앱 개발팀 모집

프로젝트 소개: ‘푸츠(PUTS)_Pick Up The Style!’서비스는 패션 디자이너 브랜드를 중심으로 BM특허까지 보유한 혁신적인 패션 커머스 플랫폼서비스 입니다. 데모버전까지 외주개발을 통해 개발이 완료되었지만 현시점에서 리뉴얼하여 새롭게 런칭버전을 개발하고자 역량있는 팀원을 모집합니다. <참고> 본 서비스의 시장성은 2024년 약 19조 5천억원(캐주얼) 정도의 시장성을 예상하고 있으며 연간 약 3.5%씩 지속적으로 성장 중에 있습니다. 3-5년이내 시장의 10%이상 점유를 목표하고 있으며 시장을 장악 가능한 비즈니스 모델과 마케팅 능력을 보유하고 있습니다. (참조: https://global.fashionseoul.com/2023-11-10/Korean-Fashion-Market-Size-Anticipated-Highest-Growth-Ever) 우리는 패션과 기술을 접목해 사용자와 소비자에게 최상의 쇼핑 경험과 정보 공유, 소득을 제공하는 서비스로 패션산업의 큰 파도를 함께 일으킬 분들을 모집합니다. 사이드 프로젝트 형태로 진행되며, 유연한 근무 환경에서 협업을 지향합니다. 3-5년이내 엑싯을 목표로 진행됨으로 임금지급 방식이 아닌 지분분배 방식으로 진행됩니다. 프로젝트 완료시 파트별 기여도에 따라 지분설정이 되며 관련 내용은 프로젝트 진행 전 협의를 통해 산정하여 계약진행 예정.(급여를 제공 받고자 하시는 분은 정중히 사양합니다.) 모집 직군: 1. 프론트엔드 개발자 (1~2명) o 주요 업무: 모바일 앱 UI/UX 구현, 웹 랜딩페이지, 사용자 인터페이스, 어드민 프론트엔드 개발 o 기술 스택: React Native 또는 Flutter, JavaScript/TypeScript, HTML/CSS o 우대 사항: 모바일 퍼포먼스 최적화 경험, 패션 커머스 개발 경험 2. 백엔드 개발자 (1~2명) o 주요 업무: 서버 및 데이터베이스 설계, API 개발, 어드민 백엔드 개발 o 기술 스택: Node.js, Django, AWS, PostgreSQL, RESTful API o 우대 사항: 대용량 트래픽 처리 경험, 보안 및 결제 시스템 개발, 이커머스 어드민개발 경험, 포인트관리 및 쿠폰설정 관리 등 3. UI/UX 디자이너 (1명) / 대표자와 함께 진행 또는 대표자가 진행 o 주요 업무: 모바일 앱 디자인, 사용자 경험 설계 o 필수 스킬: Figma 또는 Photoshop, Illustrator o 우대 사항: 패션 브랜드 디자인 경험, 사용성 테스트 및 피드백 반영 경험 근무 형태: • 프로젝트 기반 협업 (파트타임 가능) • 원격 근무 가능 (주 1회 온라인 미팅) • 유연한 일정과 주도적인 업무 환경 우대 사항: • 사이드 프로젝트 경험 • 패션, 커머스에 대한 관심과 열정 • 스타트업 문화에 익숙한 분 • 책임감 강하신 분 지원 방법: • 이력서와 포트폴리오를 [dcode00@naver.com]로 제출 • 지원 시 사이드 프로젝트 경험 및 참여 가능 시간을 명시해 주세요. 문의: • 이메일: [dcode00@naver.com] • 카카오톡/오픈채팅방: [https://open.kakao.com/o/gi5ixgVe] • 회사주소: 경기도 안산시 상록구 한양대학로55 제2과학기술관 지하2층 B210호 (한양대학교 에리카캠퍼스 소재) 지원 마감일: [채용 완료시까지] 로켓펀치 참여링크 https://www.rocketpunch.com/jobs/139647 문의: • 이메일: [dcode00@naver.com] • 카카오톡/오픈채팅방: [https://open.kakao.com/o/gi5ixgVe]

웹폰트 나눔스퀘어네오 윈도우 크롬 적용안되는 현상

React 프로젝트이며, 웹폰트로 나눔스퀘어네오 cdn방식으로 가져오고 있습니다. 맥에서는 잘 적용되는데, 윈도우 크롬 콘솔에 에러 뜨고 네트워크탭 - 폰트 확인 시 404가 뜨는데, 혹시 저와 같은 현상인 분 있으신가요?? 콘솔 에러 OTS parsing error: Unable to instantiate font face from font data. ``` @font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff') format('woff'); font-weight: normal; font-style: normal; } ``` 나눔스퀘어네오 폰트 https://noonnu.cc/font_page/1053

마이크로 프론트 구현(Nextjs, React)

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

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

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

프론트엔드 취준 이력서,포폴 고민

안녕하세요. 현재 부트캠프 다니는 학생입니다. 취업준비를 위해 포트폴리오, 이력서 비중을 둬야하는 것은 알지만 "포폴을 만들때 어느정도의 수준까지 만들어야 얼어붙은 취업시장의 경쟁력이 있는 포폴이 되는지 궁금"합니다 포토로폴리오 같은 경우 현재 부트캠프 외에 팀원들과 따로 만들고 있지만, 취업시장의 기대치에는 부족함을 느꼈습니다. <분리수거 배출방법 알려주는 프로젝트> typescript, styled-componets, zustand, firebase 등만 사용해서 진행하였는데 아주 간단하다보니 트러블슈팅도 없었고, 더 나아가 분리수거와 관련된 api를 활용하고자 했는데 해당 api도 없어서 분리수거 관련 퀴즈 기능, 동영상 추가 기능을 만들어볼 계획이고, moking data인 배출방법, 로그인, crud만 있는 프로젝트입니다..

공공데이터 API 호출 및 렌더링 과정에서 고민이 있습니다..

공공데이터api 관련 프로젝트를 진행 하고 있습니다. 기획, 디자인 전부 저를 비롯한 팀원과 함께하고 있는데, api를 불러와 정보 데이터를 표시하는데 <p><span style="color: rgb(13, 13, 13); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space-collapse: preserve; background-color: rgb(255, 255, 255);">덕순이.. 이상하게 보자마자 덕순이란 이름이 떠올랐어요.</span></p><p><span style="color: rgb(13, 13, 13); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space-collapse: preserve; background-color: rgb(255, 255, 255);"><br></span></p><p><span 이런식으로 스트링 값으로 불러와집니다. 문자열로만 추출하니 개행, 문장 이음새 등등이 가독성이 아래사진 처럼 매우 떨어지게 됩니다 다음 상황에서 어떤 방법이 좋을까요? 위와 같은 태그로 표시되기에 이를 React에서 그대로 태그 형식으로 출력하는 방법을 생각해보고 있지만, 컬러,폰트 크기 같은 속성은 제외하고 <p> <span>등의 태그만 유지하도록 필터링해야하는 것인가요? 혹시 그렇다면 그 필터되 값을 문자열 형식말고 태그형식으로 적용할 수 있을까요? (추가) 현재 gpt 도움으로 아래의 방법으로 진행하여 성공하게 되었는데 이방법보다 효율적인 방법이 있을까요? 또한 이방법으로는 폰트 사이즈, 굵기가 임의 조절이 되지않는 단점이 있어서 이를 해결하고 싶습니다.

안녕하세요 html,css질문입니다 제발 도와주세요

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>중경삼림</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script> <script> jQuery( function() { jQuery( '#background' ).YTPlayer(); } ); </script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="jb-box"> <div id="background" class="player" data-property="{ videoURL:'https://www.youtube.com/watch?v=ncT1R2hMpaQ', mute: true, showControls: false, useOnMobile: true, quality: 'highres', containment: 'self', loop: true, autoPlay: true, stopMovieOnBlur: false, startAt: 9.5, opacity: 1 }"></div> </div> <br><br><br> <div id="director"> <br><br><br><br> <h1>왕가위</h1> </div> </body> </html> 이건 html이고, body{ margin: 0; } .jb-box { position: relative; } #background { z-index: -1; } 이건 외부 css파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...

리액트 쿼리 에러 핸들링 이슈

react query를 활용한 에러 핸들링이 안돼서 질문 올립니다... //mainpage.tsx const { data, refetch, isFetching } = FetchData(url); const handleSearch = () => { refetch(); } <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}> {resultVisible ? ( <Result searchData={searchData} isFetching={isFetching} /> ) : ( <EmptyResult /> )} </ErrorBoundary> )} </QueryErrorResetBoundary> react-error-boundary 라이브러리를 이용해 ErrorBoundary 컴포넌트를 가져왔습니다. ErrorBoundary 하위 컴포넌트 내에서 에러가 발생하면 FallbackComponent의 FallbackUI 컴포넌트가 렌더링 되도록 했습니다. //FallbackUI 컴포넌트 //에러가 발생히면 이 컴포넌트가 렌더링되어야합니다. const FallbackUI = ({ error, resetErrorBoundary }) => { return ( <div> <span>{error.message}...</span> <button onclick={resetErrorBoundary} /> 돌아가기 버튼 </div> ); }; export default FallbackUI; FallbackUI 에서 QueryErrorResetBoundary 에서 제공하는 resetErrorBoundary를 받아와 에러 발생 후 '돌아가기 버튼'을 클릭하면 쿼리오류를 처리하고 리셋해주도록 구현했습니다. //url을 파라미터값으로 받아와 api호출하는 함수 //위에 있는 mainpage.tsx 에서 사용하는 함수입니다. const FetchData = (url: string) => { const { error, data, refetch, isFetching } = useQuery({ queryKey: ["repoData"], queryFn: async () => { const res = await axios.get(url); console.log(res.data); return res.data; }, refetchOnWindowFocus: false, enabled: false, }); return { error, data, refetch, isFetching }; }; 리액트 쿼리를 이용해 api를 호출하는 함수입니다. //main.tsx const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 0, throwOnError: true, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <BrowserRouter> <GlobalStyles /> <Provider store={store}> <App /> </Provider> </BrowserRouter> </QueryClientProvider> </React.StrictMode> ); 마지막으로 전역으로 에러 관리를 하도록 세팅해놨습니다. 그리고 QueryClient에 throwOnError 속성이 있어야 에러를 ErrorBoundary로 전달할 수 있다해서 추가해줬습니다. 이렇게 세팅해놨는데 에러발생하면 그냥 하얀색 화면만 나오고 fallbackUI가 나오지 않습니다... 원인이 뭘까요...ㅠㅠㅠ 혹시 몰라서 콘솔 에러코드도 올립니다.. 추가로 궁금한 점 1. useQuery 에서 반환하는 객체중 error 객체는 어떤 존재인지 궁금합니다. 2. useQuery 속성과 QueryClient 속성 모두 throwOnError : true 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!

개발 공부를 어떻게 하는게 좋을까요? (feat. 프로젝트)

얼마 전 Next.js로 개인 프로젝트를 진행했습니다. 그런데 프로젝트를 진행해보며 제가 어떤 방식으로 개발 공부 뱡향성을 잡아야하는지 혼란스러워 질문드립니다 ,, 🙏 처음 Next.js 쓸 때는 복붙 ,, 같은 기능도 복붙해서 파일 여러 개 만들기를 하고, 서버 컴포넌트와 클라이언트 컴포넌트에 대해 잘 알지 못한채로 프로젝트를 했었습니다. (+ 상태관리나 ,, 이런 것도 아예 모르고 개발했었습니다 ,,) 이번에 제대로 공부해서 기능을 구현해보고 싶어 다시 시작해서 완성했습니다. 그런데 제가 작성한 코드를 다 이해하며 작성했지만, **제가 작성한 코드가 좋은 코드인지? 에 대한 의문이 생겼습니다.** 그래서 팀 프로젝트도 참여해보며 같은 프론트 팀원 분의 코드를 확인해보며 좋아보이는 부분은 참고도 했지만, 이 방법도 한계가 있었습니다. 더 잘해보고 싶어 빨리 보여져야하는 이미지는 이미지를 미리 로드한다거나, next/image로 이미지 최적화를 하고 최대한 코드 중복을 줄이고자 공통 컴포넌트들을 만들기 위해 노력하긴 했었습니다. (나중에 스토리북 이라는 라이브러리를 알게되어 이걸 사용해보지 못한게 아쉽긴 했습니다.) 그래도 많이 부족한거 같아 어떻게 더 나은 개발을 해야할지 잘 모르겠습니다 ,, 첫 프로젝트에서는 부트스트랩 외에는 사용해보지 않아 이번에 제대로 다양한 기술을 써보고자 시도도 해보았습니다. (> 서버 상태 관리를 위해 tansack query도 사용해보고 클라이언트 상태 관리를 위해 recoil을 사용하고, 스타일링에는 css in js가 궁금해 styled components, 직접 어느정도 깔끔한 디자인을 하고싶어 피그마 툴을 이용해보았습니다. 소셜 로그인도 넣어보고 몽고 db 사용하며 데이터베이스도 연결해보았는데 ,, 막상 완성하고 나니 제가 많이 부족하다는 생각이 들었습니다.) 🤔 제가 작성한 코드가 좋은 코드인지 ,, 더 나은 성능을 위해 어떤 개발을 하면 좋은지와 같은 부분은 제가 어떻게 학습하는게 가장 좋은 방법일까요? 또한 어떤 것을 더 배워서 적용해보는게 좋을까요? ,, (제가 생각했을 때 프로젝트를 완성은 했지만, 제 프로젝트의 매력적인 점이 없는거 같아 너무 아쉬운거 같습니다.)

vitest toHaveStyle

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

package.json 파일에 대해 질문있습니다.

프론트엔드 공부하고 있는 초보자입니다. 공부를 하다 몇가지 궁금한점이 있어 질문을 드립니다. 1. 처음에 html, css, js 파일로만 만들어 코드 작성을 하고 필요한 패키지들은 cnd 코드를 복붙해서 이렇게 사용을 했었는데 npm init -y 이 명령어를 작성하는 이유는 무엇인가요? 2. npm install 로 패키지를 설치하면 node_modules폴더가 생성되는데 이 폴더는 설치된 패키지 관련 폴더들이 들어있는건가요? 3. package.json에서 설치한 패키지를 사용할때 아래 이미지 처럼 코드를 수정해서 npm run 명령어를 이용해서 실행을 하던데 경로를 작성을 한건가요? 첫번째 이미지는 parcel ./index.html 을 작성했고 두번째는 sass인데 sass는 styles/main.scss 로 했는데 inex.html로 할지 main.scss로 할지 이건 어떻게 알 수있나요? 그리고 두번째 이미지에서 "node-sass": "node-sass" 이건 뭔지도 알고싶습니다. 초보자라 어려운 설명보다 정말정말 쉽게 설명해주시면 너무 감사드리겠습니다.

npm과 package.json에 대해 질문있습니다.

안녕하세요 코딩 공부를 하고 있는 초보자 입니다 공부를 하다가 npm에 대해 궁금한점이 있어 질문을 드립니다. 1. npm init -y 이러한 명렁어를 작성하던데 이건 무슨 명령어인지 쉽게 설명부탁드리겠습니다. 다양한 라이브러리? 뭐 이러한 것들을 사용하기 위해 사용하는 건가요? 2. 설치를 하면 package.json 이라는 파일이 생성되는데 이건 어떤 파일인지 궁금합니다. 3. package.json 안에 보면 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "node-sass": "node-sass", "sass": "node-sass styles/main.scss dest/style.css" }, 이러한 코드가 나오고 npm run node-sass 이러한 명령어도 사용하는데 이건 뭔지 궁금합니다. 지금까지는 html, css, js 를 공부할때 어떠한 것을 설치하지않고 그냥 각 파일만 만들어 코드작성을 한것뿐인데 이러한 것들을 설치하거나 하는 이유도 궁금합니다. 아무래도 초보자여서 구글링을 해서 찾아보고 하지만 설명들이 너무 어렵거나 헷갈려서 쉽게 알려주시면 감사하겠습니다.

styled-components props 사용 시 prefix ($)

리액트 프로젝트를 진행하고 있고, styled-components 을 사용해 스타일링하고 있습니다. 저번 프로젝트에는 뜨지 않았던 prefix ($)를 붙이라는 warning 메세지가 뜨는데 $ 를 붙이는 것에 대해서 어떻게 생각하시나요? 주니어 개발자라 동향을 따라가는 게 좋을 것 같아 질문 남깁니다...!

타입스크립트 'value' is possibly 'null' 에러 옵셔널체이닝으로 해결안되는 이슈

import DateRangePicker from "@wojtekmaj/react-daterange-picker"; import { useDispatch } from "react-redux"; import { dateFetch } from "components/feature/FetchSlice"; import styled from "styled-components"; type ValuePiece = Date | null; type Value = ValuePiece | [ValuePiece, ValuePiece]; export default function CustomCalendar() { const dispatch = useDispatch(); const [value, onChange] = useState<Value>([new Date(), new Date()]); return ( <CalendarBox> <Calendar>조회 기간</Calendar> <StlyedDateRangePicker onChange={onChange} value={value} onCalendarClose={() => { dispatch( dateFetch({ startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), }) ); console.log(value); }} /> </CalendarBox> ); } <StlyedDateRangePicker>는 styled component로 만든 DateRangePicker 라이브러리 컴포넌트입니다. DateRangePicker 에서 날짜 2개를 선택하면 value라는 배열에 Date 객체 2개가 들어갑니다. 그리고 onCalendarClose 함수가 동작하면서 redux로 만들어놓은 startDate, endDate 객체에 각각 date를 toISOString() 처리한 값이 할당되는 로직입니다. 날짜를 선택하기 전에는 value={value}의 value 배열요소인 Date객체 값이 null 값이니까 type ValuePiece = Date | null; 타입지정을 해줬습니다. startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), 근데 위 코드의 value[0], value[1] 에러가 나더라구요. 'value' is possibly 'null'.ts(18047) Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'Date | [ValuePiece, ValuePiece]'. Property '0' does not exist on type 'Date | [ValuePiece, ValuePiece]'. null 값일 수도 있다길래 옵셔널체이닝을 줬는데 여전히 에러가 발생합니다.. 해결방법을 도무지 모르겠네요.. 도와주시면 진심으로 감사하겠습니다ㅠㅠㅠ

vercel로 배포를 했는데 이미지가 화면에 업로드가 안되는데 뭐가 원인일까요??

vscode에서 리액트 프로젝트를 만들었고 vercel로 사이트를 배포했습니다. 배포된 사이트를 들어가면 전체적으로 잘 작동을 하는데 이미지 하나가 화면에 안뜨네요... 개발자 도구로 확인을 해보면 이미지를 불러오고 있기는 한데, 화면에는 안뜨는 이유가 뭘까요? 이미지는 화면 전체를 감싸는 컨테이너 컴포넌트에 스타일 컴포넌트를 적용하고 있는데 background에서 url을 불러오는 방식을 사용하고 있습니다. ex) const Container = styled.div` background: url('/images/Image.svg') ` 위와 같은 형식으로 작성을 했습니다. 원인이 뭘까요??

nextjs styled-component ssr 에러

모든 분들이 격어보셨을 에러에 대해 해결이 되지 않아 질문 드려봅니다. 아래 참고를 통해 nextjs ssr에서 styled-component가 적용되게 시도했습니다 (현재 app router 방식을 사용하고 있습니다) 하지만 동일하게 했을 때 여전히 아래와 같은 오류가 떴습니다. babel, swc 둘 다 시도 했을 때 동일 했고 혹시 제가 놓지고 있는 부분이 있을까요? 4번까지 진행했습니다. nextjs styled-component typescript 오류 : Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component 참고 : https://dev.to/rashidshamloo/using-styled-components-with-nextjs-v13-typescript-2l6m#5

프론트엔드 취준생의 고민을 들어주세요

안녕하세요. 3개월간 프론트엔드 부트캠프 수료후 독학 + 사이드 프로젝트 진행하고 있는 27세 취준생입니다. 디자이너였기에 눈에 보이는 것과 사용자경험을 만드는 것이 흥미롭고 뿌듯함을 느꼈고 그래서 프론트엔드에 흥미가 생겨 커리어전환을 하기로 했었습니다. 백엔드 쪽도 흥미가 있어서 먼저 프론트로 공부 및 취업 후 백엔드도 차차 공부해나가려고 했어요. 다행히 전 공부하고 새로운 것을 익히는 것을 좋아하기에 개발자가 적성에 맞는다고 생각합니다. 후에 학점은행제나 방통대를 다니면서 컴공에 대해서 공부를 하려는 목표도 있습니다. 요즘 시장이 좋지 않아서, 특히 프론트엔드는 많이 힘들더라고요. 채용시장을 보니 일반 기업들은 백엔드 직군과 자바를 사용하는 개발자를 많이 뽑는 것 같더군요. 그래서 아예 자바 백엔드 교육을 국비로 듣고 그쪽으로 취업을 해야할까 하는 생각도 듭니다… 물론 프론트도 제대로 해보지 않은 상태에서 분야를 바꾸는 것이 좋지 않다고 생각하지만 향후를 생각하면 시간을 좀 투자하더라도 백엔드로 진입하는 것이 유리하지 않나 생각도 드네요… 공부할 의지는 있고 열심히 할 자신도 있습니다. 독학도 나태해지지 않고 꾸준히 이어나갈 자신도 있어요. 다만 지금 방향을 잡지 못하고 있는 상태라 막막한 상태입니다. 부트캠프 커리큘럼과 교육이 좋지 못했기에 국비를 신중히 알아보고는 있으나 찾다보면 어디가 좋은지 더 혼란스럽기만 하고, 나이가 있는지라 마음이 조급해지니 판단도 잘 서지 않습니다. ㅜㅜ 어떻게 하면 좋을지 조언이나 충고 해주시면 감사할 것 같습니다. 현재 배운 언어 : 자바스크립트 스텍 : react,typescript,nextjs, tailwind, styled-component,recoil, react-query

React로 Table 만드는 것에 대한 질문입니다!

회사에서 Fetching 한 데이터를 위에서 가공 후에 Table Component에 주입을 하는 로직을 개발을 했습니다. 만약 데이터(행)가 100개이고 열의 개수가 9개일 경우 900개의 데이터를 주입을 하면 될 것으로 생각을 했고, 렌더링 속도에 문제가 없을 것으로 예상을 했습니다. 근데 렌더링 시 약 3초 정도의 연산 속도가 걸리게 되었고 console을 찍어보니 객체 안에 다른 많은 값이 있는 것을 알게 되었습니다. 1. Table에 가공된 데이터를 주입 시에 어떤 형식으로 데이터를 주입을 시켜야 할까요? 2. 만약 Table에서 하나의 Column 값만 바꾸고 싶다면 테이블 전체 렌더링이 아닌 다른 어떤 방식을 사용하실 건가요? 3. TableDataType도 맞게 작성을 했는지 잘 모르겠습니다. 4. 추측 상으로 Styled Component도 렌더링 속도 저하의 문제가 되는 것 같은데 렌더링 속도 저하 원인에 대한 정확한 이유를 아직 파악하지 못했습니다. (주입하는 데이터 형식의 문제인 것 같은데 1번과 이어지는 질문이기도 합니다)

NextJS13 모바일 구분 및 기술 문의

안녕하세요 nextjs13 으로 프로젝트를 진행할려고 하면서 문의 사항이 있습니다. 전제 조건으로 하이브리드앱으로 구현 예정이며, 웹뷰 방식으로 웹, 앱을 같이 사용할려고 합니다. (레이아웃을 웹, 앱 별도 구성 예정) 궁금한게 많아서 질문이 많이 있네요. 전문가분들 도움 부탁드립니다. 1. react-device-detect 모바일 여부를 구분하여 레이아웃을 구성할려고하는데, MobileView의 경우 use client 에서만 작동되는 것같습니다. MobileView을 사용하여 ssr 사용은 불가능한건가요? 2. style-component nextjs12 에서는 style-component를 사용되었는데 13으로 올라가면서 css-in-js방식을 사용 못하는것으로 보이며, tailwindcss, postcss를 권장하는걸로 보이는데 맞나요? 추가로 style-component 를 use client로 사용할 경우 하위에 들어가는 컴포넌트들이 다 csr 형식으로 되는게 맞는건가요? 3. RCS(React Server Components) children 으로 화면을 넘겨서 사용하는데 중간에 use client 를 사용하면 하위도 csr 형태로 인식이 되는건지 문의 드립니다. 감사합니다.

next.js CSS라이브러리 선택

안녕하세요. 취업준비를 하며 사이드 프로젝트로 next.js를 공부중입니다. css-in-js 가 편해서 styled-component를 프로젝트에 활용해왔는데 최근 app router 방식 (13, 14) 에서는 아직 css-in-js 를 ssr 환경에서 지원하지 않지만 stylex는 가능하다는 말에 swc > babel 로 변경하고 stylex를 쓰던 중 문제가 발생하였습니다. 'use server' 코드에서는 async 만 export 가능한데 swc를 채택한 next.js 에서 babel을 고려하지 않아 async 를 못 알아보고 에러가 난다는 것입니다. ( 추측입니다... ) 결국 많은 경험이 도움이 될 것이라는 긍정적인 마인드와 함께 css-in-css 라이브러리를 배워보고자 합니다. 혹시 next.js 프로젝트를 진행중인 선배님들은 어떤 css라이브러리를 사용중이신가요?

웹뷰 전역 레이아웃 스타일 관련 질문드립니다 !

안녕하세요 ! 웹 프론트엔드를 공부하고 있는 뉴비입니다. 현재 웹뷰(?) 프로젝트를 진행하고 있는데요 ! Nextjs와 styled-components를 이용해 개발하고 이를 PWA를 적용해 모바일에서 실행 가능하도록 하는것이 목표입니다. 페이지 작업 도중 개발자 도구의 각 모바일 기기 환경에서 레이아웃이 달라지는 문제가 발생하고 있는데요 ! 예를 들어, 아이폰 SE환경 (width 375px) 에서는 페이지의 컨텐츠가 얼마 없음애도 불구하고 y축 스크롤이 생기는 문제, 이보다 큰 기기인 아이폰 14 pro (width 430px) 등에서는 아래쪽 여백이 너무 많아 허전한 느낌이 듭니다 ㅠㅠ 이를 해결하려면 어떤 식으로 접근해야 할까요 ? 현재 globalCss는 캐치테이블(https://app.catchtable.co.kr/)의 Wrapper div를 참고하여 대강 적용해둔 상태입니다 .. !

react에서 Nextjs 마이그레이션

Nextjs마이그레이션 작업을 진행할려고하는데, 사실 막막한 부분이 여러가지가 있습니다. 첫번째는 CSS-in-JS인데 기존 react프로젝트의 styled-component로 제작되어 있는데, 제가 알기론 CSS-in-JS의경우 서버컴포넌트에선 현재 작동하지 않는걸로 아는데 보통 이럴경우 어떻게 진행하나요? 대체방안으로 따로 다른 CSS 라이브러리 등을 이용하는지 궁금합니다 두번째는 데이터 패치관련된 부분인데 Nextjs에서 fetchAPI 부분을 Nextjs에 맞게 캐시와 revalitate옵션을 제공해주는 형태로 제공해주는데, 기존에 프로젝트는 axios를 사용중인데 이것 또한 변경을 해야되는지 궁금하네요 현재 서버렌더링과 클라이언트 렌더링으로 나눠놓긴했는데 나누고보니 상당히 이슈가 많을걸로 예상되어 질문드립니다

Next.js app router 다크모드 깜빡 거림 문제

혹시 next app router에서 다크모드 설정 깜빡거리는 현상 해결해 보신 분 계신가요? 테마는 로컬스토리지에 저장해서 초기에 보여줍니다. Next 14 + styled-components 사용중입니다. 기존 page router에서는 _document.tsx에서 script 태그 dangerouslySetInnerHTML 사용해서 DOM요소 렌더링 이전에 로컬스토리지 저장된 모드 가져와서 관련 코드 실행 되게 끔 해서 깜빡임 현상을 해결했었습니다. app router에서 layout.tsx에 Script태그 이용해서 똑같이 적용하면 DOM요소가 렌더링 되고나서 실행이 되어서 기존 다크모드설정 후 새로고침 시 깜빡거리는 문제가 발생합니다ㅠㅠ 기존에 _document.tsx랑_app.tsx에 작성된 코드들은 layout.tsx에서 관리하는 걸로 알고 있는데 동작 방식이 다른 건지 기존과 다르게 동작합니다.. 여러 옵션을 사용해봐도 똑같네요... 관련 자료도 너무 없어서 nextjs github issue 뒤져보니까 똑같지는 않지만 비슷한 문제를 겪고 있는 issue가 있던데 해결이 안 된 거 같더라구요.. 이러한 상황에는 어떻게 해야할까요..? 개인 프로젝트고 해결이 된다면 정말 좋겠는데, 면접에서 이렇게 해결하지 못한 상황에 대해서는 어떻게 말해야할지도 고민입니다..

리액트 내비게이션 초기 데이터값 설정

import React, { useEffect, useState } from "react"; import { Link, useLocation } from "react-router-dom"; import { TbArrowBigUpFilled } from "react-icons/tb"; import useScroll from "../utils/useScroll"; import useProductsQuery from "../useProductsQuery"; const Nav = () => { const { isNavFixed } = useScroll(); const [activeButton, setActiveButton] = useState(0); const handleButtonClick = (index) => { setActiveButton(index); }; const categoryNames = { materials: "소재별 품목", purposes: "용도별 품목", }; const [isScrollMenuVisible, setScrollMenuVisible] = useState(false); const handleMouseEnter = () => { setScrollMenuVisible(true); }; const handleMouseLeave = () => { // console.log("마우스 이탈"); setScrollMenuVisible(false); }; const location = useLocation(); const isloginorsignup = location.pathname === "/login" || location.pathname === "/signup"; const { isLoading, isError, errorMessage, materials, purposes } = useProductsQuery(); const [hoveredOnedepth, setHoveredOnedepth] = useState(null); const [onedepthChildren, setOnedepthChildren] = useState([]); const [hoveredDivision, setHoveredDivision] = useState(null); const [twodepthDivision, setTwodepthDivision] = useState([]); const handleOnedepthMouseEnter = (item) => { setHoveredOnedepth(item); // console.log(setHoveredOnedepth) setOnedepthChildren(item.children); }; const handletwodepthMouseEnter = (child) => { setHoveredDivision(child); // console.log(setTwodepthDivision); setTwodepthDivision(child.divisions); // console.log(child.divisions); }; if (isLoading) return <>로딩 중...</>; if (isError) return <>{errorMessage}</>; return ( <> {!isloginorsignup ? ( <> {/* 대메뉴 */} <nav id="nav" className={`nav ${isNavFixed ? "fixed" : ""}`}> <div className="nav_wrap"> <div className="twobutton_wrap"> {["materials", "purposes"].map((category, index) => ( <Link type="button" className={`twobutton ${ activeButton === index ? "active" : "" }`} key={index} onClick={() => handleButtonClick(index)} to={`/${category}`} > {categoryNames[category]} </Link> ))} </div> {/* 내비게이션 1depth */} <div className="scrollnav"> <ul className="materialnav" style={{ display: activeButton === 0 ? "flex" : "none", }} > {materials.map((material) => ( <li key={material.id} className="materialnav_li" onMouseEnter={() => { handleOnedepthMouseEnter(material); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{material.name}</Link> </li> ))} </ul> <ul className="usagenav" style={{ display: activeButton === 1 ? "flex" : "none", }} > {purposes.map((purpose) => ( <li key={purpose.id} className="usagenav_li" onMouseEnter={() => { handleOnedepthMouseEnter(purpose); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{purpose.name}</Link> </li> ))} </ul> </div> <div className="call_wrap"> <div className="call"> <div className="call_title">견적 상담 · 문의 대표전화</div> <div className="top_button"> <TbArrowBigUpFilled className="top_icon" /> <p>TOP</p> </div> </div> </div> </div> </nav> {/* 2&3depth 호버 메뉴 */} <div className={`scrollmenu ${isScrollMenuVisible ? "show" : ""} ${ isNavFixed ? "fixed" : "" }`} style={{ visibility: isScrollMenuVisible ? "visible" : "hidden" }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {activeButton === 0 && ( <div className="scrollmenu_top"> <ul className="depth2_wrap"> {onedepthChildren.map((child) => ( <li key={child.id} className="depth2_menu" onMouseEnter={() => { handletwodepthMouseEnter(child); }} > <div className="depth2_menu_img_wrap"> <div className="depth2_menu_img"> <img src={child.images[0]._links.href} alt={child.name} /> </div> </div> <p>{child.name}</p> </li> ))} </ul> </div> )} <div className="scrollmenu_middle"> <div className="depth3_wrap"> {twodepthDivision.map((division) => ( <Link key={division.id} to="/" className="depth3_menu"> <span className="depth3_menu_img"> {/* images 속성이 없거나 비어 있어도 오류를 방지 */} {division.images && division.images.length > 0 && ( <img src={division.images[0]._links.href} alt={division.division_name} /> )} </span> <p>{division.division_name}</p> </Link> ))} </div> </div> <div className="scrollmenu_bottom"></div> </div> </> ) : null} </> ); }; export default Nav; 현재는 depth2_menu 호버해야만 depth3_menu가 보이는데 초기에 scrollmenu가 보일때부터 depth2_menu가 (onedepthChildren.map의 첫번째 순서의 데이터가) 호버되어있어 그에 매칭되는 division의 내용들이 depth3_menu에 보이게 할수있는 방법 있을까요 ?

프론트엔드 개발자가 되고싶어요..

안녕하세요 저는 대학교4학년 재학중인 학생입니다. 공대생이지만 컴퓨터쪽은 아니구요 저는 노마드코더를 통해서 공부를 시작했습니다 제가 할수있는건 html,css,javascript,typescript,react정도가 있습니다 상태관리는 recoil을 사용해봤고, 스타일링은 styled-components랑 tailwindcss를 사용해봤고 지금은 거의 tailwindcss만 사용중입니다. 핑계라면 핑계일수도 있겠지만 저는 아직 한번도 cs, 알고리즘 공부를 해본적이 없습니다 그냥 코딩을 하는게 좋아서 이 쪽 꿈을 꾸게되었습니다 그래서 막 알고리즘 cs공부 같은건 하지않고 매일 뭔가를 만드는데만 몰두했습니다(학교 일주일에 두번 가는거빼고 평일 주말엔 코딩만 합니다) 그런데 이제 졸업을 하고 취직을 할려고 하니 이때까지 만들었던 것들은 포트폴리오로 제출하기에는 사실 너무 그때그때 만들어보고싶거나 구현해보고 싶은거 위주로 하다보니 지금부터 새로 만들어야할거 같구요.. 이제 cs, 알고리즘도 공부를 시작해야할거같은데 어디서부터 어디까지 공부를 해야할지도 잘 모르겠고 입사를 하기위해서 무엇을 준비해야할지도 잘 모르겠네요 사실 cs,알고리즘을 공부할수록 이게 필요한건지도 잘 모르겠고 제가 좋아하던게 멀어저만 가는거 같아요.. 프로젝트 하나 더 제대로 만드는게 좋을거 같기도 하고 잘 모르겠어요 어떻게 해야할지.. 물론 대기업을 가면 좋겠지만 아니여도 괜찮아요 그냥 코딩을 계속해서 할 수있고 배울게 많은 곳이면 좋을거 같은데 어떻게 준비를 해야할까요..? 긴글 읽어주셔서 감사합니다!!

vue.js 에서는 보통 스타일링을 어떻게하나요?

각 컴포넌트마다 style 태그에 scoped attribute를 넣어서 하는게 일반적인가요?

프론트엔드 이직은 어떻게 준비하나요?

안녕하세요! 6개월차 프론트엔드 신입입니다. 사실 이직을 바로 생각하는건 아니고 지금있는 회사에서 1년은 넘기고 이직이나 중고신입으로 대기업에 가고싶습니다 하지만 여러가지 준비는 해야하는걸로 생각이 들고, 어떻게 하면 좋을지 여기서 앞서나간 선배님들의 조언을 듣고자합니다. 현제 제 상태는 이렇습니다. 컴퓨터공학 22년 차석졸업 계약직 인공지능강사 6개월 현직 프론트엔드 개발자 해커톤 수상 4회 (1등 2회, 2등 1회, 3등 1회) 교육부 장관상 1회 소프트웨어 특허 1개 소프트웨어 저작권 9개 경험) 소프트웨어 동아리 회장, 교내 연구생 알고리즘) 프로그래머스 레벨3 외국어) 영어 프리토킹 스택) sveltekit(현직),nextjs,tanstack-query,redux-rtk,playwright,tailwind,css,styled-compnent,sotrybook,mocking service worker 취업을 할때는 대회에서 상을 받았던 이력으로 회사에서 좋개 봐줘서 빠르게 입사했지만, 대기업에 중고신입이나 이직은 많이 다를거 같아 고민입니다. 따로 토이프로젝트나, 오픈소스 기여를 하면 좋다는걸 알지만 개인적으로 회사에서 프로젝트가 재미있어 기존 회사 코드 성능 향상에 몰두하고있습니다. 회사코드를 보고 다듬고 동료들과 커뮤니케이션하는게 좋아, 자진해서 거의 15시간정도 회사 일만하고 있지만 정작 나중에 되서 다른회사 지원하면 안좋게 보이까 걱정도 조금됩니다 그래서 이곳에서 도움을 구하고자합니다 긴글 읽어주셔서 감사합니다

styled-components 모듈 관리는 어떻게 하는게 효율적인가요?

리엑트에서 프로젝트 하실 때, styled-components 로 만들어진 모듈 관리는 보통 어떤식으로 하시나요? GPT 한테 물어보니까, 아래와 같은 답변을 얻을 수 있었는데, 컴포넌트 기반 구조 components: UI 컴포넌트를 저장하는 폴더입니다 Button: 버튼 컴포넌트 index.js: 컴포넌트 로직 styles.js: styled-components 스타일 Card: 카드 컴포넌트 index.js styles.js -------------------------------------------------------- 저는 현재 프로젝트에서, Header.jsx : 헤더 컴포넌트 StyledHeader.js : 헤더 styled-components 로 관리하고 있습니다. styled-components 에 대한 모듈 관리의 일관성은 생산성 측면에서 중요하다고 생각하는데, 다들 프로젝트에서 어떤식으로 관리하시는지 궁긍합니다!