본문 바로가기

분류 전체보기76

[Next.js] API 호출을 통한 네비게이션 메뉴 생성 #1. Navigation 컴포넌트 생성 지난 포스팅에서는 상단 공통영역 생성까지 완료하였으니, 계속해서 작업을 시작해 봅시다. 이전글 - [Next.js] 페이지 상단 레이아웃 생성 components 폴더 아래 Nav.js 파일을 생성합니다. 이 컴포넌트에는 영화 장르를 Top메뉴로 생성한 후 각 메뉴를 클릭하면 하단 컨텐츠 영역에 장르에 따른 영화 목록을 보여줄 생각입니다. + Tip ES7 snippets 확장기능을 설치하게 되면, js파일을 생성하고 기본적인 export defaut function을 만들 때 _rfce 스니펫을 통해 타이핑을 줄일 수 있습니다. 일단 임시 메뉴를 생성하고 페이지 디자인을 입혀봅시다. 추후 임시 메뉴는 themoviedb.org 사이트에서 API를 통해 가져오게 .. 2021. 5. 17.
[Next.js] 페이지 상단 레이아웃 생성 이전글 - [Next.js] Next.js 시작하기 #1. create-next-app 으로 프로젝트 생성 nextjs프로젝트의 기본적인 세팅을 간편하게 시작하는 방법은 create-next-app을 사용하는 것입니다. react / react-dom / next 가 함께 설치되며, 간편하게 프로젝트 구조를 잡을 수 있습니다. 설치는 공식 가이드에 나와있는 대로 아래의 명령어를 실행하면 됩니다 : $ npx create-next-app app-test app-test 라는 이름으로 create-next-app을 생성합니다. 설치가 완료되면 아래와 같이 기본적인 nextjs 프로젝트의 구성이 만들어집니다. 이제 생성된 프로젝트를 실행해 봅시다 : $ yarn run dev localhost:3000 으로 .. 2021. 5. 1.
Postman 을 버리고 Thunder Client 로 Front-End 개발자던 Back-End 개발자던 API를 다뤄야 하는 개발자라면 Postman을 한번쯤은 사용해 봤을 것입니다. Postman은 개발한 API를 테스트하고, 테스트 결과를 공유하여 API 개발의 생산성을 높여주는 플랫폼입니다. 단순히 API를 테스트하는 툴에 국한하지 않고, 테스트자동화, Collection , API문서화, 모니터링 등등의 새로운 기능이 많이 추가되어 어떻게 사용하느냐에 따라 개발자의 생산성을 대폭 올려줄 수 있는 툴임에는 틀림이 없습니다. 하지만, 초창기에 가벼운 API테스트 목적으로 사용하던 것이 기능이 점점 추가됨에 따라 일반적으로 사용하는 API테스트 용도로 쓰기에는 이제는 너무 무겁지 않나... 하는 생각이 들던 찰나에 Thunder Client라는 툴을 접.. 2021. 4. 25.
[Next.js] Next.js 시작하기 #1. Next.js 란 무엇인가 Next.js는 React 어플리케이션의 서버사이드렌더링(SSR)을 쉽게 구현할 수 있게 도와주는 프레임워크입니다. Netflix, TikTok, Twitch, Nike, Uber, Docker, Elastic, Starbucks 등... 많은 기업형 서비스에서 Next.js를 사용하고 있습니다. 공식 홈페이지에서는 Next.js에 대해 아래와 같이 설명하고 있습니다. An intuitive page-based routing system (with support for dynamic routes) Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per.. 2021. 4. 7.
[프로그래머스] (깊이/너비 우선 탐색) 단어 변환 단어집합을 탐색해 나가면서 한 글자만 다른 단어를 찾아낸 후, 그 단어로 다시 탐색을 시작하여 최종 타겟단어와 일치할 때까지의 탐색 깊이를 측정한다. 단, 최종 타겟 단어에 이르기 까지 여러가지 경로가 있을 수 있는데, 이 중 가장 짧은 길이를 반환하면 된다. 타겟 단어와 1개의 알파벳만 다른지 판별하는 함수는 별도로 작성했다. class Solution { int answer = Integer.MAX_VALUE; public int solution(String begin, String target, String[] words) { boolean[] isChecked = new boolean[words.length]; dfs(begin, target, words, isChecked, 0); if (ans.. 2021. 4. 7.
git fork 해서 공동작업 하기 #1. git fork 프로젝트의 Master 브랜치는 보통 Push권한을 주지 않기 때문에 프로젝트에 참여하기 위해서는 "Fork" 를 이용하여 사용자의 네임스페이스 저장소에 복사한 후, 본인의 브랜치에서 작업하여 원본 프로젝트에 PR 을 하는 것으로 Master 브랜치에 반영하게 된다. 전체적인 플로우는 아래와 같다. 프로젝트를 Fork 한다. Fork 한 개인 저장소를 로컬에 Clone 한다. 코드를 수정한 후 커밋한다. 자신의 git 저장소에 Push 한다. Pull Request를 생성한다.(Fork한 개인 저장소에서 원본 프로젝트의 Master 브랜치로 Merge 요청) 프로젝트 소유자(혹은 그에 준하는 관리자) 는 PR을 승인 하거나, 거절하거나, 추가 수정사항을 요청할 수 있다. 프로젝트 .. 2021. 3. 30.
반응형

티스토리툴바