요즘은 프론트엔드 개발자도 UI를 맡게 되는 경우가 존재하기도 한다. html, css, javascript, jquery를 대다수가 사용하던 때가 있었다. 최근에는 React기반으로 개발을 진행하는 경향이 강하였다. 따라서 요즘 UI 개발을 진행할 때 대표적으로 어떤 방식으로 진행하는 리스트 5개를 알아보고자 한다. 1. 원시 css 말 그대로 순수 css로 개발을 하는 것을 말한다. 화면 개발 시 기본 베이스는 html, css, javascript로 구성하는 것을 의미한다. 하지만 어느 라이브러리를 사용하든 기본이 3가지 요소 중 하나이다. 2. bootstrap css 라이브러리 중 하나로 bootstrap으로 활용하여 개발이 가능하다. bootstrap만의 라이브러리를 활용하여 해당 클래스를 호..

1. UI (User Interface; 사용자 인터페이스) - 사용자와 시스템 간의 상호 작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어 - UI 세가지 분야 1) 정보 제공과 전달을 위한 물리적 제어에 관한 분야 2) 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야 3) 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야 - 특징 : 사용성, 접근성, 편의성 중시 - 예: CLI, GUI 2. UX (User Experience; 사용자 경험) - 사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험 - UI를 통해 사용자가 느끼는 만족이나 감정을 중시 3. UI 종류 - CLI(Command Line Interface) : 명령과 출력이 테스트 형태로 이..

1. Redux 사용해 본 적 있습니까? Redux를 적용사례의 대해 설명하세요. Redux는 새로 고침시 state 값을 새로 고침시 변하지 않게 하기 위해 사용합니다. 대부분은 로그인 유지 시 사용되는 편에 속하고요. 이것을 redux session 방식 혹은 redux local 방식으로 이용하여 state 값을 저장합니다. redux session은 javascript의 sessionStorage 역할을 수행하고 있으며 브라우저 창이 닫을 시 state가 다시 초기화되는 상태를 말하고, localStorage는 서버를 내릴 때까지 지속적으로 state값이 유지되는 것을 뜻합니다. 2. useState()와 useEffect()의 대해서 설명하세요. useState()와 useEffect()는 리액..

1. dom이란? => 문서 객체 모델이라고 불리우며, 문서의 구성 요소들을 객체로 구조화 하여 표현 한 것. 쉽게 설명하면 문서 전체에 html 태그를 tree dom으로 구성함 2. Virtual dom => Dom을 추상화한 가상의 객체, 즉 직접 dom을 접근하지 않고, 가상의 공간에서 dom을 사용하는 것. 즉, 직접 dom에 접근하지 않아 성능 향상에 개편됨 3. Virtual Dom 동작 원리 => DOM을 추상화 한 객체를 메모리에 저장고, 이는 Javascript 객체를 건드는 행위이기 때문에 변경 사항 발생 시 메모리 변경으로 처리 되기 때문에 즉시 반영된다. 이 과정은 재조정을 한다라고 표현한다. 4. 재조정이란? => Batch Update 방식으로 처리하여 변경 사항을 모든 Ele..

1. Typescript란? => Javascript 기반에서 엄격한 규칙을 적용하기 위한 언어, 타입을 지정하여 에러를 방지하기 위해 적용됨 2. Javascript와 Typescript 차이 => JS는 코드 규칙을 따르지 않아 코드작성에 용이하고, 빠른 코딩 가능하며, TS는 코드 규칙을 적용하여 IDE 결합과 용이하며, 코드 가독성이 좋고 컴파일 시 에러 잡는게 용의하다. 3. type과 interface 차이 => 둘다 타입을 지정해주는 예약어이지만 interface는 extends나 implements로 확장적인 선언과 같은이름으로 확장 선언이 가능하며 객체에만 선언이 가능하며 type은 같은 이름으로 확장 선언 불가능, 원시 타입도 선언 가능 4. TypeScript 모든 유형으로 사용방법 ..

1. var와 let 차이점 => 둘다 변수 선언하는 것으로, var로 선언시 undefined로 값 초기화 하고, let으로 선언시 데이터 값이 없음. 이는 호이스팅 문제로 let을 사용하는 것으로 선호함 2. 호이스팅 => 코드 실행 전 변수선언/함수선언을 해당 스코프를 최상단 위로 끌어 올려진 것 같은 현상 (let과 var 차이 예시) // 변수 선언을 var 키워드로 아래에서 했기 때문에 선언이 끌어올려져서 오류 안남. (호이스팅됨) - 땡 text = 'Hanamon!'; // 선언 없으면 var로 선언한 것과 동일해짐. - 맞음 console.log(text); // 그래서 선언 없어도 콘솔 출력됨. - 맞음 var text; text = 'Hello'; // 선언 없으면 var로 선언한 것..