You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
👨💻 일급 객체(first-class object) 란?
일급 객체 란? 보통 자바의 람다 표현식(Lambda Expression)을 배우다 보면 '일급 객체' 라는 단어를 접하게 되는데, 뜻을 아무리 봐도 대체 무얼 말하는 건지 와닿지 않을 것이다. '일급' 이란 뜻은 일급 시민 처럼 무슨 혜택을 받는 다는 뜻이 아니라, 사용할 때 다른 요소들과 아무런 차별이 없다는 것을 뜻한다. 그리고 보통 일급 객체를 아래 3가지 조건을 충족한 객체를 일컫는다. 모든 일급 객체는 변수나 데이터에 담을 수 있어야 한다. 모든 일급 객체는 함수의 파라미터로 전달 할 수 있어야 한다. 모든 일급 객체는 함수의 리턴값으로 사용 할수 있어야 한다. 일급 객체는 어떠한 특정 언어에 국한되는 문법 단어가 아니다. 프로그래밍 언어론의 개념으로서, 자바나 자바스크립트 외에 다양한 언어가..
🌐 아직도 모호한 TCP / UDP 개념 ❓ 쉽게 이해하자
HTTP / IP / TCP / UDP 는 모두 프로토콜 프로토콜은 클라이언트와 서버가 정보를 교환할 수 있도록 하는 메시지 형식 대한 규칙 이라고 보면 된다. 수신 호스트가 전송 받은 메시지를 이해하려면 설계된 규칙에 따라 작성된 데이터 형식이어야 한다는 말이다. 예를들어 HTTP 메세지 헤더도 결국 일종의 규칙이며, IP의 숫자도 규칙이라고 말할 수 있다. 만일 규칙을 깨는 256.256.256.256 와 같은 형식은 존재하지도 않는 아이피이며 작동하지도 않는다. HTTP와 IP 프로토콜에 대해서 배우게되면 바로 그다음 접해보는 프로토콜 쌍둥이가 바로 TCP / UDP 일 것이다. 다만 이 TCP와 UDP에 대해서 귀가 아플정도로 들어봤겠지만 아무리 들어도 개념이 애매하게 느껴진다. 왜냐하면 HTTP..
🌐 HTTP의 멱등성 · 안정성 · 캐시성 💯 완벽 이해하기
HTTP 메서드의 속성 주요 HTTP Method인 GET / POST / PUT / PATCH / DELETE 는 각 메서드의 동작 과정 뿐만 아니라, 메서드의 속성 또한 알 필요가 있다. 왜냐하면 어떠한 HTTP 메서드로 서버에 요청했느냐에 따라 API 설계나 복구 메커니즘 캐시 최적화 등, 설계 로직이 달라질 수 있기 때문이다. HTTP 메서드의 속성으로는 크게 3 가지인 안전(Safe), 멱등(Idempotent), 캐시 가능(Cacheable)이 있다. 이들을 하나씩 살펴보는 시간을 가져보자. 안전성(Safe) HTTP 메소드의 안정성이란 보안 취약성을 말하는 것이 아니라 호출해도 리소스가 변경되지 않는 성질을 말하는 것이다. 정말 쉽게 생각해서 GET 메서드는 단순히 데이터를 조회하는 기능을 ..
🌐 HTTP 메서드 종류 & 요청 흐름 💯 총정리
HTTP Method 종류 HTTP 메서드란 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식을 일컫는다. 쉽게 말하면 서버에 주어진 리소스에 수행하길 원하는 행동, 서버가 수행해야 할 동작을 지정하는 요청을 보내는 방법이다. HTTP 메소드의 종류는 총 9가지가 있다. 이 중 주로 쓰이는 메소드는 5가지로 보면 된다. 주요 메소드 GET : 리소스 조회 POST: 요청 데이터 처리, 주로 등록에 사용 PUT : 리소스를 대체(덮어쓰기), 해당 리소스가 없으면 생성 PATCH : 리소스 부분 변경 (PUT이 전체 변경, PATCH는 일부 변경) DELETE : 리소스 삭제 기타 메소드 HEAD : GET과 동일하지만 메시지 부분(body 부분)을 제..
🌐 HTTP는 무엇일까요? - 기본 핵심 요약 총정리
HTTP 란? - Hyper Text Transfer Protocol HTTP는 서버와 클라이언트가 서로 데이터를 주고받기 위해 사용되는 통신 규약을 말일컷는다. 웹문서간에 링크를 통해 연결할 수 있는 프로토콜이며, 문서뿐 아니라 다음과 같은 여러 종류의 데이터들을 폭 넓게 전송할 수 가 있다. HTML, TEXT IMAGE, 음성, 영상, 파일 JSON, XML(API) 거의 모든 형태의 데이터가 전송 가능 서버간에 데이터를 주고 받을 때 대부분 HTTP라는 프로토콜을 사용해서 통신한다고 보면 된다. 예를들어 인터넷 주소를 지정할때 http://www.naver.com 와 같이 시작하는 것은 www.naver.com 이라는 인터넷 주소가 가진 데이터 정보 등의 교환을 HTTP의 통신 규약대로 처리하라..
🌐 URL 구성 요소 & 요청 흐름 정리
URL 구성 이해하기 프로토콜 : https 호스트명 : www.google.com 포트번호 : 443 패스 : /search 쿼리 파라미터 : q=hello&hl=ko scheme 주로 프로토콜(어떤 방식으로 자원에 접근할 것인가 하는 약속 규칙) 사용 예) http, https, ftp 등등 http는 80 포트, https는 443 포트를 주로 사용, 포트는 생략 가능 userinfo URL에 사용자 정보를 포함해서 인증 요즘은 거의 사용하지 않음 host 호스트명(www.google.com) 도메인명 또는 IP 주소를 직접 사용 가능 port 접속 포트 일반적으로 생략 가능 생략 시 http는 80, https는 443 포트 번호로 설정된다. 톰캣은 8080 포트를 사용 path 리소스 경로(pa..
👩💻 코드 리뷰 태그 - LGTM 이란?
LGTM 태그 LGTM 이라는 단어는 "Looks Good To Me"의 줄임말이다. LGTM은 2000년대부터 Google에서 시작된 코드 리뷰를 진행할 때 사용되었으며, 현재는 깃헙에서 코드 리뷰를 할때 전 세계적으로 통용되는 약어로 사용되고 있다. 만일 내가 PR(Pull Request)를 날리면 Reviewer or Committer들이 LGTM으로 답해줬다면 특별히 문제가 없음을 의미하게 된다. 카카오톡에서도 코딩하는 한별이 이모티콘에도 LGTM 관련된 이모티콘이 존재하기도 한다. 실무에서 쓰이는 약어 종류 ✍️ AFAIK ( as far as I know ) 내가 알기에는, 내가 기억하는 한 ✍️ IMO ( in my opinion ) 내 생각에는, 개인적인 의견 입니다만. ✍️ IMHO ( ..
🌐 CORS 보안 취약점 예방 가이드
CORS의 보안 문제점 다른 출처(Origin)의 서버의 리소스를 제약없이 가져와 사용할 경우 XSS(Cross-Site Scripting)나 CSRF(Cross-Site Request Fogery)와 같은 스크립팅 공격을 당할 위험성이 있다. 그래서 탄생한 것이 브라우저의 SOP(Same Origin Policy) 정책이다. 하지만 SOP 정책은 오로지 동일한 출처에서만 리소스를 공유할수 있어, 글로벌한 인터넷 환경에선 이는 너무 제한적이라는 단점이 존재했다. 따라서 서비스 차원에서 몇몇은 다른 출처라도 리소스 공유를 허용해 주겠다는 것이 바로 CORS(Cross Origin Resource Sharing) 정책이다. [WEB] 📚 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏 악명 높은 CO..
🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏
악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이 아니다. 프론트엔드 개발자 입장에선 요청 코드를 이상하게 적은것도 아니고, 백엔드 개발자 입장에선 서버 코드나 세팅이 이상한것도 아니다. 모든게 멀쩡한데 왜 요청한 자료에 대한 응답을 시뻘건 에러줄로 확답하는게 문제이다. 🤬 이러한 현상이 일어나는 이유는, 웹 브라우저는 HTTP 요청에 대해서 어떤 요청을 하느냐에 따라 각기 다른 특징을 가지고 있기 때문이다. 요청 방식에 따라 다른 CORS 발생 여부 1. , , 2. XMLHttpRequest, Fetch API 스크립트 → 기본적으로 Same-Or..
🌐 아주 쉽게 이해하는 Stateful / Stateless 차이
Stateful 과 Stateless 차이점 웹 공부를 하다보면 클라이언트(Client)와 서버(Server)간의 통신을 상태유지(Stateful) 하느냐, 상태유지하지않음(Stateless) 으로 하느냐 라는 말귀를 한번쯤은 들어본 적이 있을 것이다. 상태라는게 어떠한 정보를 말하는 것 같은데, 이번 시간에는 Stateful 과 Stateless의 차이점에 대해 추상적인 개념 이해에서 벗어나 명확히 파악하는 시간을 가져보자. Stateful (상태유지) 상태 유지라 함은 클라이언트와 서버 관계에서 서버가 클라이언트의 상태를 보존함을 의미한다. 클라이언트와 서버 간에 송수신을 하며 단계별 과정을 진행하는데 있어, 서버에서 클라이언트가 이전 단계에서 제공한 값을 저장하고 다음 단계에서도 저장한 상태이다. ..
🖥️ 컴파일 / 트랜스파일 / 인터프리터 비교 쉽게 설명
컴파일 (Compile) 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것이 컴파일이다. C언어를 기계어로 옮기는 것, Java를 Bytecode로 옮기는 것 모두 이 정의에 따르면 Compile에 해당한다. 심지어 TypeScript를 JavaScript로 옮기는 것 역시 이 범주안에 속한 다고 할수 있기도 하다. (엄밀히 말하면 뒤에서 배울 트랜스파일링이다) C → Assembly Java → bytecode 꼭 고수준의 언어를 바이트 단위의 기계어로 변환해야 컴파일이라고 말하는 것이 아니다. 컴파일은 한 언어로 작성된 코드를 다른 언어로 옮기는 일 자체를 통칭한다고 보면 된다. 트랜스파일 (Transpile) 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것이..
🍪 CORS 쿠키 전송하기 (withCredentials 옵션)
🤬 CORS를 허용했는데도 쿠키가 넘어가지 않는 현상 보통 웹을 구성할때 리액트(React)나 뷰(Vue)와 같은 라이브러리 / 프레임워크를 사용한다면 따로 프론트 서버를 실행하여 개발하게 된다. 만일 클라이언트 서버가 http://localhost:3000 이고 API 서버가 http://localhost:8080 이라고 가정하자. 서로 같은 Host이고 Port만 다른 셈이다. 로그인 화면을 구성을 완료했고 테스트를 위해 axios로 로그인 요청을 서버에 보냈다. axios.post('http://localhost:8080/login', { profile: { username: username, password: password } }) 하지만 결과는 로그인 성공이 아닌 다음과 같은 시뻘건 CORS ..
