프론트엔드(10)
-
[프론트엔드] 8. UI 스타일링의 관련된 기술 및 라이브러리
요즘은 프론트엔드 개발자도 UI를 맡게 되는 경우가 존재하기도 한다. html, css, javascript, jquery를 대다수가 사용하던 때가 있었다. 최근에는 React기반으로 개발을 진행하는 경향이 강하였다. 따라서 요즘 UI 개발을 진행할 때 대표적으로 어떤 방식으로 진행하는 리스트 5개를 알아보고자 한다. 1. 원시 css 말 그대로 순수 css로 개발을 하는 것을 말한다. 화면 개발 시 기본 베이스는 html, css, javascript로 구성하는 것을 의미한다. 하지만 어느 라이브러리를 사용하든 기본이 3가지 요소 중 하나이다. 2. bootstrap css 라이브러리 중 하나로 bootstrap으로 활용하여 개발이 가능하다. bootstrap만의 라이브러리를 활용하여 해당 클래스를 호..
2024.04.03 -
[프론트엔드] 7. UI/UX의 대한 개념 및 종류, 화면 설계도
1. UI (User Interface; 사용자 인터페이스) - 사용자와 시스템 간의 상호 작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어 - UI 세가지 분야 1) 정보 제공과 전달을 위한 물리적 제어에 관한 분야 2) 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야 3) 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야 - 특징 : 사용성, 접근성, 편의성 중시 - 예: CLI, GUI 2. UX (User Experience; 사용자 경험) - 사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험 - UI를 통해 사용자가 느끼는 만족이나 감정을 중시 3. UI 종류 - CLI(Command Line Interface) : 명령과 출력이 테스트 형태로 이..
2024.02.28 -
[프론트엔드] cs 지식6 - React 편(2)
1. Redux 사용해 본 적 있습니까? Redux를 적용사례의 대해 설명하세요. Redux는 새로 고침시 state 값을 새로 고침시 변하지 않게 하기 위해 사용합니다. 대부분은 로그인 유지 시 사용되는 편에 속하고요. 이것을 redux session 방식 혹은 redux local 방식으로 이용하여 state 값을 저장합니다. redux session은 javascript의 sessionStorage 역할을 수행하고 있으며 브라우저 창이 닫을 시 state가 다시 초기화되는 상태를 말하고, localStorage는 서버를 내릴 때까지 지속적으로 state값이 유지되는 것을 뜻합니다. 2. useState()와 useEffect()의 대해서 설명하세요. useState()와 useEffect()는 리액..
2023.12.03 -
[프론트엔드] cs 지식4 - Typescript
1. Typescript란? => Javascript 기반에서 엄격한 규칙을 적용하기 위한 언어, 타입을 지정하여 에러를 방지하기 위해 적용됨 2. Javascript와 Typescript 차이 => JS는 코드 규칙을 따르지 않아 코드작성에 용이하고, 빠른 코딩 가능하며, TS는 코드 규칙을 적용하여 IDE 결합과 용이하며, 코드 가독성이 좋고 컴파일 시 에러 잡는게 용의하다. 3. type과 interface 차이 => 둘다 타입을 지정해주는 예약어이지만 interface는 extends나 implements로 확장적인 선언과 같은이름으로 확장 선언이 가능하며 객체에만 선언이 가능하며 type은 같은 이름으로 확장 선언 불가능, 원시 타입도 선언 가능 4. TypeScript 모든 유형으로 사용방법 ..
2023.12.03 -
[프론트엔드] cs 지식3 - Javascript 상세
1. var와 let 차이점 => 둘다 변수 선언하는 것으로, var로 선언시 undefined로 값 초기화 하고, let으로 선언시 데이터 값이 없음. 이는 호이스팅 문제로 let을 사용하는 것으로 선호함 2. 호이스팅 => 코드 실행 전 변수선언/함수선언을 해당 스코프를 최상단 위로 끌어 올려진 것 같은 현상 (let과 var 차이 예시) // 변수 선언을 var 키워드로 아래에서 했기 때문에 선언이 끌어올려져서 오류 안남. (호이스팅됨) - 땡 text = 'Hanamon!'; // 선언 없으면 var로 선언한 것과 동일해짐. - 맞음 console.log(text); // 그래서 선언 없어도 콘솔 출력됨. - 맞음 var text; text = 'Hello'; // 선언 없으면 var로 선언한 것..
2023.12.03 -
[프론트엔드] cs 지식2 - 프론트엔드 기초
1. 프론트엔드 (Front-end) => 웹 사이트나 어플리케이션의 사용자가 보고 상호작용하는 부분을 만들고 디자인하는 과정입니다. 프론트엔드 개발자는 HTML, CSS, Javascript 기반으로 사용자에게 보여줄 View단을 담당합니다. 2. HTML (HyperText Markup Language) => 웹페이지의 구조를 정의하는 언어. 3. CSS (Cascading Style Sheets) => 스타일링과 레이아웃을 담당. 4. JavaScript => 동적인 요소를 추가하면서 웹사이트를 인터랙티브하게 만듬 5. 프레임워크와 라이브러리 개념과 차이점 => React, Angular, Vue.js 등의 JavaScript 프레임워크 및 라이브러리를 사용해주면서 더 복잡하고 고급 기능 구현이 가..
2023.12.03