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번부터 인덱싱 하..

오늘은 저의 개발속도를 향상 시켜줄 tailwindcss를 프로젝트에 install하는 방법을 알아볼까 해요! tailwindCSS를 한 번도 안써본 사람은 있어도 한 번만 쓴 사람은 아마 없을거라고 생각해욯ㅎㅎ 그렇다면 왜 제가 이걸 계속 쓰는지 한 번 볼까요?! 일단 제가 생각하는 장점을 말해보자면 1. 조금만 익숙해진다면 css 개발 속도가 훨씬 증가! (코드량 감소) 2. 자주 필요한 css가 미리 만들어져 있어서 손쉽게 구현 가능! 하지만 그럼에도 단점이 있긴하죠,, 제가 생각하는 단점을 말해보면 1. 익숙하지 않다면 지저분하게 생각들수도 있다! 태그의 className에 연달아 쓰기때문에 지저분하대요.... (하지만 저는 css 파일에 tailwind를 적용하여 사용하기에 지저분하다고는 생각안..

이번 시간에는 box-shadow를 통해 정말 간단하지만 버튼 active 상태를 유저에게 확실하게 제공할 수 있는 효과에 대해서 알아보도록 할게요! 요새 CSS 관련 글을 작성할 때 마다 내가 고민하며 구현했던 것들을 나눌 수 있다는게 즐거워요ㅠㅠㅠ CSS 너무 재밌는 것,,,,,,,, 이제 본론으로 가보도록 하겠습니다! 오늘도 결과를 먼저 보여드리자면 메뉴 1 버튼을 보시면 왼쪽부터 기본 / hover / active 상태입니다! 확실히 hover일 때는 올려놓은 듯하게, active 상태일 때는 마우스로 누르고 있는 것 처럼 느껴지죠?? 이런게 UI/UX이지 않을까 싶습니닿ㅎㅎㅎㅎ 먼저 box-shadow를 통해 얻을 수 있는 효과를 살짝 설명하자면, 태그의 영역에 그림자효과를 주어 박스 형태가 있..

드디어! 마무리 할 시간이 왔습니다! 오늘은 마지막으로 selected 상태를 다루는 과정을 알아보려해요! selected상태일 땐, 아래 사진과 같이 글씨 상단에 노란 점을 찍어보려하는데요! 지난 시간에 after before를 사용해봤는데 이거.. 안해봤겠죠?? ​ 그래서! 오늘은 '어떤식으로 만들기 위해 접근할까'라는 생각을 갖고, 접근 방식을 보려해요! ​ 글씨위에 점이 생기네?? (새로운 tag를 만들고, selected일 때만 tag를 보이게 해야하나..?) 이렇게 생각할 수 있지만 오늘은 가상 요소 선택자의 before 사용하여 다뤄보려해요! ​ 1. before를 만들어, absolute로 top:0에 left : 50% 를 주면 가운데에 생기겠지??? 먼저 위와 같이 만약 selected..

오늘은 React 상속에 대한 내용을 좀 다뤄보도록 하겠습니다! 크게 3가지 정도의 Component 상속 개념이 있어요! Children, rest, 그리고 props 상속이 있다고 생각하면 될 것 같아요! (rest랑 props는 비슷하다고 생각하면 되겠습니다!) 먼저로는 제일 많이 사용하는 props의 개념으로 보도록 하겠습니다. Nextjs Props 상속 위의 사진은 제가 만들고 있는 소개 페이지의 한 부분이에요! (아직 미완성,,,, 진행중입니다 ㅠㅠ) 이 곳에 우리가 컴포넌트로 만들어야할 부분이 딱 보이는 바로 9개나 반복되는 박스가 되겠죠?! 그래서 그 박스를 아래와 같이 만들었어요! 자 여기서 첫번째 상속 Props의 개념이 나옵니다!! 저는 4가지의 props를 설정했어요 classNa..

이전 시간에 다뤘던 hover, active에 이어 버튼의 se lected 상태 적용할 인터랙션을 알아볼게요! 그전에 간단하게 오늘 다룰 내용을 좀 알아보도록 할텐데 딱 두가지가 중요합니다! 첫번째는 선택한 상태를 나타내도록 useState ReactHook을 알아야하구요! 물론 useState를 안쓰고도 충분히 가능하긴해요~! 두번째는 CSS 지식인, after before를 활용한 가상 요소 선택자를 알아야합니다! 일단 CSS를 알아가는 과정이니 가상 요소 선택자인 after와 before 위주로 알아볼게요! before selector라고 검색을 해보면 이렇게 정의를 하고 있습니다! The ::before selector inserts something before the content of ea..

오늘은! NextJs에서 페이지를 이동하는 방법에 대해서 알아보도록 합시다! NextJs는 pages directory의 .js .ts .jsx .tsx 파일을 기반으로 페이지가 라우팅되는 시스템을 가져요! 예를 들면, React를 한다면 아래처럼 react-router-dom을 사용하여 설정해야 하죠... 사실 저는 위와 같은 페이지 라우팅 방식이 너무 귀찮아서 ,,,,, Next만 사용해요...(못쓴다고 한적은 없슴다!!) Next에선 위의 방식들이 전혀 필요가 없게 되는데요! 처음에 말했듯이 pages directory의 파일을 기반으로 라우팅되기 때문입니다! 예를 들면 메인 페이지같은 경우는 pages/index.tsx 가 되고요! about 페이지는 pages/about/index.tsx 를 만..

오늘은 버튼하나도 좀 더 다양한 모션을 줄 수 있는 방법을 나눠보려해요! 이미지로 아래의 Navbar 버튼 4가지 케이스를 가져와봤는데요! (그냥 만든것이니,,, 디자인 측면의 색상 조절 같은 부분은... 알아서 해주세요ㅠㅠ!) CSS 기술만 참고!!! 기본상태 hover상태 - 마우스 올려놓은 상태 active상태 - 마우스를 클릭하고 있는 상태 selected상태 - 눌러서 선택된 상태 일단 오늘은 hover와 active를 다룬 후, 다음 시간엔 selected 상태의 위의 점 찍은 형태를 만드는 방법에 대해 알아보도록 하겠습니당. 마지막의 selected에 주는 액션은 좀 어려운 기술도 들어가기에 다음 글에 이어서 쓰도록 하지요! ㅎㅎ 영상으로 살짝 공유하자면 이런식으로 작동해요! 먼저 위의 Li..

오늘은 정말 간단하게 절대경로를 뚝딱 설정하는 법을 알아보도록 하자! 기억상으로...는 React에서 절대경로를 사용하려면 좀 복잡하게 설정해야했던 기억이 있다...?! 물론 내가 엄청 돌아갔을지도 모르겠지만 react-app-rewired와 customize-cra를 설치해서 config 파일도 만들고해서 귀찮았던 기억이 있지만, Next에선 정말 간편하게 할 수 있다! 후후 저번 시간에 만들어졌던 tsconfig.json 파일에서만 수정하면 되는데요! 아래처럼 기존에 있던 compilerOptions 에다가 추가로 baseUrl을 "."으로 현재경로로 설정한 후! paths를 통해 설정해주면 끝~!!! { "compilerOptions": { "baseUrl": ".", "paths": { "@lib..

최근 회사 업무 중 하나인 회사 소개 홈페이지의 리뉴얼!!! 소개 페이지이다보니 데이터를 다루며 표출하는 기술보다는 CSS와 자바스크립트를 이용한 인터랙션 디자인이 주된 업무가 됐어요..! (물론, 이것뿐 아니라 커머스 백오피스 개발도 있기에 극과 극의 업무를 ,,,,, 해요,,, 갈리는 소리가 들리시나요......) 적당한 CSS는 할 줄 알았지만 이정도로 CSS를 통해 다양한 애니메이션, 시각적 효과를 줄 수 있다는게 너무 신기해서 여러가지 CSS 기술을 포스팅하려 해요!!ㅎㅎㅎㅎ 첫번째로 다룰 내용은, 디자인 시안을 받은 후 우리가 해야할 작업에 가까워요! 모든 디자인엔 메인 컬러들이 있습니다. 메인컬러는 정말 많이 쓰이는 컬러니깐 자주 쓰이겠죠?? 여기서 잠깐, 만약에 메인컬러를 20군데에 사용했..

초기 환경설정을 마쳤다면 페이지의 구성을 만들어야 한다! _app.tsx와 _document.tsx에서 우리는 전체 프로젝트 페이지의 공통 역할을 다루게 된다. _app.tsx 에서는 다음과 같은 일을 한다고 한다. 1. Persisting layout between page changes 2. Keeping state when navigating pages 3. Custom error handling using componentDidCatch 4. Inject additional data into pages 5. add global CSS 페이지간의 이동에서 공통된 layout을 유지시켜 주며(1), 상태 또한 유지 시켜준다(2). 또한 위의 중간의 MyApp.getInitialProps 를 통해서 앱..