코로 넘어져도 헤딩만 하면 그만

- Thanks to. 도커 사용법 학습에는 생활코딩의 도움을 받았습니다!  🚩Doker기본적으로 도커 위에는 실시간으로 돌아가는 컨테이너가 여럿 있고, 각각의 컨테이너 안에서 도는 앱들은 리눅스 운영체제를 기반으로 한다. 그러나 리눅스가 아닌 개발자도 얼마든지 도커를 사용할 수 있다. 만약 환경이 Window, Mac이라면 가상머신을 깔고 그 가상머신에 리눅스 운영체제를 깔아 도커와 같은 컨테이너 기술을 사용할 수 있다. 또한 직접 설치할 필요없이 도커가 스스로 가상머신과 리눅스를 설치해주기에 이 부분은 크게 신경 쓰지 않아도 괜찮다. 단, 이처럼 가상머신을 사용하게 된다면 약간의 속도 저하는 감수해야 한다. 이런 단점을 감안하고도 도커를 쓰는 이유는 개발자로서 도커의 편의성을 무시할 수 없기 때문이..

도커 설치는 이쪽으로! https://www.docker.com/  기존까지는 서로 다른 서버나 컴퓨터마다 node.js, npm 등을 개발자가 설정해주어야 했다. 이 귀찮은 과정에서 버전 충돌이 생기기도 하고, 원치 않게 오류가 발생하는 일이 잦았다. 이러한 문제를 해결하기 위해 도커 Docker가 등장했다.   🍬컨테이너와 도커?컨테이너Container 안에는 앱 뿐만 아니라 앱이 구동하는 데에 필요한 node.js, 환경 설정, assets 등 모든 것이 포함된다. 즉 서로 다른 서버나 pc에서도 다른 환경이라서 발생하던 에러가 더는 발생하지 않는다.  물론 가상머신(vm)을 사용하여 가상화로 해결하는 방식이 있었다. 하지만 vm은 운영체제 가상화를 포함했다면, 이후 vm을 대체하게 된 컨테이너 ..

노마드 Next.js 14버전 강의로서는 완강입니다!! 🤩 이후 2주간은 제작하였던 영화 페이지를 제공된 API를 다양한 방식으로 활용하여, 스터디원 각자 Next js를 추가 학습을 하도록 계획하였습니다. 완성한 사이트: https://nomad-nextjs-c3jj.vercel.app/ 🚩Next.js의 Error Handling async function getVideos(id:string){ console.log(`Fetch video:${Date.now()}`) await new Promise((resolve)=>setTimeout(resolve, 3000)); throw new Error('something Broke...') //const response = await fetch (`${AP..

지난 주에 마쳤던 부분을 이어서 추가 포스팅합니다! 학습 범위는 #2.5부터 #3.6까지 해당됩니다. 🚩Server 컴포넌트에서 fetch 해오기 클라이언트 컴포넌트에서 해오던 방식과 다르게, next의 서버 컴포넌트에서 다른 방식으로 fetch를 해볼 것이다. 이전에 작성한 코드를 지우고 아래와 같이 최소한의 코드만 남긴다. export const metadata = { title:"Home", } const URL = "https://nomad-movies.nomadcoders.workers.dev/movies" async function getMovies(){ const response = await fetch(URL); const json = await response.json(); return ..

이번 주부터는 Next.js 프레임워크를 공부해보기로 하였습니다🥰 React만 사용하다가 Next.js로 넘어온 것이라 우선 생활코딩으로 가볍게 살펴본 뒤, 노마드코더의 next.js14버전 강의로 추가 학습했습니다. 아래는 아래 강의를 배우며 정리한 부분입니다. Next.js의 선택적 hydration 및 use client 에 대해 자세하게 알아볼 수 있어서 굉장히 유익했습니다. 해당 강의 #2.5까지가 이번 포스팅의 범위입니다. All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 🚩Introduce Next.js는 풀스택 웹 앱을 개발하기에 있어, 최고의 프레임워크라고 해도 과언이 아니다. 리액트 프레임워크..

일전에 포켓몬 Api를 활용한 사이트에서 next Page 버튼으로 데이터를 넘기는 방식에서 더 나아가 무한 스크롤로 데이터를 추가하는 리펙토링을 하려 했는데, 중간에 어디선가 로직이 꼬이며 데이터 요청이 마음처럼 안 되었다(...) 그래서 이참에 react Query를 통한 데이터 사용과 Intersective Observer을 다시 복습하기로 했다. 무료로 제공되는 Cat Api를 활용하여 고양이_무한제공_사이트를 간단하게 만들어보았다. 기존에 쓰던 poketmon api 보다 불러오는 방식과 불려온 데이터 구조가 간단하여 연습에 도움이 될 것으로 보인다. 🍬이번에 사용한... - React - TypeScript - react Query - styled component - intersective ..