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

- 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는 풀스택 웹 앱을 개발하기에 있어, 최고의 프레임워크라고 해도 과언이 아니다. 리액트 프레임워크..

보호되어 있는 글입니다.

이번 취뽀 면접 스터디에 좋은 기회로 함께하게 되었다. 사전에 개인적으로 공부하며 습득한 지식들은 있지만, 지식을 나만의 언어로 원활하게 전달하는 것이 쉽지 않았고, 또 언어로 표현할 때마다 스스로 듣기에 두서없이 느껴졌다. 이 때문에 면접 경험에 스스로를 노출시키는 것만이 발전할 길이라는 생각이 들어 선뜻 스터디에 지원하였다. 화요일마다 세명에서 네명의 소수 인원이 1:2 면접을 진행하는 방식이 될 것 같다🥰 지난 일주일 동안 혼자 외우고 공부한 지식을 바탕으로, 짧게 자기소개를 한 뒤 실제 회사에서 면접 보는 것처럼 디스코드에 모여 캠을 킨 상태로 진행하였다. 자기소개 이후 짧은 아이스브레이킹 시간이 있었고, 전반적인 인성면접을 본 뒤 기술 면접으로 들어갔다. 지난 주에는 JavaScript 기본 지..

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