브라우저 렌더링 과정 브라우저 (browser) → 인터넷을 통해 웹 페이지에 접근하고, 그래픽, 텍스트, 멀티미디어 등을 표시하는 소프트웨어 웹 페이지를 해석하고 화면에 표시하는 역할 다양한 운영체제 및 플랫폼 지원 사용자 경험 형성 및 쉬운 웹 탐색 도움 ex) Chrome, Firefox, Torch, Safari, Internet Explorer, MS Edge 렌더링 과정 1. HTML 파싱 웹 페이지의 HTML 문서를 파싱하여 DOM 트리를 생성. 이 과정에서 HTML 태그, 요소, 속성을 인식하고 계층 구조로 구성 2. CSS 파싱 CSS 파일 및 스타일 정보를 파싱하여 CSSOM 생성. CSSOM은 각 HTML 요소에 대한 스타일 정보를 제공 3. 렌더링 트리 구축 DOM 트리와 CSSOM을 결합하여 렌더링 트리를 생성. 렌더링 트리는 화면에 실제로 렌더링될 요소만을 포함하며, 레이아웃과 스타일 정보를 고려 render tree 4. 레이…

CSR vs SSR Client-Side Rendering (CSR) → 웹 애플리케이션의 초기 페이지 로딩 후, 웹 브라우저에서 JavaScript가 실행되고, JavaScript 코드를 통해 동적으로 콘텐츠를 가져와서 화면에 렌더링하는 방식 서버에서 초기 페이지 로딩 → 클라이언트에서 JS 실행 → 동적 데이터 요청 → 데이터 처리 및 렌더링 Sever-Side Rendering (SSR) → 서버 측에서 초기 페이지 렌더링을 수행하고 완전한 HTML 페이지를 클라이언트로 제공하는 방식 서버에서 초기 페이지 렌더링 → HTML 페이지 전송 → 클라이언트에서 초기 페이지 로딩 → 동적 데이터 요청 → 클라이언트 측 렌더링 CSR 🆚 SSR CSR SSR 장점 - 빠른 초기 페이지 로딩 - 부드럽고 빠른 페이지 간 전환 - 서버 부하 감소 - SEO 용이성 - 초기 로딩 후 완전한 페이지 (UX향상) 단점 - SEO 취약 - 초기 페이지 로딩 이후 백엔드 …

Dev Ops Development(개발) + Operations(운영) → 개발과 운영의 경계를 허물고 하나의 팀으로서 소통, 협업을 강조하는 개발 방법론 소프트웨어 개발과 운영을 통합하여 한 팀으로 작업 반복 작업 자동화를 통해 개발 및 배포 과정을 빠르고 정확하게 수행 코드 변경사항이 지속적으로 통합, 자동적으로 배포(CI/CD) 운영 중인 소프트웨어 모니터링을 통해 사용자 피드백 수집 인프라 및 애플리케이션을 빠르게 확장 및 관리 장점 CI/CD → 빠른 소프트웨어 제공 버그 조기 발견 가능 → 높은 품질 인프라 비용 절감 협력 및 의사소통 강조 → 효율적인 협업 사용자 피드백 반영 → 신속한 문제 해결 단점 조직 내 문화적인 변화 필요 데브옵스 환경 구축 및 유지 복잡성 자동화 프로세스를 위한 초기 투자 비용 발생

함수형 프로그래밍 (Functional Programming) → 수학적 함수의 개념에 기반을 둔 프로그래밍 패러다임 순수 함수 : 동일한 입력에 대해 항상 동일한 결과를 반환 불변성 : 데이터가 변경되지 않고, 변경이 필요한 경우에는 새로운 데이터 생성 고차 함수 : 함수를 변수에 할당하거나 인수로 전달할 수 있어 함수 추상화 및 재사용 용이 참조 투명성 : 함수 호출을 결과로 대체하여 코드 이해 및 최적화 재귀 : 반복 대신 재귀를 사용하여 코드를 간결하게 유지 명령형 프로그래밍 vs 함수형 프로그래밍 장점 간결하고 가독성 높은 코드 작성 가능 → 유지 보수 용이 순수 함수 & 불변 데이터 → 단위 테스트 및 TDD 용이 병렬 및 동시프로그래밍에 적합 메모리 사용 최적화 및 불필요한 복사 방지 단점 학습 시간 소요 재귀 사용 시 스택 오버플로우 발생 가능성 라이브러리 성능 면에서 제한 가능성 이해하기 어렵고 복잡한 높은 추상화 수준 references 👉 htt…

Recoil 업데이트와 구독이 가능하다. atom이 업데이트 되면, 해당 atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더링 된다.동일한 atom을 여러 컴포넌트에서 구독할 수 있다.atom은 라고 하는 고유한 id로 구분된다. 동일한 atom을 여러 컴포넌트에서 구독할 수 있다. 동일한 atom을 여러 컴포넌트에서 구독하고 있다면 해당 컴포넌트들은 같은 state를 공유하고 있는 것이며, 상태가 업데이트 되면 해당 atom을 구독 중인 모든 컴포넌트들이 리렌더링된다. hooks  : atom을 읽고 쓰려고 할 때  : atom을 읽기만 할 때  : atom에 쓰려고만 할 때  : atom을 초깃값으로 초기화할 때 Redux 🆚 Recoil 상태 저장 상태 변경 장점 단점 사용 Redux 중앙 스토어 액션을 통해 디스패치 중앙 집중화된 상태 관리로 상태 예측 가능, 높은 미들웨어 활용성, 신뢰성 있는 라이브러리, 디버깅 용이성…

Redux : 애플리케이션의 상태를 보유하고 관리하는 하나의 공간 : 애플리케이션에서 스토어에 운반할 데이터(객체 형태) : 현재 상태와 액션을 받아서 새로운 상태를 반환하는 순수 함수 → 자바스트립트 상태 관리 라이브러리 Single source of truth : 전체 상태는 하나의 중앙 저장소(단일 소스)에 저장된다. State is read-only : 액션이라는 객체를 통해서만 상태를 변경할 수 있다. (불변성 유지) Changes are made with pure functions : 변경은 순수함수로만 가능하다. 사용 전역 상태가 필요할 때 상태가 자주 업데이트 될 때 상태를 업데이트하는 로직이 복잡할 때 애플리케이션이 클 때 상태가 업데이트되는 시점을 관찰해야 할 때 장점 중앙 집중화된 상태 관리 불변성 시간 여행 디버깅 컴포넌트 간 데이터 공유 테스트 용이성 단점 복잡성 (작은 규모에 부적합) 설정 및 사용 코드 필요 오버헤드

애자일 방법론 (Agile Methodology) → 작업 계획을 짧은 단위로 세우고 제품을 만들고 고쳐 나가는 사이클을 반복함으로써 고객의 요구 변화에 유연하고도 신속하게 대응하는 개발 방법론 진행하면서 프로그램을 시행해보고 고객으로부터 피드백 고객과 개발자의 지속적인 소통을 통하여 변화하는 요구사항을 신속하게 수용 팀원들과의 주기적인 회의 및 제품 시현을 통한 점검 종류 익스트림 프로그래밍(Extreme Programming, XP) : 좋은 실천 지침들을 적극적으로 적용 짝 프로그래밍(Pair Programming) : 두 사람이 짝이 되어 한 사람이 코딩, 다른 사람은 검사 수행 테스트 주도 개발(Test Driven Development, TDD) : 두 사람이 짝이 되어 한 사람이 코딩, 다른 사람은 검사 수행 스크럼(Scrum) : 규칙과 팀 역할을 정의하여 1~4주 단위의 ‘스프린트’로 작업 필요성 짧은 개발 주기로 인해 새로운 기능과 업데이트…

객체 지향 프로그래밍(Object Oriented Programming) → 컴퓨터 프로그램을 객체들의 모임으로 보는 프로그래밍 패러다임(현실 세계의 개체를 소프트웨어 개체로 모델링) - 복잡한 현실 세계의 개체나 개념을 단순화하여 중요한 특성에 초점을 맞추는 프로세스 - 데이터와 해당 데이터를 조작하는 함수를 하나의 객체로 묶어 외부로부터 접근을 제어하는 것 ⇒ 정보 은닉 & 보안 - 하위 클래스가 상위 클래스의 특성과 동작을 상속받는 개념 ⇒ 코드 일관성 및 유지보수 향상 - 같은 이름의 메서드나 연산자가 다양한 객체에 대해 다르게 작동할 수 있도록 하는 능력 ⇒ 인터페이스 통일성 유지 필요성 현실 세계의 복잡성을 모델링하는 데 도움 클래스와 상속을 통해 코드 재사용을 촉진 → 개발 시간 단축 및 일관성 유지 모듈화를 통해 독립적으로 개발 & 테스트 보안 강화 및 부작용 최소화 객체, 메서드, 속성 등의 의미 있는 용어를 사용하여 가독성 향상 설계 원리 (SOLID)…

메모이제이션 (Memoization) → 연산의 계산 결과를 메모리에 저장해두고, 동일한 계산이 필요할 때 이전에 저장한 값을 재사용하는 기법 useMemo 컴포넌트 내부에서 계산된 값 메모이제이션 이전 계산 값 재사용 계산 비용이 높은 연산 결과 캐싱하는 데 유용 useCallback 함수를 메모이제이션 불필요한 렌더링 방지 이벤트 핸들러 함수나 콜백 함수 메모이제이션 할 때 사용 React.memo 컴포넌트 자체를 메모이제이션 이전 렌더링 결과 재사용 컴포넌트 중복 렌더링 방지 필요성 복잡한 연산 수행 시 결과를 재사용함으로써 불필요한 자원 소모 줄임 동일한 계산 반복 수행 방지로 코드 실행 속도 향상 동일한 입력값에 대해 동일한 결과 반환으로 일관성 제공 중복 렌더링 방지 ⇒ 성능 향상 references 👉 https://velog.io/@hsk10271/TIL-30

Key Props → Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움 리액트 요소를 고유하게 식별하는 데 사용 key 값은 문자열 또는 숫자 동일한 리스트나 배열 내에서 고유해야 함 사용법 ⇒ key 값을 부여하지 않으면 error 발생 필요성 성능 최적화 : 변경된 부분만 업데이트하고 불필요한 렌더링 방지 유일성 보장 : key는 각 항목을 고유하게 식별 → key를 제대로 사용하지 않으면 예기치 않은 버그 또는 성능 문제 초래 references 👉 https://velog.io/@jenny87879/React-key-props

Test Driven Development(TDD) → 반복 테스트를 이용한 소프트웨어 방법론 코드 작성 전 작은 단위의 테스트 케이스 작성 작성한 테스트 케이스를 통과시키는 코드 작성 짧은 개발 주기 반복하는 개발 프로세스 단순한 설계 중요 개발 절차 - 실패하는 테스트 코드 작성 - 테스트 코드를 성공하기 위한 실제 코드 작성 - 리팩토링 수행 장점 코드 품질 향상 및 코드 정확성 보장 초기 오류 감소 및 디버깅 시간 단축 기능 단위 테스트로 빠른 피드백 가능 코드 사용법 문서화 안전한 리팩토링 제공 추가 기능 구현 용이 단점 초기에 테스트 작성으로 인해 많은 시간 소모 (생산성 저하) 특정 요구사항의 경우 테스트 케이스 작성 어려움

클린코드 & 리팩토링 & 시큐어코딩 클린코드 (Clean Code) → 이해하기 쉽고, 변경하기 쉬운 코드 사람이 읽고 이해하기 쉬워야 함 네이밍이 잘 되어야 함 중복이 없어야 함 의존성을 최대한 줄여야 함 클래스 혹은 메소드가 한가지 일만 처리해야 함 테스트 코드가 있어야 함 필요성 SW는 한 번 신규 개발되고 오랜 기간 유지보수됨 기존 코드에 추가 작업하는 시간이 압도적으로 많음 대부분의 시간을 기존 코드를 읽고, 이해하는 데 사용됨 ⇒ 클린코드는 코드리뷰, 디버깅 시간을 단축시킴 (효율 up) 리팩토링 (Refactoring) → 결과의 변경 없이 코드 구조 재조정 가독성 높이고 유지보수를 편하게 함 버그를 없애거나 기능을 추가하는 행위 아님 외부 동작을 바꾸지 않고 내부 논리/구조를 개선함 개선이 필요한 코드 이해하기 어려운 코드 수정하기 어려운 코드 확장하기 어려운 코드 필요성 소프트웨어의 유지보수를 하는 과정이 간단해짐 협업 시 코드를 공유하는 과정에서 어려…

메모리 논리적 주소 & 물리적 주소 논리적 주소 (Logical Address) 프로세스가 실행 중에 참조하는 주소 (가상 주소) CPU 명령어에 의해 생성 프로세스가 자신만의 독립된 메모리 공간을 가지는 것처럼 동작하게 함 OS가 각 프로세스에 가상 주소 공간 할당 물리적 주소 (Physical Address) 실제 메모리 하드웨어의 주소 (메모리에서 데이터가 저장되고 읽혀지는 위치) 논리적 주소가 MMU에 의해 변환되어 생성 실제 데이터가 저장되는 메모리 위치 나타냄 하드웨어와 OS에 의해 직접 접근되고 관리됨 MMU (Memory Management Unit) → 컴퓨터 시스템의 메모리 관리를 담당하는 하드웨어 ⇒ 프로세서와 실제 메모리 사이에 위치하며, 논리 메모리 주소를 물리적 메모리 주소로 변환하는 역할 기능 주소 변환(Address Translation) 가상 메모리 주소를 물리적 메모리 주소로 변환 이를 통해 프로세스는 자신만의 독립된 주소 공간 가짐 메모리…

파일 시스템 (File System) → 운영 체제가 저장 장치에서 데이터를 저장, 조직, 검색하는 방법을 관리하는 시스템 소프트웨어 커널 영역에서 동작 파일 CRUD 기능을 원활히 수행하기 위한 목적 계층적 디렉터리 구조 특징 데이터를 파일과 디렉터리 형태로 조직하여 사용자가 쉽게 접근 및 관리 가능 각 파일과 디렉터리의 크기, 생성 및 수정 시간, 소유자 정보 등의 메타데이터 저장 및 관리 파일과 디렉터리에 대한 읽기, 쓰기, 실행 권한을 설정하여 사용자별 접근 제어 디스크 공간 효율적으로 사용하기 위해 파일 할당 & 해제 관리 데이터 손상 방지 및 손상된 데이터 복구 기능 제공 텍스트 파일, 바이너리 파일, 디렉터리 등 다양한 파일 형식 지원 기능 파일 및 디렉터리 생성 및 삭제 파일 읽기 및 쓰기 저장 공간 할당 및 해제 파일 이름 및 경로 관리 파일 접근 제어 설정 데이터 무결성 및 복구 작동 원리 파일 저장 사용자가 파일을 저장하면 파일 시스템은 파일의 데이터를…

React Hooks Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. → 은 함수형 컴포넌트에서 사용하던 기능을 사용할 수 있게 해주는 함수 사용 배경 클래스형 컴포넌트는 문법이 어렵고, 코드의 재사용성이 낮으며 축소가 어려움 이러한 클래스형 컴포넌트의 단점을 보완하기 위해  등장 함수형 컴포넌트에서는 클래스형 컴포넌트의 장점인 State나 Life Cycle Method을 다루는 기능 사용 불가능 → 이를 해결하기 위해  등장 사용 규칙 Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다. 최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요. React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 …

클래스형 & 함수형 컴포넌트 클래스형 컴포넌트 (class component) class 키워드 필요 Component로 상속 필요 render() 메소드 필수 함수형 컴포넌트 (function component) state, lifeCycle 관련 기능 사용 불가능 → Hook 사용 Lifecycle mount : 컴포넌트가 생성될 때 클래스형 함수형 update : 컴포넌트가 업데이트 될 때 클래스형 함수형 unmount : 컴포넌트가 사라질 때 클래스형 함수형

페이지 교체 알고리즘 프로세스가 요구한 페이지가 현재 메모리에 없으면 페이지 부재 발생 페이지 부재가 발생 시 스왑 영역에서 페이지를 메모리로 가져옴 만약 메모리가 꽉 찼다면 메모리에 있는 페이지를 스왑 영역으로 보내야 함 → 스왑 영역으로 보낼 페이지를 결정하는 알고리즘 종류 FIFO (First-In-First-Out) 가장 간단한 페이지 교체 알고리즘으로, 가장 먼저 메모리에 들어온 페이지 교체 페이지 교체 순서는 페이지가 메모리에 도착한 순서대로 결정 교체되는 페이지가 최근에 사용된 페이지일지라도 교체될 수 있다는 단점 LRU (Least Recently Used) 가장 오랫동안 사용되지 않은 페이지를 교체 페이지가 사용될 때마다 해당 페이지의 사용 시간을 업데이트하고, 교체할 때 가장 오랫동안 사용되지 않은 페이지 선택 최적의 성능을 제공하지만 구현이 복잡하고 메모리 사용량이 크다는 단점 LFU (Least Frequently Used) 가장 적게 사용된 페이…

Paging & Segmentation 외부 단편화 : 물리적 메모리의 빈 공간으로 인해 발생하는 문제 내부 단편화 : 할당된 메모리의 내부 공간이 비효율적으로 사용되는 문제 Paging → 프로세스의 주소 공간을 고정된 사이즈의 페이지 단위로 나누어 물리적 메모리에 불연속적으로 할당하는 방식 물리적 메모리를 고정된 크기 블록인 으로 분할하고, 논리적 메모리를 동일한 크기의 로 분할 논리적 주소를 페이지 번호와 오프셋으로 나타냄 페이지와 프레임을 대응시키는 page mapping 과정 필요 페이지 테이블에 각 페이지 번호와 해당 페이지가 할당된 프레임의 시작 물리 주소 저장 구현이 간단하여 효율적인 메모리 사용 가능 연속적이지 않은 공간도 활용할 수 있기 때문에 외부 단편화 문제 해결 프로세스의 크기가 페이지 크기의 배수가 아닐 경우 마지막 페이지에 내부 단편화 발생 Segmentation → 프로세스를 서로 크기가 다른 논리적인 블록 단위인 세그먼트로 분할하…

라이프사이클 (Lifecycle) 컴포넌트 생명 주기 (Component Lifecycle) : 생성(mounting) → 업데이트(updating) → 제거(unmounting) mount : 컴포넌트가 생성될 때 update : 컴포넌트가 업데이트 될 때 가 바뀔 때 가 바뀔 때 부모 컴포넌트가 될 때 로 강제로 렌더링 트리거할 때 unmount : 컴포넌트가 사라질 때

라이프사이클 메서드 (Lifecycle Method) render 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드 메서드가 호출되면 와 의 값을 활용하여 아래의 것 중 하나를 반환 React 엘리먼트 배열과 Fragment Portal 문자열과 숫자 Booleans / null / undefined 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과 반환 mount constructor 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 됨 에 객체를 할당하여 지역 state를 초기화 인스턴트에 이벤트 처리 메서드를 바인딩 componentDidMount 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출 초기화 작업, 네트워크 요청하기 적절 update componentDidUpdate 갱신이 일어난 직후에 호출 이전과 현재의 props를 비교하여 네트워크 요청할 때 …

Race Condition → 두 개 이상의 프로세스/ 스레드들이 하나의 리소스에 동시에 접근하기 위해 경쟁하는 상태 발생 경우 커널 코드 실행 중에 인터럽트가 발생할 경우 프로세스가 시스템 콜을 하여 커널모드로 진입해서 작업을 수행하는 도중에 문맥 교환이 발생할 경우 멀티 프로세서에서 공유 메모리 내의 커널 데이터에 접근할 경우 문제 Mutual exclusion (상호 배제) : 한 번에 하나의 프로세스나 스레드만 공유 리소스에 접근할 수 있도록 하는 것 Race condition을 막기 위해서는 두 개 이상의 프로세스가 공용 데이터에 동시에 접근을 하는 것을 막아야 함 Deadlock (교착 상태) : 두 개 이상의 프로세스나 스레드가 서로가 공유 리소스를 해제하기를 기다리면서 진행하지 못하는 상황 교착 상태는 시스템 전체의 리소스 이용 불가능을 초래할 수 있으며, 올바른 동기화 기술을 통해 관리하거나 피해야 함 Starvation (기아 상태) : 프로세스나 스레드가…

세마포어 & 뮤텍스 세마포어 (Semaphore) 공유된 자원의 데이터를 여러 프로세스가 접근하는 것을 막는 것 연산 P(Produce): 세마포어 값을 감소시키는 연산. 만약 세마포어 값이 0보다 작으면 대기 V(Release): 세마포어 값을 증가시키는 연산. 다른 스레드가 대기 중이면 하나의 스레드를 깨움 일반적으로 양의 정수 값을 가지며, 이 값을 “카운터” 로 활용 일반적으로 비교적 긴 시간을 확보하는 리소스에 대해 이용 프로세스 간 통신(IPC)에 사용되거나 공유 자원에 대한 제한된 엑세스를 관리하는 데 유용 뮤텍스 (Mutex) 공유 리소스에 대한 동시 액세스를 허용하지 않는 동기화 도구 임계 영역을 가진 쓰레드들의 Running Time이 서로 겹치지 않게 각각 단독으로 실행하게 하는 기술 다중 프로세스들의 공유 리소스에 대한 접근을 조율하기 위해 locking과 unlocking 사용 뮤텍스를 확보하려는 스레드는 뮤텍스가 잠겨 있지 않을 때만 진행 가…

클로저 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. Lexical Scope 변수나 함수의 유효 범위를 결정하는 규칙 해당 변수나 함수가 코드에서 어디에 선언되었는지에 따라 스코프가 정적으로 결정 프로그램을 작성할 때 코드 구조에 따라 스코프 설정 이를 통해 변수와 함수가 어디서 유효한지 예측 가능 Closure → 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능 사용 이유 Private 변수/함수 : 변수와 함수를 외부에서 접근할 수 없도록 보호 가능 → 정보 은닉(Encapsulation) 구현 가능 지속성 : 함수가 선언될 때의 환경 기억 → 변수 값의 지속성을 유지하고, 다음 호출에서 사용 가능 콜백 함수 및 비동기 프로그래밍 : 콜백 함수로 전달되는 상태 정보 유지 및 비동기 작업에서 중요한 역할 모듈 패턴 : 모듈화된 코드를 작성 가능 → 코드의 구조화 및 재사용성 상승 메모리 관리 : …

동기 & 비동기  : 순서대로 일을 처리하는 방식  : 순서대로 일을 처리 하지 않고 빨리 처리할 수 있는 것들을 먼저 처리하는 방식 동기(Synchronous) 직렬적으로 작업 수행 요청을 보냈다면, 응답을 받아야 다음 동작 수행 가능 순차적으로 실행 어떤 작업이 수행중이라면 뒤의 작업은 대기 블로킹(작업 중단) 발생 비동기(Asynchronous) 병렬적으로 작업 수행 현재 작업의 종료여부와 무관하게 다음 작업 실행 완료 순서가 보장되지 않음 블로킹 발생하지 않음 비동기 방식이 필요 이유 → 자바스크립트는 동기 방식의 언어이지만, 비동기 방식이 필요하다. 예를 들어, 로딩되는 데 30초 이상이 걸린다고 할 때 웹 페이지는 이 동작이 끝날 때까지 화면에 나타나지 않거나 다음 동작을 수행하는데 지장을 주게 된다. 따라서 이런 상황을 방지하기 위해 비동기 방식이 필요하다. 응답성 향상 블로킹 발생 방지 더 나은 UX 제공 리소스 사용 최적화 비동기 방식 사용 Ca…

CPU 스케줄링 (CPU Scheduling) → 어떤 작업에 CPU를 배정할지 결정하는 것 ⇒ 다수의 프로세스가 효율적으로 실행되고, 자원을 효율적으로 활용할 수 있도록 종류 비선점 : 어떤 프로세스가 CPU를 점유하면 다른 프로세스가 이를 빼앗을 수 없는 방식 (짧은 작업에도 장기간 대기하는 경우 발생) 선입선출 스케줄링 (First-Come First-Served Scheduling) 먼저 도착한 프로세스 먼저 실행 실행 시간이 긴 프로세스가 먼저 도착하면 기다리는 시간이 길어질 수 있음 최단 작업 우선 스케줄링 (Shortest Job First Scheduling) 프로세스의 실행 시간을 미리 예측하여 실행 시간이 가장 짧은 프로세스 먼저 실행 최적의 성능을 제공 정확한 실행 시간 예측 필요 우선순위 스케줄링 (Priority Scheduling) CPU를 할당할 때 우선순위가 가장 높은 프로세스 선택 현재 실행 중인 프로세스 완료할 때까지 대기 최고 응답률 순서 스케줄…

Deadlock (교착 상태) → 두 개 이상의 프로세스나 스레드가 서로 상대방의 작업이 끝나기를 기다리며 무한히 대기하는 상황 발생 조건 상호 배제 (Mutual Exclusion) : 리소스는 한 번에 하나의 프로세스만 사용할 수 있어야 한다. (동시에 여러 프로세스가 리소스 공유 불가능) 점유 대기 (Hold and Wait) : 프로세스가 최소한 하나의 리소스를 보유하고 있으면서 다른 리소스를 얻기 위해 대기하고 있어야 한다. 비선점 (No Preemption) : 프로세스가 어떤 리소스를 이미 보유하고 있을 때, 해당 리소스를 다른 프로세스로부터 선점할 수 없어야 한다. 다른 프로세스는 해당 프로세스가 리소스를 자발적으로 반납할 때까지 대기해야 한다. 순환 대기 (Circular Wait) : 프로세스 간에 리소스 요청 순서가 사이클을 형성하도록 대기 관계가 형성되어야 한다. 한 프로세스가 다음 프로세스의 요청을 대기하고, 다음 프로세스는 그 다음 프로세스의 요청을…

호이스팅 JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 로 선언한 변수의 경우 호이스팅 시 로 변수를 초기화합니다. 반면 과 로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. → 코드가 실행되기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상 코드 실행 전에 변수 및 함수 선언이 메모리에 할당되어 해당 스코프 내에서 사용될 수 있도록 실제 할당은 선언 위치에 따라 결정 발생 이유 → 자바스크립트 변수 생성과 초기화(선언과 할당)가 분리되어 진행되기 때문 생성 단계: 변수와 함수 선언을 위한 메모리 공간 할당 실행 단계: 코드 순서대로 실행 할당 및 실제 변수 값 결정 변수 호이스팅 → 함수 스코프 : 함수 내에서 선언된 경우 함수 내에서만 유효한 범위를 가짐 ⇒ 해당 스코프 내에서 변수와 함수를 어디서든 사용 가능 → 변수가 호이스팅되어 선…

이벤트 위임 이벤트 위임(Event delegation) 하나의 좋은 예시는 일련의 리스트 아이템들입니다 — 만약 각각이 선택되었을 때 메시지를 띄우기(pop up)를 원한다면, 여러분은  이벤트 리스너를 부모 에 설정할 수 있고, 이벤트들은 리스트 아이템들에서 까지 올라갈 것입니다. → 이벤트 버블링/캡처링을 이용한 것으로, 여러 하위 요소마다 각각 이벤트 핸들러를 할당하지 않고, 공통되는 상위 요소에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방식 여러 개의 이벤트 리스너를 최소화하여 효율적 코드 간결, 유지보수 용이 더 적은 이벤트 리스너 → 메모리 사용 최적화 DOM 계층의 다양한 수준에서 이벤트 처리 가능 이벤트 위임 X → 반복문을 통해 각 li 요소마다 이벤트 리스너 추가 이벤트 위임 O → 모든 li 요소의 공통 상위 요소인 ul에 이벤트 리스너 추가 ⇒ li 요소 클릭 시 ul 요소로 이벤트 버블링 references 👉 https://c4u…

IPC Inter Process Communication: 프로세스 간 통신을 위한 메커니즘 IPC 종류 Anonymous PIPE 하나의 프로세스는 데이터를 쓰기만, 다른 하나는 데이터를 읽기만 가능 한쪽 방향으로만 통신 가능 통신을 할 프로세스가 명확하게 알 수 있는 경우 사용 구현이 매우 간단하다는 장점 Named PIPE 부모 프로세스와 무관하게 전혀 다른 모든 프로세스들 사이에서 통신 가능 통신을 위해 이름이 있는 파일 사용 단방향 통신만 가능하지만 이름이 있는 파일 두 개를 사용해 해결 가능 Message Queue Named PIPE와 입출력 방식 동일 Named PIPE는 데이터의 흐름, 메시지 큐는 메모리 공간이라는 차이 메시지 큐에 쓸 데이터에 번호를 붙임으로써 여러 개의 프로세스가 동시에 데이터를 쉽게 다룸 Shared Memory 데이터 자체를 공유하도록 지원하는 설비 별다른 통신 없이 직접적으로 데이터에 접근하기 때문에 IPC 중 가장 속도 빠름 프로세스가…

PCB & Context Switching Process Control Block: 특정한 프로세스를 관리할 필요가 있는 정보를 포함하는 운영체제 커널의 자료구조 Context Switching: 현재 진행하고 있는 프로세스의 상태를 PCB에 저장하고 다음 진행할 프로세스의 정보를 PCB에서 읽어 적용하는 과정 PCB 운영체제가 프로세스를 제어하기 위해 정보를 저장해 놓는 곳 프로세스의 상태 정보를 저장하는 구조체 프로세스의 상태 관리와 문맥 교환(Context Switching)을 위해 필요 프로세스가 생성될 때마다 고유의 PCB 생성 & 프로세스가 완료되면 PCB 제거 구성 Process ID : 프로세스의 고유 ID Process State : 프로세스의 상태 (Create, Ready, Running 등등) Program Counter : 프로세스를 위해 실행될 다음 명령어의 주소 Register : Accumulator, General R…

버블링 & 캡처링 이벤트 전파 계층적 구조 → 연쇄적 이벤트 흐름 발생 ⇒ 이벤트 전파(Event Propagation) : 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정 버블링(Bubbling) : 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파 (기본값) 캡쳐링(Capturing) : 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달 버블링 → 한 요소에 이벤트가 발생되면, 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파 a 요소 클릭했을 때 stopPropagation 전파를 멈추는 메서드 a 요소 클릭했을 때 캡처링 → 한 요소에 이벤트가 발생되면, 그 요소의 자손 요소의 이벤트도 같이 발생되는 이벤트 전파 a 요소 클릭했을 때 → capture를 true로 설정한 parent 요소의 이벤트가 먼저 동작 a 요소 클릭했을 때 → 바깥쪽에서…

var let const var  문은 변수를 선언하고, 선택적으로 초기화할 수 있습니다. 변수 선언하는 예약어 같은 변수명 재선언 가능 예약어 변수명으로 사용 가능 함수 레벨 스코프 최근 거의 사용 X let  명령문은 블록 스코프의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있습니다. 변수 선언하는 예약어 같은 변수명 재선언 불가능 예약어 변수명으로 사용 불가능 블록 레벨 스코프 const  선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 상수 선언하는 예약어 초기화 필수 재선언 불가능 재할당 불가능 참조 값 내부 값 바꾸는 건 가능 블록 레벨 스코프

인터럽트 Interrupt: CPU가 프로그램을 실행하고 있을 때, 입출력 하드웨어 등의 장치 또는 예외상황이 발생하여 처리가 필요한 경우 CPU에게 알려 처리할 수 있도록 하는 것. → CPU의 작업을 방해하는 신호 종류 하드웨어 인터럽트 : CPU가 아닌 다른 하드웨어 장치가 CPU에 어떤 사실을 알려주거나 CPU 서비스를 요청해야할 경우 발생 외부 인터럽트 : 외부 입출력 장치에 의해 발생 전원 이상 인터럽트 : 정전, 파워 이상 기계 착오 인터럽트 : CPU 기능 오류 외부 신호 인터럽트 : 타이머, 키보드, 외부 장치 인터럽트 입출력 인터럽트 : 입출력 데이터 오류, 입출력 장치의 데이터 전송 요구, 다음 동작 수행 요구 내부 인터럽트 : 잘못된 명령이나 잘못된 데이터 사용할 때 발생 (Trap) 프로그램 검사 입터럽트 : 0으로 나눈 경우, Overflow/Underflow, 기타 예외 상황 소프트웨어 인터럽트 : 프로그램 처리 중 명령 요…

시스템 콜 System Call : 운영 체제의 커널이 제공하는 서비스에 대해, 응용 프로그램의 요청에 따라 커널에 접근하기 위한 인터페이스 사용자 모드 : 하드웨어에 직접 접근 불가능 (시스템 보호 목적) 커널 모드 : 모든 시스템 메모리와 CPU에 접근 가능, 하드웨어에 직접 접근 가능 → 사용자 모드에서 커널 모드로 전환하기 위해 필요한 인터페이스 ⇒ 시스템 콜 작동 사용자 프로세스가 시스템 콜 → 커널 모드 진입 커널: 내부적으로 시스템 콜 구분하기 위해 기능 별로 고유번호 할당하고 해당 번호의 제어 루틴 정의 커널: 요청 받은 시스템 콜에 대응하는 번호 확인하고 해당 서비스 루틴 호출 커널: 서비스 루틴 처리하고 사용자 모드로 전환 유형 프로세스 제어 프로세스 실행, 생성, 대기 등 fork() : child 프로세스 생성 exec() : 프로그램 실행 wait() : 대기 exit() : 현재 프로세스 종료 파일 …

async & await 객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 를 사용하여 결과를 반환합니다. → Promise의 단점을 보완해주는 비동기 처리 방식 async 함수 선언 시 함수 앞에 promise 객체 반환 awiat promise 객체 앞에 promise가 완료될 때까지 대기 async 함수 내부에서만 사용 가능 사용 await 키워드를 붙인 비동기 작업이 완료될 때까지 대기했다가 다음 작업을 수행한다. Promise VS async/await Promise → promise 체이닝으로 인한 의 가능성 (가독성 저하) → 문을 통해 에러 핸들링 async/await → 중첩 없이 간결하게 표현 가능 → 문을 통해 에러 핸들링 (에러 발생 위치 알기 쉬움) → 비동기 작업 흐름을 명확하게 보여줌 try-catch 블록 실행 블록 내에서 예…

프로세스 & 스레드 정의 Process = 독립적인 실행 단위(실행 중에 있는 프로그램) Thread = 프로세스 내부에서 실행되는 작은 실행 단위 Process 구조 → code, data, stack, heap 독립적으로 할당 특징 독립성 : 각 프로세스는 고유한 메모리 공간과 리소스를 가지며, 다른 프로세스의 메모리나 리소스에 직접 접근할 수 없음 오류 격리 : 하나의 프로세스에서 오류나 충돌이 발생해도 다른 프로세스에 영향을 주지 않음 통신 : 파이프, 소켓, 메시지 큐와 같은 IPC를 사용하여 서로 통신함 생성 부하 : 리소스가 많이 들고 시간이 오래 걸림 Thread 구조 → stack만 할당받아 복사하고 code, data, heap은 프로세스내의 다른 스레드들과 공유 특징 독립성: 동일한 프로세스 내 스레드는 동일한 메모리 공간을 공유하므로 서로의 데이터에 직접 접근하고 수정할 수 있음 오류 격리: 스레드 내에서 오류가 발생하…

프로세스 주소 공간 구조 code (text) 영역 CPU가 해석 가능한 기계어 형태로 프로그램 코드가 저장되어 있는 공간 Read-Only (프로그램 수정 방지) 같은 프로그램으로 실행된 여러 프로세스는 동일한 코드 data 영역 코드가 실행되면서 사용하는 전역 변수, 정적 변수 데이터가 저장되어 있는 공간 프로그램 시작과 함께 할당, 프로그램 종료 시 소멸 stack 영역 지역 변수, 매개변수 등 호출한 함수가 종료되면 되돌아올 임시적인 자료를 저장하는 독립적인 공간 함수 호출과 함께 할당, 함수 호출 완료 시 소멸 메모리의 높은 주소 → 낮은 주소로 할당 함수가 stack 영역을 초과하면 stack overflow 에러 발생 heap 영역 생성자, 인스턴스와 같이 동적으로 할당되는 데이터들을 저장하는 공간 런타임에 따라 크기 결정 동적으로 할당 / 해제 메모리의 낮은 주소 → 높은 주소로 할당

Promise → 콜백 함수의 단점(콜백지옥)을 보완하기 위해 ES6에 도입된 비동기 처리에 사용되는 객체  객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. 상태 대기(pending) 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled) 연산이 성공적으로 완료 → 결과값 반환 거부(rejected) 연산이 실패 → 에러 반환 메서드 promise.then() resolve / reject 상태일 때 호출 매개변수: resolved일 때 실행할 함수, rejected일 때 실행할 함수 promise.catch() rejected 상태이거나 에러가 발생했을 때 실행(에러 핸들링) 매개변수: 에러가 발생했을 때 실행할 함수 promise.finally() Promise의 resolve / reject 결과와 상관 없이 지정된 함수 실행 Callback VS Promise Callback → 콜백이 중첩되면서 콜백 지옥 발생 가능…

운영체제 정의 컴퓨터 시스템의 하드웨어, 소프트웨어적인 자원들을 효율적으로 운영 및 관리함으로써 사용자가 컴퓨터를 편리하고, 효과적으로 사용할 수 있도록 하는 시스템 소프트웨어. 사용자 및 다른 소프트웨어와 하드웨어를 연결하는 중개자 역할을 해주는 프로그램. 목적 자원 관리 여러 응용 프로그램이 자원을 요청하면 적절한 순서로 배분하고 회수하여 자원을 효율적으로 관리한다. ⇒ 효율성 자원 보호 CPU, 메모리 등에 대한 사용자와 응용 프로그램의 직접 접근을 막는다. ⇒ 안정성 하드웨어 인터페이스 제공 다양한 제조사, 각기 다른 구성으로 되어있는 마우스, 키보드 등을 복잡한 과정없이 사용할 수 있도록 하드웨어 인터페이스를 제공한다. ⇒ 확장성 소프트웨어 인퍼테이스 제공 사용자가 운영체제를 편리하게 사용하기 위해 제공되는 것으로, 대부분의 작업을 마우스로 수행하거나 스마트폰의 터치스크린 등을 통해 제공되는 기능을 말한다. ⇒ 편리성 기능 프로세스 관리 OS에서 동시에 실행되…

ARM Processor ARM = Advanced RISC Machine Processor = 명령어를 처리하고 반응하기 위한 논리회로 ARM 프로세서는 다양한 휴대기기, 임베디드 기기에서 가장 많이 사용되는 32bit 프로세서이다. ARM는 RISC 아키텍처를 사용한다. 장점 전력 소모량 적음 ⭐️ 확장성 → 마이크로 컨트롤러 ~ 다중 코어 프로세서 다양한 칩으로 사용 가능 스마트폰, 태블릿, 노트북, 웨어러블 기기, 임베디드 등 광범위한 사용 RISC RISC = Reduced Instruction Set Computer → 적은 수의 명령어를 수행하도록 설계된 프로세서 간단하고 고정된 길이의 명령어 세트 → 빠름 레지스터 활용 → 메모리 접근 최소화 및 성능 향상 파이프라이닝을 사용하여 병렬적으로 단계를 겹쳐서 처리 → 처리량 향상 단일 사이클 실행 → 효율성 향상 references 👉 https://code-lab1.tistory.com/174

Callback Function 콜백 함수 콜백함수: 파라미터로 함수를 전달하는 함수 → 파라미터로 함수를 전달 받아 함수의 내부에서 실행하는 함수이다. 콜백함수를 사용하는 대표적인 이유는, 동기와 비동기를 함께 썼을 때 순서를 보장할 수 있기 때문이다. 콜백을 중첩해서 원하는 순서대로 실행하도록 코드를 짤 수도 있다. 콜백이 대표적으로 쓰이는 곳은 데이터 통신이다. 사용 원칙 익명 함수 사용 함수의 이름이 없는 익명 함수를 사용한다. 함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다. 함수 이름 전달 자바스크립트는 함수 자체를 객체로서 전달이 가능한 특징이 있기에, 정의해둔 함수를 ()를 붙이지 않고 함수 이름만 호출 함수의 인자로 전달하는 방식으로 사용한다. 콜백 지옥 콜백지옥: 콜백 함수가 중첩되어 가독성이 떨어지는 형태 비동기 호출이 자주 일어나는 경우 콜백 지옥이 발생하기 쉽다. 콜백지옥이 있다면 가독성이 좋지 않고 유지보수 및 수정이 어려워진다. 이를…

고정 소수점 & 부동 소수점 컴퓨터에서 실수를 표현하는 방법 → 고정 소수점 / 부동 소수점 고정 소수점 소수부의 자릿수를 미리 정해 고정된 자릿수의 소수를 표현 부호비트(1비트) - 실수가 음수면 부호비트에 1, 양수면 0 넣음 정수부(15비트) 소수부(16비트) 정수부와 소수부의 경계를 소수점의 위치로 생각하고 2진수로 변환된 수 넣음 정수부와 소수부의 자릿수가 크지 않으므로 표현할 수 있는 범위가 적음 부동 소수점 가수부와 지수부로 나누어 표현 부호비트(1비트) - 실수가 음수면 부호비트에 1, 양수면 0 넣음 지수부(8비트) - 정규화 과정에서 얻어낸 지수에 bias를 더한 값 가수부(23비트) - 소수 부분의 값 매우 큰 실수까지 표현 가능 대부분의 시스템에서 사용 중인 방식 오차 발생 가능성 references 👉 https://gguguk.github.io/posts/fixed_point_and_floating_point/

패리티 비트 & 해밍 코드 패리티 비트 (Parity Bit) 정보 전달 과정에서 오류가 생겼는지 검사하기 위해 추가하는 비트 → 오류 검출 1바이트(8비트) 구조에서 패리티 비트는 7비트 크기의 ASCII 코드를 제외한 나머지 1비트이다. 짝수 패리티 → 데이터의 모든 1의 개수를 짝수로 맞춘다 홀수 패리티 → 데이터의 모든 1의 개수를 홀수로 맞춘다 특징 2개의 bit 데이터가 손실되면 알아차릴 수 없다. 오류 검출만 할 뿐 수정하지는 않는다. 해밍 코드 (Hamming Code) 데이터 전송 시, 1비트의 오류를 정정할 수 있는 자기 오류정정 코드 → 오류 정정 패리티 비트를 보고, 1비트에 대한 오류를 정정할 곳을 찾아 수정할 수 있다. 생성 규칙 d: 데이터 비트 수 p: 패리티 비트 수 2^p ≥ d + p + 1 를 만족하는 p의 최소 값 짝수 패리티의 해밍 코드가 0011011일때, 오류 수정 d: 4, p: 3 2의 n승 번째 자리인 1, 2, 4번째 자…

Semantic Markup 정의 시맨틱이란 “의미론적인”이란 뜻을 가지며 마크업이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 이란 의미를 잘 전달하도록 HTML 문서를 작성하는 것을 말한다. 작성 방법 → 태그를 용도에 맞게 사용하여 작성한다. 헤더/푸터에  와  사용 메인 컨텐츠에  과  사용 독립적인 컨텐츠에  사용 최상위 제목으로  사용 순서가 없는 목록으로  과  사용 내비게이션에  사용 주요 콘텐츠 이외의 참고가 될 수 컨텐츠에 사용 사용 이유 웹 접근성 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미있는 마크업을 통해 그 의미를 더 잘 파악할 수 있다. 코드 가독성 의미 없는 div를 전부 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 쉽고, 유지 보수가 용이하다. 검색엔진 최적화 (SEO) 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기에 검색엔진 최적화에 유리하다.

display 태그는 컨텐츠 크기와 상관 없이 한 줄을 차지하는 태그인  요소와 컨텐츠 크기만큼 차지하는 태그인  요소가 있다. 너비와 높이를 지정해주는 width, height 속성은 block 요소만 사용 가능하다. inline 요소는 적용해도 변화가 없다. 이런 특성을 변경해주는 속성이 이다. 정의 block 컨텐츠 크기와 상관 없이 한 줄을 차지. 너비와 높이를 지정할 수 있다. p, div, ul, li, h1-h6 inline 컨텐츠 크기만큼 차지. width, height 속성을 적용해도 변화가 없다. span, a, img, button display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다. 속성 외부 속성  : 요소를 사라지게 한다.  : block 요소를 inline 요소처럼 사용한다.  : inline 요소를 block 요소처럼 사용한다.  :…

Cache Memory 캐시 메모리 정의 → 컴퓨터 시스템의 성능을 향상시키기 위해 별도로 탑재된 캐시 전용 메모리. 시간을 절약하기 위해 데이터를 임시로 저장하는 고속 기억 장치이다. 컴퓨터 메모리에 한계를 극복하기 위해 캐시가 등장하였다. 캐시 메모리는 데이터에 접근하는 속도를 높여 CPU를 효율적으로 사용할 수 있다. 캐시 메모리 구조 캐시의 용량과 성능이 증가하면서 ‘캐시의 캐시’로 사용되는 메모리가 추가 되었고, 이것을 순서대로 L1, L2, L3라고 한다. L1 가장 고성능, 고가의 작은 회로 사용 CPU에 직접 데이터를 공급하기에 빠른 접근 지연 시간이 중요 L1 캐시에서 데이터를 먼저 찾은 후에 L2 캐시로 이동 L2 L1 캐시에서 데이터를 가져가기 위한 캐시로 사용 L1 캐시보다 용량이 크지만 느림 L3 CPU가 아닌 메인보드에 내장되는 경우 많음 L3 캐시도 L2 캐시와 동일한 역할 L2 캐시로 충분하면 사용되지 않음 캐시 메모리 작동 원리 → 캐시의…

CPU 작동 원리 CPU 구성 연산장치(ALU) 산술 연산 & 논리 연산 수행하는 장치 제어장치(Control Unit) 명령어를 순서대로 실행할 수 있도록 제어하는 장치 레지스터(Register) 명령어 주소, 코드, 연산에 필요한 데이터, 연산 결과 등을 임시로 저장하는 고속 기억장치 동작 과정 주기억장치가 입력장치에서 입력받은 데이터나, 보조기억장치에 저장된 프로그램을 읽어온다. CPU가 프로그램을 실행하기 위해 주기억장치에 저장된 프로그램 명령어와 데이터를 읽어와 처리하고, 처리 결과를 다시 주기억장치에 저장한다. 주기억장치가 처리 결과를 보조기억장치에 저장하거나 출력장치로 보낸다. 제어 장치가 위 1 ~ 3 과정에서 명령어가 순서대로 실행되도록 각 장치를 제어한다. 명령어 세트 → CPU가 실행할 명령어의 집합 연산 코드 (OpCode) : 실행할 연산 피연산자 (Operand) : 필요한 데이터 / 저장 위치 references 👉 https://velog.io…

position 정의 CSS  속성은 문서 상에 요소를 배치하는 방법을 지정한다. 속성 값 static 기본 값. 요소를 일반적인 문서 흐름에 따라 배치하며, top, right, bottom, left, z-index 속성이 아무런 영향을 주지 않는다. relative 요소를 일반적인 문서 흐름에 따라 배치하며, top, right, bottom, left 값에 따라 offset을 적용한다. offset은 다른 요소에는 영향을 주지 않아 레이아웃에서 요소가 차지하는 공간은 static과 같다. z-index 값이 auto가 아니라면 새로운 쌓임 맥락을 생성한다. absolute 요소를 일반적인 문서 흐름에서 제거하고, 레이아웃에 공간도 배정하지 않는다. 가장 가까운 static이 아닌 다른 포지션 값을 가진 부모를 기준으로 상대적으로 배치한다. 상위 요소 중 static이 없을 시 초기 컨테이닝 블록을 기준으로 삼는다. 최종 위치는 top, right, bottom, l…

SCSS 정의 란 CSS pre-processor(전처리기)로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다. 사용 중괄호와 세미콜론을 모두 사용한다. 특징 변수(Variable) 할당 자주 사용하는 속상 값을 변수로 지정하여 재사용할 수 있다. 중첩(Nesting) 구문 중첩 구문을 사용해 가독성을 높일 수 있다. 모듈화(Modularity) 를 사용하여 파일을 모듈화 할 수 있다. 믹스인(Mixins) 함수처럼 default parameter를 지정할 수 있고, parameter를 받아 속성을 부여할 수 있다. 확장 / 상속 (Extend / Inheritance) 를 사용하여 scss 속성 집합을 상속 받을 수 있다. 연산자(Operators) div, random, max, min, sin, cos 등 여러 가지 수학적 기능을 사용할 수 있다. 장점 선택자를 중첩하여 반복되는 부모 요소 사용 감소 …

컴퓨터 구조 기초 폰 노이만 구조 정의 오늘날의 컴퓨터는 대부분 를 따른다. 폰 노이만 구조는 크게 CPU - Memory - Program로 구성된다. CPU와 메모리를 분히라여 명령어를 따로 저장하는 프로그램 내장 방식이다. 정의 명령어 가져오기 (IF, Instruction Fetch) : 기억장치로부터 명령어를 가져온다. 명령어 해석 (ID, Instruction Decode) : 앞서 가져온 명령어가 어떤 명령어인지 해석을 진행한다. 피연산자 인출(OF,Operands Fetch) : 명령의 실행에 필요한 정보를 기억장치에 접근해 가져온다. 명령어 실행 (EX, Instruction Execution) : 앞서 가져온 연산자와 데이터를 가지고 연산을 수행하고 저장한다. 인터럽트 체크 👉🏻 작업을 수행하던 중 인터럽트가 발생했을 때의 처리과정 컴퓨터는 수행하던 일을 중지하고 현재 상태 (CPU 내부의 레지스터 값 등)를 보관한다. 발생한 인터럽트를 처리하기 위해 인터럽…

컴퓨터의 구성 : 기계적 장치 중앙처리장치(CPU) : 컴퓨터 시스템 전체를 제어하는 장치로서, 입력장치에서 데이터를 입력 받아 처리한 후 출력장치와 기억장치로 데이터를 전달 : 산술 연산(사칙연산)과 논리연산(참과 거짓 판단)을 수행하는 장치 : CPU 내부에서 일어나는 모든 작업 통제 및 관리 : 연산 중간 값, 명령어 등 일시적으로 저장하는 임시 기억 장치 기억장치(Memory) : 컴퓨터 시스템에서 수행되는 프로그램과 수행에 필요한 데이터를 기억하는 장치 RAM : 반영구적으로 데이터를 저장하고 보존할 수 있는 장치 하드 디스크, 플로피 디스크, CD-ROM, DVD 입출력장치(I/O) : 컴퓨터에서 처리할 데이터와 정보를 외부에서 입력해주는 역할 마우스, 키보드, 마이크 : 컴퓨터 내부에서 처리된 결과를 사용자에게 전달해주는 역할 프린트, 스피커, 모니터 : 하드웨어의 동작을 제시하고 지시하는 프로그램 시스템 소프트웨어 : 사용자가 컴퓨터를 효율적으로 사용하기…

우아한테크코스 프론트엔드 5기 프리코스 회고 우여곡절 많았던 우테코 5기 프리코스 회고를 적어본다..! 1차 코테에서 광탈했던 4기와 다르게 이번 5기는 프리코스를 지원자 모두가 참여할 수 있었기에, 4주 동안 미션을 진행하며 정신없는 나날들을 보냈다. 최종 코테까지 가지 못하더라도 그만큼 얻어 가는 것이 많았으니 그 내용들을 블로그에 기록하려고 한다. 세 단어로 이번 프리코스를 정의할 수 있을 것 같다. ✨ #도전 #몰입 #경험 🥊도전 클래스형 프로그래밍 함수형 프로그래밍에 익숙해져 있어 클래스형 프로그래밍으로 미션을 진행해야 하는 것이 어렵게 느껴졌다. 클래스, 생성자, 객체 생성을 몇 년 만에 해보려니 감이 안 잡혀 헤매기도 했고 특히 생성자를 사용하는 것이 낯설어 그 부분에서 오류도 많이 겪었다. 그래도 미션을 진행하면서 점차 익숙해졌고, 마지막 미션쯤에는 클래스형 프로그래밍에 조금 다가간 기분이 들었다. 리팩토링 리팩토링을 해본 경험이 거의 없었는데 좋은 코드가…

UMC React Study 7주차 🤝리액트로 협업하기 회사에서 인수인계 받은 코드가 일반적이지 않고 이해하기 어렵다면? 동료 개발자가 내 코드를 이해하는데 너무 오랜 시간이 소요된다고 불편함을 토로하면? 위와 같은 문제들을 회사에 가서 협업을 본격적으로 하기 시작하면서 많이 발생한다. 협업을 위해 코딩 컨벤션에 익숙해지는 것이 중요하다. 코딩 컨벤션 코딩 컨벤션(Coding Conventions)은 협업 시 유지보수 및 가독성, 코드 이해를 위해 지켜지는 개발자들 사이의 규칙을 의미한다. 코딩 컨벤션은 규칙이기 때문에 지키지 않는다고 에러가 발생하지는 않는다. 팀 혹은 회사마다 각기 다양한 코딩 컨벤션들을 볼 수 있다. ☘️ 뱅크샐러드 웹 코딩 컨벤션 ☘️ 카카오 개발자의 팀 코딩 컨벤션에 대한 고찰 ☘️ 리액트 코딩 컨벤션 예시 소셜 로그인 : 인증코드 요청 및 받기 : 카카오 서버로부터 받은 인증 코드를 로 전달 : 인증 코드로 토큰 요청 및 받기 …

UMC React Study 6주차 🌐React Network 서버(Server) Server = Serve + -er : 서브하는 사람 실생활에서 서브하는 사람을 종업원(홀 알바)로 비유할 수 있다. 손님이 많은 경우에 홀 알바를 고용하는 것처럼, 서버 또한 클라이언트가 많아야 존재 이유가 있다. Server : Client = 1 : N 네트워크 통신의 흐름 손님 = Client Android, iOS, Safari, Chrome, Firefox 홀 알바 = Web Server Apache, Nginx 주방 = Backend Language PHP → Laravel , codeigniter ASP → ASP.net JSP → Spring, Spring boot JS → Node.js Python → Django 스마트 냉장고 시스템 = DBMS MySQL, MongoDB, MSSQL, Oracle 식료품 창조 = DB 네트워크 통신 시 클라이언트가 …

UMC React Study 5주차 🌳상태관리 라이브러리의 필요성 React.js는 단방향 데이터 흐름을 가진다. 부모 컴포넌트에서 자식 컴포넌트 방향으로 를 통해 데이터를 전달하는 것이 일반적이다. 이러한 특징은 서비스의 구조를 직관적으로 만들어주지만, 몇 가지 비효율적인 특징도 발생한다. 1-depth 사이의 부모-자식 컴포넌트 간에 함수를 전달하여 state를 끌어올리는 것은 간단할 수 있다. 하지만 만약 여러 depth 차이가 나는 컴포넌트 간에 state를 전달하려면 쓸데없이 state가 전달되는 bridge 컴포넌트가 반드시 존재해야 해서 비효율적이다. 또한, 여러 컴포넌트에서 동일한 state 값을 사용하고 싶은 경우에 state를 local storage에 저장하여 사용 할 수도 있지만, 변화를 즉시 화면에 반영해줘야 하는 경우에는 state를 모두 공유해야 하는 번거로움이 생긴다. 최상위 부모에 state를 정의해두고, 해당 state를 공유하기를 …

UMC React Study 4주차 🎨CSS-technology CSS-in-JS 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법. 최근 웹 애플리케이션을 여러 개의 재활용이 가능한 빌링 블록으로 분리하여 개발하는 컴포넌트 기반 방법이 주가 되고 있다. , : styled-components , : CSS-Modules CSS-Frameworks 사용자 친화적인 UI를 그대로 가져다가 쓸 수 있으며, 개발 속도 향상 및 간결한 CSS 코드 작성이 가능하다. Tailwind CSS React Bootstrap Ant Design Semantic UI SCSS CSS를 전처리 해주는 기능을 제공하며, CSS Preprocessor라고 부르기도 한다. CSS의 단점을 보완하기 위한 CSS의 확장으로 나온 스크립트 언어이다. 기존의 복잡한 CSS 코드를 쉽게 입력하고, CSS가 동작하기 전에 CSS로 변환시켜준다. CSS…

UMC React Study 3주차 🎡리액트 라우팅(React Routing) 라우팅(Routing)이란, 사용자가 요청한 URL에 맞는 페이지를 보여주는 것이다. 리액트는 SPA 방식으로 렌더링하기 때문에 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태로 동작한다. 은 신규 페이지를 불러오지 않는 상황에서 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다. 설치 주요 요소 : 라우팅에 포함시킬 페이지들은 모두 컴포넌트로 감싸줘야 한다. : 컴포넌트는 여러 Route를 감싸서 그중 규칙이 일치하는 Route 단 하나만을 렌더링 시켜주는 역할을 한다. : 모든 Route에 공통으로 들어가는 요소가 있다면, 밖으로 빼줘야 한다. (ex-Header.jsx) : 태그의 속성에는 경로, 속성에는 해당 경로에 띄워줄 컴포넌트를 넣어준다. : 특정 컴포넌트에 여러 경로를 매칭하고 …

2022년 7~8월 회고 정신 없었던 여름🌊 원래 매달 월 말 회고를 작성하며 부족했던 부분들은 돌아보는 것을 목표했는데 7월은 회고를 작성하지 못했다…! 블로그 포스팅도, 알고리즘 풀이도 못할 만큼 정신없는 여름이었다.. 많이 아프기도 했고.. (사진에서 스포) 하지만 그만큼 그동안 해보지 못했던 경험들을 할 수 있어서 정말 정말 의미 있는 시간들이었다. 특히 매년 힘든 일이 생겨서 무서워했던 계절인 여름을 잘 이겨내고 또 성장한 것 같은 기분이 들어 뿌듯했다.✌🏻 이제 시간이 생겼으니 밀렸던 포스팅과 공부들을 다시 열심히 해야겠다!🏃🏻‍♀️ UMC 2기 프로젝트🖨 UMC 2기 프로젝트를 마쳤다! 여태 이론 공부나 알고리즘 풀이만 하다가 개발을 하니 역시 너무 재밌었다. 리액트 스터디를 한 후 개발을 하니 도움이 많이 되기도 했고, 제대로 된 API 통신을 처음 해보며 오류를 많이 겪고 헤맨 만큼 공부가 많이 되었다. 협업이 얼마나 즐거운지 경험해 봤기에 이번 프로젝트가 …

UMC React Study 2주차 🪝 Hooks Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. 클래스형 컴포넌트는 문법이 어렵고, 코드의 재사용성이 낮으며 축소가 어렵다. 이러한 클래스형 컴포넌트의 단점을 보완하기 위해 가 등장하였다. 하지만 함수형 컴포넌트에서는 클래스형 컴포넌트의 장점인 State나 Life Cycle Method을 다루는 기능을 사용하지 못한다. 이를 해결하기 위해 이 등장했다. 은 함수형 컴포넌트에서 state와 lifecycle 기능을 사용할 수 있게 해주는 함수이다. Hooks의 대표적인 기능인 와 를 살펴보도록 하자. 🧘🏻‍♀️ useState 지난 시간에 배웠던 가 컴포넌트의 외부 input 값이라면, 는 컴포넌트 내부 input 값이라고 할 수 있다. 함수형 컴포넌트는 리렌더링될 때 내부의 모든 코드가 재실행되기 때문에 …

2022년 6월 회고 정처기 실기 합격🎖 2022년 5월 7일 정보처리기사 실기 시험을 봤다. 한 달 조금 넘는 시간 동안 총 12과목을 공부해야 했고, 아는 내용이어도 서술형으로 풀어 쓰는 건 정말 쉽지가 않았다.. 양이 많아서 어디서 나올지 예측이 안 돼서 너무 걱정이 됐던 실기 시험.😂 사실 시험지를 받자마자 1번부터 처음 보는 내용이라 아, 떨어졌구나..하며 시험을 봤고, 가답안으로 채점을 해보니 딱 10 문제를 틀린 상황이었다..ㅎㅎ 부분 점수가 있다는 이야기는 들었지만, 기준을 공개하지 않아 내가 붙은지 떨어진지 확신할 수 없는 상황이기에 결국 합격 발표까지 기다리는 수밖에 없었다. 무려 한 달 넘게 기다려 결과를 조회한 결과..! 합격했다!🎉 합격 기준인 60점에 간당간당한 점수였지만 그래도 필기·실기 둘 다 한 번에 합격한 게 어디인가..!! 나도 이제 정보처리기사 자격증 있는 사람이라고요.😎 리액트 스터디🛫 UMC 지부 내에서 여름방학 동안 리액트 …

Git & GitHub 실습 - 브랜치 & 협업 branch 각자 브랜치에서 따로 개발한 후 merge(병합)하는 것이 더 편리하다. 이때 merge해달라는 요청이 pull request이다. PR을 수락하면 브랜치가 합쳐지면서 merge가 된다. branch 목록 현재 생성되어 있는 브랜치의 목록을 본다. branch 생성 new_branch라는 새로운 브랜치를 만든다. branch 이동 branch_name이라는 브랜치로 이동한다. branch push 특정 브랜치를 깃허브에 푸시한다. (로컬 ➡️ 깃허브) branch pull 브랜치를 깃허브에서 가져와서 최신화한다. (깃허브 ➡️ 로컬) branch 병합 합쳐주고 싶은 브랜치를 선택하여 pull request를 통해 요청을 하고 충돌이 없다면 컨펌하여 merge할 수 있다. 협업 원본 리포지토리 클론 → 브랜치 생성 → 각자 브랜치에서 개발 → PR(요청…

Git & GitHub 실습 - 로컬 & 원격 Local & Remote : 내 컴퓨터 : 다른 사람 컴퓨터 local ➡️ remote github repository 생성 github에서 새 리포지토리를 생성한다. git remote add origin 리포지토리 리포지토리와 내 로컬 폴더를 연결한다. git push origin main github 리포지토리 mian 브랜치에 현재 커밋들을 넣는다. (로컬 → 서버) local ⬅️ remote git clone github 리포지토리에서 모든 커밋들을 내 로컬로 가져온다. git pull origin main 서버에서 변경사항이 일어난 것을 로컬로 동기화한다. (서버 → 로컬) .gitignore 올리고 싶지 않은 파일을 포함한 파일 .gitignore.io 홈페이지 활용 pro설정✨ → 다양한 혜택 제공, 대학생에게는 무료! 참고 강의 https://www.inflearn.co…

Git & GitHub 실습 - 기초 Git 소스코드 관리에 특화된 버전 관리 프로그램 → 파일은 한 개로만 유지되면 좋겠는데 언제든지 특정버전으로 돌아가고 싶어! 형상 관리 = 버전 관리 = 구성 관리 Server & Client ex) 크롬 브라우저() — 웹 페이지 줘!() → 네이버() 네이버() — 코드로 된 데이터() → 크롬 브라우저() ❓내 컴퓨터가 서버가 될 수 있을까? → YES! 내 컴퓨터의 주소를 알려주고 접속했을 때 데이터를 주면 내 컴퓨터도 서버가 될 수 있다. Git vs GitHub : 로컬(내 컴퓨터)에서 돌아가는 버전 관리 프로그램 : 원격(다른 사람 컴퓨터)에 버전들을 저장해놓는 소스코드 버전 저장소 Git 설치 git 버전 확인 터미널에서 다음 명령어 입력 git defaultBranch 기본 브랜치 를 으로 명칭 변경을 하여 생기는 오류를 방지하는 명령어. 설치 후 한 번만 실행해주면 된다. opti…

UMC React Study 1주차 🌏 React의 탄생 배경 동일한 뷰에서 불필요하게 코드 반복하는 문제점 페이지 이동 시 새로고침이 발생하며 매번 데이터를 불러오는 문제점 →️ 기존의 웹에 이러한 문제점을 개선하기 위해 라는 라이브러리가 탄생하게 되었다. 🧩 React의 특징 Virtual DOM 우선 은 Document Object Model의 약자로서, HTML 문서에 접근하기 위한 인터페이스이다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트를 이용해 콘텐츠를 추가, 수정, 삭제하거나 이벤트를 처리할 수 있도록 한다. 은 가상 DOM을 의미하는데, virtual DOM을 이용하면 실제 DOM에 접근하여 조작하는 대신에 이를 추상화시킨 자바스크립트 객체를 구성하여 사용한다. React에서 변한 데이터를 실제 DOM에 업데이트하는 과정은 다음과 같으며, 연산 횟수가 줄어들어 더 효율적으로 작업을 처리할 수 있다. 데이터가 업데이트 되면, …

2022년 5월 회고 습관 다잡기🌞 휴학생이라 패턴이 무너질까 봐 걱정을 많이 했는데 걱정했던 것보단 나름 열심히, 그리고 꾸준히 공부하고 있는 것 같아 다행이라는 생각을 한다. 잘못된 습관은 쌓이게 되면 참 무섭고, 좋은 습관은 사소하더라도 사람을 나아가게 만드는 것 같다. 작은 습관들이 모여서 일상이 될 테니, 더 나아가는 내가 될 수 있도록 좋은 습관을 더 쌓기 위해 노력하고 있다. 이렇게 매달 회고를 쓰며 돌아보는 시간을 갖는 건 또한 좋은 습관이라고 생각한다! 아쉬운 부분들은 반성하고, 성장한 부분들은 곱씹으며 더 나은 사람이 되어가는 중이다. 다음 달에는 조금 일찍 기상하는 습관을 가져보자🐣 스터디 마무리🍦 10주 동안 진행되었던 UMC JavaScript 스터디가 끝이 났다! html & css 기초부터 백엔드와의 협업까지 자바스크립트의 전반적인 부분을 차근차근 공부할 수 있던 유익한 시간이었다. 기초를 다시 제대로 쌓은 것 같아 든든했고, 앞으로 진행할 …

UMC 10주차 워크북 서버와의 협업 협업 → 개발 ( 프론트엔드 + 백엔드 ) 협업 시 어떤 가 필요할지 회의 → 의견 취합, 적극 의견 제시 API 및 데이터 없이 프론트 개발을 시작해야 하는 경우 대부분 → 디자인 시안대로 하는 것이 중요 API 명세서가 나올 때쯤 퍼블리싱 완료한 화면에 데이터 코드 작성 경청 및 수용, 의견 적극 제시, 책임감, 존중, 소통, 믿음, 역지사지••• 퍼블리싱 : HTML, CSS을 위주로 화면을 디자인대로 구현하는 작업. 동적인 데이터가 들어가는 곳이라면 더미 데이터를 사용하여 구현. 더미 데이터 : 가짜 데이터. 간단하게 JSON 파일을 만들어서 최소한의 데이터를 만들어 놓은 것. 더미 데이터를 만들어 보는 과정을 통해 데이터에 대해 고민해보고, 백엔드와의 소통이 수월해질 수 있다. figma UI 디자인 툴. 색상, 폰트 등 간략한 코드 및 정보 확인 가능(30% 정도 참고) api 명세서 api 내용을…

javascript 원시값과 참조값 자바스크립트 변수는 크게 두 가지 타입으로 분류할 수 있는데, 바로 과 이다. 원시 값(Primitive Type) 원시 값은 단순한 데이터이며, 모든 원시 값은 변경이 불가능하다. 원시 값을 변수에 할당하면 변수에 이 저장된다. Number String Boolean Null Undefined Biglnt Symbol 원시 값을 할당한 변수 에 새로운 값 을 재할당하면, 초기화했던 이 저장된 메모리 안의 원시 값 자체를 수정하는 것이 아니라 새 메모리 공간에 재할당한 원시 값을 저장한다. 변수 의 메모리 주소는 재할당한 원시 값인 이 저장된 로 바뀐다. 원시 값은 변경 불가능하므로 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다. 원시 값은 실제 값 자체를 비교하기 때문에 각각 다른 변수에 같은 값을 저정한 후 비교하면 두 값이 같다. 값에 의한…

UMC 9주차 워크북 라우팅(Routing) 이란 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말한다. 👉 https://expressjs.com/ko/starter/basic-routing.html CRUD 는 데이터 처리 기능 4가지를 의미한다. HTTP 요청 메서드와 연결하면 다음과 같다. Create(생성) ⇒ Read(조회) ⇒ Update(갱신) ⇒ Delete(삭제) ⇒ HTTP 상태 코드(http status codes) 는 클라이언트가 보낸 HTTP 요청에 대한 서버의 응답 코드로, 상태 코드에 따라 요청의 성공/실패 여부를 판단한다. 1xx : 요청을 받았으며 프로세스를 계속한다. 2xx : 요청을 성공적으로 받았으며 인식했고 수용했다. 3xx : 요청 완료를 위해 추가 작업 조치가 필요하다. 4xx : 요청 문법이 잘못되었거…

UMC 8주차 워크북 HTTP = HyperText Transfer Protocol → 프론트와 서버 간의 데이터 통신 방법 중 하나 = HyperText Transfer Protocol Secure → HTTP + 보안 URL address HTTP Request Method : 기존의 데이터를 접근해서 사용하는 메서드(read 기능) : 기존 데이터에 새로운 데이터를 추가하는 메서드 : 기존의 데이터를 수정하는 메서드 : 데이터를 삭제하는 메서드 XML 👉 https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction JSON 👉 https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON 데이터 통신 fetch 는 브라우저에서 제공해주는 메서드이므로 별도의 설치가 필요 없다. Promise async & await…

UMC 7주차 워크북 동기 & 비동기 : 순서대로 일을 처리하는 방식 : 순서대로 일을 처리 하지 않고 빨리 처리할 수 있는 것들을 먼저 처리하는 방식 자바스크립트는 이지만, 비동기적으로 처리하기 위해 사용할 수 있는 함수가 이다. 1, 3, 4, 6, 8, 10은 동기적으로 먼저 처리되고, 5, 2, 9, 7은 동기적으로 처리가 된 후에 설정된 시간이 작은 것부터 순차적으로 비동기적으로 처리된다. : 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정한다. : 타이머가 만료된 뒤 실행할 function : 함수 대신 문자열을 지정하는 대체 구문 (optional) : 주어진 함수 또는 코드를 실행하기 전에 기다릴 밀리초 단위 시간 (optional) : function에 전달할 추가 매개변수 Callback (콜백함수) : 함수 안에 인자로 들어가는 함수 (비동기적으로 사용될 수도 있고, 동기적으로 사용될 수도 있다.) 콜백함수…

2022년 4월 회고 일상 복귀🤹🏻 사실 휴학생이라 대면 수업, 이런 면에서 큰 변화는 못 느꼈지만.. UMC 첫 회식도 하고, 점점 예전의 일상 모습을 찾는 것 같아서 좋았다. 2년 동안 거의 모든 스터디를 비대면으로 하면서 느끼는 아쉬움이 컸었는데, 앞으로 사람들과 대면으로 함께 공부할 수 있다는 생각에 기대된다. 나는 누가 시키지 않으면 공부 동기 부여가 잘 안 되는 사람이라, 스터디처럼 주기적으로 강제적인 부분이 있어야 공부를 하는 편인데 특히 대면일 때가 공부 강도가 더 높은 것 같다. 비대면이라고 대충한다는 의미는 아니지만 그래도 만나서 스터디를 진행할 때 내가 더 제대로 공부하는 느낌이라고 할까,, 그래서 2년만의 일상 복귀는 나한테 너무 반가운 소식!! 앞으로 회식도 더 자주 하면 좋겠다ㅎㅎㅎ 즐거웠습니다, UMC 회식💗 자료구조🌲 알고리즘을 최대한 하루에 하나씩 꾸준히 풀고 있지만, 자료구조는 많이 약하다고 느꼈다. 트리나 탐색 알고리즘을 풀 때마다 막히…

UMC 6주차 워크북 Local Storage 로그인 정보와 같이 계속 유지되어야 하는 데이터를 저장하기 위해 를 사용한다. 말 그대로 로컬 환경의 저장 공간에 정보를 저정하는 것이다. 개발자 도구를 통해 Application - Local Storage를 누르면 해당 페이지에서 로컬 스토리지에 저장되고 있는 정보 목록을 확인할 수 있고, Key - Value 형태로 저장된다. Local Storage가 사용되는 기능 중요 CSS 저장용 웹페이지간 정보 전달(웹서버를 경유하지 않고 정보 로컬에 유지) Canvas나 이미지에 대한 임시 저장 기능(base64로 변환) 현재 읽은 글의 히스토리 저장(카운팅, 읽은글 표시 등으로 활용) 웹페이지의 개인화 설정들에 대한 저장과 제공(캐쉬로 활용) 웹서버에 필수적으로 접근해야 하는 캐쉬용(캐쉬로 먼저 서비스 제공, 차후에 업데이트) 글쓰기를 하다가 사용자가 창을 벗어난 경우 관련 작성하던 내용 백업/복구용 Sesstion Stora…

UMC 5주차 워크북 이벤트 핸들러(Event Handler) 콜백함수를 라고 한다. 이벤트 핸들러는 가독성 및 유지보수를 위해 따로 작성하는 것이 좋다. 함수 뒤에 호출 기호가 없는 이유는 콜백함수이기 때문이다. 콜백은 클릭이 이루어질 때마다 함수를 자동적으로 호출해준다. 이벤트 핸들러의 단점은 동일한 이벤트에 서로 다른 콜백함수를 지정할 경우 뒤의 이벤트 핸들러가 앞의 이벤트 핸들러를 덮어씌운다. 이벤트 리스너(Event Listner) 이벤트 핸들러와 다르게 동일한 이벤트에 서로 다른 콜백함수를 실행할 수 있다. addEventListener는 아래와 같이 사용할 수 있으며, 인자들은 다음과 같다. - type listener options useCapture 설명 수신할 이벤트 유형을 나타내는 대소문자 구분 문자열(이벤트명) 지정한 이벤트(이벤트 인터페이스를 구현한 객체)를 수신할 객체(콜백함수) 이벤트 수신기의 특징을 지정할 수 있는 객체(옵션) 이벤트 대상…

UMC 4주차 워크북 document document = html. 개발자 도구를 켜서 console에 document를 입력하면 전체 선택되는 것을 확인할 수 있다. DOM을 선택한 변수는 다른 변수와 구분하기 위해 $ 표시를 하는데, 생략해도 무관하다. DOM을 제어하는 것이 곧 HTML을 제어하는 것이다. 자바스크립트는 HTML의 DOM 객체를 가져와 조작할 수 있다. element를 가져오고, element의 텍스트를 읽고, element를 생성, 삭제, 수정할 수 있다. ➕참고 : https://grace-go.tistory.com/78 dom elements 가져오기 : 해당되는 태그를 모두 지정해서 유사 배열(HTMLCollection)에 넣는다. document가 아닌 dom을 선택한 변수를 선택하여 영역을 제한할 수 있다. : 해당되는 클래스를 모두 지정해서 유사 배열(HTMLCollection)에 넣는다. : 해당되는 id를 배열이 아닌 eleme…

UMC 3주차 워크북 변수(Variable) : 데이터를 저장하는 상자 : 변하지 않는 데이터 값 넣을 때 사용. 한 번 값을 할당하면 재할당 할 수 없다. : 데이터 값이 변할 때 사용. 선언 : 변수를 정의하는 것 초기화 : 정의한 변수에 넣는 첫 번째 값 재할당 : 이미 값이 존재하는 변수에 다시 값을 넣는 것 자료형(Data type) : 문자열 : 숫자 : 큰 값의 숫자 : true, false : 중복되지 않는 고유값 : 비어있는 값. 수동적으로(의도적으로) 값이 없음을 나타낸다. : 비어있는 값. 자동적으로 값이 없음을 나타낸다. : 함수, 배열, 객체 연산자(Operator) : +, -, /, *, %, **, ++, — : = : +, += : ==, ===(데이터 타입까지 비교), !=, !==, >, <, >=, <= : : 조건 중 하나라도 false이면 false : 두 개의 조건이 모두 false여야 false …

2022년 3월 회고 휴학🏫 3월, 평소같았으면 개강으로 정신 없어야 할 시기였지만 휴학을 하니 세상 모든 것이 아름다워 보였다.😆 하지만 아름다움도 정말 잠시.. 공부를 위해 휴학을 한 만큼 마냥 쉴 수만은 없다 보니 개강한 것처럼 스케줄이 바빴다. 휴학하면 꽃 보러 나들이도 가고,, 여행도 가고,, 나름대로 로망 아닌 로망들이 있었지만 현실은 기숙사 방 구석에서 맥북만 두들기고 있었다.ㅎㅎ 그래도 학기 중과 다르게 내 시간을 온전히 다 가질 수 있는 것이 좋고, 앞으로 내가 하고 싶었던 것들로 이 시간들을 알차게 채워나가고 싶다! UMC👨‍👩‍👧‍👦 학생회, 스터디, 교육봉사는 해봤지만 연합 동아리는 처음이어서 설렜다. 휴학하는 동안 팀 프로젝트를 꼭 해보고 싶었는데 UMC를 통해 내가 바라던 것을 이룰 수 있게 되어 기뻤다. 3월에는 OT와 3주 동안의 스터디를 진행해왔는데, 아직까지는 무리없이 잘 따라가고 있다. 개발 공부를 하면서 기본은 쌓으면 쌓을수록 탄탄해지는…

UMC 2주차 워크북(2) CSS 속성(property) 태그는 컨텐츠 크기와 상관 없이 한 줄을 차지하는 태그인 요소와 컨텐츠 크기만큼 차지하는 태그인 요소가 있다. 너비와 높이를 지정해주는 width, height 속성은 block 요소만 사용 가능하다. inline 요소는 적용해도 변화가 없다. 이런 특성을 변경해주는 속성이 이다. block tag : p, div, ul, li, h1-h6 inline tag : span, a, img, button : 요소를 사라지게 한다. : block 요소를 inline 요소처럼 사용한다. : inline 요소를 block 요소처럼 사용한다. : inline과 block이 합쳐진 것으로, inline처럼 한 줄에 여러 요소들을 둘 수 있고 block처럼 width와 height를 지정할 수 있다. : 요소의 테두리를 설정한다. , , 값을 설정한다. (순서대로 작성 시 너비, 스타일, 색 순서로 작성)…

UMC 2주차 워크북(1) CSS html이 뼈대 역할을 했다면, 는 살(외관)의 역할이라고 할 수 있다. 의 줄임말로, 사용자에게 문서를 표시하는 방법을 지정하는 언어이다. 기본 텍스트 문서를 꾸며주는 역할을 한다. html에서 외부 요소와 연결하는 를 사용하여 css를 외부 파일로 만든 후에 html과 연결할 수 있다. CSS 선택자 CSS의 문법은 다음과 같다. 는 html 요소 선택하는 역할을 한다. 태그 : 를 선택한다. 클래스 : 태그와 상관없이 동일한 스타일을 에 주고 싶을 때 사용한다. 하나의 요소에 여러 개의 클래스를 사용할 수 있고(공백으로 구분), 중복일 경우 위에서 순차적으로 실행되기 때문에 마지막에 실행되는 코드로 적용된다. 예시: 영희 = 학생, 알바생, 안경 쓴 사람 id : 클래스는 동일한 클래스 이름을 여러 요소에 사용할 수 있었지만, id는 동일한 id 값을 가진 id가 있으면 안 되고 에만 사용해야 한다. 하나의 요소가 여러 …

UMC 1주차 워크북 Web 웹이란 무엇일까? 이란 의 줄임말으로서, 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다. 인터넷 서비스의 일종이며, 전 세계적으로 많은 정보들이 오가는 공간이다. 웹의 역사 웹은 아이디어를 주고 받을 때 공통된 공간에 각자의 정보를 올리고 관리할 수 있는 정보 관리 시스템에서 시작되었으며, 1989년 팀 버스너리가 발명하였다. Web의 특징 웹은 인터넷 상에서 텍스트, 이미지, 비디오 등 멀티미디어 정보를 하이텍스트 방식으로 연결하여 제공한다. 란, 문서 내부에 또 다른 문서로 연결되도록 하는 (다른 문서에 관한 참조 정보)를 사용하여 여러 문서를 연결하는 기술이다. HTML tag 란 정보를 정의 하는 형식을 의미한다. plain text에 의미를 부여하기 위해 사용되며, 태그마다 지원하는 다양한 속성을 사용할 수 있다. 태그는 와 가 세트로 구성되어있으며, 닫는 태그가 없는 도 있다. dom 은 의 줄임말…

UMC 2기 합격 후기 UMC⭐️ 👉UMC 홈페이지 https://makeus-challenge.oopy.io/umc 는 University Makeus Challenge의 약자인 이다. 디자이너, PM과 함께 협업하여 개발하고, 앱을 런칭하는 활동을 한다. 스터디, 해커톤, 팀 프로젝트까지 모든 과정을 6개월 동안 진행한다. 자세한 커리큘럼은 사진에서 확인 가능👇 지원 동기🙌 과 단톡방에 UMC 홍보가 올라온 것을 보고 바로 1기 서비스 랜딩 페이지를 구경했다. 1기는 우리 학교가 없기도 했고, 안드로이드 파트만 있었어서 조금 고민되긴 했지만 나에게 좋은 기회가 될 것 같아서 지원했다. 작년에 교내 스터디를 하면서 협업을 조금이나마 경험해볼 수 있었는데, 그때 다른 사람들과 함께 개발하는 즐거움을 깨달아버렸다. 그래서 휴학한 동안 연합 동아리나 부트 캠프를 알아보고 있던 중이었는데 마침 운명처럼☄️ 나타난 UMC. iOS, Android, Web, Node.js…

정보처리기사 필기 시험 후기 서론 나는 여유롭게 공부할 거야!라며 당당하게 공부 계획을 당차게 세웠지만.. 나는 역시 어쩔 수 없는 INFP의 피가 흐르는지(?) 계획을 지키지 못해 결국 벼락치기를 하게 되었다ㅎㅎ 이론과 기출을 2번씩 보는 게 목표였지만, 이론 1번 겨우 보고 기출도 한 번씩 푸니 시험 전날이지 뭐람,, 특히 기출 풀면서 2과목과 5과목이 끝까지 불안불안해서 걱정도 많았지만 결론적으로는 합격! 했다는 기분 좋은 후기🌺 시험 난이도 2022년 정기 기사 1회 시험을 응시했고, 3월 5일 토요일 13시 시험이었다. 처음에 걱정했던 2과목이 생각보다 어렵지 않아서 다행이라고 생각하며 신나하면서 문제를 풀었다. 예상치 못하게 4과목에서 조금 어렵네,, 싶었는데.. 갑자기 5과목에서 폭탄을 맞아버리게 됐다💣 교재에서 공부하지 않았던 처음 보는 것들이 나와서 당황스러웠고, 찍기 운도 하나 없이 찍은 문제를 다 틀려버렸다. 개인차가 있긴 하겠지만, 내 주변에서도 5과목 뭐야…

javascript 알림 창 경고 창(Alert) 은 으로, 사용자에게 알릴 메세지를 표시한다. 선택 창(Confirm) 은 으로, 취소 버튼이 있어 사용자의 확인을 요구한다. 어떤 버튼을 누르는지 결과에 따라 프로그램이 동작한다. 사용자가 을 선택하면 를 반환하고, 를 선택하면 를 반환한다. 입력 창(Prompt) 는 으로, 텍스트 필드 안에 메세지를 입력할 수 있다. 입력한 내용은 프로그램에서 사용 가능하며, 을 지정할 수도 있다. 입력된 값의 자료형은 문자열이다. 사용자가 값을 입력하고 버튼을 누르면 사용자가 을 반환하고, 버튼을 누르면 을 반환한다.

javascript 객체 배열(Array) 배열은 ‘예약어 변수명 = [];’의 형태로 선언하고, 쉼표로 구분하여 값을 넣어줄 수 있다. 배열의 자릿수는 index로 나타내며 0부터 시작한다. 배열 내부의 값을 요소(element)라고 한다. 배열 메서드 함수(Function) 함수는 일정한 동작을 수행하는 코드를 의미한다. 예약어 function을 사용하거나 ⇒(화살표)을 사용하여 함수를 만든다. 함수를 선언하는 방식은 크게 세 가지가 있다. 함수를 사용하려면 함수를 호출한다. return은 함수의 종료와 반환을 의미한다. 매개변수(Parameter) & 인수(Argument)를 사용하여 함수 호출 시 인수를 매개변수로 사용한다. 매개변수는 여러 개를 가질 수 있고, 매개변수의 개수와 인수의 개수가 일치하지 않아도 된다. 객체 리터럴(Object Literal) 배열이나 함수가 아닌 객체 중 다음과 같은 모양을 갖춘 객체를 객체 리터럴이라고 한다. 속성과 속성…

package-lock.json 충돌 오류 해결 노트북을 바꾸면서 진행중인 프로젝트를 모두 새 노트북에 클론 받아서 진행해야 했다. git을 잘 다룰 줄 몰라 혹시 잘 되지 않거나 충돌이 나면 어쩌나 걱정을 많이 했는데.. 역시나 한참을 헤맸다.. 누군가 이 글을 본다면 나와 같은 고생을 하지 않기를 바라면서 쓰는 오류 해결 글🥲 npm install & start 오류 새 노트북에 git 저장소를 클론을 해온 후 npm install이 잘 되지 않았다. 오류를 구글링 해서 install 문제를 겨우 해결했더니 이번에는 npm start에서 말썽이고… 구글링해서 해결하면 또 다른 이유로 start가 되지 않는 무한 반복에서 헤어나오지 못하다가 결국 node_modules 디렉토리를 싹 지우고 후, 새로 처음부터 다시 install한 후 start 해보니 되었다. (이 방법은 적절한 해결 방법이 아니니 시도하지 말고 글을 끝까지 읽을 것!!) package-lock.jso…

반복문 while문 while은 조건식이 참인 동안 반복해서 동작문을 실행한다. ‘while (조건식) 동작문;‘의 형태로 작성하며 동작문이 여러 줄일 경우 {}로 감싼다. while문을 사용할 때는 무한 반복이 되지 않도록 주의해야 한다. for문 for은 ‘for (시작; 조건식; 종료식) 동작문;’의 형태로 작성한다. 시작은 처음 한 번만 실행되고, 조건식, 동작문, 종료식 순서대로 반복되어 실행된다. 중첩을 사용하여 반복문의 중괄호 안에 다른 반복문을 쓸 수 있다. continue & break문 continue&break을 사용하면 특정 조건에서 실행되거나 반복문을 멈출 수 있다.

Macbook Pro 14inches unboxing 구매 동기 꺄아아아ㅏ아아 드디어 내가 맥북을 사다니 소리 벗고 팬티 질러..!! 사실 맥북을 구입하기 전까지 나한테 맥북은 디자인이 예쁜 노트북, 스타벅스 직장인 노트북 정도의 인식이었다. 내가 앱등이라지만 맥북까지 사게 될 일은 딱히 없을 거라고 생각했었다. (아이폰, 에어팟, 아이패드 정도는 다들 있잖아..?) 사실 어떻게 생각해보면 인공지능학과 다니면서 목만 잘 꺾이는 문서 작업용 노트북을 쓴 게 더 미스테리인 것 같기도 하고… 🤔 개발자가 될 거라고 생각 못 했던 시절 바라만 보던 맥북을,, 드디어 내가 사게 되었다..!!! 개발을 하면서 성능 차이를 정말 많이 느꼈고, 윈도우 기반 노트북의 한계점을 온 몸으로 깨닫던 중이라 너무 반갑고 설렜다. 처음에는 렘 추가, SSD 추가 한 에어를 살까 고민했지만, 이왕 사는 거 더 좋은 거를 사자는 마음에 덜컥 맥북 프로 m1 14인치를 지르게 된 것이다. (아빠 내가 돈 많이 …

조건문 if문 if는 조건식의 값이 참이면 동작문을 실행하고, 거짓이면 실행하지 않는다. ’if (조건식) 동작문;‘의 형태로 작성하며, 동작문이 하나 이상이면 동작문들을 {}로 감싼다. else if를 if문 뒤에 사용하여 또 다른 조건식과 동작문을 추가하면 여러 분기로 나눌 수 있다. 중첩을 사용하여 조건문의 중괄호 안에 다른 조건문을 쓸 수 있다. switch문 switch는 조건식을 두 개 사용하여 case별로 동작문을 실행하는 조건문이다. ‘switch (조건식) { case 비교조건식: 동작문;}‘의 형태로 작성하며, 보통 조건식에는 변수를 넣고 비교 조건식에는 변수와 비교할 값을 넣는다. 앞의 비교 조건식에 해당되면 해당 case의 동작문만 실행되는 것이 아니라, 아래의 case의 동작문도 모두 실행된다. 따라서 이 특성을 기억하여 실행하고 싶은 case에 break를 사용하여 활용할 수 있어야 한다. 어느 case에도 해당되지 않을 때는 default를 사용한다. 조…

변수 let 잠깐 동안 특정 값을 저장해야 할 때 사용하는 것이 변수이다. ’let 변수명‘의 형태로 변수를 선언하고, 변수를 선언함과 동시에 값을 대입하는 것을 초기화라고 한다. var var 또한 변수를 선언하는 예약어이며, ’var 변수명‘의 형태로 선언한다. let을 사용하여 같은 변수명을 다시 선언하면 오류가 나지만, var는 같은 변수명을 다시 선언하는 것이 가능하며 에약어를 변수명으로 사용할 수도 있다. 이렇듯 var의 난해한 특성 때문에 요즘은 거의 사용하지 않는다고 한다. const const는 상수를 선언하는 예약어이다. 값을 상수로 저장하면 다른 값을 대입하더라도 수정되지 않음이 보장되어 더 안전하다. 상수는 값을 변경할 수 없기 때문에 항상 초기화를 해주어야 한다. const로 선언한 객체에 새로운 값을 대입할 수는 없지만, 객체 내부의 값은 바꿀 수 있다. (ex. 배열)

자료형 문자열 -typeof 값의 자료형을 반환한다. -back slash 역슬래시는 문자열에서 특수한 역할을 한다. 각각의 상황에 맞게 활용할 수 있어야 한다. -연산 문자열과 문자열은 연산이 가능하다. +, -, *, /, % 연산이 모두 가능하다. 숫자 -NaN은 Not a Number라는 의미로, 숫자가 아니라는 의미로 쓰이는 숫자이다. NaN의 자료형은 숫자이다. -연산 parseInt와 Number는 문자열을 숫자로 변환하여 사용하고 싶을 때 사용한다. 숫자와 문자열을 연산하게 되면 숫자가 문자열로 형 변환된다. -연산자 우선순위 우선순위 연산자 20 ()(그룹화) 19 ., [], new, ()함수 호출 18 new(인수 없이) 17 ++(후위), —(후위) 16 !, ~, +(단항), -(단항), ++(전위), —(전위), typeof, void, delete, await 15 ** 14 *, /, % 13 +(다항), -(다항) 12 <<. >>, >>> 11…

javascript 기본 규칙 개발 블로그를 열심히 써야지!라는 다짐을 하자마자 수업 과제 시험의 반복… 종강도 했으니 이제 정말 열심히 채워나가야겠다는 마음에 조금은 설렌다..ㅎㅎ 기초부터 탄탄히 채우기 위해 기본 규칙부터 시작해서 앞으로 차근차근 공부한 걸 정리하려고 한다! 이번에는 정말 작심삼일이 아니길 바라며.. 세미콜론 세미콜론은 하나의 명령이 끝났다는 의미로서, 붙이지 않아도 되지만 일부 명령에서 에러가 발생하는 경우도 있다. 에러 발생을 방지하고, 명확하고 통일성 있는 코드를 위해 자바스크립트에서는 세미콜론을 붙이는 것을 권장한다. 주석 주석은 코드가 아닌 설명을 의미한다. 다른 사람과 코드에 대해 의사소통을 하기 위해 꼭 필요한 것 중 하나로서, 주석으로 자세한 설명을 작성하거나 임시로 사용하지 않는 코드를 작성한다. 들여쓰기 들여쓰기는 코드를 실행할 때는 아무런 영향을 미치지 않지만, 코드를 보기 좋게 2칸 혹은 4칸으로 통일하여 들여쓰기를 해주는 것이 좋다. 공…

npm run deploy 오류 해결 1일 1커밋을 목표로 하자고 포부를 밝혔으나.. introducion post를 수정하고 commit, push, merge까지 다 잘 된 것을 확인 했는데 deploy가 되지 않아 당황했다. 다음과 같은 오류가 떴다. 에러 메세지를 읽어봐도 무슨 말인지 모르겠고.. 뭐지 하고 한참을 찾아봤는데.. Window VS code 터미널에서 git으로 배포할 때 powershell이 아닌 bash에서 해야 하는 거였다!! 처음 Gatsby blog를 만들고 배포할 때도 같은 부분에서 한참 헤맸는데 이걸 또 헤매다니.. 다시는 배포할 때 실수하지 말자는 의미에서 글로 남겨 기억해야겠다. 짜잔 ٩( ˃́▿˂̀ )۶ published가 잘 된 것을 확인했다. Mac에서는 이런 번거로움이 없다고 하는데.. 문득 Mac이 부러워지는 에러였다.

앞으로 Gatsby Blog에 개발 관련 글을 올리려고 한다. 어렵겠지만 1일 1커밋을 목표로! ✧(۶•̀ᴗ•́)۶