DongSup Ahn

🔥

Category

CodeLion

비동기 통신(Ajax)방식

📚 What is TIL? AJAX가 없던 시절 과거에는 사용자와 상호작용하는 웹 페이지를 만들기 위해서는 HTML과 함께 폼을 이용해 데이터를 서버에 전송하고, 서버에서 처리된 결과를 다시 HTML로 받아와 화면에 출력하는 방식을 사용했다 🔎 따라서, 페이지...

랜딩 페이지 코드리뷰

클래스 명을 짓는 부분에서 요소를 감싸고 컨테이너 역할을 하고있는 것을 조금 더 명시적으로 표현하기 위해 클래스 명을 지었는데 이것이, 컨테이너에 담긴 컨텐츠를 재사용할 수 있는 가능성과 문서를 더 구조적으로 생각할 수있다는 점을 고려 했을때 장점으로 느껴졌지만, 코드가 늘어나는 ...

정규표현식 다뤄보기

📚 What is TIL? 정규표현식 Regular Expression 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다 정규표현식 연습 사이트 정규식 구성 /pattern/i 식의 슬래쉬 문자 두개 사이로 정규식 기호가 들어가는 ...

DOM 이벤트 흐름과 DOM 다뤄보기

📚 What is TIL? 이벤트객체 그리고 이벤트흐름 이벤트에서 호출되는 핸들러에는 이벤트와 관련된 모든 정보를 가지고 있는 매개변수가 전송된다 여기서 핸들러는 이벤트 발생 시 실행되는 함수로, addEventListener 메서드의 콜백함수를 뜻한다 ...

Array, Object, Function

📚 What is TIL? 배열 동일한 데이터 유형의 여러 변수를 저장하는 데 사용된다 배열은 인덱스를 사용하여 요소를 접근하므로 요소를 검색하는데 효율적이다 요소의 순서를 유지하고 추가하거나 제거할때 다른 요소의 위치를 변경하지 않아도 된다 🔎 배열의 원소...

Number, Boolean, 단락회로 평가

📚 What is TIL? ✅ var의 주의점 ✅ Math 메서드 ✅ BigInt ✅ 형변환 ✅ 일치연산자 사용주의점 ✅ 단락회로 평가와 병합연산자 ✅ isNaN 함수 ✅ 드모르간 법칙 var을 쓰지 않는 이유 let, const 와 같은 Block-lev...

JavaScript 시작! DOM, BOM, 변수, 연산자, string

📚 What is TIL? ✅ DOM과 BOM ✅ 변수 ✅ 산술연산 ✅ 비교연산 ✅ 논리연산 ✅ 변수의 타입 ✅ String 메소드 맛보기(정규표현식) DOM Document Object Model 개발자가 코드를 사용하여 웹 페이지의 콘텐츠, 구조 ...

jQuery, Bootstrap 으로 고양이 집사레벨 테스트 만들어보기

📚 What is TIL? ✅ jQuery로 쉽고 빠르게 DOM 조작해보기 ✅ Bootstrap을 이용해서 빠르게 페이지 만들어보기 ✅ 미니 스타크래프트 만들어보기 ✅ 기념일 계산기 만들어보기 ✅ mbti 테스트 만들어보기 ➕ ✅ jQuery와 Bootstra...

(주말특강:재현님) 태그의 용도 && Margin Collapsing

📚 What is TIL? article과 section 언제 쓰이는가? article 독립적인 콘텐츠에 사용된다 Facebook에서 뜨는 알 수 있는 사람이나 광고와 같이 다른 페이지에서 재사용할 수 있는 독립적인 콘텐츠에 사용하자 💡 쉽게 생각해서...

웹 개발의 효율성? Bootstrap

📚 What is TIL? 웹 개발을 보다 효율적으로 수행하려면? Tailwind CSS | Bootstrap | SASS | D3 | Canvas 와 같은 도구 및 프레임워크를 사용한다 웹 개발을 더 쉽고 효율적으로 만들기 위한 목적이다 반응형 웹 사이...

(특강:종찬님) 보이지 않는 영역 && 코드리뷰

📚 What is TIL? 사소한 구현 종찬님이 첫 특강 때도 말씀해주셨지만 이것저것 기능이 많고 복잡한 것을 구현해낸 것보다 간단하게 구현 해낸 결과물 만으로도 디테일한 부분에 신경을 쓰는 개발자인지 아닌지 구별이 가능하다고 하셨다 즉, 사소한 구현만으로...

(특강:상훈님/종찬님) margin && position && flexbox

📚 What is TIL? 오늘 배운 내용의 핵심 ✅ Negative Margins ✅ Margin auto 키워드의 사용 ✅ 레이아웃의 핵심, position ✅ transform 이해하기 ✅ relative와 absolute ✅ relative + absolute...

레이아웃을 보는 시각

📚 What is TIL? 전체 웹사이트에서 덩어리를 보는 방법 컨텐츠를 집중 시작할 필요가 없다 html은 문서이기 때문에 정보로써 중요한 것을 마크업하고 그 외의 데코레이션은 마크업하지 않는 것이 좋다 작업 순서에 있어서 주의점 전...

스프린트 회고 && 요소의 움직임

📚 What is TIL? <a> 과 <button>의 차이 <a> 우클릭을 했을 시 다른 페이지 혹은 페이지 내의 특정 영역으로 이동 할 수 있는 메뉴가 보인다 shift + click 했을 때 새로운 창으로 열린다 마...

(특강:종찬님) 기본중에 기본인 CSS 지식✨

📚 What is TIL? 오늘 배운 내용의 핵심 ✅ CSS 초기값 initial value 이해하기 ✅ CSS 상속 inheritance 이해하기 ✅ User-agent stylesheet 이해하기 ✅ 캐스케이드 이해하기, CSS Specificity ✅ CSS 박스모...

(특강:소울곰님) 피그마 특강 && float flex grid

📚 What is TIL? 레이아웃을 잡을 때 유용한 함수들 :root | var() 전역 CSS 변수 선언 :root로 html 태그를 선택하게 된다 💡 var() 변수를 처리하면 유지보수나 수정사항이 발생했을 때 빠르게 대처할 수 있다 ...

grid는 대단해..!

📚 What is TIL? grid grid-container에서 사용하는 속성 grid-template-columns 세로 열 방향(column) 그리드 트랙의 사이즈를 설정한다 grid-template-rows 가로 행 방향(row) 그리드 트...

DNS? && git의 기초 배우기

📚 What is TIL? www.naver.com을 쳤을때 일어나는 일들 컴퓨터는 www.naver.com 같은 주소가 무엇인지 알지 못한다. 네이버를 접속할 때 벌어지는 일 핸드폰/컴퓨터 ▶ 공유기 or 스위치 ▶ 광케이블(라우터) ▶ DNS ▶ 핸드...

멋쟁이사자 첫날..! HTML/CSS 맛보기

📚 What is TIL? HTML/CSS 어떠한 언어와도 사용될 수 있는 호환성을 가졌다 html/css는 거의 모든 언어에서 사용할 수 있다 가장 기본적인 문서의 틀 <!DOCTYPE html> <HTML> </HTML&g...

맨 위로 이동 ↑

Frontend

Virtual DOM

가상(Virtual) DOM 가상 DOM은 실제 브라우저의 DOM이 아닌 리액트가 관리하는 가상의 DOM으로 React는 실제 DOM을 직접 조작하지않고 가상 DOM을 활용해서 렌더링을 수행한다. 실제 DOM을 직접 조작하면 어떤 단점이 있을까? 브라...

실행 컨텍스트

실행 컨텍스트란? 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로 자바스크립트 코드가 실행되는 환경을 말한다 즉, 모든 자바스크립트 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 그렇다면 실행 컨텍스트는 언제 생성될까? ...

웹 성능

성능 측정을 해야하는 이유 성능 측정을 해야 하는 이유는 사용자 경험과 기업의 이익에 직접적인 영향을 미치기 때문이다. 아카마이의 이커머스 업계 성능 현황 보고서에 따르면, 지연 속도가 증가할수록 이탈률이 급격히 증가하고 구매 전환률이 감소하는 경향이 있다. 예를 ...

웹 표준 & 웹 접근성 & SEO

웹 표준이 등장한 배경 넷스케이프 vs 인터넷 익스플로러 경쟁 과거에, Netscape와 Internet Explorer가 서로 웹을 장악하기 위한 경정이 치열했고 개발자들은 Netscape와 Internet Explorer 두가지 버전의 페이지를 모두 개발했어야 ...

가비지 컬렉션

변수 선언과 값의 할당 자바스크립트는 변수 선언을 통해 변수에 대한 메모리 공간을 확보해서 변수의 이름과 연결하고 값의 할당을 통해 값에 대한 메모리 공간이 확보한 다음, 값이 원시 타입일 경우 값 자체를 메모리 공간에 저장하고 값이 참조 타입일 경우 값이 저장된 ...

this

this란? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 이다. 이 this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되고 ...

설정관련

빌드 도구(Build Tool) 빌드 도구는 웹 애플리케이션의 개발 및 빌드 과정에서 다양한 작업을 처리하는 도구들이라고 할 수 있는데 아래와 같은 요소들을 빌드 도구라고 할 수 있다. 모듈 번들러: 여러 개의 모듈이나 파일을 하나의 파일로 묶어주는 도구...

값 복사와 변경

변수 선언과 값의 할당 자바스크립트는 변수 선언을 통해 변수에 대한 메모리 공간을 확보해서 변수의 이름과 연결하고 값의 할당을 통해 값에 대한 메모리 공간이 확보한 다음, 값이 원시 타입일 경우 값 자체를 메모리 공간에 저장하고 값이 참조 타입일 경우 값이 저장된 ...

브라우저 렌더링 과정

브라우저에 URL을 입력했을 때의 흐름 웹 브라우저에 URL을 입력하면, 먼저 DNS 조회를 통해 도메인 이름을 IP 주소로 변환하고 이후 브라우저는 해당 서버에 TCP 연결을 설정하고, 이를 통해 HTTP 요청을 보내게 된다. 그럼 서버는 요청을 처리하고, 웹 페이지 ...

변수 & 스코프 & 호이스팅

식별자 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 컴퓨터는 CPU를 사용해서 연산을 하고 메모리를 사용해서 데이터를 기억한다. 이 메모리 상에 존재하는 어떤 값을 식별 수 있는 이름은 모두 식별자라고 부르는데 변수, 함수, 클래스와 같은 것...

렌더링

Static Sites 서버에 미리 만들어진 HTML 문서들이 저장되어 있고, 사용자가 브라우저로 사이트에 접속하면 서버에 저장된 HTML 문서를 받아와서 화면에 표시하는 방식이었다. 이러한 방식을 MPA 라고 한다. 💡 Static Sites의 단점 페이지 내...

자바스크립트 동작원리

JavaScript 자바스크립트(JavaScript)는 싱글 스레드(Single Thread) 기반의 프로그래밍 언어로 모든 작업을 단일 호출 스택(Call Stack) 을 이용하여 실행한다. 단일 호출 스택 자체는 동기적이다 함수 실행 중에는 다음 함...

데이터 타입

데이터 타입 자바스크립트는 동적 타입(dynamic typing) 을 가지는 언어다. 즉, 변수를 선언할 때 타입을 명시할 필요가 없으며, 실행 중에 타입이 자동으로 변환될 수 있다. let value = 42; // Number value = "Hell...

맨 위로 이동 ↑

Core JavaScript

[코어자바스크립트] ES6 class 문법

📚 What is TIL? ECMAScript 5 에서의 클래스 상속 var ES5 = function (name) { this.name = name; }; ES5.staticmethod = function () { return this.name + ' stati...

[코어자바스크립트] prototype

📚 What is TIL? 프로토타입 자바스크립트는 프로토타입 기반 언어이다 클래스 기반 언어에서는 ‘상속’을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다 🔎 어떤 생성자 함수를 ...

[코어자바스크립트] invocation method (bind)

📚 What is TIL? 호출 메서드 apply() call() bind()는 자바스크립트에서 함수를 호출할 때 사용되는 메서드이다 이 메서드들은 함수의 this 값을 변경하거나 함수에 아규먼트를 전달하는데 사용된다 apply, call, bind 메서드는 ...

[코어자바스크립트] 전역 공간에서의 this

📚 What is TIL? this란 자신이 속한 객체로 현재 실행 중인 코드에서 현재 객체를 참조하는 예약어라고 할 수 있다 this는 어디서 사용하느냐에 따라 참조하는 객체가 달라질 수 있다 전역 공간에서의 this “전역공간에서 this는 전...

[코어자바스크립트] Execution Context

📚 What is TIL? 실행 컨텍스트란? Execution Context 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트 코드가 실행되는 환경을 말한다 즉, 모든 자바스크립트 코드는 실행 컨텍스트 내부에서 실행된다 그렇다면 실행 컨텍스크는 언제 생...

[코어자바스크립트] undefined 와 null

📚 What is TIL? undefined란? 정의 되지 않는 값으로 값이 할당되지 않은 상태를 나타낼 때 사용하는데 사용자가 명시적으로 지정하는 경우와 값이 존재하지 않을 때 자바스크립트 엔진이 자동으로 부여하는 경우가 있다 사용자가 명시적으로 지정하...

[코어자바스크립트] 메모리와 데이터 && 식별자와 변수

📚 What is TIL? 컴퓨터는 전기 신호의 on/off 상태로 정보를 표현하기 때문에 이진법을 이용하여 전선 한가닥으로 모든 수체계를 표현하는 방법을 선택했다 🔎 전류가 흐른다면 1 흐르지 않는다면 0 🔎 이진법은 컴퓨터가 정보를 처리하는 가장 작은 단...

맨 위로 이동 ↑

HTML CSS

CSS Architecture

CSS (Cascading) 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용되는 스타일 시트 언어이다. 웹은 문서를 공유하기 위해서 만들어졌고 그 문서를 조금 더 잘 보여주기 위해서 서식이 만들어졌다. 이러한 서식과 데이터가 복잡하게 공존하게 되면서 서식과 컨...

Semantic Tag

시맨틱 태그 Semantic Tag HTML5에서 도입된 의미를 부여한 태그로, 웹 페이지의 구조와 콘텐츠를 설명하는 역할을 한다 시맨틱 태그는 요소의 역할과 의미를 더 잘 나타내므로 이러한 태그를 사용하면 웹 페이지의 내용을 더 명확하게 정의하고, 코드의 가...

transition과 animation 속성의 차이

animation과 transition transition과 animation 속성은 플래시의 기술이나 자바스크립트의 도움 없이 웹 요소에 직접 애니메이션 효과를 적용하는 CSS 기술이다 이러한 속성을 사용해서 웹 요소의 스타일 속성을 변경하고 애니메이션 효과를 부...

float 속성의 역할

float 속성은 무엇인가? float는 CSS의 일부로, 위치 지정 속성이다 요소의 흐름에서 떠있는 위치를 지정하는 데 사용되고, 주로 이미지와 텍스트를 정렬하거나 요소를 배치하는 데 활용된다 🔎 자신을 포함하고 있는 컨테이너의 좌 우측에 배치 되게 한다 🔎 ...

float과 overflow 이해하기

📚 What is TIL? float이 무엇일까? 자신을 포함하고 있는 컨테이너의 좌 우측에 배치 되게 한다 이미지 또는 기타 요소를 시각적으로 보여주기 위한 방식이다 요소는 문서의 흐름에서 제외(===부유)되게 된다 다른 요소들까지 똑같은 속성이 전달되...

맨 위로 이동 ↑

CS

TCP/IP

REST의 제약조건 계층형 시스템 (Layered System) 클라이언트와 서버 사이에 여러 중간 계층을 두어 시스템의 유연성, 확장성, 보안성을 향상시켜야한다. → 클라이언트는 최종 목적지인 서버에 요청을 보내기만 하면되며, 중간 계층들은 ...

DNS

DNS (Domain Name System) 이란? 인터넷을 통해 다른 서버와 통신하려면 해당 서버의 IP 주소가 필요하다. IP 주소는 숫자로 되어 있어 사람이 기억하기 어렵기 때문에, 사람이 기억하기 쉽도록 문자로 표현한 것이 도메인 이름이다. DNS는 도메인 이름을...

쿠키 & 캐시 & 프록시 서버

웹 서비스를 이용하다 보면 로그인을 하고 나서부터는 편리한 기능들이 제공되는 것을 경험 하게된다. 예를 들어, 내가 이전에 봤던 상품들을 다시 보여주거나, 내가 살고 있는 지역의 날씨 정보를 자동으로 보여주거나, 이전에 설정했던 언어 설정을 기억하고 있기도 한다. ...

REST API

REST API의 등장 배경 REST API의 탄생 배경은 웹 기술의 발전과 다양한 디바이스의 등장과 관련이 있다. 2000년대 초, HTTP의 주요 저자 중 한 명인 “로이 필딩”은 웹은 이미 훌륭한 기술을 갖추고 있었지만 당시 웹 설계의 우수성에도 불구하고 우수성이 ...

HTTPS

웹 서핑을 하다 보면, 웹 브라우저 주소창에 http:// 또는 https://로 시작하는 주소를 흔히 볼 수 있다. 여기서 http 와 https는 무엇일까? HTTP (HyperText Transfer Protocol) 이란? 웹 브라우저와 웹 서버 간의 데이터...

맨 위로 이동 ↑

React

React 에서의 Memoization

메모이제이션 Memoization 컴퓨터가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로서 동일한 계산의 반복 수행을 최소화하고 재사용하는 것을 말한다 💡 어떤 이점이 있을까?  성능 향상 - 동일한 입력 값에 대한 결과를 캐시에...

React에서의 event handling

이벤트 핸들링 웹 애플리케이션에서 사용자의 상호작용에 대응하기 위해 이벤트(예: 클릭, 키보드 입력, 마우스 움직임 등)를 감지하고 처리하는 과정이다 💡 사용자의 액션에 반응하여 동적으로 동작하고  데이터를 업데이트하는 데 이벤트 핸들링이 중요한 역할을 한다 ...

[동료특강] React로 날씨 Open API 다루기 2

📚 What is TIL? 전 포스팅 에서 API를 모두 불러와서 화면에 그리는 것 까지 모두 완료했다 💡 이제 컴포넌트를 분리해서 추가기능을 넣고 예외처리까지 해보자! 컴포넌트 분리 App.jsx import React, { useState } fro...

[동료특강] React로 날씨 Open API 다루기

📚 What is TIL? Open API 선정 현위치의 날씨와 일기예보 정보를 얻기위해 아래 두 가지 API를 이용해볼 것이다 현재 날씨 API 5일치 일기예보 API api.openweathermap.org/data/2.5/weather?q={...

맨 위로 이동 ↑

CodeReview

랜딩 페이지 코드리뷰

클래스 명을 짓는 부분에서 요소를 감싸고 컨테이너 역할을 하고있는 것을 조금 더 명시적으로 표현하기 위해 클래스 명을 지었는데 이것이, 컨테이너에 담긴 컨텐츠를 재사용할 수 있는 가능성과 문서를 더 구조적으로 생각할 수있다는 점을 고려 했을때 장점으로 느껴졌지만, 코드가 늘어나는 ...

(특강:종찬님) 보이지 않는 영역 && 코드리뷰

📚 What is TIL? 사소한 구현 종찬님이 첫 특강 때도 말씀해주셨지만 이것저것 기능이 많고 복잡한 것을 구현해낸 것보다 간단하게 구현 해낸 결과물 만으로도 디테일한 부분에 신경을 쓰는 개발자인지 아닌지 구별이 가능하다고 하셨다 즉, 사소한 구현만으로...

맨 위로 이동 ↑

ToyProject

벤딩머신 기능구현하기

벤딩머신에 필요한 기능 🎰 동작해야할 순서대로 넘버링을 해보자면  1. 소지금과 같거나 적은 금액을 자판기에 입금한다  2. 거스름돈 반환 버튼을 누를 경우 잔액을 소지금에 반환해줘야 한다  3. 음료의 재고가 존재해야하고 음료를 선택했을 때 재고가 깎여야...

jQuery, Bootstrap 으로 고양이 집사레벨 테스트 만들어보기

📚 What is TIL? ✅ jQuery로 쉽고 빠르게 DOM 조작해보기 ✅ Bootstrap을 이용해서 빠르게 페이지 만들어보기 ✅ 미니 스타크래프트 만들어보기 ✅ 기념일 계산기 만들어보기 ✅ mbti 테스트 만들어보기 ➕ ✅ jQuery와 Bootstra...

맨 위로 이동 ↑

JavaScript

Promise와 Callback의 차이는? && async/await란?

저번에 ajax에 대한 블로깅을 하면서, Promise와 Callback에 대해 잠깐 다루긴 했지만 이 두 가지의 차이점까지는 다루지 못했었다 💡 우선 Promise 와 Callback 의 공통점은 무엇일까?  공통점은 비동기처리가 동기적으로 처리되게끔 도와주는...

맨 위로 이동 ↑

TypeScript

타입스크립트

타입스크립트 (TypeScript) 타입스크립트는 미국 마이크로소프트에서 개발한 오픈소스 언어로 타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 자바스크립트의 확장된 언어라고 볼 수 있다. 타입스크립트의 컴파일 과정 TypeScript는 JavaScri...

맨 위로 이동 ↑