목록먹고살자 (48)
carrots-day
동기/비동기 처리 javascript는 기본적으로 싱글 스레드 엔진을 기반으로 실행되기 때문에 기본적으로 동기 처리되어 작성한 순서대로 수행된다. 하지만 소요가 큰 작업이 수행되면 어떨까? 선행 코드가 수행되기까지 기다려야한다. 선행 여부와 관계없이 수행할 수 있는 기능이 바로 비동기처리이다. javascript에서 코드를 실행시킬때 방식은 2가지로 분류할 수있다. 동기처리 방식과 비동기처리 방식이다. 다음 그림이 동기와 비동기의 차이를 명확하게 해준다. 동기처리 : 서버에 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 비동기처리 : 서버에 요청을 보냈을 때 응답 여부와 관계없이 다음 동작을 수행 할 수 있다. 대표적으로 setTimeout과 AJAX가 있다. 쉽게 말해 실행 시점의 차..
실행 컨텍스트 (Execution Context) javascript 코드가 실행되는 환경 또는 연산 범위를 나타내는 추상 영역 실행 컨텍스트는 말만 가지나게 썼을 뿐, 개발자가 작성한 코드가 실행되기 위한 환경을 구성한 컨테이너다. 쉽게 말해서 우리가 계란 후라이를 하기 위해 가스 레인지와 프라이팬이 필요한 것 처럼 코드를 실행시키기 위해 선언해놓은 변수, 함수를 설정해놓고 실행시키는 개념이라 보면된다. 앞서 javascript 런타임 엔진은 Heap과 Stack 영역으로 구성된다는 것을 알고있다. 그럼 그 Stack에 실행될 코드가 어떤 구성으로 적재되는지 알아보겠다. 실행 컨텍스트 분류 개발에서는 어떤 개념이 존재하면 항상 분류가 나뉜다. 그래서 피곤하지.. 실행 컨텍스트도 2가지로 분류할 수 있다..
Class 클래스(class)는 객체 지향 프로그래밍(OOP)에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀이다. 객체를 정의 하기 위한 상태(멤버변수)와 메서드(함수)로 구성된다. class의 사전적 정의다. class는 객체지향프로그래밍(이하 OOP로 줄인다.)을 설명할때 빼놓을수 없는 컨텐츠 중 하나다. OOP에 있어 개발 프로세스는 다음과 같다. 1. 설계도에 해당하는 class를 구현한다. // iPhone7의 설계도를 만든다. class iPhone7 { ... } 2. 해당 설계도(class)를 활용하여 새로운 객체(instance)를 생성한다. iPhone7 newPhone = new iPhone7(); 3. 생성된 객체에 데이터를 설정하고 비즈니스 로직을 수행한다. n..
로깅 컴퓨팅에서 로그파일은 운영 체제나 다른 소프트웨어가 실행 중에 발생하는 이벤트나 각기 다른 사용자의 통신 소프트웨어 간의 메시지를 기록한 파일이다. 로그를 기록하는 행위는 로깅이라고 한다. 로그에는 여러 종류가 있다. OS 내 시스템 로그, FW 방화벽 로그, 인증 로그 등 다양한데 이 글에서 다룰 로그는 프로젝트 내 로그, 즉 어플리케이션 로그다. 개발을 하다보면 손쉬운 디버깅, 정보 제공을 위해 변수, 실행 값을 로깅할 필요가 있다. spring도 예외는 아니다. spring은 log4j와 logback을 통해 로깅기능을 제공한다. Log4j, Logback을 검색하면 항상 연관검색어에 뜨는 내용이 있는데 그것은 SLF4J다. SLF4J 개똥 같은 이름인데 얘부터 뭔지 알아보자 SLF4J (Si..
빌드 도구 빌드 도구는 소스코드에서 어플리케이션 생성을 자동화 하기 위한 프로그램이다. 빌드 과정을 자동화하여 관리하는 기능을 하기 때문에 빌드 관리 도구 또는 빌드 자동화 도구로 불린다. 빌드란 컴파일 및 패키징 과정을 통해 배포 및 실행 가능한 형태로 변환하는 것을 뜻한다. 빌드 도구는 말그대로 앞서 설명한 빌드 기능을 자동화해주는 도구다. target, 순서, 각 의존성 등 프로젝트의 속성 값을 일관되게 유지하고 빌딩하기 위해서 무조건 필요하다. 사용하는 이유 앱 개발이 발전하면서 필요한 라이브러리들도 많아지게 되었다. 그 많은 라이브러리를 직접 다운받아서 추가하여 사용하는 방법도 있지만 많은 번거로움이 따르게 된다. 이 때문에 빌드 도구를 사용한다. 종속성 다운로드 (라이브러리 자동 추가 및 관리..
React 시작 React를 사용하기 위해선 많은 사전 지식을 필요로 한다. 일단 필수적으로 필요로 하는 지식만 추리면 다음과 같다. Javascript HTML Webpack/babel nodeJS 이것 말고도 JSX, ES6 문법, 기타 라이브러리 (axios, redux, router, react hooks) 사용법 등 많은 사전 지식을 필요로 한다. 하지만 React에서는 create-react-app 이라는 모듈을 통해 간편하게 React 앱 구성을 로드할 수 있다. CRA (create-react-app) 페이스북 (Facebook) 에서 제공하는 React load CLI 우리 귀욤뽀짥 개발자들은 새로운 개발 환경에 접근하기 위해 필요로 하는 선수지식 때문에 본질에서 멀어지게 되는 일이 다반..
SVELTE 문법 프론트엔드 프레임워크를 다뤄보면서 필수적으로 학습이 필요하다 생각되는 항목만 정리해봤다. 내가 해당 게시글에서 설명하는 내용들은 정말 기초적인 내용이다. 심화된 부분은 튜토리얼가서 직접 테스트해보고 적용하길 바란다. 딹 대라. 기초 문법 들어간다.. 🥕 SVELTE 변수 선언 SVELTE는 반응형 변수 선언부터 초간단하다. Hello {name}! 끝이다. 예? React에서는 setState나 hook을 통해 state 변수를 제어해줘야했다. 근데 SVELTE는 let 변수명; 으로 선언하면 반응형 변수가 생성된다. 와우.. Hello {name}! { name = 'carrots'; }}>이름 변경 {name} SVELTE 제어문 대표적인 제어문은 크게 조건문과 반복문이 있다. 두 ..
소프트웨어 디자인 패턴 소프트웨어 공학의 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책이다. 소스나 기계 코드로 바로 전환될수 있는 완성된 디자인은 아니며, 다른 상황에 맞게 사용될 수 있는 문제들을 해결하는데에 쓰이는 서술이나 템플릿이다. 디자인 패턴은 프로그래머가 어플리케이션이나 시스템을 디자인할 때 공통된 문제들을 해결하는데에 쓰이는 형식화 된 가장 좋은 관행이다. 정리하자면 소프트웨어 개발에 있어 많이 해왔던 방식을 뜻한다. 그니까 새로 개발들어갈때 어줍잖은 머리 굴려서 만들지 말고 여러가지 패턴이 있으니 그 관행에 따라 만들라는 뜻이다. Spring에도 이러한 디자인 패턴이 여러가지 존재한다. 알아보자 🌱 Spring에서 가장 많이 사용되는 패턴은 크게..