profile
자기개발 :)

CORS

프론트엔드 개발을 하다 보면 백엔드 서버에 요청을 보냈을 때, 콘솔창에 빨갛게 CORS에러가 뜨는 것을 자주 목격하게 된다. CORS를 대응하는 방법을 알지 못한다면, 클라이언트가 에러를 해결하기 위해 여러가지 다양한 시도를 해봐도 원하는대로 동작하지 않아 난감하기 짝

2022년 1월 12일
·
0개의 댓글
post-thumbnail

[DOM] 이벤트 위임(Event Delegation)

최근에 바닐라 자바스크립트로 기능을 구현하던 도중에, 하위 요소들에 같은 이벤트 리스너를 바인딩해야 되는 일이 있었다. 이전에 리액트를 사용했을 때는 이 부분에 대한 큰 고민없이 이벤트를 발생시키는 요소에 직접 이벤트 리스너를 바인딩 하는 것이 당연하다고 생각했다. 그

2021년 12월 28일
·
0개의 댓글
post-thumbnail

프론트엔드의 MVC

아키텍처와 디자인 패턴 > 내가 건축가가 되어서 직접 집을 짓는다고 생각해보자. 눈에 보이는 집의 구조는 같은 집일지라도 단독주택으로 집을 짓는 것과, 빌라로 집을 짓는 것과, 고층 건물로 집을 짓는 것은 내부 설계는 전혀 다를 것이다. 고층 건물의 집을 짓는데 무조건

2021년 12월 20일
·
0개의 댓글

[js] this

자바스크립트의 this는 상황에 따라 값이 다르기 때문에, 현재 상황에서 어떤 값을 가지고 있는지 매우 헷갈린다. 오늘도 this를 순간 착각하고 오해한 일이 있어서 이 기회에 this에 대해 한번 정리해보려고 한다.this는 왜 필요할까? 객체는 프로퍼티와 메서드로

2021년 12월 14일
·
0개의 댓글

[js] 클로저를 활용한 상태 관리

최근 자바스크립트의 클로저에 대해 공부하다가 클로저를 활용하여 상태관리를 할 수 있겠다는 생각이 들어, 기본적인 상태관리를 할 수 있는 함수를 구현해봤다. 클로저는 사실 자바스크립트에만 존재하는 개념은 아니지만, 자바스크립트에서 굉장히 중요한 개념이다. 클로저의 사전적

2021년 12월 7일
·
0개의 댓글

[js] 원시 값과 객체의 비교

자바스크립트는 총 8가지 데이터 타입을 아래와 같이 제공한다.Number, String, Boolean, undefined, null, Symbol, BigInt, Object이 중에서 객체 타입인 Object를 제외한 데이터 타입은 모두 원시 타입으로 구분한다. 원시

2021년 11월 28일
·
0개의 댓글

[JS] 제어문, 타입 변환과 단축 평가

이 글은 모던 자바스크립트 Deep Dive책을 보고 정리한 내용입니다. > 일반적으로 코드는 위에서 아래로 실행되지만, 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있습니다. 제어문에는 조건문과 반복문이 있습니다. 제어문은 코드의 흐름을 이해하기 어렵게

2021년 11월 23일
·
0개의 댓글

input, textarea를 스타일 하면서 생기는 이슈

input readonly disabled -webkit-appearance: none; ms-clear input foucs outline

2021년 11월 3일
·
0개의 댓글

WCAG - Perceivable

1. Perceivable 정보와 UI컴포넌트는 반드시 사용자들이 인지할 수 있게 제공 가능 해야 합니다. 1.1 Text Alternatives 텍스트가 아닌 콘텐츠에 대한 대체 텍스트를 제공하여 사람들이 필요로 하는 큰 인쇄물, 점자, 음성, 기호 또는 간단한 언

2021년 10월 31일
·
0개의 댓글
post-thumbnail

웹 접근성을 고려하여 HTML 설계해보기

제대로 된 코드를 보고나니 나는 여태까지 개발을 하면서 진정으로 웹 접근성을 고려하면서 html구조를 설계해본 적이 단 한번도 없었다는 것을 깨달았다. 시맨틱 태그에 대한 고려는 단순히 div대신 section이나 article 태그를 사용하는 것에서 그치고, 화면에

2021년 10월 25일
·
0개의 댓글

k개 홀수가 있는 연속부분수열의 집합

이 문제는 숫자들 중, k개의 홀수가 있는 연속 부분 수열 집합의 수를 구하는 문제입니다. 이 문제는 투포인터 와 해쉬 를 이용해 풀 수 있습니다.홀수의 갯수가 0~k개를 넘기지 않는 모든 연속 부분 수열 집합의 수를 반환하는 countOdd 함수를 만듭니다.right

2021년 10월 11일
·
0개의 댓글

공통문자찾기

이 문제는 N개의 문자열이 주어졌을 때, 모든 문자열의 공통된 문자를 찾아 출력하는 문제입니다. 자바스크립트의 Map 자료구조를 활용하여 풀이하였습니다.hash, hash2 각각의 변수에 새로운 빈 map 을 할당합니다.hash 에 입력값 words 의 첫 번째 문자

2021년 10월 7일
·
0개의 댓글
post-thumbnail

CSS - Grid

Grid는 flex와 같이 요소의 레이아웃을 설정하는 속성입니다. flex는 주축에서의 레이아웃을 1차원으로 설정하고, grid는 주축과 교차축 모두 2차원으로 설정합니다. 격자형 구조의 레이아웃을 만들기 위해 table을 사용하기도 하는데 table은 표의 형태로

2021년 10월 5일
·
0개의 댓글
post-thumbnail

CSS - flexbox

flex > display: flex는 요소들을 일직선상에서 일렬 배치하기 위해 사용합니다. 일렬 배치되는 요소들을 item이라고 하고 item들을 감싸는 요소를 container라고 하는데, flex속성은 container에 적용해야 합니다. 일렬로 배치되는 방향을

2021년 10월 4일
·
0개의 댓글
post-thumbnail

CSS - transform, transition, animation

transform 요소의 좌표 공간을 변경하여 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transition속성과 비슷해 보이지만, 전혀 다른 속성이기 때문에 유의해서 사용해야 합니다. scale 속성의 값으로 숫자를 사용하여 요소의 크기

2021년 10월 4일
·
0개의 댓글
post-thumbnail

CSS - 색상과 배경

색상 표기법 > css에서 색상을 표기하는 방법은 3가지가 있습니다. > 1. 색상 직접 표기 해당하는 색상의 이름을 직접 입력할 수 있습니다. ex) color: blue > > 2. hex(16진법) 색상을 16진법으로 0~f까지 앞자리에 #을 붙여 표기합니다. e

2021년 10월 3일
·
0개의 댓글
post-thumbnail

CSS - LayOut(레이아웃)

display inline, block, inline-block > - inline은 요소의 내부 콘텐츠 크기만큼만 영역을 차지해서, width와 height의 값을 임의로 지정할 수 없습니다. 요소가 여러개면 가로로 배치 됩니다. block은 요소의 내부 콘텐츠와

2021년 10월 3일
·
0개의 댓글
post-thumbnail

CSS - 박스 모델(Box Model)

박스모델브라우저 화면에 박스의 형태로 보이지 않는 요소들도, 실제로는 박스모델의 모습을 하고 있습니다. 박스모델은 4가지 요소로 구성되어 있습니다.content: 실질적인 콘텐츠가 표시되는 영역입니다.padding: content와 border(테두리) 사이의 영역입니

2021년 10월 1일
·
0개의 댓글
post-thumbnail

CSS - font, 단위와 값

font-size의 기본값은 브라우저마다 약간의 차이점은 있지만, 일반적으로 16px입니다.font-style은 일반적으로 italic만 사용하는데, font의 모양을 이렇게 약간 누워있는 모양으로 변경해줍니다.font-weight는 font의 굵기를 변경합니다. bo

2021년 9월 30일
·
0개의 댓글
post-thumbnail

CSS - 선택자(셀렉터)

CSS는 html문서 내의 요소들의 스타일을 변경해줍니다. css의 기본 선언 형태는 위와 같은 모습을 하고 있습니다.선택자(Selector): p선언 블록(Declation Block): {}선언(declations): 속성(Properties) - color, fo

2021년 9월 29일
·
0개의 댓글