TypeScript란?JavaScript의 "슈퍼셋" 언어자바스크립트의 확장 언어라고 생각하면 되는데, 이게 굉장히 처음 시작하는데 있어서 중요한 개념입니다.왜일까요? 자바스크립트를 기반으로 하기 때문인데요, 즉, 뿌리가 자바 스크립트이다 라고 생각하시면 됩니다. 문법이나 for문 등 기본적인 것들은 사용법을 그대로 사용합니다.js문법 + 몇가지 기능들 추가  TypeScript의 특징들은?1. 정적 타입이다변수의 타입을 명시적으로 지정해서 사용합니다.컴파일 단계에서 타입체크를 하기 때문에 코드  중 타입 오류를 방지하는 타입 체킹 기능인 '타입 어노테이션'을 활용하여 에러를 빠르게 발견할 수 있게 도와줍니다. 2. 컴파일 언어이다 소스코드 전체를 컴퓨터가 이해할 수 있는 기계어로 변환하는 언어입니다.런..

배경 흔히 기본 개발을 하다가 "나는 개발자에 맞는 상인가"라는 테스트를 해보았을때, 거기에 있는 질문중에서 하나가 '나는 CI/CD를 구현해본적이 있다'라는 질문이 있었고, 그 뜻이 무엇인지를 몰라 이렇게 검색을 하다가 블로그까지 작성하게 되었습니다. CI란? (Continuous Integration) 빌드/테스트화 과정 만약 어떤 프로젝트를 진행중일때 CI를 성공적으로 구현할 경우, 어플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있습니다. 커밋할때마다 자동테스트를 하여 에러가 안나도록 보장하죠. CD란? (Continuous De..

배경 저는 평소에 친구들과 프로젝트에 저장하자고 하면 친구들은 흔히 "로컬스토리지에 저장하자" 라는 얘기를 많이 하는것을 보았고, 저 또한 많이 하였습니다. 하지만 이 로컬스토리지, 세션스토리지에 대해 면접때 듣는다고 생각하면 어떻게 답을 해야할지, 어떻게 정의를 해야할지 막막하였습니다. 또한 지금 하고있는 스터디에서 이 두개에 대해 알아보는게 과제이기도 하였기에 이렇게 블로그를 작성하게 되었습니다. 웹스토리지란?(webstorage) 본격적으로 들어가기에 앞서, 스토리지라는것의 개념을 먼저 알면 좋을 것 같아 간단하게 설명을 해드리도록 하겠습니다. 클라이언트 내에서 데이터를 저장할 수 있도록 지원하는 저장소 쿠키를 보안하기 위해 나온 저희가 앞으로 공부할 로컬스토리지/세션스토리지를 의미하기도 합니다. ..

배경 평소 JWT라는 것은 토큰이다! 까지만 알고, 그 이후를 잘 모르고 심지어 OAuth는 말로만 들어보고 어떤 기능을 하는지, 어떤 관계성이 있는지 전혀 알지 못하였습니다. 그렇기에 이번 CS 스터디를 통하여 JWT가 무엇인지, OAuth가 무엇인지 정확하게 알아가는 시간과 두 개의 차이점이 무엇인지 알아가는 블로그를 작성하게 되었습니다. JWT란?(Json Web Token) 인증에 필요한 정보들을 암호화시킨 JSON 토큰 JWT의 구조 헤더( HEADER ), 페이로드( PAYLOAD ), 서명( SIGNATURE )의 세 부분으로 구성된다. HEADER . PAYLOAD . SIGNATURE 이렇게 '.(dot)'을 구분하로 하여 JWT 토큰 1개를 이룹니다. 1) HEADER 서명 시 사용하는..

배경 "미니멘토"라는 스터디를 진행하면서 면접을 보았을때 실제로 이런 질문을 현역 개발자분이 저에게 하셨고, 또한 지금 CS 스터디를 하면서 이와 같은 질문이 나올 확률이 높다고 하기에 한번 정리를 제대로 해보자!하여 이렇게 정리를 하게 되었습니다. 웹 동작 방식 먼저 간단하게 이미지로 간단하게 이해를 한 뒤, 자세하게 설명을 해보도록 하겠습니다. 진행 단계 1. https://www.google.com/ 을 검색 2. 웹 브라우저에서 캐싱된 DNS기록들로 도메인 주소와 대응하는 IP 주소를 확인 DNS(Domain Name System Servers) : 링크들의 이름과 주소를 저장하고 있는 주소록 만약 여기에서 기록에 남지 않았을 경우, 바로 다음 3단계로 넘어가게 됩니다. 3. HTTP 사용하여 D..

배경 만약 어떤 웹 사이트를 가입한 뒤 로그인을 하여 웹페이지에 들어간다면, "[이름]님 반갑습니다!"라는 문구를 자주 보신적이 있으실겁니다. 이러한 문구는 어떻게 표시하는걸까요? 만약 하나하나 페이지를 만든다면, 사용자가 회원가입을 할때마다 새로 웹페이지를 만들어야 하기에 힘들며 가독성도 떨어지는 개발이 될것입니다. 그렇기에 개발자들은 "뷰 템플릿(View Template)"이라는 기술을 만듭니다. 뷰 템플릿이란 웹 페이지를 하나의 틀로 만들고 여기에 변수를 삽입해 서로 다른 페이지로 만드는 기술 MVC 패턴이란 클라이언트의 요청을 받아 처리하고 데이터를 관리하는 역할을 나누는 기법 👉 참고 글 : https://m.blog.naver.com/jhc9639/220967034588 [개발자 면접준비]#1..

배경 평소와 다를것 없이 스프링부트 프로젝트를 만들고 실행을 시키려던중, 다음과 같은 에러가 발생하였습니다. contextLoads() 이런 에러가 발생한 것이였습니다. 원인 main에는 application.properties 파일이 존재하지만 test에는 application.properties 파일이 없어서 발생하는 문제 해결과정 밑줄표시가 되어있는 파일의 위치에 들어가면 이렇게 코드가 작성되어 있을 것입니다. package com.example.practicespringboot; import org.junit.jupiter.api.Test; import org.springframework.boot.test.context.SpringBootTest; @SpringBootTest class Pract..

배경 제가 가장 많이 사용하는 개발 툴 중, 하나가 바로 IntelliJ입니다. 하지만 이 인텔리제이는 제 생각에 조금 더 visual studio보다 어려워서(지극히 저의 개인적인 생각입니다), 저를 위한... 글로 이렇게 만들어보았습니다. 1단계 : Enable Version Control Integration VCS-Enable Version Control Integration를 누릅니다. 그 뒤, 다음과 같은 화면이 뜬다면 OK를 눌러주세요. OK를 누르면 옆에 이렇게 Commit버튼이 좌측 상단에 생깁니다. 2단계 : Manage Remotes GIt -Manage Remote를 눌러줍니다. 그럼 이렇게 URL을 입력하는 화면이 나오는데, 여기에 자신의 레포지토리 링크를 첨부해주세요. 그럼 이렇..

스프링부트란 자바 웹 프로그램을 더욱 쉽고 빠르게 만들기 위한 도구 스프링 부트에는 자바 웹 프로그램을 만들기 위한 기능과 도구가 모여있기에 더욱 쉽고 빠르게 만들수 있는 것이죠. 자바 웹 프로그램을 만드는데 필요한 기능, 도구를 찾아 본인만의 것으로 만들기만 하면 됩니다. 스프링과 스프링부트 스프링 부트는 스프링 프레임워크를 개선한 것입니다. 개발 환경 간소화 : 스프링은 버전에 따라 동작하는 외부 라이브러리를 일일이 찾아 연동해야 하지만, 스프링 부트는 미리 설정된 스타터 프로젝트로 외부 라이브러리를 최적화 해 제공하므로 사용자가 직접 연동할 필요가 없습니다. 웹 애플리케이션 서버를 내장 : 스프링 부트는 내부에 웹 애플리케이션 서버(WAS, Web Application Server)인 톰캣을 가지고..

배경 git status git add . git commit -m "커밋 메시지 작성" git push origin main 프로젝트를 진행도중 터미널로 푸시를 하려던때, 위와 같이 명령어를 입력하니 이런 에러가 발생하였습니다. ! [rejected] main -> main (fetch first) 결국 강제로 푸시하는 명령어를 입력하여 푸시를 하였지만, 원인과 그 이유를 해결하고 싶어 이렇게 블로그를 작성하게 되었습니다. 원인 원격저장소와 현재 작업중인 로컬저장소가 동기화되지 않았을 때 발생 해결방법 두가지의 명령어 중 하나만 선택하여 해결을 할 수 있습니다. git pull --rebase origin main git push origin +main 이렇게 한 뒤 다시 푸시를 해보니 깔끔하게 푸시까..

배경 https://imkdk.tistory.com/24 [GitHub] Intellij에서 GitHub 연동하기 & 해제하기 인텔리제이 IDE를 통해 공부 중인 개발자로서 Github에 공부기록을 남기기 위해 인텔리제이와 Github을 연동하려고 한다. 1. Git 설치 Git 설치는 https://git-scm.com/ 해당 사이트로 들어가 git을 설치하여 imkdk.tistory.com 이 블로그를 보며 인텔리제이와 깃허브를 연동을 시도하였습니다. 하지만 연동을 한 뒤 푸시를 하면, 위와 같이 뜨며 푸시한 내용을 볼수 없었습니다. 여기에서 'master'눌러야만 제가 커밋한 내용이 보였고, pr을 날릴려고 하였지만 pr 또한 날릴 수 없었습니다. 원인 깃허브 브렌치들끼리의 충돌이었습니다. 알고보니..

📝함께 참고하면서 읽으면 좋을 글 https://codingaestheticians.tistory.com/entry/HTTP-HTTP%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90 [HTTP] HTTP의 기본 개념 📝함께 참고하면서 읽으면 좋을 글 https://codingaestheticians.tistory.com/entry/HTTP-TCP%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90# [HTTP] TCP의 기본 개념 배경 데이터를 패킷 교환 방식으로 전달하는데, 문제가 있 codingaestheticians.tistory.com 배경 메시지 중에서 첫째 줄 요청 라인의 맨 앞에 나오는 정보가 바로 요청 메서드 입니다. 헤더..

배경 웹 페이지를 제공하기 위한 HTTP부터 파이리 송수신을 위한 FTP까지 수많은 컴퓨터와 보조기기로 연결된 네트워크 안에서 원활이 통신하려면 각 상황에 맞는 프로토콜이 필요합니다. 프로토콜은 네트워크의 흐름을 파악하는데 있어 핵심적인 역할을 하므로 역할기능을 인지하는데 매우 중요하다고 말할수 있는 것이죠. 그중에서 가장 중요하고 중요한 역할을 하는 프로토콜, IP에 대해 알아보겠습니다. IP란(Internet Protocol) 인터넷에서 데이터를 주고받을때 사용하는 통신규약 ->'패킷'을 정해진 목적지까지 운반하기 위해 사용 그렇담 여기서 의문점이 들 것입니다. 패킷이란 무엇일까요? 예를 들어서 설명을 해보도록 하겠습니다. 유튜브에서 원하는 영상을 보고싶어 클릭하며 유튜브 웹 서버에서 우리의 컴퓨터,..

📝함께 참고하면서 읽으면 좋을 글 https://codingaestheticians.tistory.com/entry/HTTP-TCP%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90# [HTTP] TCP의 기본 개념 배경 데이터를 패킷 교환 방식으로 전달하는데, 문제가 있습니다. 바로, 중간에 사라지는 패킷이 생긴다는 문제입니다. 이 말은 즉 고양이 사진을 요청했는데 고양이 뒤에 있는 배경이 안보이거 codingaestheticians.tistory.com 배경 카페에 가서 앉아만 있다고 해서 원하는 커피가 눈앞에 나타나지 않습니다. 계산대로 가서 어떤 음료나 간식을 주문할지, 어떤 옵션을 추가할지 점원에게 설명해야 한다는 메뉴를 받아 자리에서 먹을 수 있습니다. 인터넷..

배경 데이터를 패킷 교환 방식으로 전달하는데, 문제가 있습니다. 바로, 중간에 사라지는 패킷이 생긴다는 문제입니다. 이 말은 즉 고양이 사진을 요청했는데 고양이 뒤에 있는 배경이 안보이거나 고양이 귀가 사라진것과 같습니다. 이러한 오류를 감지하고 해결해 데이터가 온전히 전송될 수 있게 하는 프로토콜이 바로 TCP입니다. TCP란(Transmission Control Protocol) 신뢰성 있는 데이터 통신을 위한 프로토콜 신뢰성 있는 통신이란 언제 어디서든 데이터를 온전히 가져다줄거라는 믿음이 있는것과도 같은 말입니다. 헤더와 플래그 모든 프로토콜은 데이터의 앞에 헤더라는 정보를 추가해 전송합니다. 헤더 안에는 해당 데이터에 대한 정보가 담겨져있는것이죠 조금 더 간단하게 설명하자면, 택배 상자에 붙어 ..

배경 사실 URL은 저희에게 매우 익숙한 개념입니다. 웹 브라우저 상당 주소창에 입력만 하면 그와 관련된 모든 것이 URL입니다. 예를 들어서 제가 맛집을 알기 위해 네이버를 들어간다고 한다면, https://naver.com입력합니다. 하지만 이것은 한 덩어리인것을 알고계시나요? 이 URL에는 프로토콜 도메인 등 여러 요소를 합친 결과물입니다. URL이란(Uniform Resource Locator) 웹을 사용하는 사람들이 원하는 자원을 정확히 찾아갈 수 있게 특정 웹 자원을 구별할 수 있는 고유한 주소 만약 친구를 만나기 위해 약속장소를 물어봤을때 친구가 "스타벅스"라고만 말한다면 전국에 있는 수많은 스타벅스 중 어디에 있는 스타벅스를 가르키는 것인지 헷갈릴 것입니다. 그렇기에 정확히 원하는 곳으로 ..

네트워크란? 컴퓨터 사이에 데이터를 주고받는 통신망 net+work의 합성어로 표현하자면 그물처럼 서로 긴밀하게 연결된 것 우리가 앞으로 얘기할 네트워크는 "컴퓨터네트워크" 로 컴퓨터 사이에 데이터를 주고받는 통신망을 의미합니다. 범위에 따라 네트워크를 LAN,WAN으로 나눠보겠습니다. LAN의 개념 지리적으로 가까운 기기들이 서로 연결된 소규모 네트워크 집에서 공유기를 사용하시나요? 만약 집에 공유기가 있다면, 정상적으로 공유기가 켜져있어야 인터넷이 정상적으로 잘 터지게 되죠. 이렇게 공유기를 중심으로 집 안의 기기들이 연결된 홈 네트워크가 바로 LAN의 한 형태입니다. 그림으로 나타내면 이렇게 나타낼수 있죠 LAN의 특징 비교적 간단하게 구현가능하다. -물리적 거리가 가깝긱에 비교적 간단하게 구현할 ..

프레임워크란 소프트웨어나 애플리케이션 개발을 간단하게 해주는 뼈대입니다. 장점은 개발에 필요한 최소한의 기능을 제공하기에 개발자가 모든 기능을 작성할 필요가 없고, 그렇기에 개발에 필요한 시간을 줄일 수 있다는 것이죠. 단점은 프레임워크를 사용한 개발에서는 프레임워크 고유의 사용법을 이해할 필요가 있다는 점입니다. 1. 스프링 프레임워크란? 스프링 프레임워크란 자바 개발 환경에서 사용되는 프레임워크를 말합니다. 스프링 프레임워크의 구성은 이렇게 나와있는데요, 설명해보도록 하겠습니다. 1. 스프링부트 -스프링 애플리케이션을 복잡한 설정 없이 빠르게 작성하는 기능을 제공 2. 스프링 프로젝트 1)스프링 MVC -웹애플리케이션을 간단하게 생성하는 기능을 제공 2)스프링 데이터 -데이터 접근에 관한 기능을 제공..

프로젝트를 진행 도중 "시퀄라이즈"라는 것에 대해 듣게 되었습니다. 하지만 시퀄라이즈가 무엇인지 잘 몰랐고, 나름 Node.js에 대해서 잘 안다고 생각을 하였는데 저는 단지 우물안의 개구리라는것을 알게 되었습니다. 그래서 정리하게 된 시퀄라이즈와 실행법 블로그 입니다. 제가 아는 상식 선에서 정리한거라 정보가 정확하지 않을 수도 있다는 점을 감안하고 읽어주시길 바랄게요! 시퀄라이즈는 MySQL 작업을 쉽게 할 수 있도록 도와주는 라이브러리를 말합니다.ORM(Object-relational Mapping)으로 분류되죠. 시퀄라이즈는 자바스크립트 구분을 스스로 SQL로 바꿔주기에 데이터베이스 작성법을 모르더라도 이용할 수 있습니다. 시퀄라이즈 프로젝트 구성 프로젝트를 구성하는데에 있어 필요한 패키지 세 가..