기묘한 개발 이야기

개요 이전 발표했던 내용을 이해하기 위해 깊은 복사와 얕은 복사에 대해 찾아보았고, 몇몇 좋은 블로그 글이 있어 참고하여 글을 정리하였다. https://blog.devgenius.io/javascript-shallow-copy-deep-copy-287e19d64e92 https://medium.com/version-1/cloning-an-object-in-javascript-shallow-copy-vs-deep-copy-fa8acd6681e9 내용 프로그래밍에서 복사란 무엇일까? 프로그래밍에선 값을 변수에 저장하는데, 복사본을 만든다는 것은 동일한 값으로 새로운 변수를 만든다는 것을 의미한다. 기본 데이터 유형 Number - 정수 또는 부동 소수점 숫자 String - 텍스트 값을 나타내는 문자열 B..

개요 javaSciprt 프로젝트를 하던 중 변수 선언시 어떤걸 언제 사용해야하는지 잘 모르겠어서 찾아보던 중 찾게 된 해당 블로그의 글을 정리하였다. https://www.codecada.com/js/16/javascript-var-vs-let-vs-const 내용 ES6 출시와 함께 JavaScript는 더욱 강력한 프로그래밍 언어가 되었다. 이미 var라는 키워드가 있는데 어째서 let과 const가 필요하게 된 것일까? var 키워드 var는 javascirpt에서 변수를 생성하는데 사용되는 가장 오래된 전통적인 키워드이며 모든 웹 브라우저에서 지원이 되었다. var를 사용하여 변수를 정의하면 선언이 함수 내부 또는 외부에서 작성되었는지 여부에 따라 함수 범위가 정해지는데 여기에서 범위란 Java..

개요 TODO LIST를 만들면서 for문과 map 함수를 둘 다 쓰게 되었는데 어떤 것이 빠를지 궁금해져서 찾아보던 중 괜찮은 글을 보게되어 공부하며 해석 및 글로 정리하게 되었다. https://leanylabs.com/blog/js-forEach-map-reduce-vs-for-for_of/ 내용 프로그래머는 항상 JavaScript의 단순 loop보다 .map, .reduce, .forEach method를 선호해야 할까? 선언적 프로그래밍은 단순 loop에 비해 작성하기 쉽고, 간결하다는 장점이 있지만 성능이 중요한 경우에는 일반적으로 선언적 loop보다 단순 loop가 3배 이상 빠르다. 대부분의 응용 프로그램에서 큰 차이를 나타내지 않지만, 게임 엔진, 비디오 처리 등 많은 양의 데이터를 처..

개요 ECMAScript에 관해 지금까지 어떤 변경사항이 있었는지 정리하게 되었다. 내용 ECMAScript란? JavaScript의 하위 집단. ActionScript, JavaScript, JScript 와 같은 언어는 모두 ECMAScript를 핵심으로 사용한다. ECMAScript의 역사 현재의 Oracle로 불리는 Sun은 "JavaScript"라는 상표를 가지고 있었기에 언어를 표준화 할 때 다른 이름을 사용해야 했다. Ecma International에서 호스팅 되면서 "ECMAScript"로 이름이 정해지게 되었고, 실제로 ECMAScript와 JavaScript 용어는 서로 바꿔서 사용할 수 있으며, ECMAScript는 언어 버전을 나타내는데 자주 사용되고 있다. 또한 ES.Next라는..

개요 일요일마다 있는 한 입 크기로 잘라 먹는 리액트 스터디를 위해 읽은 것을 복습하는 목적으로 정리하게 되었다. (저자님께 정리한 것을 올려도 된다고 허락 받았습니다.) 내용 자바스크립트는 어떤 언어인가? 웹(Web) 페이지를 만들 때 사용하는 언어 HTML : 웹 페이지 요소 배치 -> 정적인 서식 CSS : 웹 페이지 요소의 스타일링 -> 디자인 JavaScript : 웹 페이지 요소의 동작 정의 -> 서식과 디자인 변경 등의 동적 효과 추가 HTML 텍스트,이미지, 버튼, 메뉴 등과 같이 웹 페이지에 나타나는 모든 요소의 배치와 내용을 기술하는 언어 움직이지 않는 정적인 온라인 신문 같은 존재. CSS 색상이나 크기처럼 웹 페이지 요소의 스타일을 정할 때 사용하는 언어. 사용자와의 상호작용은 할 ..

개요 5월 24일 자바스크립트 스터디 발표 문서 정리 및 node.js에 대한 개념에 대해 이 책을 읽고 알게 되어 정리하게 되었다. 내용 Node.js란? 자바스크립트의 런타임 웹 브라우저가 자바스크립트의 유일한 런타임일 때는 웹브라우저 없이 자바스크립트를 사용할 수 없었다. 독립적인 자바스크립트 런타임인 node.js가 등장한 이유엔 어떤 환경에서도 자바스크립트를 실행 할 수 있게 되었다. 이로 인해 웹 서버나 모바일 애플리케이션을 개발할 때도 자바스크립트를 이용하는 등 활용 범위가 넓어지며 자바스크립트 개발자도 늘어나게 되었다. 비유하자면 자바스크립트는 게임기이고, node.js는 게임기이다. 리액트를 하는데 왜 Node.js를 공부해야 하는가? 리액트는 node.js기반으로 만들어진 라이브러리이다..

개요 개발 중 자주 나오는 디자인 패턴에 대한 기본 정보를 알아보고 정리하게 되었다. 전체적인 흐름을 알아보고 다음 발표부터 순차적으로 패턴 사용법을 알아볼 예정이다. https://sourcemaking.com/design_patterns https://www.freecodecamp.org/news/javascript-design-patterns-explained/#singleton-pattern 내용 디자인 패턴이란? 4명의 C++ 개발자가 1994년 출판한 "Design Patterns: Elements of Reusable Object-Oriented Software" 책으로 객체 지향 프로그래밍의 기능과 함정을 탐구하고 일반적인 프로그래밍 문제를 해결하기 위해 구현할 수 있는 23가지 패턴을 소..

개요 이번주는 자바 코딩하던 중 보게 된 미디엄 글을 보고 정리하며 추가적으로 궁금한 점에 대해 덧붙여 정리하였다. https://javascript.info/introduction-browser-events#object-handlers-handleevent https://medium.com/geekculture/event-handlers-vs-event-listeners-in-javascript-b4086b8040b0 https://developer.mozilla.org/en-US/docs/Web/Events 내용 event 란? 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미. 버튼을 클릭하면 모달을 표시하여 이벤트에 응답할 수 있게 하는 것 등이 예시로 들 수 있다. event가 발..

개요 프로젝트 하던 중 HTTP Status code를 다루게 되어 정리 겸 찾아보게 되었다. https://developer.mozilla.org/en-US/docs/Web/HTTP/Status 내용 HTTP Response Status Code 란? 클라이언트가 서버에게 요청을 보낼 때 그 요청의 결과가 어떻게 되었는지를 알려주는 숫자로 된 코드이다. 총 5가지의 종류로 그룹화 되어있다. 정보 응답 (1xx) 성공적인 응답 (2xx) 리다이렉션 메시지 (3xx) 클라이언트 오류 응답 (4xx) 서버 오류 응답 (5xx) 정보 응답 (1xx) 요청을 받았으며 계속 작업을 할 때 사용하는 코드 100 - Continue (계속) 클라이언트가 요청을 계속하거나 요청이 이미 완료되어 응답을 무시해야하는 경우..

개요 서버사이드 렌더링과 클라이언트 사이드 렌더링이 무엇인지 알아보고 각 장단점을 알아보기 위해 아래 링크의 글을 정리하였다. https://ferie.medium.com/what-is-the-server-side-rendering-and-how-it-works-f1d4bf9322c6 What is the Server-Side Rendering and how it works Server-side rendering (SSR) is a technique for rendering web content on the server-side, i.e., before the page is sent to the client. ferie.medium.com https://ferie.medium.com/what-is-the..