전체 글
-
[네트워크] 심화, TCP/IP, 네트워크 계층 모델, OSI 7계층 모델, ...codeStates front-end/node(server) 2023. 3. 6. 12:41
HTML 삽입 미리보기할 수 없는 소스 📌 [네트워크] 심화 📍네트워크의 시작 인터넷 프로토콜, 즉 IP 기반의 네트워크는 미 국방성에서 1969년 진행했던 아르파넷 프로젝트에서 시작되었다 🔗 회선교환 방식 회선교환 방식은 발신자와 수신자 사이에 데이터를 전송할 전용선을 미리 할당하고 둘을 연결 내가 연결하고 싶은 상대가 다른 상대와 연결중이라면, 상대방 연결이 끊어지고 나서야만 연결 가능 🔗 패킷교환 방식 기존의 사용하던 패킷교환 방식(기존 전화에서 사용하던 방식)의 단점을 보완한 방식 패킷교환 방식은 패킷이라는 단위로 데이터를 잘게 나누어 전송하는 방식 인터넷 프로토콜, 줄여서 IP는 출발지와 목적지의 정보를 IP 주소라는 특정한 숫자값으로 표기하고 패킷단위로 데이터를 전송하게 되어 있다 📍IP와 I..
-
웹 표준 & 접근성codeStates front-end/node(server) 2023. 2. 28. 14:46
HTML 삽입 미리보기할 수 없는 소스 📌 웹 표준 & 접근성 📍웹 표준 W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙 (웹은 인터넷이 아니다) 웹 개발에 사용되는 언어인 HTML, CSS, JavaScript 등의 기술을 다룬다 🔗 웹 표준의 장점 유지 보수의 용이성 웹 호환성 확보 검색 효율성 증대 웹 접근성 향상 📍 Semantic HTML 웹 표준 - HTML을 시멘틱하게 작성하는 것의 중요성을 강조 💡 시멘틱 뭔가요? 📖 semantic : 의미의, 의미가 있는 이라는 뜻의 영단어 와 으로 화면 구성하기 시멘틱 요소로 화면 구성하기 🔗 시멘틱 HTML의 필요성 개발자간 소통 검색 효율성 웹 접근성 🔗 시맨틱 요소의 종류 자주 사용되는..
-
[React]Cmarket ReduxcodeStates front-end/React 2023. 2. 27. 16:29
HTML 삽입 미리보기할 수 없는 소스 📌 My Agora states server 📖 학습 목표 pass한 순서대로 문제 해결 Action 생성 actions - index.js // action types export const ADD_TO_CART = "ADD_TO_CART"; export const REMOVE_FROM_CART = "REMOVE_FROM_CART"; export const SET_QUANTITY = "SET_QUANTITY"; export const NOTIFY = "NOTIFY"; export const ENQUEUE_NOTIFICATION = "ENQUEUE_NOTIFICATION"; export const DEQUEUE_NOTIFICATION = "DEQUEUE_NOTIFI..
-
[React] ReduxcodeStates front-end/React 2023. 2. 24. 18:20
HTML 삽입 미리보기할 수 없는 소스 📌 Redux 📍Redux 개요 보통 리액트에서 최상위 컴포넌트 -> 부모 컴포넌트 -> 자식 컴포넌트가 일반적이지만, 다소 비효율적이라고 느낄 수 있다. 1. 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐 2. 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함 3. 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐 4. 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음 허나 Redux는 전역 상태를 관리할 수 있는 저장소인 Store를 제공함으로써 이 문제들을 해결 📍Redux 구조 🔗 Redux 상태 관리 Action → Dispatch → Reducer → Store 순서 상태..
-
[React] 상태 관리/ 실습 - fe-sprint-cmarket-hooks카테고리 없음 2023. 2. 23. 16:21
HTML 삽입 미리보기할 수 없는 소스 📌 상태 관리 📍상태 관리란? 상태 : UI에 동적으로 표현될 데이터 보라색 글씨 : 상태 빨간 선 : 상태 변경이 일어나는 곳 초록 선 : 상태 변경의 영향을 받는 곳 🔗 프론트엔드 개발에서의 side Effect 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 대표적인 예 : 네트워크 요청(백엔드 API요청) side Effect을 최대한 배제하고 컴포넌트를 만드세요!!! fetch와 같은 API 요청이 없어도 컴포넌트는 작동되어야만 한다 어떤 데이터가 들어오는지 상관하지 않고 가짜 데이터라도 컴포넌트는 표현 그 자체에 집중되어야 한다 🔗 React로 사고하기 UI를 컴포넌트 계층 구조로 나누기 : 모든 컴포넌트 주변에 박스를 그리고 이름을..
-
[React] Storybook, useRefcodeStates front-end/React 2023. 2. 20. 18:18
HTML 삽입 미리보기할 수 없는 소스 📌 Storybook, useRef 📍Strorybook이란? UI개발 즉, Component Driven Development를 하기 위한 도구 개발 모드에서 앱과 함께 실행 스토리북은 비즈니스 로직과 맥락으로부터 분리된 UI 컴포넌트를 만들 수 있도록 한다 🤔 왜 사용하나요? 기본적으로 독립적인 개발 환경에서 실행 개발자는 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다 주요기능 UI 컴포넌트들을 카탈로그화하기 컴포넌트 변화를 Stories로 저장하기 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기 리액트를 포함한 다양한 뷰 레이어 지원하기 🔗 Storybook 설치 리액트 앱 설치 후 npx storybook init s..
-
[React] custom component/ Styled-ComponentcodeStates front-end/React 2023. 2. 20. 16:43
HTML 삽입 미리보기할 수 없는 소스 📌 custom component 📍 Component-Driven Development(CDD) 부품 단위로 UI 컴포넌트를 만들어나가는 개발 🔗 실제로 CDD 방법을 활용하여 UI를 구축하는 사이트 - 링크1 : BBC - 링크2 : UN Storybook uikit.wfp.org 📍 구조적인 CSS 프로젝트 규모나 복잡도, 다양한 디바이스들의 등장으로 일괄된 CSS패턴이 없다는 것이 문제점으로 떠올라 이를 해결하기 위해 CSS 전처리기(CSS Preprocessor)라는 개념이 등장 이는 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구이다 🔗 SASS(Syntactically Awesome Style Sheets) CSS를 확장해 주는 스크립팅 언어 특정..
-
[React] UX 디자인codeStates front-end/React 2023. 2. 15. 22:20
HTML 삽입 미리보기할 수 없는 소스 📍 UX 디자인 1. 유용성(Useful) : 사용 가능한가? 유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소입니다. 계산기라면 계산을 틀리지 않고 맞는 결괏값이 나오는지, 계산기 본연에 목적에 맞는 기능을 하는지가 중요하겠죠. 여기에 꼭 목적에 맞지 않더라도, 비실용적이라도 추가적인 기능을 제공하는지도 관련이 있습니다. 계산기의 디자인은 계산기의 기능 자체에는 영향을 주지 않지만, 심미적 기능을 제공한다고 판단합니다. 2. 사용성(Usable) : 사용하기 쉬운가? 사용성은 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소입니다. 기능이 아무리 잘 작동하더라도 사용자가 사용하기 어렵다면 좋은 UX를 제..