분류 전체보기

multer는 파일 업로드에 사용되는 node.js 미들웨어로 멀티파트(multipart/form-data) 형식으로 이루어져 있다 멀티파트는 데이터 요청 시 쓰이는 Content-Type의 한 종류로 multer에서 사용된다 쉽게 말해 이미지,영상,pdf 등 파일형식들을 보낼 때 multer를 사용한다고 보면 된다!1.설치 방법과 importnpm i multer const multer = require("multer");const upload = multer({ dest: "uploads/" }); express 설치해준다음에 해당 npm을 입력해 주면 설치하고 불러와주면 됩니다2.upload.single()const express = require('express')const app = expres..

자바스크립트에서 변수 선언은 var, let, const이 있다실제 동작 레벨에서 보면 호이스팅 타이밍, 초기화 방식, 스코프 결정 구조에서 차이가 크며프론트엔드 면접 질문으로도 많이 물어보는 것 같아 정리하게 되었다1.호이스팅(Hoisting)자바스크립트에서 코드는 실행되기 전에 변수 선언과 함수 선언이 먼저 메모리에 등록된다. 이 과정을 호이스팅이라고 부른다.즉, 변수 선언이 작성 위치와 상관없이 스코프의 최상단으로 끌어올려진 것처럼 동작한다.var → 선언과 동시에 초기값(undefined)까지 호이스팅let, const → 선언만 호이스팅, 초기화는 실행 시점에서 이루어짐console.log(a); // undefinedvar a = 10;console.log(b); // ReferenceErro..

리액트를 공부하다 보면 seo최적화 문제를 한 번쯤 듣게 되거나 경험하게 됩니다(저도 그랬고요)이때 next.js를 사용하면 react hook이라던지 기능들을 사용하면서 해결할 수 있다고 합니다오늘은 next.js에 대해 포스팅하겠습니다 1. next.js란 무엇인가?next.js 공식 홈페이지에 들어가면 이렇게 적혀있습니다 "웹을 위한 리액트 프레임워크로 세계적인 여러 대기업들이 사용하며 next.js는 리액트 컴포넌트의 강력함을 바탕으로 고품질 웹 애플리케이션을 만들 수 있다고 합니다" next.js는 2016년 10월에 처음 출시된 풀스택 프레임워크입니다말 그대로 프론트엔드와 백엔드를 다루는 프레임워크로 프론트엔드 부분에서는 react를 사용하게 됩니다next.js는 기본적으로 서버 사이드 렌더링..

리액트를 사용하다 보면 useEffect라는 훅을 많이 사용합니다. 처음엔 어렵게 느껴질 수도 있지만, 개념을 정확히 이해하고 나면 리액트 컴포넌트의 생명주기를 자연스럽게 다룰 수 있죠.이번 포스팅에서는 useEffect가 도대체 어떤 역할을 하는지, 언제 사용해야 하는지, 그리고 마운트(Mount)와 언마운트(Unmount) 개념까지 함께 정리해 보겠습니다. 1.useEffect란?리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행하게 하는 훅이다 useEffect는 컴포넌트가 Mount(마운트), Update(업데이트), Unmount(언마운트) 되는 시점에 따라 작업을 실행할 수 있도록 도와줍니다. 주로 api 호출, 타이머 설정, 이벤트 리스너 등록/해제 등에서 사용합니다 2. 리액트의 Life..

props는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 정보를 전달하는 방법이다props는 properties의 줄임말로 컴포넌트에 전달되는 속성값이다다만, props를 너무 별생각 없이 남발하면 props drilling이 일어나 상태관리에 문제가 생길 수 있으므로 useContext 혹은 Redux 등 전역 상태 관리 방식을 사용해야된다 1. 예제(기본 props 전달 예제)//부모컴포넌트import React from "react";import Welcome from "./Welcome";function App() { return ( );}export default App;import React from "react";function Welcome(props) { r..

요즘 프론트엔드 강의를 보면 타입스크립트를 안 쓰는 곳이 거의 없을 지경이라고 할 정도로 많이 쓴다. Next.js 설치할 때 매번 타입스크립트 쓸 거냐는 말에 찔려 공부해서 정리할 겸 포스팅하게 되었다.타입스크립트는 마이크로소프트에서 개발한 언어로 자바스크립트에 타입이 추가되었다고 생각하면 된다. 문자랑 숫자를 더해도 에러 안 뜨는 자바스크립트의 자유분방한 체계를 타입스크립트로 잡아주어 대규모 프로젝트에서는 코드의 구조화와 유지보수를 용이하게 할 수 있다고 한다.나온 지는 10년이 이미 넘었고 최근에는 타입스크립트 컴파일러와 도구를 Go 언어로 포팅하여 개선했다고 하네요 1. 타입스크립트 웹 에디터기본적인 문법을 간단히 익히거나 처음 사용하는거라면 간편하게 타입스크립트가 공식적으로 지원해 주는 것 같..

오늘은 일반적인 기본 웹과 react native 의 차이점에 대해 간략히 적어 놓았다react native를 잠시 셨다가 다시 해야된다면 다시 꼭 읽어 봐야 된다view, text 와 css 짜는 방법에 대한 내용이다1. view와 text 컴포넌트react native에서는 기존의 웹에서 쓰던 태그인 div,article,section 대신에 View컴포넌트를 사용하고 p,h1,h2 등 같이 글씨를 써야 될 때는 Text컴포넌트를 사용한다View는 중첩해서 View태그 안에 View태그를 또 사용할 수 있다View , Text는 display flex을 가진다 2.react native에서 css 사용법 1 (border, margin 등등)rn에서는 일반 css랑 다르게 작성해야 되는 게 생각보..

자주 안 하다 보면 까먹을 수도 있으니 프로젝트 만드는 법에 대해 정리하려고 한다당연 노드js,안드로이드 스튜디오 등 깔려있어야 된다https://docs.expo.dev/get-started/create-a-project/ Create a projectLearn how to create a new Expo project.docs.expo.dev이거 보고 설치함1. 초기 세팅 명령어 npx create-expo-app@latest첫 번째로 위에 명령어 입력하면 만들 앱이름을 정하라고 한다그런 다음에 my-app이라는 폴더가 생긴다 (근데 이렇게 했을 경우엔 일반적으로 typescript를 기반으로 설정되기 때문에 옵션을 정해주려고 한다)-타입스크립트 익숙 해지면 옵션 안설정하고 이거하면될 듯 -templ..