경험하는 IT

TypeScript 설치, 세팅(Vue, React 포함)

🖥️ HTML, CSS, JS 사용 시 1. Node.js를 최신버전으로 설치한다. 2024.02.19 - [👨‍💻 node.js] - Node.js 설치 설치방법을 참조하면 된다. 2. VScode 에디터에서 터미널을 오픈한다. control + shift + ` 를 누르면 된다. 3. 터미널에 다음과 같은 명령어를 입력한다. npm install -g typescript 📌 설치 도중 에러가 났다면? 1. Node.js 버전이 최신버전인지 확인 2. 윈도우 에서 허가되지 않은 script 실행불가 ~ 에러가 뜬다면 시작 - 검색 - powershell - 우클릭 - 관리자 권환으로 실행 후 Set-ExecutionPolicy Unrestricted 입력하고 y를 선택한다. 3. 맥북에서 보안에러가 뜨..

TypeScript를 사용하는 이유

웹사이트를 운영하는데 있어 사용자에게 안정감을 줄 수 있는 UX를 제공하는 것이 필수요소가 되고 있습니다. 안정감 있는 유저 경험을 통해 사용자의 신뢰를 얻을 수 있기 때문이다. 그렇기 때문에 높은 코드 품질, 버그 없는 웹사이트, 등등이 기업의 브랜딩 이미지와도 직결된다. 위와 같은 고민을 해결해 주기 위해서 TypeScript를 사용하는 것이다. 🖥️ TypeScript란? 2012년 마이크로소프트가 발한 JavaScript 기반의 정적 타입 문법을 추가한 '프로그래밍 언어'이다. TypeScript는 JavaScript의 슈퍼 셋, 즉 상위 확장자로 JavaScript 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 JavaScript로 컴파일 되어 실행할 수 있다. 🖥️ T..

Next.js를 사용하는 이유?

🖥️ Next.js를 사용하는 이유? Next.js를 쓰는 이유에 대해서 간단히 알아보자. 프론트엔드 만으로 살아남을 수 없다. 요즘은 프론트엔드만 안다고 취업시켜주는 시대가 점점 끝나고 있다. 외주 개발 맡기면 훨씬 저렴하고 GPT와 같이 AI가 코드를 훨씬 잘 짜준다. SSR(Server-Side Rendering) 기존 React는 Client-side Rendering을 써왔다. 사용시 이쁘고 부드러운 사이트를 만들 수 있지만 첫 페이지 로딩속도 저하, 검색노출 어려움과 같은 단점이 있어서 웹사이트의 bounce rate 지표들이 낮아지고 트래픽을 잡으려고 광고비도 많이든다. 그래서 투자대비 수입지표가 낮아질 수 밖에 없다. 반면 Next.js는 SSR을 사용해 서버에서 HTML을 미리 만들어주기..

거위바이러스. 바탕화면 거위키우기

바탕화면 거위키우기 요즘 SNS나 유투브에 유행하는 Desktop Goose 를 깔아봤다. (설치 방법은 포스팅을 내려가다보면 있습니다.) 거위 여러 마리를 소환하니까 원하는 사진들이나 메모장을 가져온다... 가져온 창을 끄면 마우스를 쫒아와 물고 도망간다ㅋㅋㅋ 마우스를 움직여 봐도 딸려갈 뿐이었다. 또 진흙을 밟아 화면을 어지럽히기도 한다. ㅋㅋㅋㅋㅋ 아주 귀여운 애들이다. 친구들을 많이 만들어 줬다! 하지만 주의사항은 컴퓨터에 성능에 따라 많이 소환하면 렉이걸린다.. 거위 키우기로 들어가 설치하면 된다. 사이트로 들어가서 Download Now 라는 버튼을 누르면 이러한 화면이 뜨는데 무시하고 중간에 있는 "No thanks, just take me to the downloads" 버튼을 누르면 운영..

올바른 REST API 디자인 사례

API 응용 프로그래밍 인터페이스 또는 다양한 소프트웨어 서비스 간의 통신 채널의미한다. 즉, 프론트엔드, 백엔드 개발자 모두에게 중요한 개발 요소이다. 요청과 응답을 전송하는 애플리케이션을 각각 클라이언트와 서버라고 한다. API는 시스템 간의 표준 통신 방법이다. 따라서 향후 문제를 방지하려면 REST API를 올바르게 구축하는 것이 중요하다. 즉, API는 작업하기 쉽고 간결하며 오용하기 어려워야 한다. API 프로토콜 타입 REST : API의 프론트엔드와 백엔드를 분리하고 개발 및 구현에 상당한 유연성을 제공하는 클라이언트 / 서버 접근 방식을 사용한다. RPC : 여러 매개변수를 보내고 결과를 받는 방식을 사용한다. SOAP : HTTP, SMTP, TCP 등 인터넷에서 발견되는 광범위한 통신..

Node.js(express)와 MySQL 연결

🖥️ MySQL 연결 MySQL을 연결하려면 먼저 설치를 해야 한다. 설치방법에 대해서 알아보자. 1. MySQL을 설치한다. MySQL 사이트에 접속한다. DownLoads 버튼을 누른 후 아래로 내리면 "MySQL Community (GPL) Dwonloads" 버튼을 누르면 다음과 같은 화면이 뜬다. 그럼 MySQL Community Server 를 눌러 다음화면이 뜨면 제일 위에 것을 설치하면 된다. 📌 IOS 일 경우 "확인되지 않은 개발자가 배포했기 때문에 열 수 없습니다."라는 메세지가 나타난다면 해결 방법은 다음과 같다. 먼저 "시스템 설정" 버튼을 누르고 "개인정보 보호 및 보안"에서 아래로 내리면 "보안"이라는 항목이 보일 것이다. "보안"이라는 항목에서 메세지가 뜰 것이다. 그때 허용..

회원인증 방법론 (session-based, JWT, OAuth)

🖥️ 회원인증 방법론 회원인증 방법은 크게 세가지가 있다. ⌨️ Session-based 어떤 사람이 로그인 페이지에서 로그인을 한다. 그럼 서버는 쿠키를 발행한다. 이 쿠키에는 세션아이디가 "유저가 로그인을 했다는 세션" 이다. 그럼 브라우저는 받은 쿠키를 저장한다. 그럼 로그인을 한 상태가 된다. 그렇다면 이제 로그인한 사람만 마이페이지를 볼 수 있다고 가정한다면 브라우저에서 마이페이지를 누르면 서버에 자동으로 사용자 세션이 들어간 쿠키를 보낸다. 서버는 이 쿠키를 받아 세션로그인을 찾아 로그인을 했다고 판단이 되면 마이페이지를 보여주는 것이다. ⌨️ token-based(JWT) 유저가 로그인을 한다. 그럼 서버는 JSON 웹 토큰이라는 것을 브라우저에게 발행해준다. 브라우저는 이 토큰을 저장한다...

Not Found 구현

🖥️ Not Found Not Found는 404 라는 status code이다. Not Found(404)에러는 "웹페이지를 표시 할 수 없다" 라는 뜻이다. 그렇다면 Not Found라는 페이지가 나오는 이유를 살펴보자 부적절 한 URL로 판단되어 사전 차단 정확하지 않은 주소를 입력 사용이 제한된 URL 유료서비스 기간 만료 여러가지 이유들로 인해 Not Found(404) 페이지가 뜨는 것이다. 그래서 우리가 웹페이지를 개발할 때는 Not Found(404) 페이지도 개발을 해야 한다. Node.js 에선 어떻게 할 수 있는지 확인해 보자. var http = require('http'); var fs = require('fs');//fs module (= File System module) 이란..

깃 커밋 메시지

🖥️ 커밋 메시지 working dir(작업중인 로컬 디렉토리)에서 git add를 하게 되면 변경된 파일의 목록이 index(stage)에 추가가 되는데 이 파일의 목록들을 HEAD(확정본)에 반영 시킬 때 git commit을 쓰게 된다. 📌 git commit 사용이유 commit을 함으로써 git에 저장을 한다. 또한 git에 저장을 함으로써 코드를 삭제, 변경하더라도 다시 이전의 상태로 되돌릴 수가 있게 된다. 커밋 메시지는 규칙이 맞아야 좋다. 그 이유는 팀원과의 소통, 편리한 과거의 기록 추적 때문이다. commit도 옵션이 있다. 🖥️ Commit Option -m git commit -m "커밋 메시지" 인라인 형식으로 바로 커밋 메시지를 작성한다. -a 또는 -all git commit..

Query String

🖥️ Query String 쿼리스트링은 사용자가 입력 데이터를 전달하는 방법 중의 하나로, url 주소에 미리 협의된 데이터를 파라미터로 통해 넘기는 것을 말한다. http://~~/path?querystring 위와 같이 쿼리 스트링은 URL 에서 ? 다음에 오는 내용이다. 이름을 해석하면 간단한데 Query(질문) String(문자열) 즉. ? 뒤에 나오는 문자열이라는 뜻이다. 🖥️ Query String의 구조 http://~~~/path?키1=값1&키2=값2&키3=값3 위와 같이 쿼리스트링은 key=value 형식으로 구성되어있고, 여러 개를 사용하려면 '&'을 사용하면 된다. 위의 예시는 3개의 쿼리스트링을 보내고 있다. var _url = request.url; var queryData = ..

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

🐞 에러발생 {movieDetail.genres.map((item)=>( {item.name} ))} 프로젝트를 진행하던 중 Uncaught TypeError : Cannot read properties of undefined (reading 'map') 이러한 에러가 발생했다. 하지만 console.log()로 출력해보니 배열이 문제 없이 나오는 것을 확인할 수 있다. 🐞 에러원인 React는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다. 즉, React는 return에서 user.map(...)을 반복실행 할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것이다. 🐞 해결방안 &&를 이용하는 것이다. JavaScr..

git merge --no-ff, --ff, --squash, rebase

🖥️ git merge 종류 git merge의 종류는 4가지가 있다. 보통의 병합(--ff) 이기적 병합(--no-ff) 소심한 병합(--ff-only) 양아치 병합(--squash) ⌨️ 보통의 병합 $ git merge {병합할 브랜치 명} 기본적인 merge 방법이다. git merge 옵션을 적지 않으면 --ff와 같은 뜻이다. 브랜치와 병합할 브랜치가 Fast-Forward 관계 o : 병합할 브랜치(커밋)을 따라감. without Merge 커밋 브랜치와 병합할 브랜치가 Fast-Forward 관계 x : 병합할 브랜치와 병합됨. with Merge 커밋 아래는 git merge {브랜치명} --ff 할 경우 log이다. master > git merge Hotfix --ff Updating..