DH의 개발 공부로그

스택(STACK) 1. 스택이란? 스택은 "쌓다", "쌓이다"라는 의미로, 데이터를 차곡차곡 쌓아서 후입선출 형태 즉, LIFO(List In First Out) 의 자료구조 입니다. 위의 이미지와 같이 데이터가 아래에서 부터 순서대로 쌓이며 가장 마지막에 쌓아둔 데이터부터 삭제해나가는 구조를 가졌습니다. 2. 스택의 특징 스택 내부에는 top을 통해서만 접근이 가능합니다. top은 제일 최상위에 위치한 데이터를 반환합니다. 스택에 데이터를 삽입할 때는 push를 이용하여 top 위에 쌓게 됩니다. 스택에서 데이터를 삭제할 때는 pop으로 top에 위치한 데이터를 삭제하게 됩니다. 3. 스택의 장단점 top을 통해 데이터에 접근하기 때문에 접근, 삽입, 삭제가 빠르다. top을 통해서만 접근이 가능하기 ..

배포 후 새로고침 리액트 작업을 버셀로 배포 후 정상적으로 작동이 되는데, 라우트 이동 후 중간에 새로고침을 하면 404에러가 나는 것을 발견하였습니다. 이를 해결하기 위해 구글에 서치를 해보았고 해결 방법을 찾았습니다. vercel.json 우선 vercel.json 파일을 만들고 아래의 코드를 입력해주면 아주 간단하게 문제를 해결합니다. 버셀에서 새로고침이 되면 알아서 해당 위치의 라우트로 이동을 시켜줍니다. { "rewrites": [ {"source": "/(.*)", "destination": "/"} ] } 결론 문제를 해결하는 것에 급급하여 코드의 정확한 의미 파악을 하지 못하고 사용을 한 것 같아서 공부가 더 필요하다고 느꼈습니다. 역시 개발 분야는 다양한 문제를 만나봐야...더욱 성장을 ..

npm과 yarn npm과 yarn은 node 개발 환경에서의 패키지 매니저입니다. 전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스에 올리면 npm, yarn과 같은 패키지 관리자를 통해 설치 및 삭제가 가능합니다. 또한 명령 줄 인터페이스(Command-line interface, CLI)를 통해 패키지 설치 및 삭제뿐 아니라 패키지 버전 관리, 의존성 관리도 편리하게 할 수 있습니다. 그렇다면 npm과 yarn의 차이점이 무엇인지 확인해 보겠습니다. npm NPM은 Node Package Manager의 약자로 노드를 설치할 때 자동으로 설치되는 기본 패키지 관리자입니다. NPM 툴을 이용하여 사람들이 Node패키지를 만들고, 업로드, 공유할 수 있어 누구나 게시된..

Vercel이란? Vercel은 Next.js 개발 팀에서 만든 프론트엔드 배포 자동화할 수 있게 빌드,배포,호스팅 서비스를 제공하는 호스팅 사이트입니다. 비슷한 서비스로는 Netlify라는 서비스가 있습니다. Vercel로 배포하기 Vercel로 배포하는 방법은 매우 간단하고 쉽습니다. 우선 Vercel홈페이지에 접속 후 회원가입을 해야 합니다. 그리고 방법은 다음과 같습니다. 1. Vercel 회원가입, 로그인 우선 Vercel 홈페이지에 접속 후 회원가입을 해야 합니다. 회원가입을 하고 로그인하면 다음과 같은 화면이 뜬 상태입니다. 처음 가입을 한 사람은 Add Github Account로 git과 연동을 해주면 됩니다! 2. 원하는 Repository import 3. Configure Proje..

API란? API는 "Application Programming Interface"의 약자로 응용 프로그램 간 상호 작용을 가능하게 하는 소프트웨어 인터페이스를 말합니다. 간단하게 API는 일종의 중개자 역할로 API를 이용해서 데이터를 주고받거나 서비스를 요청할 수 있는 방법을 제공합니다. 예를 들어보겠습니다. 레스토랑에 간 손님(클라이언트) 이 웨이터(API) 에게 음식을 주문을 하면 주방장(서버) 이 주문에 해당하는 음식을 제공을 합니다. 위의 상황이 바로 간단하게 API를 이용하여 데이터를 주고 받는 상황이라고 할 수 있습니다. API는 어떻게 사용 될 까? API는 웹 개발, 모바일 앱 개발, IoT, 클라우드 컴퓨팅, 인공 지능 등 다양한 분야에서 널리 사용되고 있으며, 현대 소프트웨어 개발에..

서론 최근들어 CRA방식이 아닌 Vite를 이용한 프로젝트들을 작업하다보니 의문이 드는 지점이 있었습니다. 바로 리액트파일을 생성을 할 때 다음과 같이 + SWC가 붙어있는게 과연 무엇을 의미하는지 입니다. SWC란? 바로 구글링을 통해 알아 본 바로는 SWC란 Speedy Web Compiler의 약자로 Rust라는 언어로 제작이 된 말 그대로 매우 빠른 자바스크립트 컴파일러이며, 기존 Babel이 하던 일의 대체제라고 합니다. 또한 SWC는 컴파일러이지만 웹팩과 같은 자바스크립트 번들러의 기능도 제공하고 있다고 합니다. 따라서 그냥 컴파일러가 아닌 SWC란 Rust기반의 플랫폼입니다. SWC가 왜 빠를까? 바로 SWC가 Rust 기반의 툴이기 때문입니다. Rust 언어의 특징이 바로 병렬 처리를 고려..

1. SPA (Single Page Application) 개념 SPA란? Single Page Application의 줄임말로 뜻 그대로 하나의 페이지로 구성이 되어있는 어플리케이션을 말합니다. SPA의 핵심 가치는 사용자 경험(UX) 향상에 있고, 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어서 모바일 퍼스트(Mobile First) 전략에 부합합니다. 작동방식 SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만 다운로드하고, 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만 따로 전달받아 페이지를 갱신을 합니다. 기존 페이지의 내부를 수정해서 보여주는 방식이라고 이해하시면 됩니다. 기본적으로 SPA는 클라이언트 사이드 렌더링, CSR 방식의 렌더링입니다...