velog.io

📚 Network 네트워크 이해하기!

HTTP 프로토콜이란?
HTTP(HyperText Transfer Protocol) 프로토콜은 클라이언트가 서버로부터 HTML, CSS, 이미지, 비디오와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. 한마디로 클라이언트와 서버가 서로 대화하기 위한 의사소통 수단입니다.

클라이언트는 서버에게 요청(Request)을 하게 되고 서버는 클라이언트에

yuli_kim

velog.io

📚 Browser 브라우저의 동작원리!

브라우저는 어떻게 동작하나요?
렌더링 엔진
🕐 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받습니다.
🕑 HTML과 CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합됩니다.
🕒 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시합니다

yuli_kim

velog.io

Servlet & JSP 알아보자!

개발자들을 위한 블로그 서비스. 어디서 글 쓸지 고민하지 말고 벨로그에서 시작하세요.

yuli_kim

velog.io

자바스크립트 개발자라면 알아야 할 33가지 개념

자바스크립트 함수 실행에 대한 이해
자바스크립트는 싱글스레드로 단 1개의 동시성만 다루는 언어이다.

싱글 스레드

한번에 하나의 작업만 수행 할수 있음을 의미함.
다른 작업이 중간에 끼어들수 없고, 기존에 수행하던 작업이 끝나야만 그 다음 작업을 수행할수 있다.

자바스크립트의 동작원리

yuli_kim

velog.io

[Javascript] 프로퍼티(Property)와 메서드(Method)의 차이는? object를 파헤쳐보자!

프로퍼티(Property) & 메소드(Method)

객체에 대해 다루게 될때 프로퍼티와 메소드에 대한 이해가 없으면 객체를 이해할 수 없습니다. 객체는 케이스를 이루는 말이고, 실제 객체를 완성하는 구성품들은 프로퍼티와 메소드입니다.

🔐(key-pair value

yuli_kim

velog.io

생성자 함수 vs 클래스 ⚖️

# 생성자 함수란? 🧐
## 정의 📋
- 이름 그대로 객체(인스턴스)를 생성하는 함수

## 특징 🙌
- 일반 함수와 동일한 방법으로 생성자 함수를 정의
- `new` 연산자와 함께 호출해야만 `생성자 함수`로 동작
- `new` 연산자 없이 호출하게 될 경우,

yuli_kim

velog.io

Django 개념정리 시리즈

Django 는 Python으로 만들어진 무료 오픈소스 web application framework이다.
web application framework?
웹사이트를 구축할때는 비슷한 요소들이 사용되는 경우가 많다 (예를 들어, 회원가입, 로그인, 글쓰기 등.) 이러한 웹사이트 개발에 자주 사용하는 요소들을 갖춘 tool을 웹프레임워크라고 부른다.

yuli_kim

velog.io

React 리액트 시리즈!

안녕하세요!

오늘부터 React관련 포스팅을 해보겠습니다.

이 번 포스팅의 내용인 create-react-app, 이 하 "CRA" 에 대해 알아보겠습니다.

개발 툴은 Visual Studio Code를 사용했습니다.

yuli_kim

velog.io

[Vue.js] Computed vs Watch

👩🏻‍💼 "computed랑 watch 둘 다 반응형이니까 똑같은 거 아니야?"👼🏻 "아님"

yuli_kim

velog.io

[Vue.js] v-if vs v-show

겉으론 똑같이 동작하는데 뭐가 다를까? 한번 Araboza

yuli_kim

velog.io

[React] 리액트로 NodeBird SNS 만들기

강좌 구성
프론트 엔드 개발자 입장에서는 백엔드 개발자들과 협업하는 것처럼, 백엔드 개발자라면 프론트 엔드 개발자와 협업하는 형식으로 진행할 것이다. 프론트 엔드 개발자 입장에서 더미데이터를 활용해서 미리 작업을 하고 있어야 시간적 손실이 발생하지 않을 수 있기 때문.

yuli_kim

velog.io

[Vue.js] 조건부 렌더링 v-if

v-if, v-else

yuli_kim

velog.io

[Vue.js] 라이프 사이클

틀린 내용은 미래의 내가 수정할 예정,, 😀

yuli_kim

velog.io

Socket : Node.js 곁들여서 채팅방 구현해보기

매번 HTTP 통신만 해봤지 socket을 써본 적이 없어서
하루 날잡고 간단하게 구현해봤다.
[구현]
1. index.html 진입 시 닉네임 입력
- 닉네임 중복 시 alert 창 표시
- 현재 대화방에 접속 중인 유저 수, 유저 닉네임 표시
2. 대화방에 접속하거나 나갈 때, 표시
3. 본인이 입력한 대화창은 오른쪽,
본인 이외의 다른 사람이 입력한 대화창은 왼쪽에 표시됨

yuli_kim

velog.io

브라우저 렌더링 : MPA / SPA / CSR / SSR

SPA
Single Page Application
한 개의 페이지로 된 어플리케이션
웹 어플리케이션에 필요한 모든 정적 리소스를 최초 접속 시 한번에 다운로드 함
이후에 새로운 페이지 요청이 있을 때, 갱신에 필요한 데이터만 전달받아서 페이지를 갱신함
vue나 react가 index.html 페이지 하나에 컴포넌트를 갈아끼우는 걸 떠올리자.

yuli_kim

velog.io

[JS] this의 4가지 동작 방식 (바인딩)

this
자바에도 인스턴스화 된 객체인 자기자신을 접근할 수 있는 this가 있다.

JS에도 this라는 키워드가 있다.

문맥에 따라 this는 다른 값을 가진다.

yuli_kim