#seo

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

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

혹시 랜딩 페이지를 바꾸게 되면

초기 URL로 진입했을 때 랜딩페이지로 가게되는데 랜딩페이지를 변경하게 되면 seo 자체 순위나 이러한 seo 데이터가 초기화 되는건가요? 랜딩 페이지에 데이터가(접속자 수 이러한 것들) 그래서 많은 플랫폼 회사들이 랜딩페이지를 잘 바꾸지 않나 해서요? 답변해주시면 정말 감사드리겠습니다.! 회사가 분기마다 랜딩페이지를 변경하는데 이해가 안가서 여쭈어 봅니다!

회사 3달안에 회사 홈페이지 제작

신입 기준으로 작성되었습니다. 개발자는 혼자인 상태입니다. 페이지 메인 서브 합치면 50~60개 외부 데이터 180개 db,api 손수 제작, 로그인, 회원가입(OAuth포함), 블로그 게시판, 상담사와 채팅 기능, 반응형, SEO, 도메인연결 등을 3달 안에 하라는 소리를 들었습니다. 달로보면 큰데 12, 1, 2 제가 실제 근무한 주는 10주 정도 됩니다 쉬는 날도 있고 했어 가지고요. 하지만 현재도 퇴근 후 + 주말에도 코드 공부 및 작성하면서 프로젝트를 진행 중인데 계속해서 윗선에서는 외주는 몇주 + 이 금액이면 된다고 하더라 넌 왜 느리냐 어쩌구, 3달인데 페이지 제작이 안되면 얼마나 걸리는거냐, 챗봇 써라 챗봇써도 못만드냐? 이런 소리를 듣는 중 입니다. 제가 50일 정도 제작을 했던 거는 면접 볼 때 포폴용으로 내려고 만든 프로젝트 급 시간인데.. 이것도 부족한 부분이 많았는데 이 양을 50일 안에 하려니까 미치겠습니다. 혹시 신입이나 경력자 분들이 페이지를 제작한다면 기간은 얼마정도 잡는지 대략적으로도 좋으니.. 알려주시면 감사하겠습니다 ㅠㅠ

React면 되는것을 굳이 Next.js로 구현하는것

SEO나 서버사이드 렌더링이 필요없는 서비스를 구현할 때, 이걸 그냥 React로 개발하는것과 Next.js로 개발하는것의 차이가 있나요? 저는 Next.js를 써야겠다 싶은 경우가 아니면 React로 개발하고 싶은데, Next.js에서 모든 컴포넌트를 그냥 다 클라이언트 컴포넌트로 하면 React랑 똑같은 거 아니야? 라는 질문을 들었을 때 할말이 없더라구요. React만으로 구현할 수 있는걸 굳이 Next.js를 쓰는게, 뭔가 그냥.. 닭잡는데 소잡는 칼 쓰는 느낌이라 굳이 그럴필요 없다 정도로만 생각했는데 정확한 근거를 들어보라니 대답을 못하겠더군요 둘의 차이가 정확히 무엇일까요? 기존의 SPA 앱같은걸 개발할 때 React만 쓰는게 좋은 이유가 있나요?

AI 빅데이터 부트캠프 질문

안녕하세요. 저는 도시공학과 박사 출신입니다. SPSS, AMOS 등으로 연구를 많이 진행했고, Gephi 로 연구를 해봤습니다. 특히 저는 도시 재난 전문 전공입니다. 해외에서 포닥을 2년 하고 지난주에 한국에 돌아와서 다시 취직을 해야하는데, 제가 논문 갯수가 충족이 되지만 모든 교수직이나, 새로 뽑는 연구원 보직이 AI, Big data 하는 사람만 뽑더라고요. 뿐만 아니라 저도 개인적으로 AI 관련 연구를 하고 싶고 빅데이터를 독학 했더니 답답한 점이 많아서 제대로 공부를 하고 싶습니다. 또한 그 동안 정성연구를 주로 해와서 빅데이터나 AI 를 통한 연구도 하고 싶으며 가능하다면 개발도 하고 싶습니다. 파이썬은 안해봤습니다! 하고싶은 연구 저는 가령 예를 들어 * AI를 어떻게 핵사고 대피를 위해 쓸 수 있는지 * 대형 공연장 화재시 빅데이터/ 리모트 센싱을 사람들에게 출구를 안내하는 것 등등 연구를 하고 싶습니다. * 재난 정보를 알려주는 AI 소프트웨어 개발 현재 내일배움카드는 발급이 가능한데 1) AI, Big data 를 함께 배우는 코스를 추천해주시면 감사드리겠습니다 2)대면/ 비대면 부트캠프가 있던데 해보신 분들은 장단점을 알려주실수 있을지요? (참고로 학회 등 때문에 1주 정도는 해외에 가야 함) 제가 괜찮아 보이는 것을 뽑아봤는데 추천 부탁드려요. A. 코드잇 데이터 분석가 트랙 https://sprint.codeit.kr/admissions/31 B. B. 새싹 (서울시) 산업실무 프로젝트 기반 LLM https://sesac.seoul.kr/course/active/detail.do C. LG전자 DX SCHOOL 2기 https://linkareer.com/https://linkareer.com/activity/202590 D. [LG유플러스] Why Not SW Camp 클라우드 활용 데이터 엔지니어링 3기 https://linkareer.com/https://linkareer.com/activity/205710

[사이드 프로젝트] 패션 이커머스 플랫폼 '푸츠(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]

next14의 next/headers의 cookies를 이용한 쿠키설정

안녕하세요 현재 데이터시각화 사이트 프로젝트를 진행중입니다. next14와 spring boot(리소스와 인증.인가)를 사용하고 있고, 카카오 소셜로그인을 하면 스프링서버에서 jwt(access 토큰)를 발급해주고 refresh 토큰은 redis를 통해 관리되고 있습니다. 받아온 토큰은 cookie를 통해 관리하고 있습니다. seo를 위해 ssr을 사용하고 있는데, ssr과정에서 데이터를 fetch를 할 때 토큰을 같이 보내고, 만약 액세스 토큰이 만료되고 리프레시 토큰이 살아있다면 응답 헤더에 새로운 액세스토큰을 보내주고 있습니다. 그런데 이때 next/headers의 cookies를 사용하여 쿠키를 세팅하는것이 안됩니다. 데이터 페치중, 혹은 ssr과정중에는 Cookies can only be modified in a Server Action or Route Handler. 라는 오류가 뜨며 cookie를 set 하거나 delete하는게 안됩니다. 이럴 경우는 어떻게 해야할까요?

벨로그를 어떻게 유지하는게 좋을까요??

1년 전 처음 개발공부를 시작했을때부터 벨로그에 글을 올려와서 벨로그가 글 무덤이 되어버렸어요 ㅎ 지금이라도 재정비하는 시간을 가져아하는지 아니면 이대로 그냥 가도 될지가 고민입니다. 제 벨로그 주소입니다 https://velog.io/@sseohyun_0v0/posts 먼저 제 벨로그의 문제점은 다음과 같습니다 1. 표준화되어있지 않다 처음에는 별생각없이 쓰다보니 이미지도 없고 제목도 엉망진창입니다.. 2. 퀄리티가 낮은 글들이 많다 일단 가독성이 낮은 글이 많습니다 특히 초기에 작성한 글은 이모티콘 남발로 인한..^^ 도대체 무슨 글인지 안읽힐때가 많습니다. 3. 너무 기초적인 내용이 많습니다. 그리고 그런 글들은 기초적인 내용에서 끝납니다. - 공부를 시작할때부터 써와서 HTML태그와 HTTP 내용도 가득 담겨있습니다. 이런 글들이 읽는 사람으로 하여금 아니 이걸 모른다고..? 생각이 들게 하지 않을까. 걱정이 됩니다. 4. 글의 깊이가 떨어집니다. 제 수준에서는 강의도 보고, 책도 보고 인터넷도 참고하면서 정리했다고 생각했는데 몇달이 지나서 돌아보면 부족한 점이 많이 보이는 것 같습니다. 클론코딩을 하면서 적어둔 글들이 특히 그런데, 따라가는 것에 조급해서 클린코드나 복잡도는 신경을 많이 못쓴게 티가 많이 납니다. 초반에 적었던 글도 마찬가지이고요 5. 위 이유들로 인해 오히려 전문성이 떨어진다. 실제로 떨어지긴합니다. 최근 글의 수준이 딱 제 수준이 맞습니다. 그러나 예전에 작성했던 너무 기본적인 내용의 글과 깊이가 부족한 많은 글 때문에 오히려 저평가 될까봐 걱정입니다. 앞으로는 저는 어떻게 해야할까요? 1. 그냥 유지 한다. 2. 자신 있는 글들은 유지하고 나머지 글들은 지운다. 일년동안의 노력이 담긴글이라 아쉬운 마음도 있긴 합니다. 그러나 지우는게 맞다는 결론이 나면 무조건 지울 생각입니다. 3. 부족한 글들을 보완한다. 음... 이러면 가장 좋겠지만 현실적으로 어렵기도 합니다. 저는 기초를 다져나가는 중에 제 부족한 점을 발견하는 중이라서 보완할 점은 새로 작성하는 글에 담고 있습니다. 내가 잘못알고 있었던 점을 발견해도 해당 내용을 다시 찾아서 수정 보완하기에는 시간이 너무 많이 소요됩니다.. 또한 다른 분들이 생각하시는 좋은 개발 블로그에 대해서 궁금합니다.

파이썬 오류 좀 고쳐주세요 ㅠㅠ

import time import requests import streamlit as st API_BASE_URL = "http://localhost:8000/qna" # Fastapi로 api 생성 def request_chat_api(user_message: str) -> str: url = API_BASE_URL resp = requests.post( url, json={ "user_message": user_message, }, ) resp = resp.json() print(resp) return resp["answer"] def init_streamlit(): st.set_page_config(page_title='Dr. KHU', page_icon='🩺') if "messages" not in st.session_state: st.session_state.messages = [{"role": "assistant", "content": "안녕하세요! Dr.seo입니다🩺"}] # Initialize chat history if "messages" not in st.session_state: st.session_state.messages = [] # Display chat messages from history on app rerun for message in st.session_state.messages: with st.chat_message(message["role"]): st.markdown(message["content"]) def chat_main(): if message := st.chat_input(""): # Add user message to chat history st.session_state.messages.append({"role": "user", "content": message}) # Display user message in chat message container with st.chat_message("user"): st.markdown(message) # Display assistant response in chat message container assistant_response = request_chat_api(message) with st.chat_message("assistant"): message_placeholder = st.empty() full_response = "" for lines in assistant_response.split("\n"): for chunk in lines.split(): full_response += chunk + " " time.sleep(0.05) # Add a blinking cursor to simulate typing message_placeholder.markdown(full_response) full_response += "\n" message_placeholder.markdown(full_response) # Add assistant response to chat history st.session_state.messages.append( {"role": "assistant", "content": full_response} ) if __name__ == "__main__": init_streamlit() chat_main() 이 코드를 실행시키면 자꾸 AttributeError: st.session_state has no attribute "messages". Did you forget to initialize it? More info: https://docs.streamlit.io/library/advanced-features/session-state#initialization 라고 뜨네요..

네이버 부스트캠프 지금 지원할지 말지 고민중입니다

지금 42seoul을 수료하고 팀프로젝트를 하나 진행중에 네이버 부스트캠프를 알게 됐습니다. 이때까지 진행중인 프로젝트중에 실 사용자가 있는 프로젝트는 없어서 지금 중고거래 사이트 프로젝트를 진행중인데 해당 프로젝트를 그냥 쭉 할지 네이버 부스트캠프에 지원을 할지 고민 중 입니다. 지금 하는 프로젝트를 그냥 쭉 하는게 좋을까요? 부스트캠프에 지원하는게 좋을까요?

타입스크립트 타입지정

리액트 쿼리로 OptimisticUpdate 를 구현했는데 onError 에서 context 타입 지정을 어떻게 해야할지 모르겠습니다 ㅠㅠ context : 타입 하면 오류나고, data : 타입 = context 해도 오류나고 as 를 쓰면 해결되긴 하는데 더 좋은 방법 없을까요? ㅠㅠㅠ 'use client'; import { useState } from 'react'; import { toast } from 'react-toastify'; import { usePostLikeCount } from '@/hooks'; interface LikeContextType { previousLikeCount: number; previousIsLike: boolean; } export const useOptimisticLike = ( boardId: number, initialLikeCount: number, initialIsLike: boolean, refetch: () => void ) => { const [optimisticLikeCount, setOptimisticLikeCount] = useState(initialLikeCount); const [optimisticIsLike, setOptimisticIsLike] = useState(initialIsLike); const { mutate: postMutate } = usePostLikeCount(boardId, { onMutate: async (): Promise<LikeContextType> => { setOptimisticLikeCount((prev) => optimisticIsLike ? prev - 1 : prev + 1 ); setOptimisticIsLike((prev) => !prev); return { previousLikeCount: optimisticLikeCount, previousIsLike: optimisticIsLike, }; }, onError: (err, variables, context) => { const data: LikeContextType = context; if (data) { setOptimisticLikeCount(data.previousLikeCount); setOptimisticIsLike(data.previousIsLike); } toast.error('좋아요 업데이트에 실패했습니다.'); }, onSuccess: () => { refetch(); }, }); const uploadLike = () => { postMutate(); }; return { optimisticLikeCount, optimisticIsLike, uploadLike, }; };

aws 비용이 RDS에서 너무 많이 나가는데 비용절감 방법이 있을까요?

aws Cost Explorer에서 RDS 비용이 다른 항목에 비해 비용이 많이 나가는데요.. 아래 Amazon Web Services Korea LLC 서비스별 요금 정보에서 보면 "USD 0.120 per hour per vCPU running RDS Extended Support for MySQL 5.7 in Year 1, Year 2 2,972 vCPU-hour USD 356.64" 위의 항목이 제일 많이 나가고 있는데요. * 할당량 * DB 인스턴스 (2/40) 할당된 스토리지 (0.08 TB/100 TB) * 인스턴스 정보 * dev-ds MySQL Community ap-northeast-2a db.t3.small DB 엔진 버전 8.0.36 prod-rds MySQL Community ap-northeast-2a db.t3.medium DB 엔진 버전 8.0.36 사용중인 스토리지 양도 적은데 어떤 이유로 과금이 많이 되는걸까요? aws 전문가님들!~ 답변 부탁드릴게요^^~ * 청구서 상세정보 * "Relational Database Service USD 480.57 Asia Pacific (Seoul) USD 480.57 Amazon Relational Database Service for MySQL Community Edition USD 472.71 USD 0.052 per db.t3.small Single-AZ instance hour (or partial hour) running MySQL 744 Hrs USD 38.69 USD 0.104 per db.t3.medium Single-AZ instance hour (or partial hour) running MySQL 744 Hrs USD 77.38 USD 0.120 per hour per vCPU running RDS Extended Support for MySQL 5.7 in Year 1, Year 2 2,972 vCPU-hour USD 356.64 Amazon Relational Database Service Provisioned Storage USD 7.86 $0.00 per GB-month of provisioned GP2 storage under monthly free tier running MySQL 20 GB-Mo USD 0.00 $0.131 per GB-month of provisioned gp2 storage running MySQL 30 GB-Mo USD 3.93 $0.131 per GB-month of provisioned GP3 storage running MySQL 30 GB-Mo USD 3.93 Elastic Compute Cloud USD 143.00 Asia Pacific (Seoul) USD 143.00 Amazon Elastic Compute Cloud NatGateway USD 43.93 $0.059 per GB Data Processed by NAT Gateways 0.448 GB USD 0.03 $0.059 per NAT Gateway Hour 744 Hrs USD 43.90 Amazon Elastic Compute Cloud running Linux/UNIX USD 79.46 $0.026 per On Demand Linux t3.small Instance Hour 744 Hrs USD 19.34 $0.0288 per On Demand Linux t2.small Instance Hour 744 Hrs USD 21.43 $0.052 per On Demand Linux t3.medium Instance Hour 744 Hrs USD 38.69" 답변 부탁드릴게요. 감사합니다^^!

aws 비용이 RDS에서 너무 많이 나가는데 할당용량을 변경하면 비용 감소가 가능할까요?

aws Cost Explorer에서 RDS 비용이 다른 항목에 비해 10배이상 비용이 많이 나가는데요.. 사이트 메인화면 쿼리가 너무 느려서.. 영향이 있을것같기도한데.. 아무튼 아래 url의 RDS 쪽 대시보드 확인해보니 https://ap-northeast-2.console.aws.amazon.com/rds/home?region=ap-northeast-2 "Asia Pacific (Seoul) 리전에서 다음의 Amazon RDS 리소스를 사용하고 있습니다(사용량/할당량). DB 인스턴스 (2/40) 할당된 스토리지 (0.08 TB/100 TB)" 위와 같이 할당 스토리지가 100테라?? 씩이나 되는데.. 이게 정상인건지 모르겠네요. 저걸 줄이면 비용이 줄어드는건지 궁금합니다. 근데 어디서 어떻게 줄이는건지 못찾겠네요. 쉽게 줄일 수 있을까요? 그리고 db 인스턴스가 2개인데 각각 30기가, 50기가로 할당되있던데.. 이거랑 대시보드에 나오는 할당량은 또 다른 건지도 궁금하네요. 답변 부탁드릴게요. 감사합니다^^!

안녕하세요 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파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...

알고리즘 문제 주석 질문입니다

안녕하십니까 현역 군인입니다. 제가 싸지방에서 알고리즘 문제를 꾸준히 풀려고 노력하고 있는데요, 싸지방 특성상 컴퓨터를 재부팅시 초기화되어 소스들을 유지하는게 어렵습니다. 하지만 제가 푼 소스들을 따로 보관하고 싶고, 다시 문제를 풀때 불러오고 싶어 생각한게 그냥 Github를 사용하자입니다. https://github.com/Minseo033/Bakjun-java-/tree/master/BACKJUN_JAVA/src/JAVA_FOR 위 github 주소를 보시면 현재는 class안에 주석처리를 하여 문제 설명을 달아두었습니다 . 그런데 보기에 너무 지저분해보이고, 이것보다 깔끔하게 할 방법이 분명히 있을거같은데 github사용도 처음이다보니 어떤 기능을 사용하면 class안에 주석을 다는것보다 더 깔끔할지 고수분들의 의견 알려주시면 감사하겠습니다 !

프로젝트 리액트에서 Next js로 넘어갈때 SEO

리액트에서 Next JS로 프로젝트를 하신 이유가 있을까요 하면 SSR과 SEO에 관해서 말을해야하는데 신입 면접때 SEO에 대해 경험을 해보신적이 있으세요? 라고하면 뭐라고 답을 해야할까요..? 어떤식으로 답을 해야할지... 잘 모르겠습니다 ㅠ

구글 SEO 도메인 부분 수정방법

구글 seo 최적화 중 제가 등록한 웹 페이지는 도메인이 나오는데 다른 웹 페이지들은 이름과 같은 텍스트가 있습니다. 메타 태그 등 어느 부분을 수정해야 이렇게 도메인 텍스트를 변경할 수 있나요 ¿

SEO 외주 페이지당 견적

외주를 한번도 맡아본적이 없는데... 웹 페이지에서 SEO가 되지 않는 페이지가 있고 프로젝트를 보니 META TAG 설정은 잘 되어잇는데 검색엔진에 걸리지 않더라구요. 페이지 개수가 좀 많은데 견적을 어케 제시해야 할지 고민입니다 ㅠ

SSR을 사용하지 않는 next.js 앱의 장점은 뭐가 있나요?

SSR을 사용해 next.js 앱을 만들었는데 서버 컴포넌트쪽 인증을 처리하지 못해 전체 앱을 CSR로 전환하자는 의견이 나왔습니다. SEO도 필요하지 않은 앱이라 SSR을 사용하지 않으면 라우팅을 제외하곤 next.js의 어떤 장점을 살릴 수 있는지 잘 모르겠습니다. SSR을 적용한 컴포넌트를 CSR로 전환할바에 앱을 리액트로 변환하는게 프론트 서버를 신경써야하는 단점도 없어질 것 같고 시간도 비슷할거 같아서요. 추가적으로 only CSR로 next.js 사용하시는 분도 계실까요?

Next.js 서버 컴포넌트, 클라이언트 컴포넌트 어떤 식으로 분리해야 하나요??

현재까지 React를 사용하다가 SEO측면이나 사용자 경험 등 여러 방면에서 서버 사이드 렌더링이 갖는 장점이 크다 생각하여, Next로 프로젝트를 하면서 공부하는 중입니다. 지금까지 Next로 프로젝트를 진행하면서, 구글에 찾아봐도 명쾌하게 답을 얻지 못한 문제가 있어서 질문드립니다! 공식문서에서는 최대한 서버 컴포넌트로 만들고, 상호작용이 필요한 부문만 최대한 작게 클라이언트 컴포넌트로 만드는 것을 추천하고 있습니다. 이 말은 당연하게도 이해가 잘 되었습니다. 하지만 제가 만들고 있는 프로젝트에는 검색 페이지, 유저 페이지 등이 있습니다. 검색 페이지를 예로 들면, 사용자가 입력한 검색어를 쿼리 파라미터로 검색 결과 페이지에 넘겨주게 되고, 해당 검색어에 해당하는 데이터를 불러와야 합니다. 그 과정에서 검색어를 useParams()를 사용해서 받아오게 되는데, 이러한 훅을 사용하려면 클라이언트 컴포넌트여야 합니다. 그렇게 최상단에서 검색어를 파싱해서 데이터를 불러와 자식 컴포넌트들에게 넘겨주게 되면, 결국 루트가 클라이언트 컴포넌트가 되어 버리는데, 이런 검색 결과 페이지와 같은 경우엔 SSR이 큰 의미가 없나요?? 비슷한 원리로, 유저의 마이페이지와 같은 경우엔 유저 정보를(userId 등) 이용해서 데이터를 불러와 해당 유저의 정보를 보여주게 되는데, 유저 정보를 프론트 서버에서 페이지를 보내주는 시점에는 알 수 없습니다. 때문에 검색 페이지와 비슷하게 recoil의 atom 등과 같은 곳에서 유저 정보를 빼와서 데이터를 불러오게 될텐데, 그럼 이 경우에도 루트가 클라이언트 컴포넌트가 되어 버립니다. 이렇게 동적으로 발생하는 데이터를 이용해서 데이터를 불러오는 페이지는 SSR이 큰 의미가 없는 것인지 궁금합니다!! 개발 초보라 완전히 잘못 이해하고 있는 것일 수도 있지만, 바로 잡아주시면 감사하겠습니다!

구글 SEO 최상단 도메인? 은 어떻게 수정해야 할까요?

제 경우에는 도메인이 검색 결과의 최상단에 뜨게 되는데 다른 유명한 웹 페이지들의 도메인은 이름으로 대체되어 있는 것을 보아하니 뭔가 방법이 있을까 하여 질문드립니다. 검색 결과를 보면 -도메인 -url -title -description ... 이렇게 뜨던데 커리어리의 경우 저 곳에 '커리어리' 라고 나오는 것 처럼 하고싶은데 메타 태그로는 안되는 것인가요?

Nextjs를 정적 웹 호스팅(dothome)으로 배포하게 될 때 문제점

안녕하세요. 이번에 맡게된 프로젝트에서 SEO가 중요하다고 판단되어 Nextjs를 사용하여 개발하였습니다. 그런데 저희 팀이 사용하고 있는 웹 호스팅 서버가 dothome입니다. dothome은 정적 웹 사이트 호스팅 서버라고 알고 있는데, 이 서버로 호스팅하게 되면 몇 가지 문제점이 있다고 판단되어 질문을 남기게 되었습니다. 1. dothome에 배포하기 위해 정적 빌드를 하게 되면, 서버 사이드 렌더링(SSR) 기능을 사용할 수 없게 되는데, 이는 NextJS를 사용해서 얻을 수 있는 SEO 측면의 이점을 얻을 수 없게되는 건가요? 그렇게 된다면 SEO를 개선하는 방법이 있을까요? 2. Nextjs에서 제공하는<Image> 태그가 서버 측에서 이미지 최적화기능을 제공하는 것으로 알고 있는데, 정적빌드를 사용하게 되면 일반적인 img 태그와 다를 바가 없어지는 걸까요? 3. 마지막으로 Nextjs를 사용하기 위해서 웹 호스팅을 변경하는 것이 좋을지, 변경해야한다면 어떤 것을 추천하지는 시 여쭤봅니다.

프로젝트 기술을 선택할 때, 폴더 라우팅같은 장점들 때문에 ssr을 사용하지 않고 Next를 이용하는 것이 타당한 이유가 될까요?

<프로젝트에 대한 설명을 간단히 드리자면...> 동아리 프로젝트입니다. 학교 학우들을 대상으로 하는 고정 타겟층이기에, ssr을 통해 SEO를 높일 필요가 없고, 서비스 크기가 작은 서비스를 만들려합니다.(앱 내의 웹뷰로만 이용자가 접근 가능하게 하려합니다.) <next를 선택한 이유는 아래와 같습니다.> 1. 이미지 최적화와 같은 자동 최적화 기능과 폴더 구조를 통한 직관적 라우팅 등의 이유 (인터렉션이 많아서 서버 컴포넌트보단 클라이언트 컴포넌트의 사용 비중이 더 높을 것 같습니다.) 2. 채용 공고에서 기업들의 next.js 사용 경험에 대한 선호도 (많은 기업들이 next에 대한 경험을 이력에 요구하기 때문에, 괜스레 next를 실제 서비스에서 한 번쯤을 활용해봐야 하는것은 아닌가 조바심도 듭니다.) <제가 고민하는 부분은...> next를 사용하는 가장 큰 이점은 ssr이라고 생각이 됩니다. 선택한 기술의 가장 큰 이점을 사용하지 않고 다른 이점들을 이유로 기술을 선택했다라는게 이력서를 확인한 면접관 입장에서 과연 수긍할 수 있는 부분일까 의문이 듭니다. 개발을 시작한지 2년이 채 안되가기에, 기술 선택에 있어 확신이 없는 것 같습니다. 현업자 분들의 조언이 정말 큰 도움이 될 것 같습니다!

firebase 호스팅 첫 화면이 세팅화면만 나와요

npm run start 를 할 땐 리액트 결과가 잘 나오는데 public/index.html 파일에 root 잘 연결되어있는 거 확인하고 npm run build를 해보면 build/index.html파일이 root 가진 채로 잘나와요 그래서 잘된거라고 생각하고 firebase hosting으로 연결 쭉 하고 json 파일 내 hostring: public 부분 build 폴더 설정도 했는데 firebase deploy로 호스팅 주소를 받아 테스트를 해보면 " welcome firebase hosting seoup complete" 라는 firsebase 세팅 초기 화면만 반복해서 뜨네요.. 혹시 몰라 새로운 리액트 폴더를 만들어서 다시 연결도 해보고 npm run start로 정상결과 확인 후 다시 npm run build 하고 firsebase deploy다시 치고 할 수 있는건 전부 다 해본것같은데 추가로 여기저기 블로그와 유튜브 까지 모두 검색해봤는데 firsebase init 순서까지 똑같이 했고 다른점이 없어서 더 멘붕이에요 ㅠ 계속 첫번째 화면만 보여요... 도와주세요 ㅠ

nextjs에서 서버 컴포넌트 클라이언트 컴포넌트 분리하는 방법

안녕하세요. 현재 nextjs를 기반으로 커뮤니티 사이트를 만들고 있습니다. SEO를 가장 중요한 요소로 고려하여 개발하려고 하는데 홈, 게시글 리스트, 게시글 상세 페이지, 마이 페이지, 설정 페이지 등 여러 페이지 중에 어떤 것까지 SEO를 신경써야 할까요? SEO가 중요한 페이지는 반드시 서버 컴포넌트 위주로 개발하는 게 유리하다면 관련 기술의 키워드가 있을까요? 요즘 prefetching이나 hydrate 관련된 내용을 찾아보고 있는데 방향성이 맞는지 궁금합니다..!

웹빌더에 만들려면 무엇을 해야할까요? (feat.SEO최적화)

우리가 자주쓰는 노코드툴은 개발자가 아니라도 쉽고 빠르게 웹페이지를 만들어주거나, 업무공간을 만들어주거나, 나만의 컨텐츠를 보여주는데 사용되곤 합니다. 너무나 잘 알려져 있는 워드프레스, 우커머스, 카페24, 노션, 아임웹, WIX, Softr, 네이버스마트스토어 등등..형태도 구성도 컨셉도 다양합니다. 홈페이지, 쇼핑몰, 웹이력서 등을 만드는 것은 이제 파워포인트로 발표자료 만드는것 이상으로 쉬어졌습니다. 사이트를 쉽게 만들어 주는 이러한 빌더를 만들기 위해서는 무엇을 먼저 고려해야 하고 어떤 환경이 만들어져야 할까요? 이 질문을 하는 이유에는 이러한 배경이 있습니다. 웹사이트를 만드는 것은 중요하지만 알리는 것도 그만큼 중요합니다. 또 어떤 사람들이 우리 사이트에 관심이 있는지 아는 것도요. 그래서 각 웹빌더를 만든 후 SEO최적화라던가, 방문추적은 어쩔 수 없이 구글애널리틱스를 연동하거나 구글/네이버 검색노출에 등록해야 합니다. 사용자 입장에서 이를 수동으로 찾아서 등록하거나, 사이트가 포털사이트에 노출이 잘되게 세팅하는 방법에 막막함을 느낀다는 생각이 들었습니다. 그래서 카페24나 아임웹, oopy같은 곳에서는 검색노출 여부를 간단하게 세팅할 수 있는데 이것은 어떤 구조로 개발 구현이 되었을 지 궁금했었습니다. 사이트를 만들기 위해 들어온 회원(사용자)별로 각각 도메인이 만들어질테고, 그 도메인별로 SEO를 최적화 하는데 웹빌더에서 구축해야 하는 환경들은 무엇이 있어야 할까요? 질문이 길어졌지만, 늘 궁금했던 것들이었기에 SaaS나 빌더쪽 개발 구현하셨던 분들 중에서 답변 주시면 정말 감사하겠습니다.

ssr을 사용 시, 조건부 렌더링의 문제점

ssr을 사용하는 가장 큰 이유 중 하나는 seo입니다. seo는 html 내부의 데이터를 수집해서 웹 결과를 구성하는데 csr은 초기에 빈 html을 받고, 이후 링크된 자바스크립트를 통해 화면을 렌더링 합니다. 이러한 구조 때문에 seo에 취약하다는 단점이 생깁니다. ssr은 프리렌더링을 통해 미리 화면을 렌더링 하고 완성된 html을 클라이언트에게 보내줌으로 seo를 최적화 합니다. 하지만 리엑트 코드를 작성중 이런 경우 생기는 데 동적으로 받아오는 데이터가 있고, 이에 따라 달라지는 화면이 여러가지인 구조입니다. 이런 상황이 빈번하다면 프리렌더링을 하더라도, 핵심적인 데이터가 html에 나타나지 못하니 여전히 seo에 취약한 것 아닌가 하는 의문이 들었습니다. 그리고 만약 그러하다면, 이런한 코드방식을 지양해야 하는가 의문도 있습니다.

NextJS13 app라우터 컴포넌트 설계 질문드립니다.

안녕하세요. NextJS13을 사용하여 팀 프로젝트를 진행하고 있습니다. 프로젝트 내 게시판 페이지에서 페이지네이션을 개발하던 도중 궁금한 내용이 있어 질문드립니다. 현재 게시판 메인페이지에서 데이터를 가져와서 페이지네이션 컴포넌트로 프롭스로 전달하는 형태로 로직을 구현하였습니다. 과정에서 상태관리가 필요하여 훅을 사용하기위해 페이지 전체를 'use client' 키워드를 사용하여 클라이언트 컴포넌트로 변경하였는데 데이터 렌더링 부분은 서버에서 렌더링하려면 Container 컴포넌트를 별개로 생성하여 최상위 컴포넌트에서 데이터를 불러오고 프롭스로 전달하는 형태로 구현을 하면좋을지 솔루션을 듣고싶습니다. 기존에는 SEO등을 고려하여 사용자와 상호작용하는 부분(input, form 등등..)에 한해 클라이언트 컴포넌트로 구성하였는데 위와 같이 데이터를 불러오고 가공하는도중 리액트 훅이 필요할때 어떻게 설계하시는지 궁금합니다.

프론트엔드 기술 고민

안녕하세요! 백엔드분들과의 프로젝트를 앞두고 있는데, 고민이 한가지 있습니다. 프론트엔드 팀원은 저 포함해서 3명인 상황입니다. 기술스택을 정할떄, 리액트를 쓸지 Next를 쓸지 고민을 하고 있고, Next를 써 본적이 있는 팀원은 1명인 상황입니다. Next를 썼을 떄 장점은 - 랜더링 전략을 다르게 가져갈 수 있다 - SEO를 쉽게 최적화할 수 있다 - Route Handler를 통해 요청을 숨길 수 있다. - 여러자체 컴포넌트 (Image,Link등...)을 쓸 수 있다. 이 정도가 있을 것 같은데 현업에서 react->Next로 전환할떄 어떤 시점에 전환하셨는지, 전환했을때 어떻게 팀원들끼리 협의를 하셨는지 궁금합니다..!

국비 수료 후 6개월 근무 후에 우테코or싸피

안녕하세요. 제 소개를 하자면, 국비수료과정(html/css,js,react,node.js)을 올해 1월 말에 수료 후에, 2월말에 프론트엔드로 취업했지만 회사 사정이 어려워져 다시 9월중순 백수가 됐습니다.. 프론트로 들어갔지만 회사 내에서 배운 건 그저 코드를 볼 줄 아는 사람의 seo최적화와 간단한 퍼블리싱, 워드프레스를 통해서 웹사이트 제작하는 것이였습니다. 그리고 개발자님께 node.js로 만들어진 자동화프로그램에 대한 유지보수와 주문/문의 발생 시 텔레그램 알림 가게하는 것 정도 배웠습니다. 근데 문제는 제가 프론트엔드로 다시 지원하자니 리액트는 아직 국비수료에서 멈춰있고, 백엔드로 지원하자니 아직 노제에 대한 부족함이 너무크고... 그래서 일단 리액트+노제로 게시판페이지 만들기 프로젝트를 혼자 하고 있었습니다. 그러는 와중에 우테코 일정이 떠서, 작년부터 프리코스까지는 지원한 모두가 참여가능이라고 해서 도전해보려고 합니다. 근데 제가 여태 다뤄온 게 js인데 우테코 백엔드는 자바를 쓰더라구요. 그래서 급하게 인프런 강의와 책으로 공부하고 있는데 또 이렇게 하다보니 중단되어 있는 프로젝트도 맘에 걸리고.. 현재 프로젝트는 리액트+노제+몽고디비 로 게시판crud만 해놓은 상태입니다. 아직 검색과 회원crud등 할 게 많은데.. 프론트 지원을 위해 현재 상태에서 화면구현먼저 하고 지원하면서 프리코스 참여 or 코딩테스트와 자바공부하면서 프리코스에 올인 이 나을지 계속 고민돼서 이렇게 글을 쓰게 되었습니다. 그리고 이 이후에 우테코가 안된다하더라도 백엔드로 전향하고 싶다면 싸피나 42서울도 고려하고 있는데 그럴거면 지금 자바와 스프링을 꽉잡는 게 나을까요...? 벌써 스물 후반이라 고민이 많이 되네요..