Web Developer - Nextjs/SEO

리팩터링하는 이유는 무엇인지 알아보려해요. 최근 개발하면서 리팩터링을 하셨나요? 했다면 어떤 이유로 하셨나요?! (오늘도 어김없이 컨셉을 잡습니다 ㅎ) 리팩터링을 통해 모든 문제점이 해결하는건 아니지만, 우리가 확실히 얻을 수 있는 이점은 꼭 얻었으면 좋겠어요. 우리가 왜 리팩터링을 해야하는지 한번 나눠볼게요! 소프트웨어 설계가 좋아지게 하자! 대표적으로 중복 코드가 여기저기 뿌려져있다면 모든 곳을 수정했는지 알 수 없어요. 그 말은 해당 코드를 수정할 때, 모든 곳에서 예상대로 작동할 것을 확신할 수 있을까요? 바람직한 설계의 핵심은 모든 코드가 언제나 고유한 일을 수행함을 보장할 수 있어야해요. // / 오픈채팅링크 // /user 오픈채팅링크 // /home 오픈채팅링크 // /test 오픈채팅링크..

오늘은 NextJs를 사용하여 정적 사이트(SSG말고 build파일)를 배포해야하는 상황에서 build 파일을 만드는 과정을 알아볼게요! 정적사이트로 배포를 해야할 이유가 없다면 next start 해서 사용하는게 낫지만, 굳이 필요한 상황이라면 쓸 수 있는 방법을 확인해볼게요! 일단 최신 버전인 Next v13.3.0 이상부터는 next export를 다르게 사용해야해요. 이 버전인 사람은 아래 링크로 확인해주세요! (저는 Next v13 기준이며, app directory를 사용하지 않는 상황입니다.) https://nextjs.org/docs/pages/building-your-application/deploying/static-exports Deploying: Static Exports | Nex..

2. 리팩터링 원칙 2주차 개발 스터디를 참여하며 리팩터링 2장을 읽으며, 공유해보자해요. 이번 단원부터는 본격적으로 리팩터링이 어떤 원칙을 중심으로 진행되는지 차근차근 알려드리도록 할게요! 2.1 리팩터링 정의 리팩터링[명사] : 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉬도록 내부 구조를 변경하는 기법 리팩터링하다[동사] : 소프트웨어의 겉보기 동작은 그대로 유지한 채, 여러 가지 리팩터링 기법을 적용해서 소프트웨어를 재구성하다. 자 리팩터링은 명사, 동사 두가지로 위와 같이 소개할 수 있어요. 중요한 점은 겉보기 동작이 그대로 유지된 채, 소프트웨어가 재구성(개선)되는 작업을 리팩터링이라고 한다는 것을 알 수 있죠! 자 그러면 본격적으로 리팩터링하러 가볼까요?! 여러분..

지난 시간엔 serverside를 통해서 정적인 xml로 sitemap을 생성하는 과정을 나타냈어요! 오늘은 동적인 xml을 생성하여 페이지에 들어올 때, 항상 최신 sitemap이 생성되도록 만드는 과정을 해보도록 할게요! sitemap에 대해 지난 시간보다 좀 더 알아본 후에 진행하려합니다. sitemap xml 태그 방법 https://exam-bomb-service.vercel.app/ https://zippoom.com/sitemap/sub/index.xml 2023-03-17T09:00:23.523Z 위의 첫번째 케이스는 urlset 태그로 url 자체를 알려주는 방식과, 두번째 케이스처럼 태그를 통해 해당 xml에 또다른 sitemap이 존재함을 알려주는 방식이 있어요! 두가지 방법 중에 저..

오늘은 Nextjs에서 Sitemap.xml을 자동화할 수 있는 방법에 대해 알아보려해요! 일단 Sitemap의 역할이 무엇인지 알아야지 왜 Sitemap을 만들어야하는지 알겠죠? Sitemap이란? https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview?hl=ko 사이트맵이란 무엇인가요? | Google 검색 센터 | 문서 | Google for Developers 사이트맵은 Google에서 사이트를 더 지능적으로 크롤링할 수 있도록 정보를 제공합니다. 사이트맵의 작동 방식을 알아보고 필요한지 결정하세요. developers.google.com 구글 검색 센터에서 제공하는 사이트맵에 대한 정보에요. 그 중에 몇가지만 정..

6월 중순부터 사내 개발팀 스터디를 진행하고 있어요. 저는 첫번째 책으로 리팩터링 2판을 읽고 있고, 이 책을 읽으며 드는 생각과 앞으로 개발팀 내에서 어떻게 발전해나가면 좋을지 공유하고자 스터디 내용을 정리하여 공유하고자 해요! 저자의 내용을 토대로 지극히 저의 주관적인 생각을 담고 있음을 알려드립니다. 리팩터링 2판 서론.서론 내용은 다음과 같이 정리할 수 있어요. 1. 그냥 리팩터링하면 되지 않을까요? → 리팩터링엔 위험이 따라와요.동작하는 코드 수정에 미묘한 버그 생길 가능성잘못 수행시에 오류로 시간과 노력이 수포로 돌아갈 가능성그렇다면 어떻게 리팩터링 하면 좋을까요? 계획적이고 체계적이도록 실행하자!(목표를 설정?!) 2. 리팩터링이란? 겉으로 드러나는 코드의 기능(동작)은 바꾸지 않지만 내부 ..

오늘은 지난 Queue를 구현하면서 dequeue를 구현할 때 shift() 메소드를 사용하면 안되는 이유를 보려해요. 먼저 간단히 dequeue는 queue의 front를 제거하는 동작이며, shift는 javascript의 Array의 메소드 중 하나로 맨 앞의 요소를 제거해요. dequeue는 O(1)의 속도를 가지지만 shift는 O(n)의 속도를 가지기 때문에 그렇죠! shift가 O(n)을 갖는 이유는 array는 기본적으로 인덱스를 통해 접근이 가능하죠?! 그러면 맨 앞의 요소를 제거한다면, 뒤에 있는 모든 요소의 인덱스를 하나씩 땡겨주는 작업을 해야해요. 그래서 맨 앞의 요소를 제거하는 shift와 추가하는 unshift 모두 O(n)의 속도를 가져요! 그러면 다음 문제를 통해서 속도차이를..

이 문제를 사실 좋은 방법으로 풀었다고는 생각이 안들어요... 근데 제 기준으로 신박하게 해결했다고 생각해서 남겨보려해요..ㅎㅎ 일단 문제는 간단하게 food_times라는 음식을 섭취할 수 있는 개수에 대한 리스트가 있어요. 그리고 k번 섭취한 후에 다음으로 섭취할 음식의 인덱스를 구하는 문제에요. 일단 food_times의 길이가 200,000 이고 원소는 100,000,000 이기 때문에 k섭취를 위해 이중 for문을 돌리게 되면 최악으로 100,000,000 * 200,000 회? 되는거죠?? 네, 아마 그정도쯤 될거라 생각이 들어 당연히 호율성에서 안돼요! N을 100,000,000으로 M을 200,000 으로 생각해보면 O(MN)보단 작아야지 효율성에 통과될거에요. 그래서 첫번째 목표는 이분탐..

오늘은 직접 구현한 queue를 활용해서 아래 프로그래머스 lv2 문제를 풀어볼께요! https://school.programmers.co.kr/learn/courses/30/lessons/42587 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 만약 직접 구현하지 않는다면 이렇게 쉽게 끝내지만..! (사서 고생하는 스타일..) 저는 직접 구현하기로 했으니 ... 엄청 긴 코드를 꺼내보죠.... function solution(priorities, location) { let rank = 0; while(true){ const front = priorit..

오늘 공부할 자료구조는 큐입니다! 큐(Queue) 1. 큐란? 큐는 스택과 함께 많이 사용되는 기본적인 자료구조로 일렬로 늘어선 줄을 의미하기도 하며, 입구와 출구가 분리되어있는 자료구조입니다! 우리가 줄을 서서 대기한다면 먼저 선 사람이 먼저 나오게되죠?! 그 원리를 이용한 자료구조가 큐이며 선입선출[First In First Out] 특성을 가지게 돼요! 2. 큐의 연산? 큐의 연산에는 두가지가 존재해요. 첫번째는 enqueue를 통한 입력, 두번째는 dequeue을 통한 제거 (플러스로 queue의 길이 ..!?) 큐의 입구는 뒤(rear)에 있기 때문에 enqueue는 뒤로 입력, dequeue은 앞(front)에서 제거하는 구조로 되어있어요! 3. 시간복잡도? enqueue : O(1) dequ..

이번엔 지난 시간에 직접 구현한 stack을 활용하여 아래 문제를 풀어볼게요! https://school.programmers.co.kr/learn/courses/30/lessons/12906 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 굳이 ... 구현해서 안풀어도 되지만 ㅠㅠㅠ 구현 공부할겸 .. 해보도록 하죠...! class Stack { #list = []; #index = -1; push(val) { this.#list[++this.#index] = val; } pop() { if (this.#index === -1) throw new Err..

대표적인 자료구조들인 스택, 큐, 연결리스트들과 정렬 알고리즘들을 직접 구현해보며 알아보면서 공부하고자 해요! 기본적인 동작 원리나 개념은 이미 알고있지만, 직접 구현해보며 동작원리를 살펴볼께요. 오늘은 먼저 스택! 스택(Stack) 1. 스택이란? 스택은 가장 많이 사용하는 자료구조로 말 그대로 "쌓여있는 데이터 더미"이고, 입구가 하나로 이루어진 자료구조라고 생각하면 돼요! 그렇기때문에 입구에 계속 넣는다면 처음에 넣은 것이 가장 마지막에 나오게 되는 후입선출[Last In First Out] 특성을 가지게 됩니다. 2. 스택의 연산? 스택의 연산에는 두가지 종류가 있어요. 첫번째는 push를 통한 입력, 두번째는 pop을 통한 제거 (플러스로 stack의 길이 ..?!) 스택의 입구는 뒤에 있기 때..

오늘은 직접 SSR과 CSR, SSG을 Nextjs에서 결과를 통해 차이점을 알아보도록 할까요?! 요즘 프론트엔드 면접의 대표 질문이기 때문에 어떤식으로 활용해야 좋은지를 제대로 아는게 중요하다고 생각해요ㅎㅎ 오늘은 CSR과 SSG만 알아보도록 할께요! (추후에 SSR / ISR 예정) 1. CSR(Client Side Rendering) 먼저 Client Side Rendering(CSR)은 말그대로 클라이언트에서 렌더링 진행한다는 뜻으로 초기 로드시에 HTML를 통해 다운받은 JS파일 빈 HTML에 DOM을 그려나간다는 특징이 있습니다. 대표적으로 Single Page Application(SPA)의 React를 통해 사용할 수 있어요. 그렇기때문에 초기에 그리는 시간으로 인해 초기페이지 진입에 살짝..

2023년 6월 2일부터 새로운 곳에서 프론트엔드 개발자로 다시 시작하게 되면서 이전과 비교했을 때, 앞으로 어떤 개발자가 돼야 하는지 써보려 해요! 더 좋은 생각을 많이 나눠준다면 저희 팀과 저의 큰 성장이 될 것 같아요! 크게 현재 나는 어떤 사람인지 돌아보며 시작하도록 할게요 Q1. 어떤 개발자가 되고 싶나요? 저는 단기적, 장기적으로 두 가지 목표를 갖고 있어요! 먼저 단기적으로는 현재 맡은 서비스를 유저에게 더 좋은 경험을 주는 플랫폼으로 만들어가는 게 현재 목표예요!그러기 위해선 스스로 세 가지가 중요하다고 생각하여 꼭 숙지하면서 개발하기 위해 노력하고 있어요. 첫째, 내 서비스를 누구보다 완벽하게 이해하기 (이제 막 알아가고 있죠..!)둘째, 좋은 개발팀문화를 만들어가며 함께 정착하기셋째, ..

오늘은 저번 시간에 잠깐 나왔던 가운데 정렬에 대해서 제가 주로 쓰는 방법을 소개합니다!! 순서는 1) 글씨 가운데 정렬, 2) flex 가운데 정렬, 3) tranform 가운데 정렬 이렇게 보도록 할게요~! 각각 써야할 순간이 정해져있는? 느낌이라 유용하게 사용할 수 있을거에요! 1. 글씨 가운데 정렬 제목!!! 기본적으로 위와 같이 쓴다면 좌측부터 글이 작성될텐데 글씨를 가운데 정렬하기 위해선 css를 아래처럼 해주면 돼요! .header { text-align: center } 이렇게 정렬되는 모습을 볼 수 있어요!! 하지만, 글씨가 아닌 영역이라면 위와 같은 방법으로는 가운데 정렬이 안돼요 영억1 영역2 // module.css .header { text-align: center; } .box ..

저번 시간에 마무리로 밑줄이 채워지는 bar 인터랙션을 알아보려해요~! 영상은 아래 링크에서 참고해주시면 감사하겠습니다..!(블로그 이전하면서 옮기고 있어요..!) https://blog.naver.com/glory4god/222663114305 순서는 버튼에 커서를 올렸을 때(나중엔 메뉴1, 또는 메뉴2를 선택한다면 charging 되도록!!) 좌측에서 우측으로 bar가 채워지도록 만드는 과정이죠!! 일단 배운 after, before 둘 중 하나의 가상선택자를 사용하여, width를 0으로 놓은 후에, hover시에 width가 100%가 되도록 한다면 완성이 될 듯 하죠??! 위의 버튼 구조에서 아래처럼 css 설정해보도록 할게요 .wrap { position: relative; } .wrap::a..

오늘은 직접 만든 정보처리기사필기 웹사이트를 리뷰해보려고 합니다!! 사진으로 진행 순서를 공유해보고 어떤 기능이 있는지 소개해드릴께요! https://exam-bomb-service.vercel.app 1번. 과목을 선택해요! 처음 페이지를 접속하면 아래 화면처럼 메뉴가 나와요!(현재는 정보처리기사필기만 가능해요ㅠㅠ) 2번. 공부할 과목의 챕터, 또는 기출 세트를 선택해요! 다음으로를 누른다면 챕터 선택시엔 원하는 문제 수를 고를 수 있어요 ㅎㅎㅎ ​ 3번. 시험에 진심으로 임해요! 짠, 핑크배경은 보기중에 정답을! 상단 번호는 정답이 푸른색을 의미해요! 또한 현재까지의 문제 스코어를 확인할 수 있고, 문제의 오류가 있다면 신고할 수도 있어요! ​ 4번. 열심히 문제를 푸셨나요? 다 푼 정보는 메인페이지..

3월 6일 제주도로 정보처리기사 필기시험을 볼겸 여행을 다녀올 계획이예요!! 오늘로 딱 일주일 남았는데 아직 한참 공부할 내용은 멀었네요..ㅎㅎㅎ ​ 그래도!! 개인프로젝트로 정보처리기사필기 기출, 문제은행 사이트를 만들어서 출퇴근길, 그리고 심심할 때 마다 풀어보니 반복되는 문제 패턴들을 알아가는듯 해요! ​ 혹시나 사용해 볼 분들은 아래 링크로 접속을 해보시면 돼요!! https://exam-bomb-service.vercel.app/start Exam Bomb - 문제 은행 원하는 과목을 자유롭게 공부해요 exam-bomb-service.vercel.app 유저에게 좀 더 다양한 정보를 제공하기 위해 카카오 간편 계정 로그인을 만들었기에, 로그인 후 사용해주시면 감사하겠어요..!! ​ 해당 문제은행..

이 문제의 input은 위와 같다. 문제 읽으며 생각한 풀이 방향성!!!! 1. 유저가 신고한 유저의 리스트를 갖는 Map 구현 2. 유저당 신고당한 count를 갖는 Map구현 이 두가지를 통해서 구현할 계획이다! 먼저 reportMap과 cntMap 두개를 만들었다. let reportMap = {}; let cntMap = {}; report.forEach((re)=>{ const [from, to] = re.split(' '); if(reportMap[from]){ if(!reportMap[from].includes(to)){ reportMap[from].push(to) cntMap[to] ? cntMap[to]+=1 :cntMap[to] =1 } }else { reportMap[from] = [..

문제 읽으며 생각한 풀이 방향성!!!! 1. 전달받는 board의 배열이 moves 값으로 인덱싱하기에 용이하지 못하다고 판단! board[row][col]에서 board[col][row]로 조회할 수 있도록 변경!! 2. 100 * 100 까지 가능하므로 Array 인덱싱보단 Map으로 column 조회가 좋지 않을까? 라고 생각! 아래 코드와 같이 boardMap을 구현함! let boardMap = {}; board.forEach((row,i)=>{ row.forEach((val,j)=>{ if(val !== 0){ boardMap[j+1] ? boardMap[j+1].push(val) : boardMap[j+1] = [val]; } }) }) 0 인 경우엔 넣지 않고, row를 0번부터 인덱싱 하..