본문 바로가기

분류 전체보기

 (76)
SEB_FE_ 블로깅 챌린지 _ 48일차 ( 웹 표준 ) 1. 개념 웹 : 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간. 웹 표준 : 웹 개발의 형식을 통일함. 어떤 운영체제나 브라우저에서도 웹 페이지가 정상적으로 작동하도록 하는 웹 페이지 제작 기법 . -> 브라우저마다 따로 개발하지 않아도 됨. -> W3C 에서 권고하는 웹어서 표준적으로 사용되는 기술이나 규칙이 있음. 2. 장점 각 영역이 분리되면서 유지보수가 용이해지고, 코드가 경량화 됨. 트래픽 비용도 감소함. 웹 호환성이 좋음 -> 사용기기 종류나 운영체제, 웹 브라우저의 종류와 무관하게 사용할 수 있음. 검색 효율성 증대 -> 검색 엔진에서 더 높은 우선순위로 노출될 수 있음. 웹 접근성 향상 1. 개념 : HTML이 ..
SEB_FE_ 블로깅 챌린지 _ 47일차 ( Redux ) 1. 개념 : React 없이도 전역상태를 관리 할 수 있는 상태 관리 라이브러리. 설치 : npm install --save redux react-redux -> 기존 방식대로 하면 전역 상태를 최상위 컴포넌트에 올려주고 내려주는 방식을 사용했음. Redux에서 전역 상태를 관리 할 수 있는 저장소 Store를 제공해서 더 쉽게 상태 관리를 할 수 있음. 2. 작동 원리 -> 상태 변경 이벤트 발생 시, 변경될 상태 정보가 담긴 Action 객체 생성 후 Dispatch 함수의 인자로 전달됨. -> Dispatch 함수는 Action 객체를 Reducer 함수로 전달. -> Reducer 함수는 Action객체의 값을 확인 후 전역 상태 저장소 Store의 상태를 변경. -> 상태 변..
SEB_FE_ 블로깅 챌린지 _ 46일차 ( 상태 관리 ) 보호되어 있는 글입니다.
SEB_FE_ 블로깅 챌린지 _ 45일차 ( CDD, useRef ) 1. 기본 개념 : 재 사용할 수 있는 UI 컴포넌트를 부품 단위로 만드는 개발. => 다른 페이지에서 같은 기능을 할 수 있는 버튼이나 폼을 만들 수 있음. ( 로그인 버튼 , 같은 광고 등 ) -> React 환경에서 CSS를 컴포넌트화 시켜주는 CSS in JS 라이브러리. CSS in JS 라이브러리를 사용하면 HTML , JS , CSS 모두 JS 파일 내에서 컴포넌트 단위로 개발 할 수 있음. 1. 설치 방법 npm install --save styled-components // 터미널 설치 { "resolutions": { "styled-components": "^5" } } // 여..
SEB_FE_ 블로깅 챌린지 _ 44일차 ( Figma 실습 ) 오늘은 Figma로 Lo-Fi 수준의 프로토타입을 구현 해 보는 시간을 가졌다. 자유 주제라 뭘 만들까 하다가 ~ 간단한 웹툰 페이지를 만들어 보았다. -> Lo-Fi 프로토 타입 작업 시간이 촉박해서 카테고리를 조금만 만들걸 후회했다..😵‍💫😵‍💫 시간 내 완성하는게 중요한데 툴이 익숙하지 않다보니 좀 저퀄리티로 완성된거 같다. 그래도 사용하면서 툴이 익숙해지는 느낌이 들었다. 진행 과정은 다음과 같다. 1. Header , Body, Footer로 페이지를 나눈다. ( Header : 광고 , Body : 요일별 웹툰 목록 페이지 , Footer : 카테고리 ) 2. 각 들어갈 내용이나 구성할 UI 디자인을 고려한다 ( 탭, 슬라이드 등등 ) ( 광고는 슬라이드 , 웹툰 목록은 Tab -> 한 페이지..
SEB_FE_ 블로깅 챌린지 _ 43일차 ( 와이어 프레임 , 프로토 타입 ) -> 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위해 짜는 틀. 품질 수준을 피델리티로 표현하며 3가지 레벨이 나뉨. 1. Low Fidelity Wireframe (Lo-Fi Wireframe) : 손으로 빠르게 그린 수준의 와이어 프레임. 큰 틀을 잡을 때 좋음 2. Middle Fidelity Wireframe (Mid-Fi Wireframe) : 아이디어가 어느정도 구체화 되고 확정 된 후에 보기 좋게 다듬은 정도. 해당 페이지가 어떻게 작동하게 될 지 예상 가능한 수준. 3. High Fidelity Wireframe (Hi-Fi Wireframe) : 완성본에 가깝게 작성한 상태. 목업에 가까운 형태임. ( 시간도 많이 들고 수정도 어려워서 여기까지는 ..
SEB_FE_ 블로깅 챌린지 _ 42일차 ( UI/UX ) -> 화면 구성과 사용자 기능 구현을 학습할 예정! 내용이 좀 많아서 이번 포스팅에는 한번에 올렸지만, 분할해서 한번 더 올릴 예정입니다. - User Interface 1. 기본 개념 : 사람들이 컴퓨터와 상호 작용하는 시스템. ( 그래픽 디자인, 키보드나 마우스 등 물리적 요소... ) -> 참고 : GUI ( Graphical User Interface ) : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경. (앱 화면 ..) - User Experience 1. 기본 개념 : 사용자가 어떤 시스템을 이용하면서 느끼는 총체적 경험. UI를 포함함. ( 광고, 접근성, 사용성 ... ) -> UI 와 UX의 차이점 : UI는 시각적으..
SEB_FE_ 블로깅 챌린지 _ 41일차 ( JSON.stringify ) - JavaScript Object Notation 1. 기본개념 : 데이터 교환을 위해 만들어 진 객체 형태의 포맷. -> 네트워크를 통해 객체의 내용을 전달하고 싶으나, 객체의 형변환으로는 데이터를 전달할 수 없음. 그래서 나온 것이 JSON 형식임. 2. 객체와 JSON 변환 -> JSON.stringify : 객체를 JSON으로 변환합니다. : 직렬화(serialize) string 타입으로 변환됨. let message = {"message":"내용 테스트","createAt":"시간 테스트"}`; let stringifyTest = JSON.stringify(message) console.log(stringfyTest) // `{"message":"내용 테스트","creatAt..

티스토리툴바