개탕 IT FACTORY

2. 스택(stack) Stack O(n) O(1) O(1) 순서가 보존되는 선형 데이터 구조 유형 가장 마지막 요소부터 처리하는 LIFO(Last In First Out) 구조 장단점 장점 동적 메모리크기 데이터를 순서대로 정렬 단점 최신데이터만 가져온다 한번에 하나의 데이터만 처리가능 코드 // 클래스 구현 class Stack { constructor(){ this.arr = []; this.index = 0; } push() { this.arr[this.index++] = item; } pop() { if(this.index

1. 배열 자료구조 가져오기 추가 삭제 Array O(n) O(n) O(n) 배열은 가장 기본적인 데이터 구조다. 동일한 타입의 데이터들을 저장(Javascript는 예외), 고정된 크기를 가진다. 인덱싱이 되어 있어 인덱싱 번호로 데이터 접근 가능 장단점 장점 원하는 데이터를효율적으로 탐색이 가능하다. 정렬에 용이해 다양한 정렬 알고리즘에서 사용 (삽입,빠른, 버블, 병합) 복잡한 자료구조의 기초 단점 데이터를 저장 할 수 있는 메모리 크기가 고정 데이터 추가/삭제가 비효율적 코드 let Array = [2,4,10,5,15,3]

서론 회사에서 채팅 서비스 구현당시 스크롤 이동을 위해서 돔 조작이 필요했는데 이미지의 경우 로드되는 속도가 느려 스크롤 이동이 중간에 멈추는 현상이 발생하여 onLoad함수라는 것을 사용하여 해결한 것을 작성할려구 한다. onLoad란? https://developer.mozilla.org/ko/docs/Web/API/Window/load_event MDN 문서에 따르면 💡 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행 쉽게 말해서 모든 요소가 로딩이 완료된 다음에 실행되는 이벤트이다. DOM의 standard 이벤트이다 사용법 window.onload window.onload = function() { // 실행될 코드 } html 태그 속성으로 지정 주의사항 로드된 이후에 실행되기 때문에..

힘들지만 행복했던 2022년 21년 회고가 벌써 어제같은데 벌써 2022년회고라니 정말 시간 빠르다고 생각된다. 22년에는 더욱 성장된 나의 모습을 보여주기 위해서 노력하였는데 아직 많이 부족한것같다. 더욱더 노력하기위하여 진행하여야겠다. 회사 첫 프로젝트 상용화 배포 회사에서 진행하였던 채팅 시스템을 배포하였다. 사실 회사내에선 큰 프로젝트에 해당되었고 프론트 전반적인 업무를 담당하였다. (풀스택 엔지니어가 작업한 곳에 리팩토링과 추가적인 작업을 진행하였다) 프로젝트를 위하여 야근도 마다하지 않으면서 최대한 열심히 할려고 하였고 특히나 요구사항에 대한 부분도 많이 수정을 하였다. 결과적으론 내 자신에 대한 성장을 많이 하였다 웹 소켓에 대한 이해도를 많이 향상시켰다. redux에 대한 개념적 이해와 리..

서론 회사에서 온보딩을 만들기위해 기존 템플릿에 iframe을 끼우는 작업을 하면서 정리해본 iframe에 대한 정리본 iFrame이란? inline Frame의 약자로 HTML 문서내에 다른 HTML 문서를 보여 줄때 사용된다. iFrame전에는 Frame이란 태그가 존재하였으나 deprecated 되었고 iframe으로 대체되었다. 장점 웹내에 또다른 웹을 삽입이 가능하므로 쉽게 추가가 가능 페이지 이동없이 위젯형태로 띄우기가 가능하여 여러가지 형태로 제작가능 단점 유지보수가 어렵다. 아이프레임용 웹을 따로 만드는 느낌? 보안위험이 많습니다. iframe으로 사이트를 구성시 사이트간 공격 (XSS)에 취약해집니다. https://ostraining.com/blog/webdesign/against-us..

다사다난 했던 2021년 2021년에는 자신감 회복과 함께 안정적인 한해를 보내기를 기원하였는데 사실 반쯤은 성공하였고 반쯤은 실패하였다고 생각된다 무엇보다 2021년 마지막엔 너무 많은 일이 다양하게 일어나다보니 내 자신에 대해서 돌아보는 계기도 되었었다 2022년에는 이러한 것을 밑거름으로 더욱 성장하였으면 좋겠다. 2021년 회고 힘들었던 졸업 작품의 마지막 장식 사실 가장 힘들었던 작업중 하나였다. 필자의경우 어느정도 실무에 대한 경험이 있었고 그로 인하여 데이터베이스,백엔드 모든 곳에 대해서 이해도가 높았다 (실무도 중요하지만 계속 학습하여서 습득한것도 많다) 그로인해 잘 모르는 팀원들을 이끌고 교수님과의 소통 그리고 모르는 분야(딥러닝)에 대한 막연한 학습이 정말 부담감을이 다가왔다 하지만 대..

DOM이란 무엇인가? MDN 문서에 따르면 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다 쉽게 말하면 일종의 웹페이지 문서라고 생각하면 편하다. 그러면 DOM이 왜중요한가? 브라우저 동작 방식을 이해할려면 DOM에 대한 이해가 있어야된다 아래는 Webkit 동작과정이나 브라우저엔진의 동작과정은 대부분 비슷하게 동작한다 DOM Tree 생성 브라우저가 HTML을 전달받으면, 브라우저 렌더 엔진이 이를 파싱 DOM 노드(Node)로 이루어진 트리생성 Render Tree 생성 외부 CSS파일 및 엘리먼트의 inline스타일을 파싱, 스타일 정보를 사용하여 DOM트리에 따라 새로운 트리 생성 Render Tree 이..

HTTP란 무엇인가? HTTP란 HyperText Transfer Protocol 의 줄임말로 웹 상에서 정보를 주고받는 프로토콜이다 쉽게 위의 그림처럼 클라이언트와 서버간의 Request(요청)과 Response(응답)을 도와주는 프로토콜이다. 요청의경우 클라이언트(브라우저)가 서버에서 보내는 것 응답의 경우 서버가 클라이언트(브라우저)에게 결과값을 보내는 것 보통 80번 포트를 사용한다. TCP/IP 모델에서 Application 레벨의 프로토콜로 작동한다 HTTP의경우 Stateless로 작동된다 쉽게 상태를 저장하지 않는 구조 위에서 설명했듯이 요청과 응답에 의해서만 연결하여 보낸다 그전의 상태에대해서는 알지 못하는 구조 상태값의 데이터가 필요한 경우 쿠키나 세션등을 사용하여 저장 Request와..