본문 바로가기

728x90

도전을 밥🍙 먹듯이 하는 개발자

(84)

경영정보시각화능력 B형 기출 - 데이터 해석 및 활용 1. 비정형 데이터 정해진 규격이 없어 값의 의미를 쉽게 파악하기 힘들다. 비정형 특성으로 인해 특정 데이터에 대한 검색이 어렵다. 특정 스키마가 없는 NoSQL 데이터베이스가 사용된다. 2. 중앙값 [ 40, 20, 10, 30, NULL, 50, 60 ] NULL을 제외하고 계산해야합니다. 오름차순 정렬시 10, 20, 30, 40, 50 ,60 으로 데이터의 개수가 짝수(6개) 임으로 중앙값은 중간 두 값의 평균 = (30 + 40) / 2 => 35 3. 확률 분포 : 미래에 발생할 사건에 대해 확률을 나열한 것 균등 분포 (이산 균등분포, 연속 균등분포) : 과거의 경험이 미래를 예측하는데 어떤 영향도 미치지 않으며, 나타날 가능성이 모두 동일한 분포 이산 균등 분포 : 정의된 구간에서 확률 분..

경영정보시각화능력 A형 기출 - 경영정보 일반 2. 발생주의 원칙모든 수익과 비용은 그것이 발생한 기간에 정당하게 배분되어야 한다는 원칙재무제표의 정확성과 신뢰성을 보장하는데 중요한 역할을 합니다. 수익비용대응 원칙: 어떤 비용이 발생했는지와 그 비용이 어떤 수익과 관련이 있는지를 이해하는 원칙, 비용이 어떤 활동이나 프로젝트에 발생했는지, 그 비용이 그 활동이나 프로젝트로 얻는 수익과 연결되는지를 보여줍니다. 비용이나 투자에 대한 결정을 내릴 때, 어떤 결과를 기대할 수 있는지 이해하는데 도우며, 비즈니스나 개인이 자원을 효율적으로 활용하고 가치를 최대화합니다. 3. 주가순자산비율: 주가가 장부가의 몇 배로 평가되고 있는지 측정하는데 사용하는 재무 비율기업의 시가총액을 순자산(자산 - 부채)에 대한 비율로 나타냅니다.일반적으로 주가순자산비율이 높을..

경영정보시각화능력 B형 기출 - 경영정보 일반 경영정보 일반 1. 기업 경영을 위한 하위 부문 및 주요 활동인적자원관리 : 인력 운영 계획 수립 및 직무 분석과 평가마케팅 : 시장 환경과 고객 분석 및 STP 전략 실행운영관리 : 제품 원가, 품질, 나품 관리 및 재고 관리회계관리 : 재무상태를 파악하고 재무성과를 향상시키기 위해 수행재무 회계 :재무상태 기록외부 이해관계자에들에게 보고제무제표를 작성, 손익계산서, 대차대조표, 현금흐름표등의 보고서 생성제무제표 : 기업이 돈을 어떻게 벌고 쓰는지 보여주는 문서손익계산서 (Income Statement):기업의 수익과 비용을 보여줍니다.특정 기간 동안의 매출액과 비용을 비교하여 순이익(또는 손실)을 계산합니다.ex) A제품을 팔았을 때 발생하는 수익과 그 제품을 만드는 데 들어가는 비용대차대조표 (Ba..

렌더링과 DOM(Document Object Model) 웹 브라우저 렌더링 , React의 렌더링 웹 브라우저 렌더링 웹 페이지를 화면에 표시하는 과정 HTML, CSS, Javascript가 함께 동작하여 이루어집니다. HTML 문서를 읽어 DOM 트리 생성 ▼ CSS 문서를 읽어 CSSOM 트리 생성 ▼ DOM + CSSOM = 렌더 트리 생성 ▼ 렌더트리로 레이아웃을 구성, 화면 요소를 칠합니다.(배경, 테두리, 글자) 문서파싱 ▶ 스타일 계산 ▶ 레이아웃 ▶ 페인팅 위 과정은 사용자가 웹페이지를 요청할때마다 실행되고, 사용자-브라우저 간의 상호작용따라 다시 수행될 수 있습니다. 브라우저는 렌더링을 최적화하기 위해, 예측 렌더링, 비동기 스크립팅, 웹 워커 기술을 활용해 성능 향상과 사용자 경험 최적화를 하고 있습니다. React 렌더링 과정 Virtu..

[원티드 프리온보딩] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 - 4회차 오늘의 Agenda는 성능과 최적화를 하는 구체적인 방법 이미지 최적화, 코드 스플리팅, 지난 강의때, 성능을 어떻게 측정하는지 배웠다면, 이번 강의에는 성능을 어떻게 개선할 수 있을지를 배웠습니다! 이미지 최적화, 이미지 용량이 너무 크다면, 로딩도 오래 걸리고 브라우저에 과부하가 걸리기도 합니다. 그래서 스토리지에 화면에 필요한 사이즈별로 이미지를 저장하고, 해당 영역에 크기의 맞는 URL를 넘겨주는 것이 좋다고 합니다. 이미지 파일확장자는 [svg, png, webp] 가 있습니다. 저희 프로젝트에선 svg 파일은 따로 프론트엔드 프로젝트에 코드로 저장(local)하여 사용하고, 대다수의 이미지 파일은 서버에서 받은 png 파일이었습니다. 그리고 해당 수업이후 이미지 파일들을 webp로 수정했는데요..

[원티드 프리온보딩] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 - 3회차 오늘의 Agenda는 성능과 최적화! Lighthouse : 웹 성능을 분석하는 오픈 소스 성능 분석, 접근성 검사, SEO 평가, PWQ 기준 평가를 제공합니다. Lighthouse는 개발자 도구(F12)에서 찾을 수 있습니다 Ligthhouse 페이지 로드를 분석하기 위해, [ 중복 모듈 제거 → 빌드 → 시크릿 모드 실행 → Lighthouse 실행 ] 순서로 실행합니다. $ npm dedupe : npm 패키지 매니저에서 중복된 의존성을 줄이는 명령어 node_modules 디렉토리에서 중복된 모듈을 제거해 프로젝트 크기를 줄입니다. ( yarn을 사용하시면, 자체적으로 의존성 해결 및 트리구조를 효율적으로 관리해 중복된 모듈을 최소화한다고 합니다) $ yarn build production bu..

[원티드 프리온보딩] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 - 1회차 오늘의 Agenda는 1. 지역변수와 전역변수 2. Context API, Redux, Recoil, Zustand 3. React Query 1. 지역변수 vs 전역변수 제 프로젝트에서는 [ Container, Presenter 방식+ redux ] 를 사용해왔습니다. 그래서 데이터를 props로 넘겨주어야할지, redux로 저장해야할지 고민이 많이 되었는데, 오늘 강의를 들으면서 그 고민을 해결할 수 있었어요.🤩 2depts이상 데이터를 전달해야할땐 redux를 사용해봐야겠습니다~ Container, Presenter 패턴 Flux && Redux 2. Context API, Redux, Recoil, Zustand 프로젝트에서 redux만 사용해서 Context API 내용을 오랜만에 들으니 생소하..

redux-toolkit 개념 정리, 기본 문법 redux toolkit : redux 로직을 작성하기 위한 표준 방식 (보일러 플레이트 제거) redux와 비교해보면, - 스토어 설정을 한번의 함수 호출로 단순화 - 우발적인 상태 변이를 제거 - 수동으로 액션 생성자, 액션 타입 작성할 필요가 없음 createSlice() : 상태 이름과 상태 초기값, 리듀서 함수들로 이루어진 객체를 받아, 그에 맞는 [액션 생성자 + 액션 타입] 을 포함한 리듀서 생성 createSelector : Reselect 라이브러리에서 다시 익스포트해서 쓰기 쉽게 해준다. createAction() : 주어진 액션 타입 문자열을 이용해 액션 생상자 함수 생성 - 함수 자체에 toString() 이 포함되어 타입 상수가 필요한 곳에서 활용 가능 configureStore(..

Cache / Cookie / Session / Web storage / Proxy 정리 쿠키 (Cookie) 방문한 웹사이트에서 사용자를 기억할 수 있도록 사용자 브라우저에 데이터 생성 캐시 (CACHE) 웹 사이트 리소스(img, html 등)을 브라우저에 저장해 더 빠르게 로드되도록 함. 브라우저나 중계서버에 저장합니다. 웹 브라우저 내용 갱신을 감지하지 못해 새로고침을 해줘야함. 쿠키 (Cookie) 정보를 유지할 수 없는 http 단점을 해결하기 위해 쿠키 도입 지워지거나, 가로 채이더라도 문제없는 정보를 저장, 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 업데이트 만료 기간o ▲ 쿠키 정보를 헤더에 추가해 전송하기 때문에 트래픽 발생, 민감정보를 쿠키에 저장시 보안 문제점 발생 세션(HTTP Session) - 쿠키의 트래픽, 보안 이슈를 해결하기 위해 도입 클라이언..

React typescript 참고 영상 https://youtu.be/V9XLst8UEtk?si=EDo9nYnmnIPWGDP6 타입 스크립트로 react-app 만들기 Adding TypeScript | Create React App Note: this feature is available with react-scripts@2.1.0 and higher. create-react-app.dev npx create-react-app my-project -- template typescript // App.js import { useState } from 'react'; import { Store } from './Store'; import {Restaurant} from './model/restuarant' let data:Restau..

Typescript로 HTML다루기 참고 유투브 - https://www.youtube.com/watch?v=iZjfnoF784k // tsconfig.json // + 추가 "strickNullCheck" : true // null type 엄격히 체크 안녕 let 제목 = document.querySelector('#title') 제목.innerHTML('반가워요') // 에러 ) type이 element | null /* 만약 let 제목 = document.querySelector('오타') 제목 === null Selector로 찾은 요소는 ( element | null ) 이기 때문에, narrowing을 해야함. */ narrowing 하는 방법 // 1 if(제목 != null){ 제목.innerHTML='반가워요' } //..

타입스크립트 입문, 기본 문법 참고 영상 - https://www.youtube.com/watch?v=xkpcNolC270&t=1s 타입을 엄격하게 -> 에러메세지의 퀄리티가 높아짐 ->코드 에디터 부가 기능의 역할도 함 ts 설치방법 1. node.js 설치 2. npm install -g typescript 3. .ts 파일 만들기 4. tsconfig.json 생성 - 내용 작성 (ts->js 컴파일시 옵션 설정) ts파일을 js로 변환 (터미널켜서 tsc -w입력) let 이름 :string ='kim' 이름 = 123; // 에러발생 let 이름 :string[] =['kim'] let 이름 :{ name? : string } ={ name: 'kim'} let 이름 :{ name? : string } ={ } let 이름 ..

Array의 헷갈리는 메소드 정리(Array.from, arr.sort, arr.shift, arr.unshift) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from Array.from() - JavaScript | MDN Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다. developer.mozilla.org Array.from(arrayLike[, mapFn[, thisArg]]) : Set to Array, Map to Array console.log(Array.from('foo')); // Array ["f", "o", "o"] console.log(Array.from([1,..

CSS 반응형 vw, vh, vmin, vmax와 Flex 그리고 inline, block 반응형 웹 vw : 뷰포트 너비의 100분의 1 vmin : 뷰포트 높이 vs 너비 -> 작은 쪽의 100분의 1 vh : 뷰포트 높이의 100분의 1 vmax : 뷰포트 높이 vs 너비 -> 큰 쪽의 100분의 1 Flex - 레이아웃 배치 전용 기능 helloflex abc helloflex Flex Container가 Flex의 영향을 받는 전체 공간 -> 설정된 속성에 따라 Flex Item이 어떤 형태로 배치되는 것 Flex의 속성은 Container에 적용하는 속성 Item에 적용하는 속성 Container에 적용하는 속성 Item에 적용하는 속성 .container { display : flex } Flex Item - 가로 방향 배치, - 자신이 가진 내용물의 width만큼만 차지 (inl..

styled-components 구글링 # styled-components에서 css 변수 사용하기 (var) css 변수를 사용하면 자주 쓰는 컬러 팔렛트를 만들어 오타 없이 코딩을 할 수 있습니다. 이를 조금 더 확장하면 다크 모드 같이 state 하나로 앱, 웹의 전체 theme을 바꾸는 기능도 수월하게 만들 수 있습니다. 이번 글에서는 nextJS에서 styled-components와 var 기능을 사용하여 손 쉽게 스타일 값을 변수화 하는 방법에 대해 알아보겠습니다! dependence 설치 yarn add node-sass yarn add styled-components 팔렛트 scss 생성 스타일을 변수화 할 scss 파일을 만들어줍니다. // src/styles/common.scss :root { --primary-color: ..

react-query 개념, 기본 문법 react-query 사용이유 0. 서버 상태를 관리하는 레이어 전체를 추상화, 개발자가 관리하는 앱 내의 상태에서 UI 상태에만 집중 1. 데이터를 자동으로 캐시하고, 요청을 최적화할 수 있습니다. 2. 네트워크 오류 및 예외 상황을 처리하고 자동으로 재시도 할 수 있는 메커니즘을 제공 3. 기존 미들웨어로 비동기 통신을 처리했을땐, api 동작마다 상태와 응답값을 전역으로 관리했는데 이는 비효율적임 -> react-query는 react 컴포넌트와 통합해 간편하게 상태를 관리 react-query의 서버 데이터 상태 분류 Stale: 서버 / 클라이언트의 정보가 신선하지 않은 상태, 즉 동일함을 보장할 수 없는 상태 Fresh: 서버 / 클라이언트의 정보가 동일하다는 것이 보장됨, 하지만 defaul..

이전 1 2 3 4 ··· 6 다음

728x90

티스토리툴바