본문 바로가기

프로그래밍/CS67

[CS] 컴퓨터의 구성 컴퓨터는 읽고 처리한 뒤 저장하는 과정으로 이루어짐 (read-> process -> write) 하드웨어: 컴퓨터를 구성하는 기계적 장치 - 중앙처리장치(CPU) - 기억장치: RAM, HDD - 입력 장치: 마우스, 키보드 - 출력 장치: 프린터, 스피커 등 소프트웨어: 하드웨어의 동작을 지시하고 제어하는 명령어 집합 - 시스템 소프트웨어: 운영체제. 컴파일러 데이터 버스, 주소 버스, 제어 버스로 나뉘어짐 데이터 버스: 중앙-기타 장치 사이에서 데이터 전달 통로 주소 버스: 기억장치 주소 전달(단방향) 제어 버스: 중앙처리장치가 기억장치나 입출력 장치에 제어 신호 전달 통로(양방향) - 응용 소프트웨어: 워드프로세서, 스프레드시트 2022. 9. 2.
기술면접 대비(JavaScript, React, 운영체제, 자료구조) JavaScript Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요. 호이스팅: 함수 안 선언들을 해당 함수 유효 스코프의 최상단에 선언하는 것 let. const변수 선언과 함수 표현식에서는 호이스팅이 발생하지 않음 TDZ: 선언 전에 변수를 사용하는 것을 비 허용하는 개념적 공간 var, function, import의 선언은 TDZ의 영향을 받지 않음 브라우저 렌더링 브라우저 렌더링 방식에 대해 설명하세요. 브라우저라는 것은 인터넷에 접속할 때 사용하는 크롬, 사파리, 파이어폭스 등을 말함 1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing) 2. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style) 3... 2022. 8. 18.
CI/CD 배포 자동화 파이프라인(Pipeline) - 정의: 소스 코드의 관리~실제 서비스 배포 과정을 연결하는 구조 - 단계 1. Source: 소스 코드에 변경이 있을 경우, 감지하고 다음 단계로 전달하는 작업 수행 2. Build: source단계에서 전달받은 코드를 컴파일, 빌드, 테스트하여 가공 3. Deploy: build단계에서 전달받은 결과물을 실제 서비스에 반영 - 배포 자동화가 필요한 이유 1. 시간 절약 2. 휴먼 에러(Human Error)방지 CI(continuous integration)/CD(continuous deployment) - 정의 CI는 지속적 통합의 약자로, 팀 구성원이 각자의 작업을 자주 통합하는 소프트웨어 개발 방식 CD는 지속적 통합 과정이 끝나면 고객에게 배포하는 것.. 2022. 8. 8.
Lighthouse Lighthouse란? - Lighthouse는 다양한 지표를 이용하여 웹페에지의 성능 검사를 해줄 뿐만 아니라 개선책도 제공함 - 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사 가능 - 내 블로그를 검사해보며 개선책을 찾아보도록 함 1. 설치하기 1-1. 웹에서 바로 확인하기 - 크롬에서 검사하고 싶은 페이지의 화면을 띄우고 개발자 도구(control+f12)를 열음, lighthouse 탭을 클릭 - 'Analyze page load' 버튼 클릭하기 - 검사 후 리포트 생성 1-2. 다르게 분석 결과 뽑아내기 방법 //Node CLI에서 실행하기 //첫번째, 전역 모듈로 설치 npm install -g lighthouse //두번째, 명령어로 검사를 실.. 2022. 8. 4.
반응형 웹, CSS 애니메이션 반응형 웹 - 정의: 여러 장치에 대응하는 하나의 웹 문서또는 사이트 브라우저의 크기에 실시간으로 반영하여 크기에 따라 레이아웃이 변하는 웹 사이트 - 모바일 퍼스트(mobile first) 사용자 경험을 디자인할 때 모바일일 경우에 최우선으로 초점을 맞춰 디자인함 현재 데스크탑 유저보다 모바일 유저가 공유하는 정보가 많아짐에 더욱더 각광받음 - 장점: 검색엔진 최적화(SEO)유리 - 단점: 사이트 속도 저하 웹 브라우저 호환성 문제, CSS3의 특성상 인터넷 익스플로러 8버전 이하에서는 사용이 불가능 미디어 쿼리 - 정의: 뷰포트(브라우저 창)의 크기에 따라 스타일을 적용할 수 있도록 함 적용하는 방법 1. CSS파일을 HTML파일에 적용하는 것처럼 적절한 태그에 위치 2. App.js * { font.. 2022. 7. 22.
HTML/CSS 심화 브라우저 웹 서버에서 양방향으로 통신 html 문서 및 그림. 멀티미디어 등의 컨텐츠를 열람하는 GUI기반의 소프트웨어 프로그램 현존하는 브라우저 간 공통점: 동작방식 사용자가 선택한 자원(resource)을 서버에 요청(request), 서버의 응답(response)을 브라우저에 띄움(rendering) 방식 브라우저의 구조 자바스크립트 해석기 Rhino 모질라 재단이 운영, 자바로 개발 SpiderMonkey 최초의 엔진, 넷스케이프 내비게이터 지원, 현재 파이어폭스 지원 V8 구글이 개발한 오픈 소스 엔진, 구글 크롬의 엔진임 JavascriptCore 애플에서 개발, 현재 사파리와 react native app지원 Chakra 마이크로소프트 개발 엔진. Edge브라우저 지원 크게 heap memo.. 2022. 7. 22.
기술면접 준비(재귀, 웹표준, 보안) 재귀 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요. 큰 목표 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 재귀를 활용하면 좋음 특정 자료구조를 다뤄야 할 때 재귀 사용(깊이우선탐색, 백트래킹) 반복문을 사용하는 것보다 코드의 가독성을 높이고, 변수의 사용을 줄임 UI/UX UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요. ui: user interface 사용자가 제품이나 서비스를 사용할 때 마주치는 인터페이스, 폰트, 칼라, 레이아웃 등 ux: user experience 사용자가 제품이나 서비스를 이용하면서 느끼는 만족, 사용자 중심적으로 설계된 디자인을 말함 UX가 UI를 포함하는 관계 Custom Component Styled Components를 .. 2022. 7. 20.
[인증/보안] Auth Oauth OAuth2.0이란 인증을 위한 표준 프로토콜의 한 종류 보안된 리소스에 엑세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜 중 한 방법 장점 매우 편리함: 자주 사용하고 중요한 서비스들의 id와 password만 기억해두고, 해당 서비스들을 통해서 외부 서비스로 소셜 로그인을 할 수 있음 보안상의 이점: 검증되지 않은 앱에서 OAuth를 사용하면 유저의 민감한 정보가 노출될 일이 없고 인증 권한에 대한 허가를 미리 유저에게 구해야 하기 때문에 더 안전하게 사용 주요 용어 resource owner: 엑세스 중인 리소스의 유저 client: 리소스 오너를 대신하여 보호된 리소스에 엑세스하는 애플리케이션 resource server: 클라이언트의 요청을 수락하고 응답할 수 있는 서.. 2022. 7. 18.
토큰기반 인증(Token-based Authentication) 토큰은 유저 정보를 암호화하기 때문에 클라이언트에 담을 수 있음 대표적인 방법: JWT(JSON Web Token) 1. 엑세스 토큰 2. 리프레시 토큰 JWT는 세 부분이 존재, header, payload, signature로 존재 head 예시(어떤 토큰인지, 어떤 알고리즘으로 암호화할지 적혀있음) { "typ": "JWT" } payload 예시(단어 그대로 서버에서 활용할 수 있는 유저의 정보 담김) { "sub" : "someInformation", "name" : "phillip", "iat" : 1323453 } signature HMACSHA256(base64UrlEncode(header) + '.' + base64UrlEncode(payload), secret); 토큰 기반 인증의 장점.. 2022. 7. 15.

티스토리툴바