분류 전체보기
[JavaScript] DOM(Document Object Model)
DOM이란? Document Object Model 은 문서객체모델이며 XML이나 HTML문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서내의 모든요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. DOM의 표준모델 W3C DOM 표준은 세가지 모델로 구분된다. Core DOM: 모든 문서 타입을 위한 DOM 모델 HTML DOM: HTML 문서를 위한 DOM 모델 XML DOM: XML 문서를 위한 DOM 모델 우리는 이중 HTML DOM을 가장 많이 접하게 될 것이다. HTML DOM을 통해 JavaScript로 HTML에 접근하고 조작 할 수 있다. 웹 프론트엔드에서의 DOM 여러 DOM Element로 구성된 하나의 웹 페이지는 Window를 최상위 부모로 하는 트리구조를 ..
![[Next.js] 공식문서 살펴보기(1) (하이브리드 앱, SSR, SSG, CSR)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FupjmA%2FbtrkjWeF8aC%2FNG1SotmtazRBgTf1kT3r8k%2Fimg.jpg)
[Next.js] 공식문서 살펴보기(1) (하이브리드 앱, SSR, SSG, CSR)
SSG(Static Site Generators) 와 SSR(Server Side Rendering) 정적사이트생성 사용자가 처음에 페이지에 접속을 요청했을 경우 사용자에게 렌더링될 빈페이지가 아닌 완성된 html파일을 응답값으로 전달해 준다. 그 후 요청이 들어올때마다 만들어진 html파일을 응답해준다. 서버사이드 렌더링 웹사이트에 접속하면(요청이 들어오게 되면) 서버측에서 html파일을 렌더링하여 완성된 html파일을 클라이언트로 전달을하고 클라이언트에서는 이 html파일을 DOM트리로 전환하여 보여주게 되고 js파일을 해석한다. Next.js의 하이브리드 앱 (SSR, SSG, CSR) SSG 는 모든 요청에 대해 일일이 페이지를 렌더링 하는 것이 아니기 때문에 SSR 에 비해 훨씬 빠른 응답속도를..
개발상식 | 객체지향 프로그래밍이란
OOP (Object Oriented Programming) : 객체지향 프로그래밍 객체지향 프로그래밍이란 컴퓨터가 사고하는 방식으로 프로그래밍을 진행하는 것이 아니라 인간 중심적 프로그래밍 패러다임이라고 할 수 있다. 현실에 존재하는 사물들을 객체 라고 이야기 하고 그 객체로부터 필요한 특징들을 가져와서 프로그래밍 하는 것이다. 이것을 추상화 라고한다. 객체 지향의 가장 기본은 객체가 내부적으로 어떤 데이터를 갖고 있는지가 아닌 어떤 기능을 제공하는 지 이다. 이러한 기능들은 오퍼레이션(operation) 이라고 불리며 즉, 객체는 오퍼레이션의 집합체 이다. 메세지 오퍼레이션(기능)의 집합은 인터페이스이다. 즈 오퍼레이션의 실행을 요청하는 것을 메시지를 보낸다라고 표현한다. 이러한 메세지는 OOP의 단..
Node.js | Node.js 와 npm
1. Node.js, npm 소개 1.1 Node.js Node.js 는 2009년, 라이언 달이 크롬 V8 엔진을 통해 빌드한 자바스크립트 런타임 환경이다. 브라우저 내부에서만 동작하는 자바스크립트를 브라우저 외부에서도 동작할 수 있도록 만든 실행환경이라고 할 수 있다. 1.2 npm npm 은 Node.js 의 패키지 매니저이다. Node.js에서 사용할 수 있는 각종 모듈들을 저장해놓는 저장소이자 필요한 패키지를 검색하여 설치까지 할 수 있도록 도와주는 것이다. 물론 패키지를 받아오는것 뿐만 아니라 내가 만든 페이지를 배포하는 것또한 가능하다. 2. Node.js , npm 설치하기 Node.js를 사용하기 위해서는 별도의 Node.js파일을 다운로드 해줘야 한다. Node.js 설치 를 통해 접속..
JavaScript | 모던 자바스크립트 Deep Dive 공부기록(1)
위키북스의 이웅모 저자의 모던 자바스크립트 Deep Dive를 공부하면서 정리한 포스트입니다. 저작권 문제시 삭제하겠습니다. 개념과 동작원리 이해의 중요성 프로그래머의 역활은 요구사항을 기반으로 문제를 해결하기 위한 방안을 고안하고,이를 코드로 구현하는 것이다. 프로그래머가 구현한 코드는 의도한대로 정확히 동작해서 문제를 해결해야한다. 이를 위해서는 자신이 구현한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측이 가능해야 하며 이를 명확히 설명할 수 있을만큼 이해해야 한다. 그러나 개념과 동작원리에 대해 정확히 이해하지 못한채로 단순히 복사, 붙여넣기만 할 경우에는 언제 어디서 어떻게 에러가 발생해도 이상하지 않은 상태가 되어버린다. 그렇게 되면 신입개발자의 성장에 있어서도 매우 큰 장애물이 되어 버릴..
Vue | life cycle을 활용하여 scroll event를 적용해보자
Post 계기 팀프로젝트를 진행하던 도중 페이지의 메뉴바와 검색창을 마우스 스크롤에 따라 숨기거나 드러나게 하는 기능을 구현하기 위해 적용했던 방법을 기록하려고 한다. 구현 기능 - router-link 전환시에 페이지의 위치를 최상단으로 오게한다. - 마우스 스크롤에 따라 header를 숨기기도 하고 나타나게도 한다. 구현 방식 - Vue의 life cycle중 mounted, unmounted를 활용 - addEventListener를 사용하여 scroll 이벤트를 감지 - classList에 add 또는 remove를 통해 CSS 속성 적용 JavaScript Code mounted 인스턴트 컴포넌트들을 mount한 다음 호출된다. 이 경우에는 window.scrollTo(0, 0) 을 통해 화면전..
개발상식 | 좋은 코드란?
웹 프론트엔드 관점에서의 좋은 코드 프론트엔드 개발자가 되기위해 학습을 진행하다 보면 개발자는 좋은 코드를 작성해야한다. 라는 글이 많았다. 그래서 도대체 좋은 코드란 무엇인지에 대해서 탐구해 보려고 한다. 좋은 코드라는 것은 개발자들의 관점에 따라 여러 종류로 나뉜다는 것을 알게 되었다. 예를 들어 보면 읽기 쉬운 코드, 중복이 제거된 코드, 테스트를 하기 좋은 코드 등등이 있다.. 읽기 쉬운 코드 읽기 쉬운 코드를 작성하는 것은 정말 어렵다고 생각한다. 지금 당장은 내가 이해하고 읽기 쉽다고 생각해서 작성한 코드들을 몇개월이 지난 후 보게 되었을때는 그 코드가 당장 이해가 가지 않는 것처럼 말이다. 읽기 쉬운 코드에는 어떤 것들이 있을까? 일관성이 있는 코드, 문맥이 있는 코드 일관성이 있고 문맥이 ..
Git | 브랜치 생성 , 변경, 목록 확인
branch 목록 조회 생성되어 있는 브랜치 목록을 보기위한 명령어 git branch (로컬 브랜치 목록 조회) git branch -r (리모트 브랜치 목록 조회) git branch -a (모든 브랜치 목록 조회) branch 변경 ( checkout ) 현재 브랜치를 원하는 브랜치로 변경하는 명령어 git checkout (로컬 저장소) git checkout -t (리모트 저장소) branch 생성 ( Local ) 로컬 저장소에 브랜치를 생성하는 명령어 git branch branch 생성 ( Remote ) 로컬에서 생성한 브랜치를 리모트 저장소(github) 에도 생성하기 위한 명령어 git push origin
Front-End | CORS (Cross Origin Resource Sharing), proxy
포스트 계기 현재 프론트엔드 + 백엔드로 구성된 팀 프로젝트를 진행하고 있는 중이다. 프론트엔드측에서는 JavaScript 프레임워크인 Vue 를 이용하여 개발을 진행 중이고 백엔드 측은 Java 언어인 Spring을 통하여 개발을 진행하는 중이다. 이 두 가지의 프레임워크를 서로 연동을 시켜주는 작업을 진행하던 도중에 결국 실제 배포 환경에서는 Vue로 작성한 코드들이 build 되어 정적인 파일로 바뀌게 되고, 요청을 받는 서버는 Spring 서버 하나가 되어야 하는 것을 알게 되었다. 그렇지만 현재 단계에서는 분명 Vue의 port번호와 Spring의 port번호는 다른 상태이고 그로 인해 CORS에 관해 학습을 진행하게 되었다. 그 과정에서 proxy, axios, fetch, build 등에 대..
Front-End | 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)
등장배경 모바일 기기들의 등장으로 인해 웹은 변화가 필요하였다. 데스크탑, 노트북과 비교했을 때 상대적으로 성능이 낮은 모바일 기기에서는 성능에 관한 이슈들이 거론되기 시작했고 그에 따라 SPA(Single Page web Application) 기법이 등장하게 되었으며 SPA는 클라이언트 사이드 렌더링 방식이라고 할 수 있다. Server Side Rendering 서버 사이드 렌더링 방식은 전통적인 방식으로 사용자의 행동에 의해 요청이 발생할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링 하는 방식이기 때문에 표시해야 할 데이터가 많거나 성능이 좋지 않은 기기의 경우 많은 성능 이슈가 발생할 수 있다. 장점 검색엔진에 최적화되어있다. (웹 크롤러, 봇들이 자바스크립트 파일을 실행시키지 못..