SUE 개발 블로그

팀프로젝트가 끝난지 한달이 넘었으나 취준 및 회사 근무 때문에 지금이라도 작성하네요... 밀린 블로그 투성이의 삶 🥲📌 With Me는 지역문화와 이벤트 및 모임 동행자를 찾는 커뮤니티 프로젝트입니다.자영업자나 소상공인이 이벤트를 개최하여 홍보와 상업 시장을 지원할 수 있습니다.사용자들은 주변에서 열리는 다양한 이벤트를 쉽게 찾고 모임을 개설함으로써 즐기고 소통할 수 있는 기회를 제공합니다.지역주민들과 관광객들을 대상으로 이벤트를 소개하고 참여할 수 있는 플랫폼을 통해 지역사회의 활성화와 지역경제의 성장에 도움을 줄 수 있습니다. 이벤트, 모임 커뮤니티 사이트를 주제로, 개인이 여는 자전거, 독서, 강아지 산책같은 모임과자영업자나 소상공인이 주최하는 체험, 행사같은 이벤트를 모임과 이벤트로 구분하여 ..

제로베이스 학습을 어느정도 마치고 개인프로젝트 기간이 찾아왔었습니다.주어진 카테고리 내에 저는 소셜 커뮤니티를 골랐고반려견을 키우는 애견인들을 위한 산책 커뮤니티 멍미팅을 기획했습니다.개인프로젝트이지만 마침 여유가 되는 지인분이 연습겸 서버를 만들어주겠다하여 값진 프로젝트가 되었다.기획 단계는 피그마를 이용해 와이어 프레임 및 프로젝트에 필요한 페이지 및 기능등을 적으며 기획했습니다. 개인프로젝트 전에 진행한 리액트 과제에서 사용한 Vite를 사용해 React.ts로 작업을 시작했으며React-router-dom v6, axios, zustand, TailwindCSS 라이브러리를 추가로 사용했습니다.실시간 날씨 데이터 ( Open Weather API ) Open Weather API를 이용하여 서울을..

Axios는 브라우저 및 node.js 를 위한 Promise API 를 활용하는 HTTP 비동기 통신 라이브러리.쉽게 요약하면 백엔드랑 프론트엔드 통신을 쉽게하기 위해 나온 라이브러리이다.우선 설치 및 사용법을 배우며 알아가보기로 하자. npm을 사용한다면$ npm install axiosyarn을 사용한다면$ yarn add axios 위 코드로 설치를 완료했다면 이제 서버에 통신하여 데이터를 받아올 곳에서 axios를 import 해줘야 한다.import axios from "axios"; 통신 연습을 위해서 https://jsonplaceholder.typicode.com/ 를 활용하기로 했다. 테스트용 페이지는 위처럼 간단하게 만들었고 버튼을 아래와 같이 동작합니다.버튼을 누르면 통신하여 데이터..

Styled-component ? CSS나 SASS같이 class, id, tag name를 가져와 쓰지 않으며 스타일 지정된 컴포넌트 생성하여 Tag 를 쓰듯 스타일 컴포넌트를 사용하는 .리액트에서 UI 단위를 나누어 컴포넌트화 하듯 스타일을 컴포넌트화 하여 재사용이 가능하고 전역에서 중첩되지 않게함. 설치 $ npm install --save styled-components 사용법import React, { Fragment } from 'react';import styled from 'styled-components'; const App = () => { return ( Hello Hello )}const Button = styled.button` borde..

인터페이스란 ? 타입 별칭과 동일하게 타입에 이름을 지어주는 또 다른 문법이다. 예제 ) interface Person { name: string; age: number; } 이렇게 정의한 인터페이스를 타입 주석과 함께 사용해 변수의 타입을 정의할 수 있다. const person: Person = { name: "수보이", age : 26 }; 이렇듯 인터페이스는 타입 별칭과 문법만 조금 다를 뿐 기본적인 기능은 같다고 볼 수 있다. 읽기 전용 프로퍼티 읽기 전용 프로퍼티 또한 동일한 방법으로 설정 가능하다. interface Person { readonly name: string; age?: number; } const person: Person = { name: "이수광", // age: 26, }..

// number let num: number = 123; // 정수, 음수, 소수, Infinity, NaN 전부 값을 넣을 수 있다. num.toUpperCase() // 문자열에만 사용할 수 있는 메서드 같은 경우에는 사용할 수 없다. ( 빨간줄 ) num.toFixed() // 숫자에만 적용할 수 있는 메서드는 당연히 적용가능하다. // string let str: string = "hello"; let str2: string = `hello ${num]`; // 큰 따옴표, 작은 따옴표, 백틱, 템플릿 리터럴 타입도 string에 포함된다. // boolean let bool1: boolean = true; let bool2: boolean = false; // null let null: nul..

얼마나 엄격하게 타입 오류를 검사할지, 자바스크립트의 코드의 버전을 어떻게 할지 타입스크립트는 컴파일러 옵션을 자유롭게 설정하여 사용할 수 있다. 옵션은 다양하지만 주로 사용할 옵션을 알아보자. tsconfig.json { "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": true, "strictNullChecks": false, "moduleDetection": "force" }, "ts-node": { "esm": true }, "include": ["src"] } "compilerOptions" 에서 "target" : 변환되는 자바스크립트 버전을 지정할 수 있다. ( "ESNext" , "..

꼭 알아야 할 배경지식으로 타입 시스템이 있다. 타입 시스템 모든 프로그래밍 언어는 타입 시스템을 갖고 있다. 타입 시스템은 크게 2가지로 나눌 수 있다. ( 정적 타입, 동적 타입 ) 자바스크립트가 사용하는 동적 타입 시스템은 변수의 타입들을 코드가 실행하는 도중에 결정한다. = 변수의 타입을 직접 정의 안함 = 변수의 타입을 일일히 지정하지 않아도 되는 유연함을 갖는다. let a = "hello" 또 변수의 타입이 하나로만 고정되지 않기에 아무 타입의 값이나 자유롭게 담을 수 있다. let a = "hello" // 문자열 a = 19923455 // 숫자 마지막 라인에 toUpperCase( ) 라는 메서드를 사용하면 어떻게 되는가 오류가 발생한다. toUpperCase 는 문자열에만 사용할 수 ..

타입스크립트는 자바스크립트의 확정판이라 할 수 있다. 자바스크립트를 더 안전하게 사용할 수 있게 타입 관련 기능들을 추가한 언어이기 때문. 자바스크립트는 변수를 선언하고 타입까지 지정하지 않는다. ( 변수의 타입을 프로그래머가 직접 정할 수 없기 때문 ) 타입스크립트는 변수 a,b 에게 number 라는 숫자타입을 갖게 정의시켰다. 이제 a,b 변수에는 숫자 값 이외에 넣을 수 없다. 와 비교할 때 parseInt( ) 안해도 되겠다 ! 위와 같이 타입스크립트는 자바스크립트에서 변수에 타입을 직접 지정할 수 있는 등 타입을 더 안전하게 사용할 수 있는 여러가지 기능들이 추가된 자바스크립트의 확장판이라고 할 수 있다. ( 자바스크립트의 모든 기본 문법들도 사용할 수 있다 ! ) 그런데 타입스크립트는 왜 배..

만든 프로젝트를 빌드하고 serve 명령어로 배포하는 과정에서 npm install -g serve 를 입력하면 아래와 같은 오류가 발생했다. npm install -g serve npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/serve npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve' npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve'] { npm ERR! err..