타입스크립트는 자바스크립트의 타입 부분을 업그레이드해서 사용하는 일종의 자바스크립트의 대용품입니다. 자바스크립트는 동적 타입(Dynamic typing)을 지원하여 타입에 관대하지만, 타입스크립트는 타입을 엄격하게 검사하여 타입을 제대로 쓰지 않았을 경우 에러로 변환해 줍니다. 이는 큰 프로젝트에서 타입과 관련된 버그를 줄이는 데 매우 유용합니다.타입스크립트는 자바스크립트의 상위 집합으로, 자바스크립트 코드를 그대로 사용할 수 있으면서도 추가적인 타입 검사와 최신 ECMAScript 기능을 제공합니다. 이를 통해 더 안전하고 유지보수가 쉬운 코드를 작성할 수 있습니다. 1. 일반 HTML CSS JS 웹개발시 타입스크립트를 사용하려면,Nodejs를 설치합니다.Vscode에디터에서 터미널을 오픈한 후,np..

저같은 경우 공부를 하면서 깃헙에 커밋을 하며 기록을 남기고 있었는데요,그런데 도중 원해 하나의 폴더에서 깃을 남기고 있었는데, 또 다른 프로젝트를 같은 언어로 진행하게 되어, 한 폴더에 두개의 프로젝트로 나누어져야 하는 상황이 생겼습니다.원래의 폴더 구조는nextjs project .git 다수의 파일들 이었다면,새로운 폴더 구조는NEXTJS nextjs project nextjs project2 .git 으로 변동을 해야되었습니다. 그렇기에 이를 해결한 방법은 .git 폴더를 최상위 폴더인 NEXTJS 폴더로 옮기고 NEXTJS 폴더에서 git add .과 git push를 함으로써 모두 깃허브에 정상적으로 올라가게 되었습니다.

Step 1. Nodejs를 검색하여 밑의 사이트에 들어가 LTS 버전을 다운받아서 설치합니다. Step 2.npm init -y 작업용 폴더를 만들어서 vscode로 폴더를 엽니다. 폴더 내에 server.js란 파일을 만든 후, 터미널을 열어 위와 같이 입력하여, package.json 파일을 생성합니다. Step 3.npm install express 코드를 쉽게 작성하는데 도움을 줄 express 라이브러리와npm install -g nodemon 서버를 자동으로 재시작시켜줄 nodemon을 설치합니다. Step 4.const express = require('express')const app = express()app.listen(8080, () => { console.log('http:/..

Next.js 개발 환경 세팅에 관해 포스팅해보려 합니다.먼저, 구글에 Nodejs 검색해서 LTS라 써져있는 버전을 설치합니다. 설치가 완료되었으면 작업용 폴더를 만든 후, vscode로 엽니다.그 후 터미널에,npx create-next-app@latest 를 입력 후 엔터 시 프로젝트 생성이 됩니다.폴더명과 사용할 언어같은 경우에는 알아서 체크해주시면 됩니다.사이트를 브라우저로 미리보기를 띄우고 싶다면,npm run dev를 입력해 터미널에 나온 url로 접속하면 됩니다. app 폴더 : 우리가 코드를 입력할 폴더입니다. page.js : 메인페이지 layout.js : 메인페이지 감싸는 용도의 페이지입니다. public 폴더 : 이미지나 static 파일 보관용 폴더입니다.api 폴더 : 서버기능..

깃을 활용하여 기록하다보니,  만들어진 레파지토리를 vscode와 연동을 어떻게 시키는지 자꾸 까먹는것 같아 이번 글을 포스팅하도록 하겠습니다. 먼저 깃에 로그인 하여, 깃 레파지토리를 생성합니다. 만드실때 Add a README file을 체크하셔도 되지만, 체크를 안하고 생성해주셔도 되십니다(Readme파일을 생성하면 최초 커밋 시 파일 기록이 달라서 오류가 발생할 수 있기에 저는 따로 만들지 않았습니다.) 생성 후에는 이런식으로 나오게 되는데요,이후 vscode를 열어 깃에 설명된 대로 터미널에 작성해주시면 됩니다.  1. 기존 프로젝트 폴더를 vscode로 열어주시고, git을 초기화해줍니다.git init 2. 레파지토리에 연결시킵니다. git remote add origin https://gi..

부트스트랩(Bootstrap)은 프론트엔드 Component Library라고 하여 웹페이지에 필요한 버튼, 메뉴, 탭, 모달, 카드 등 필수 요소들을 모아놓은 일종의 CSS 파일입니다. 이걸 우리의 HTML 파일에 설치하게 되면 보다 빠른 복붙식 HTML CSS개발이 가능하게 됩니다. 간단 설치방법 https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template 방문 후 Starter Template 이라고 써있는 예제 코드를 새로운 HTML 파일에 복붙하시면 됩니다. Hello, world! 약간 안정성있는 설치방법 또는, 위처럼 간편하게 설치하지 않고 안정성있게 설치하려면 https://getbootstrap.com/d..

HTML / JAVASCRIPT자바스크립트는 HTML 조작에 특화된 언어입니다. 그런데 HTML과 자바스크립트는 다른 언어입니다. 어떻게 자바스크립트는 HTML 태그들을 알아보고 조작할 수 있는 걸까요?자바스크립트가 HTML 조작을 하기 위해선 HTML을 자바스크립트가 해석할 수 있는 문법으로 변환해놓으면 됩니다.HTML을 자바스크립트가 좋아하는 array 혹은 object 자료형에 담아버리는게 좋지 않을까요?그래서 실제로 브라우저는 HTML 페이지를 열어줄 때 HTML을 자바스크립트로 쉽게 찾고 바꾸기 위해 object와 비슷한 자료형에 담아줍니다.  예로,DOM에 대해 설명해봅시다 브라우저는 이런 HTML을 발견하면 object 자료로 바꿔서 보관해둡니다.구체적으로는 var document = { }..

AJAX는 서버와 데이터를 주고받는 법 중 하나인데 AJAX에 대해 배우기 전에 서버에 대해 알아보겠습니다. 서버란?유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램입니다. 예를들어, 네이버웹툰 서버 : 유저가 웹툰 보여달라고 하면 웹툰을 보내주는 프로그램, 유튜브 서버 : 유저가 영상 보여달라고 하면 영상을 보내주는 프로그램으로 이해하시면 됩니다.  근데 유저가 서버에 데이터를 요청할 때는어떤 데이터인지 url로 잘 기재해야하고어떤 방법으로 요청할지 결정해야 (GET/POST 등)서버가 데이터를 보내줍니다.  만약 코딩애플님의 '구글이 100억개의 권한 관리하는 법'이라는 유투브영상을 보고싶으면 https://www.youtube.com/watch?v=eyDSR_0WG4I 여기로 GET..