All ContentsCategoryAbout
개발 코어자바스크립트 freeCodeCamp LogRocket 개발자스럽다 44bits 네이버 D2 리디 블로그 NHN 블로그 VCNC…
edward hopper - office in a small city 1분기 주요 이슈 쇼핑몰 개편 유료회원 정기결제 프로세스 고도화 알림톡, 푸쉬알림 점검 쿠폰 시스템 개발 api…
명령형 프로그래밍과 선언형 프로그래밍 프로그래밍은 크게 명령형 프로그래밍과 선언형 프로그래밍으로 구별할 수 있다. 명령형 프로그래밍은 "어떻게(How…
javascript 렉시컬 스코핑(Lexical Scoping) 클로저의 개념을 이해하기 위해서는 우선 렉시컬 스코핑을 이해해야 하며, 렉시컬 스코핑을 이해하기 위해서는 실행 컨텍스트(Execution Context…
계기 기존에 엘라스틱 빈스톡(Elastic Beanstalk, 이하 EB)으로 구축되어 있던 서버의 Node.js 버전 이슈로 인해 환경을 새로 구축해야 하는 상황에 처했다. 기존 EB 환경은 Node.js 1…
미디어스트림 아키텍쳐 참조 자습서: S3 Batch Operations, AWS Lambda 및 AWS Elemental MediaConvert를 통해 비디오 일괄 트랜스코딩 - Amazon Simple Storage Service…
크롤링이란 크롤링(crawling) 혹은 스크레이핑(scraping)은 웹 페이지를 그대로 가져와서 거기서 데이터를 추출해 내는 행위다. 크롤링하는 소프트웨어는 크롤러(crawler…
20220616 북클럽 고객은 셀프서비스를 원한다 - 전화를 할 수밖에 없는 상황이 생기는 건 치명적 20220620 북클럽 p.117 : “문제가 다 해결되셨나요?” ~ 되묻는 편이 낫다. p.12…
emoji를 저장하기 위해서는 AWS RDS 사용 시 파라미터그룹 편집이 필요함 편집 없이 그대로 저장 시 <- 이와 같이 제대로 파싱되지 않은 채 저장됨 MySQL character set 기본값이 이모지를 파싱할 수 없는 utf…
로드밸런싱(load balancing) 네트워크 기술의 일종으로 둘 혹은 셋 이상의 중앙처리장치 혹은 저장장치와 같은 컴퓨터 자원들에게 작업을 나누는 것을 의미 프로비저닝(provisioning…
…
2021년은 지금까지의 내 삶을 통틀어 손에 꼽을 정도로 위기가 많았던 해였다. 그리고, 동시에 기회도 많았던 해였다. 그렇기에 나 스스로 2021년의 사자성어를 정하자면, 전화위복이 아닐까 싶다. 다른 말로는 ”오히려 좋아”. 위기1 202…
Emmet Emmet(자동완성)을 처음 알게 되었을 때의 그 감동을 잊을 수가 없다. Emmet을 알기 전까지는 당연하겠지만 IDE…
업무를 하던 중 평소와 같이 로컬서버를 실행했는데, 이미 이 열려있다는 게 아닌가. 분명히 종료했는데, 백그라운드 어딘가에 살아있었나보다. 흔치는 않더라도 왠지 또 겪을 문제 같아서 로컬호스트를 확실히 죽이는 방법에 대해 적어둔다.…
좋은 URI(Uniform Resource Identifier) 설계 리소스? 예를 들어 ‘회원정보조회 API…
최근 타입스크립트를 익히고 있다. 한 집안 식구인 만큼 워낙 vscode가 타입스크립트 친화적이라 큰 불편함은 없는데, 딱 하나, 마음에 안 들던 것이 제네릭 사용 시 vscode의 확장프로그램 중 auto-close-tag…
최근 진행 중인 프로젝트에서 배송현황 업데이트를 구현해야 했다. 풀필먼트 업체의 API로부터 송장번호가 포함된 주문정보를 가져와 무료 배송조회 API를 호출하여 배송현황을 가져온 뒤 송장번호와 배송상태(state)를 자사 DB…
richard feynman 리처드 파인만은 문제를 푸는 법에 대해 다음과 같이 세 단계로 말했다. Write down the problem. 문제를 쓴다. Think real hard. 골똘히 생각한다. Write down the solution…
Deno? 디노는 자바스크립트와 타입스크립트를 실행할 수 있는 실행환경 Deno의 기반 기술 V8 엔진 RUST Tokio(event loop) TypeScript Deno를 만든 이유 Node.js를 만든 라이언 달이 만들었음. Node.js…
InnoDB와 MyISAM의 차이 트랜잭션(Transaction) 이란, 하나의 논리적인 프로세스에서 쿼리의 개수에 상관 없이 논리적인 프로세스가 100% 적용되거나 혹은 전혀 적용되지 않음을 보장해주는 것이다. 이러한 관점에서 InnoDB…
1년 같은 2년 2020년이 입에 붙기도 전에 2021년을 맞이하게 되었다. 코로나 탓에 아마 대부분의 사람들이 나와 같은 심정일 것 같지만, 내 경우에는 '진로 변경 기간(===백수)'과 맞물렸기에 정말 어떻게 지나갔는지도 모르겠다. 특히 201…
데이터 모델링 서비스 전체 개발 과정에서 데이터베이스 관련 부분만 단계별로 나눈다면 다음과 같다. 개념 설계 논리 설계 물리 설계 DBMS…
TDD로 만드는 Node.js API 서버 인프런 | 테스트주도개발(TDD)로 만드는 NodeJS API 서버를 보며 기록함 테스트 주도 개발(TDD…
패스트캠퍼스 온라인 강의 컴퓨터공학 올인원 패키지를 시청하며 기록함 운영체제의 역할 1. 시스템 자원(System Resource) 관리자 운영체제(Operating System)의 준말 OS…
TDD로 만드는 Node.js API 서버 인프런 | 테스트주도개발(TDD)로 만드는 NodeJS API 서버를 보며 기록함 환경 Node.js VSCode Terminal Node.js 특징 Node.js…
이보다 더 좋은 기회는 없을 것 같아서 chance 지난 8월 18일부터 개발자로서 출근을 시작했다. 2018년 12월 14일에 퇴사한 이후 약 1년…
poster…
Database & MySQL 인강과 책을 통해 Database와 MySQL을 공부하며 정리 (인프런 - DATABASE 1&2 - MySQL Database 핵심은 데이터의 입력과 출력 CRUD에서 C(create), U(update), D…
Template 클라이언트로부터 받은 데이터를 기반하여 바로 화면(view)을 구성할 수 있는 템플릿(Template…
Node.js는 무엇인가 Node.js는 브라우저가 아닌 곳에서 JavaScript를 실행할 수 있도록 하는 실행환경(Runtime)이다. 이를 통해 클라이언트와 동일한 언어(JavaScript)로 서버를 실행할 수 있다. Node…
Link !== a 최근 Next.js도 많이 사용한다고는 하지만, 난 아직 리액트 꼬꼬마이기에 React-router-dom…
유닉스의 탄생 브라이언 커니핸 저/하성창 역브라이언 커니핸이 들려주는UNIX…
test 최근 켄트 벡의 테스트 주도 개발을 읽고 있다. 처음부터 끝까지 테스트의 중요성을 강하게 역설하는 책이라서 그런지 몰라도 어느 순간 TDD…
javascript…
javascript 실행 컨텍스트(Execution Context) 자바스크립트 엔진은 실행 가능한 코드(Executable Code)를 만나면 그 코드를 평가(Evaluation)하여 실행 컨텍스트(Execution Context…
javascript 콜백(Callback) 다른 함수의 인자(parameter…
애초부터 12주가 결코 길지 않은 시간이라는 것을 알고는 있었지만, 그 예상보다도 더 빠르게 시간이 지난 듯 하다. 위코드에서 보낼 수 있는 시간도 어느덧…
1차 프로젝트를 끝낸 바로 다음주 7월 6일부터 시작했던 2차 프로젝트를 7월 17일부로 마쳤다. 1차 프로젝트 이후에 여러모로 자신감도 얻고, 부족한 부분에 대한 반성도 했는데도 불구하고…
javascript 스코프(Scope) 스코프(scope) 는 변수가 선언된 위치를 기준으로 다른 코드를 참조할 수 있는 유효범위를 의미한다. 왜 선언된 위치를 기준으로 하는지, 어떤 방식으로 정해지는지 알기 위해서는 실행 컨텍스트(execution…
javascript 함수 선언문의 호이스팅 변수와 마찬가지로 호이스팅이 됨 아래와 같은 함수선언문 은 전체가 통째로 호이스팅 됨 return…
javascript ES6의 등장으로 말미암아 다양한 문법적 편의성을 누릴 수 있게 되었다. 그 중 하나가 아래와 같은 메서드(method)의 약식 표현이다. 메서드 약식 표현(ES6에서 추가) ES6 이전의 메서드의 표현은 아래와 같았다. ES…
단위 테스트(Unit Test) 가장 작은 단위의 테스트 특정 조건에서 어떻게 작동해야 할지 정의하며, 보통 함수로 표현한다. 준비(arrange), 실행(act), 단언(assert) 패턴을 따른다. 테스트 주도 개발(Test Driven…
writing…
2차 프로젝트 시작 지난 2주 동안 진행했던 위코드 1차 프로젝트를 마치자마자 2차 프로젝트가 시작되었다. 이번에도 역시 2주간 진행되는데,…
Clean Code 클린 코드 로버트 C. 마틴 저/박재호, 이해영 역애자일 소프트웨어의 혁명적인 패러다임을 제시하는 책이다. 저자 로버트 마틴은 오브젝트 멘토(Object Mentor…
7월 3일부로 위코드에서의 1차 프로젝트가 끝이 났다. 지난…
2018년 12월 14일 퇴사 2014년 4월 14일에 입사하여…
마켓 4.0 마케팅의 아버지라고 불리우는 필립 코틀러의 신간이다. 마켓 3.0 이후…
on mars 조엘 온 소프트웨어 박재호 역2005년 15회 JOLT상 수상작!아마존 선정 컴퓨터 인터넷 부문 10대 도서.Java.net…
javascript 자바스크립트의 객체는 이름(key)과 값(value)을 하나로 묶은 집합이다. 이러한 집합 하나 하나를 프로퍼티(property)라고 부른다. 값으로는 원시 값(primitive)과 객체(object…
Merge sort 참고: 합병 정렬 - 위키백과, 우리 모두의 백과사전 영상 추천 MIT OpenCourseWare - YouTube ADT(추상 자료형, Abstract Data Type…
javascript JavaScript ++i 와 i++의 차이 위의 출력 결과를 알 수 있겠는가? 불과 3개월 전의 나라면 단순하게 1, 2, 3,…
Network NIC가 2개 이상부터는 라우터라고 부를 수 있음. IP의 역할은 단 하나, IP라우팅 라우팅테이블 호출 TCP/IP 4계층 1계층) Network Interface - Ethernet(MAC address) 2계층) Internet…
craftsman…
OOP 공부할 때 반드시 이해해야 할 개념 캡슐화(encapsulation): 정보 은닉을 포함 정보 은닉(information hiding) 다형성(polymorphism): 상속(inheritance) -> 매서드 오버라이딩(method…
javascript 프로토타입(prototype) 자바스크립트의 모든 객체는 이라고 하는 내부 슬롯(internal slot)을 지닌다. 하위 객체는 상위 객체의 을 상속받으며, 상속받은 데이터는 에 저장된다. 프로토타입 체인(prototype…
ESLint 와 Prettier 확장 프로그램을 이미 설치했다는 가정 하에 포스팅을 진행한다. ESLint…
금일 학습 진행 순서 Binary search, big O Compiler vs interpreter Process / thread -> multi thread -> race condition -> mural exclubion 절차지향 OOP…
함수 Namespace : 변수가 출력될 때 본인과 가까운 순서로 실행되며 그 영역을 namespace라고 함. 변수가 저장된 공간. Stack frame: 함수가 실행될 때 쌓이는 메모리 공간(자바스크립트의 call stack…
javascript String 메서드 중에는 정규표현식과 활용하면 보다 유용한 경우가 왕왕 있다. search 인수로 전달한 정규표현식과 일치한 최초 문자열의 첫 번째 문자 위치를 반환하며, 일치하는 문자가 없으면 -1 반환한다. replace…
javascript 화살표 함수(arrow function) ES6에서는 익명함수의 단축 표현인 화살표 함수 표현식이 추가되었다. 화살표 함수 표현식은 아래와 같이 다양한 방법으로 작성이 가능하다. 일반 함수와 화살표 함수의 차이 this…
자료구조 중 BST는 꼭 알아야 함 파이썬은 hash로 구성됨 이산수학, 집합, 선형대수 > 프로그래머의 필수 수학 새로운 언어를 공부할 때 보는 순서 자료형 연산자 제어문, 반복문 함수 - call by ref? or call by value…
javascript ...(spread operator) (spread operator)는 이터러블한 객체를 반환하는 표현식 앞에 쓸 수 있으며, 이를 통해 이터러블 객체를 배열 또는 함수의 인수 목록으로 펼칠 수 있다.
javascript 비동기란 비동기(asynchronous)를 이해하기 위해서는 우선 동기(synchronous…
프로그래머가 하는 일은 추상화(abstraction) 함수(function, routine, procedure, subroutine) procedural programming =절차지향 객체(object) -> OOP(object - oriented…
map…
javascript 스코프 체인(scope chain…
위의 영상에 등장하는 용어를 모두 이해하는 것이 목표 컴퓨터는 전압으로 0, 1을 구분 2진수, 10진수, 16진수? - 정수를 표현하는 방식의 차이 10진수: 한 자리에 올 수 있는 숫자가 10개(0~9) radix 2진수: 0과 1 16진수:…
javascript 변수의 생명 주기(Life cycle…
리액트 프로젝트에 존재하는 모든 컴포넌트는 생명주기(Lifecycle)을 갖는다. 이것에도 역시 리액트의 철학 오로지 View…
사실 터미널에서 VSCode…
Set…
Dictionary 는 가 쌍을 이루는 형태의 자료구조를 말하며, 또는 이라고도 부른다. 자바스크립트에서는 객체와 JSON…
state 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미하며, 이를 통해 컴포넌트 내부의 상태를 관리한다. 아래의 예시 코드를 보자. state…
JSX 리액트는 JavaScript 같기도 하고 HTML 같기도 한 특이하고 고유한 문법을 사용한다. 이를 JSX 라고 하는데, 공식문서에서는 JavaScript 확장 문법 이라고 밝히고 있다. 타 프레임워크, 라이브러리가 MVC, MVVM…
사전 준비 리액트는 라는 무척 편리한 도구를 제공하고 있다. 이는 의 줄임말로써 리액트 공식문서에서는 새로운 싱글 페이지 앱을 만들기 위한 툴(tool…
React TIL 06 Cutting the summary 텍스트의 크기를 배경에 맞추기 위해 자바스크립트에서 가공해야 함 이때 Array 메서드를 사용하는데, 문자열은 배열과 마찬가지로 iterable…
번역 쾌적한 자바스크립트 코딩을 위한 VSCode 확장 프로그램 추천 원문 | Top JavaScript VSCode Extensions for Faster Development VSCode는 현재 가장 많은 프로그래머들이 사랑하는 IDE…
크롬 확장 프로그램(Chrome Extension) 구글 크롬 확장 프로그램(Google Chrome Extension)은 크롬 브라우저를 기반으로 동작하는 애플리케이션이다. 따라서 HTML, CSS, JavaScript…
CSS 상속(Inheritance)이란? CSS에는 상속이라는 개념이 있다. 말 그대로 부모 요소(Element)의 속성값(Value…
javascript 1. 배열 요소의 추가 1 - 1. 인덱스를 지정하여 요소 추가 배열의 요소에는 기본적으로 0부터 시작되는 인덱스가 지정되어 있으며, 요소를 추가할 때는 해당 요소의 인덱스와 함께 추가해야 한다. 1 -…
React TIL 05 내가 필요한 Movie List의 경로는 이기 때문에 아래와 같이 단축표현으로 쓰면 좋음. 에서 로 key와 value의 이름이 같을 때에는 아래와 같이 하나만 써도 됨. class…
자료구조란? 자료구조(Data Structure…
React TIL 04 class component는 render 외에도 많은 것을 갖고 있다. 그 중의 하나가 life cycle method life cycle method는 react가 component를 생성하고 없애는 방법 component…
React TIL 03 컴포넌트에서 다루는 데이터는 두 종류 props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값 state : 컴포넌트 내부에서 선언하고 내부에서 값을 변경할 수 있음. 받아온 props 값은 this…
javascript 1급 객체란 특정 언어의 일급 객체 (first-class citizens…
React TIL 02 props를 전달할 때 고유값을 전달하지 않으면 위와 같이 경고가 뜬다. 따라서 props에 ID를 만들고 아래와 같이 key로 넘겨야 함. props…
React TIL 01 리액트는 Virtual DOM 번역 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG JSX라는 리액트만의 문법이 존재함. JS와 HTML…
클라이언트와 서버 client and server 웹에 연결된 컴퓨터는 두 종류로 나눌 수가 있다. 브라우저를 통해 서비스를 요청하는 측을 클라이언트(client) 라고 부르며, 요청에 따른 서비스를 제공하는 측을 서버(server…
javascript 는 호출하는 방식에 따라 달라지며, 크게 다섯 가지 경우로 나눌 수 있다. 1. 전역에서 this는 언제나 window 2. 일반 함수 호출은 언제나 window 3. 메소드 호출에서의 this…
javascript 값의 전달 위와 같이 인수로 원시값(primitive-type)을 전달하면, 해당 값 자체가 복사되어 전달된다. 이것을 값의 전달 또는 깊은 복사(deep copy) 라고 한다. 별도의 메모리 공간에 복사되는 것이기 때문에 변수 a…
javascript 데이터 타입(Data Type…
깃(git)이란 위키백과에서 말하길, 깃(git…
javascript 표현식(Expression) 자바스크립트에서의 값(value)은 리터럴 표기법으로도 생성이 가능하지만, 대개의 경우 표현식(Expression…
stackoverflow logo Stackoverflow에 올라온 URI, URL, URN의 차이를 묻는 질문에 대한 답변 중 개인적으로 가장 이해하기 쉬웠던 답변을 번역함. 의역 포함.(원문 링크 - https://stackoverflow.com…
neon sign 웹 사이트의 구조 웹 사이트는 다음과 같은 세 개의 언어로 이루어진다. HTML : Hyper Text Markup Language를 뜻하며, 웹 페이지의 틀을 잡는 문서 형태의 언어. HTML은 아래와 같은 형태를 지닌다. CSS…
javascript 제어문(Control flow statement…
HTML은 의미를 담는 언어 HTML은 Hyper Text Markup Language의 약자로 마크업을 담당하는 언어. 즉, 웹 상에서 의미가 있는 내용(Semantic…
javascript 개발자 도구의 Application 탭을 보면, Storage 그룹에서 로컬 스토리지, 세션 스토리지를 확인할 수 있다. 이번 포스팅을 통해 각각의 기능과 차이점을 정리한다. 로컬 스토리지(Local Storage…
CSS 웹 페이지의 레이아웃(layout) 웹 페이지의 레이아웃을 구성하는데 유용한 CSS의 프로퍼티에는 크게 , , 가 있으며, 이 세 가지 프로퍼티를 활용함에 있어서는 기본적으로 박스모델 에 대한 이해가 필요하다. CSS 박스 모델(Box…
CSS CSS의 기본이자 핵심은 BOX CSS에서 가장 기본적이자 가장 중요한 개념은 단연 박스 모델(Box model)이라고 할 수 있겠다. 이것을 모르면 절대 웹 페이지의 레이아웃을 구성할 수가 없다. 박스 모델은 아래의 그림과 같다. box…
javascript 자바스크립트에서 배열은 무척 중요한 객체(object) 이며, 이를 통해 다양한 작업들을 수행할 수 있다. 기본적인 사항들은 다음과 같다. 첫째 객체는 순서가 없지만, 배열은 순서가 있는 데이터의 집합이며…
javascript .every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다. (MDN…
book 프로그래밍 심리학 제럴드 M. 와인버그 저약 4…
javascript 리터럴(Literal) 리터털(Literal)은 소스 코드 내에 직접 타이핑하여 만들어낸 값 자체를 의미한다. 자칫 값(value…