🐶 큐에 대해서 알아봐요 - 선입선출 자료구조 - First In First Out (FIFO) - 먼저 들어온 데이터가 먼저 나가는 구조 - 입력 순서대로 데이터 처리가 필요할 때 사용 - ex) 프린터 출력 대기열, BFS (Breath-First Search) 등 🐶 큐 기본 연산 - 데이터 추가 (Enqueue) : 큐에 데이터 추가 - 데이터 꺼내기 (Dequeue) : 큐에서 데이터 꺼내기 🐶 java로 queue 흉내내기 import java.util.LinkedList; import java.util.Queue; public class Main { public static void main(String[] args) { Queue queue = new LinkedList(); queue.a..

🐶 스택이란 무엇일까요 - 후입선출 자료구조 - Last In First Out (LIFO) - 영어를 풀어보면 마지막에 들어온 데이터가 먼저 나가는 구조입니다. - 데이터가 입력된 순서의 역순으로 처리되어야 할 때 사용합니다. - ex) 함수 콜 스택, 수식 계산, 인터럽트 처리 등 🐶 스택 기본 연산 - 데이터 추가 (push) : 스택의 가장 마지막 위치에 데이터 추가 - 데이터 꺼내기 (pop) : 스택의 가장 마지막 위치에서 데이터 꺼냄 🐶 java의 stack 사용하기 import java.util.Stack; public class Main { public static void main(String[] args) { Stack stack = new Stack(); stack.push(1); ..

호이스팅이란 변수나 함수를 스코프 상단으로 끌어올리는 기술입니다. console.log(a); // undefined var a = 1; 변수 선언보다 참조하는 문이 코드 순서 상 앞에 있지만, 에러가 발생하지 않고 참조 결과가 undefined로 나옵니다. 호이스팅이 일어났기 때문에 위와 같은 결과가 나옵니다. 변수 생성 단계 변수는 선언-초기화-할당, 3단계를 걸쳐 생성됩니다. 코드 실행 전 선언과 초기화가 이루어집니다. 선언 단계에서 데이터 메모리에 변수를 저장하고 초기화 단계에 undefined를 할당합니다. 그 후 코드가 실행되면서 할당하는 문에서 해당 데이터 값을 할당하게 됩니다. var 키워드로 선언된 변수와 let, const로 선언된 변수의 차이점이 있습니다. var 키워드로 선언된 변수..

React 프로젝트를 진행할 때 CSS In Js 방식을 즐겨 사용합니다. 그중에서도 Styled Component 라이브러리를 사용합니다. 제가 생각하는 Styled Component의 장점으로 Scss 라이브러리 설치 없이 Scss 문법을 사용할 수 있습니다. 또한 Material UI 혹은 Ant Design 라이브러리를 사용할 때 다른 방식들보다 커스터마이징이 쉽다 느낍니다. 해당 컴포넌트 이름을 그대로 가져와 사용하면 되기 때문입니다. 다른 방식들의 경우 Material UI와 Ant Design에서 지정한 클래스명 혹은 태그를 알아야 되는 번거로움이 있습니다. classname을 사용하지 않고 스타일을 줄 수 있기 때문에, 이럴 때는 classname 중복돼서 생기는 문제를 해결할 수 있습니다..

리액트 컴포넌트는 탄생부터 죽음까지 여러 지점에서 개발자가 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해줍니다. 아래 이미지는 버전 16.3 이전 생명주기를 그린 것입니다. 이미지를 보면 준비를 끝내고(initialization) compoentWillMount는 그려지기 직전 그 후 render는 그려지는 부분, componentDidMount는 그려진 직후입니다. (이후 버전에서 componentWillMount가 getDerivedStateFromProps로 이름이 바뀝니다.) componentDidMount의 경우 타이머, API 호출, 렌더된 후 최초로 할 일 등을 구현해줍니다. updating 부분은 props가 바뀌거나 state가 바뀌었을 때 주기를 나타냅니다. props 바뀔 때가..

*return의 '()'와 같은 괄호는 없어도 됩니다. 태그는 꼭 닫혀 있어야 합니다. (태그 사이에 아무 내용이 안들어가는 경우 셀프클로징 태그 사용) function App() { return ( ); } function App() { return ( ); } 두개 이상의 태그는 하나의 태그로 감싸져야 됩니다. function App() { return ( ); } function App() { return ( ); } // 프래그먼트 사용 자바스크립트 값을 사용하기 위해서는 '{}'를 사용합니다. function App() { const name = 'react'; return ( {name} ); } 스타일을 지정해주려면 스타일 객체를 따로 만들어주어야 합니다. 카멜케이스로 스타일을 작성해주어야 ..

호이스팅이란 변수나 함수를 스코프 상단으로 끌어올리는 기술입니다. console.log(a); // undefined var a = 1; 변수 선언보다 참조하는 문이 코드 순서 상 앞에 있지만, 에러가 발생하지 않고 참조 결과가 undefined로 나옵니다. 호이스팅이 일어났기 때문에 위와 같은 결과가 나옵니다. 변수 생성 단계 변수는 선언-초기화-할당, 3단계를 걸쳐 생성됩니다. 코드 실행 전 선언과 초기화가 이루어집니다. 선언 단계에서 데이터 메모리에 변수를 저장하고 초기화 단계에 undefined를 할당합니다. 그 후 코드가 실행되면서 할당하는 문에서 해당 데이터 값을 할당하게 됩니다. var 키워드로 선언된 변수와 let, const로 선언된 변수의 차이점이 있습니다. var 키워드로 선언된 변수..

this가 어떤 값에 바인딩 되는지는 실행 컨텍스트가 생성될 때 결정됩니다. 즉 함수를 호출할 때 결정된다 볼 수 있습니다. 그러다보니 함수를 어떻게 호출하는지에 따라 바인딩되는 값이 달라지게 됩니다. 전역 스코프에서 쓰이는 this 전역 스코프에서 쓰이는 this는 전역 객체에 바인딩 됩니다. 브라우저 환경에서는 window, node 환경에서는 global에 바인딩 됩니다. 메서드로서 호출될 때 메서드 안에 있는 this 함수와 메서드를 구분할 수 있는 것은 독립성에 있습니다. 함수의 경우 독립적으로 실행되는 반면, 메서드의 경우 자신을 호출하는 객체에 관한 동작을 수행합니다. var func = function (param) { console.log(this, x); }; func(1); var o..

자바스크립트의 데이터 타입 자바스크립트의 데이터 타입으로 7가지가 있습니다. string, number, boolean, null, undefined, symbol, object가 있으며, 데이터 타입은 원시타입과 참조타입으로 구분할 수 있습니다. string, number, boolean, null, undefined, symbol이 원시타입에 해당하며, object는 참조타입에 해당됩니다. 원시타입과 참조타입의 차이점 이 둘의 차이점을 알기 위해서는 자바스크립트에서 데이터를 어떻게 관리하고 있는지에 대한 배경지식이 있어야 합니다. var a; // 변수 a 선언 a = 1; // 변수 a에 데이터 할당 var a = 1; // 변수 선언과 할당을 한 문장으로 표현 원시타입의 경우, 자바스크립트 엔진은..

1. 문자 자료는 디지털로 어떻게 표현될까? 시용자가 컴퓨터에 입력을 하면 컴퓨터에서 그 입력을 바로 받아들이고 출력해주지 않습니다. 컴퓨터는 2진수로 처리된 입력값을 받을 수 있습니다. 그래서 중간에 입력값을 2진수로 바꿔주는 처리과정이 필요합니다. 즉, '입력 - 처리 - 출력'의 과정을 거칩니다. 다시 생각해보면 각 문자들은 정해저 있는 2진수 값이 있다고 볼 수 있습니다. 이렇게 각 문자를 구분하기 위해 각각 약속된 이진수의 값을 정해놓은 코드를 문자 코드라고 합니다. 문자 정보에는 0~9, A~Z, a~z, 특수문자 등과 같은 문자와 공백이며, enter 키를 누르는 것도 문자로 취급됩니다. 이 문자 코드에는 종류가 여러가지가 있는데 이번 포스팅에서는 아스키코드와 유니코드에 대해서 알아보겠습니다..

W3C의 이미지를 가져왔습니다. HTML Entities는 디자인 용도로는 사용을 하면 안됩니다! 특수문자의 전문 용어를 알아두면 좋습니다. 의사소통을 할 때 도움이 많이 됩니다. ` : grave 그레이브 ~ : tilde 틸드 ! : exclamation mark 엑스클러메이션 마크 @ : at sign 엣 사인 # : number sign, sharp $ : dollar sign % : percent sign ^ : caret 캐럿 & : ampersand 엠퍼센드 * : asterisk 에스터리스크 - : hyphen, dash _ : underbar, low dash = : equals sign " : quotation mark 쿼테이션 마크 ' : apostrophe 아포스트로피 : : col..

웹 콘텐츠 접근성 지침서로, KWCAG라는 한국형 웹 콘텐츠 접근성 지침도 있습니다. 이는 완벽한 것이 아닌 최소한의 접근성으로서 앞으로 웹 개발을 할 때 지켜줘야 할 항목들입니다. 다음 아래 내용은 KWCAG2.1 (한국형 웹 콘텐츠 지침) 내용입니다. 인식의 용이성 - 적절한 대체 텍스트 제공, 자막 제공, 색에 무관한 콘텐츠 인식, 명확한 지시 사항 제공(동의란 잘 보이게 등), 텍스트 콘텐츠의 명도 대비, 자동 재생 금지, 콘텐츠 간의 구분 운용의 용이성 - (마우스로 된다면 키보드도) 키보드 사용 보장, 초점 이동, 조작 기능, 응답시간 조절, 정지 기능 제공, 깜빡임과 번쩍임 사용 제한(발작 장애. 주의문구 표시), 반복 영역 건너뛰기, 제목 제공, 적절한 링크 텍스트 - h tag 잘 써서 ..

Sass란? css의 한계와 단점을 보완해서 보다 가독성이 높고 코드의 재사용에 유리한 css를 생성하기 위한 css의 확장입니다. css의 경우 문법이 쉽기 때문에 쉽다는 장점이 있지만, 프로젝트의 규모가 커지거나 수정이 많아질수록 쉽게 지저분해질 수 있고 유지보수도 어려워진다는 단점이 있습니다. Sass를 사용하게 되면 변수를 사용할 수 있고, 조건문과 반복문도 사용할 수 있습니다. 또한 import를 통해서 작게 쪼개서 합칠 수 있고, Nesting을 통해 중복 없이 html 구조 그대로 css를 만들 수 있습니다. 그리고 Mixin이라는 기능이 있는데, 이는 함수와 유사합니다. Sass 설치 브라우저는 Sass의 문법을 알지 못하기 때문에 Sass파일을 css파일로 트랜스 파일링해주어야 됩니다. ..

word-break와 word-wrap은 줄바꿈을 위해 사용합니다. 구체적으로 들어가면 word-word 속성이 비아시아 언어의 줄바꿈을 결정하고, word-break는 아시아 언어, 즉 CJK언어의 줄바꿈을 결정합니다. word-break 속성값으로 normal(기본값), break-all, keep-all를 갖습니다. normal 속성값은 기본값입니다. 브라우저의 기본값에 따라 줄바꿈이 일어납니다. break-all 속성값은 문자를 강제로 줄바꿈 할 수 있습니다. CJK언어에서 사용할 때는 normal처럼 작동하며 비아시아 언어에 사용할 때는 임의대로 줄바꿈을 할 수 있습니다. keep-all 속성값은 단어 단위로 줄바꿈이 일어납니다. 비아시아 언어에 사용될 때는 normal처럼 작동합니다. word..

같이 공부하는 동기가 W3C 레퍼런스를 공부하다가 해석이 난해한 부분이 있어서, 같이 자료를 찾아보게 됐습니다. 레퍼런스 내용은 다음과 같습니다. If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block. -W3C Reference 위 예제에서 clearance라는 단어가 나오는데, clear 속성이 none이 아닐 때 생기는 요소간의 간격을 말합니다. ..