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 이렇게 한 뒤 다시 푸시를 해보니 깔끔하게 푸시까..