BOM과 DOM BOM (Browser Object Model) 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체 모델 이를 통해서 새 창을 열거나 다른 문서로 이동하는 등의 기능을 실행할 수 있다. DOM (Document Object Model) 웹 페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체모델이다. 프론트엔드 2022.04.18
2022-04-17 일기 개발을 배우기 초창기부터 오픈소스의 존재에 대해서 알고있었고 나도 언젠가는 좋은 소스들에 기여를 할 수 있는 개발자가 되고 싶다는 생각을 가지고 있었다. 그러다가 라인개발자의 '슬기로운 오픈소스 생활'이라는 영상을 보게되었다. 그 중 에서 "오픈소스에 기여하려면 얼마나 잘해야 하나요?"라는 질문의 답에 지금 내가 관심이 있고 해결할 수 있을만한 일거리라면 된다고 했다. 지금 내가 관심이 있는거라면 당연히 취업이다. 그렇다면 이러한 정보들을 올려 다른분이 작성한 repo에 pr을 해보면 어떨까하고 생각하고 pr을 올렸다고 내 글이 받아들여졌으면 좋겠다. 일기 2022.04.17
JWT(Json Web Token)은 왜 사용될까 HTTP의 특성 HTTP는 비연결성 및 무상태성이라는 특징을 가지고 있습니다. HTTP는 요천에 대한 응답을 처리하게 되면 연결을 끊어버리기 때문에 클라이언트에 대한 이전의 상태 정보 및 현재 통신의 상태가 남아있지 않습니다. 서버는 클라이언트를 식별할 수 없다는 단점 또한 존재합니다. 로그인을 하더라도 다음 요청에서 해당 클라이언트를 기억하지 못해 로그인을 해야하는 문제가 발생합니다. session 기반 인증 1. 유저가 로그인을 한다. 2. 서버에서 계정정보를 읽어 사용자를 확인 후, 사용자의 고유한 ID를 부여하여 세션 저장소에 저장후 세션 Id발행한다. 2. 유저는 해당 session Id를 받아 쿠키에 저장. 3. 인증이 필요한 요청마다 쿠키를 헤더에 실어 보낸다. 4. 서버는 클라이언트가 보낸.. 백엔드/jwt 2022.04.17
회사의 정보를 찾아보자 IT기업 취준생들이 들어가고 싶어 하는 대표적인 회사라고 하면 무엇이 있을까요? 네(이버) 카(카오)라(인) 쿠(팡) 배(민) 당(그런 마켓) 토(스) 직(방)야(놀자) 대표적으로 생각나실 겁니다. 하지만 정작 좋은 회사들이 이것밖에 없지는 않습니다. 찾다 보면 알짜배기인 스타트업도 심심치 않게 볼 수 있습니다. 그렇다면 이러한 회사들의 정보를 어디에서 얻을 수 있을지 알아봅시다. 1. 잡플래닛 https://www.jobplanet.co.kr/welcome/index 잡플래닛 - Jobplanet 채용정보부터 직장인이 직접 남긴 기업리뷰, 연봉정보, 면접후기, 복지정보, 기업분석까지 www.jobplanet.co.kr 잡플래닛은 대표적인 취준생들의 사이트인데요 잡플래닛에서는 전, 현직원들의 리뷰나 연봉.. 오픈소스 기여 해보기 2022.04.17
XSS와 CSRF XSS(Cross Site Scripting, 사이트간 스크립팅) 웹사이트 관리자가 아닌 사람이 웹사이트에 악성 스크립트를 삽입할 수 있는 취약점을 이용한 공격기법이다. 저장 XSS : 웹사이트에 취약점이 있는 웹 서버에 스크립트를 저장시켜서 해당 웹사이트를 요청하는 사용자로 하여금 스크립트를 실행하게 하는 기법이다. 반사 XSS : 검색을 사용할 때 결과가 없으면 브라우저에서 입력한 값을 문서에 포함하여 응답하는데 이를 사용하여 스크립트를 실행하는 기법으로 악성 URL을 배포하여 클릭하도록 유도하는 방법을 사용한다. DOM 기반 XSS : 공격 스크립트가 DOM 생성의 일부로 실행되면서 공격하는 기법으로 반사 XSS와 마찬가지로 악성 URL을 배포하여 클릭하도록 유도한다. 입/출력 값 검증 및 무효화 .. 기술 면접 정리 2022.04.17
2022-04-16 일기 stackOverFlow의 조사에 따르면 해외에서는 svelte라는 웹 프레임 워크 힙하게 떠오르고 있는 것 같다. 유튜브분들 이야기도 들어보니 좋은 프레임워크인 것 같다. 물론 지금은 취업을 해야 하니 react를 공부해야겠지만 취업을 하고 안정이 되면 svelte를 공부해 보는 게 좋을 것 같다. 일기 2022.04.16
헷갈릴 수 있는 용어들 정리 비 전공자가 알아두면 좋은 개발 용어나 알아도 헷갈리는 용어들 정리 사이드 이펙트: 구현하고자 하는 형태의 기능이 동작하지 않고 어떠한 다른 요인으로 인해 동작하지 못하거나 다른 값을 도출할 경우 쉽게 버그라고 생각하면 된다. 인스턴스 : 일반적으로 실행 중인 임의의 프로세스, 클래스의 현재 생성된 오브젝트를 가리킨다. IIFE : 즉시 호출 된 함수 (function hello() { console.log(`IIFE`); })(); // 즉시 호출 됨!! 일급 객체 함수 first-class function: 함수가 일반 객체처험 모든 연산이 가능한 것 // 콜백 함수 const add = (a, b) => a + b const multiply = (a, b) => a * b // 전달된 action은.. 기술 면접 정리/진짜 한방 정리 2022.04.16
TypeScript에서의 캡슐화와 추상화 기존의 절차지향 프로그래밍은 단점이 많이 있습니다. 프로젝트에 신규로 투입이 되었다면 함수가 여러 가지가 얽혀있어서 다른 곳에 업데이트가 될 때 하나를 수정하기 힘들고 수정하였을 때 다른 사이드 이펙트가 발생할 확률이 높다. 반면 OOP는 데이터와 함수를 여러가지 오브젝트로 정의하여 프로그래밍 해나가기 때문에 관련 오브젝트만 수정해주면 되고 반복되어 사용될 수 도 있기 때문에 재사용성도 높다. type CoffeeCup = { shots: number; }; class CoffeeMaker { static BEANS_GRAMM_PER_SHOT: number = 7; // class level // 오브젝트마다 새로 만들어줘야하는 데이터가 있다면 멤버변수를 사용하고 // 클래스에서 공유되어 사용되는 변수들.. 프론트엔드/Typescript 2022.04.16
2022-04-15 일기 면접을 보면 한 세시간 운동한 것 같은 긴장감을 느끼게 된다. 오늘의 면접은 내가한 프로젝트의 로직을 설명하는 것이였다. 결과적으로 보자면 면접관들에게 잘 전달되지는 않은 것 같았다. 면접이 끝나고 로직에 대해서 찾아보았다. 한 블로그의 포스팅이 눈에 들어왔다. https://mommoo.tistory.com/67 비즈니스 로직(Business Logic)이란? 안녕하세요. Mommoo 입니다. 프로그래밍에 관한 일을 하다보면 많이 듣는 용어중 하나 인, 비즈니스 로직(Business Logic)에 대하여 포스팅 합니다. 영역 구분하기 홈페이지 회원가입으로 예를 들어봅 mommoo.tistory.com 그렇다면 내가 설명하려고 했던 채팅 시스템의 비즈니스 로직 더 디테일하게 설명할 수 있었을까? 좀더 생.. 일기 2022.04.15
이벤트 루프 자바스크립트를 사용가능한 런타임 환경이라면 항상 자바스크립트엔진이 탑재되어있습니다. 그래서 소스코드를 자바스크립트 엔진이 하나하나 번역하여 실행하는 것입니다. 소스 코드에서 동적으로 코드를 생성하는 경우에 Memory Heap에 형성이 됩니다. 그리고 콜스택이라는 것이 있는 콜스택은 함수의 실행 순서를 기억합니다. 여기서 자바스크립트는 단일 스레드이기 때문에 하나의 싱글 컨텍스트 스택(한번에 하나의 일만 처리)할 수 있습니다. 즉 자바스크립트는 기본적으로는 동기적으로 진행이 됩니다. [JS Runtime 동작 순서] 1) 함수는 Call Stack에 LIFO순서로 쌓여서 실행 2-1) 함수에 콜백함수가 있을 때 JS내부에서 처리 가능하면 Call Stack에 쌓음 2-2) JS내부에서 처리 안되면(비동기.. 기술 면접 정리/자바스크립트 2022.04.15
