본문 바로가기

전체 글

Chapter1. 첫번째 예시 작성 중입니다 🏃‍♀️ Chapter 1. # 공연료 청구서 출력 작동 여부를 떠나 (미적으로) 깔끔한 코드가 필요한 이유 모든 기능은 변동 가능성 있는 정책을 가지고 있고 그에 따라 사람이 추가 작업을 해야한다. 이 때, 1. 수정할 부분을 찾기 쉽도록 하며 2. 수정 후 side-effect 체크를 보다 원활히하여 예상치 못한 버그를 피하기 위함이다. ✅ 발생할 수 있는 문제 - 청구서 작성 방식에 따라 HTML 출력 함수를 수정해야할 수 있다. - 청구 내역 계산법이 변경될 수 있다. 요구 사항을 정리하고, 작동 방식을 여러 함수와 요소로 잘게 나누자. 나누기 전에, 시간을 들여 테스트 코드를 마련하자. 작업 단위를 작게 가져가며 사소한 변경에도 테스트 코드를 확인하자. 1. 함수 쪼개기 참고 [6.. 더보기
Bitbucket SSH 공개키로 클론하기 개인 랩탑에서 Bitbucket Repository를 SSH로 클론해 사용할 때 생겼던 문제들을 해결한 과정을 기록해본다. 1. Bitbucket 연결 안됨 ssh: connect to host bitbucket.org.port 22: Connection timed out git clone git@bitbucket.org:[repository].git 를 이용해 클론할 때, 한참 동안 clone 시작 문구만 떠있다가 위와 같은 에러가 떴다. 아틀라시안 커뮤니티에는 방화벽 문제라고 답변이 달렸고, 이 글을 바탕으로 아래 커맨드로 방화벽 테스트를 하여 해결할 수 있었다. nc -z -v bitbucket.org 22 2. SSH 키 등록 Git error: "Please make sure you have t.. 더보기
실행 컨텍스트 작동 원리와 클로저 한 동안 글쓰기에 많이 신경을 못썼다 ㅠㅠ 클로저, 호이스팅, this 바인딩 등 자바스크립트의 여러 개념들을 공부할 때 항상 등장했던 실행 컨텍스트에 대해 정리해보려 한다. 실행 컨텍스트(Execution Context)란? 스코프와 식별자, 코드 실행 순서에 대한 정보를 담아 코드 실행 환경을 제공하고, 그 결과를 관리해주는 영역이다. 변수 및 함수 선언을 스코프에 등록하고 체인을 거쳐 식별자를 탐색하거나 코드 실행 순서를 변경하는 등 일련의 환경을 제공하고 그 실행 결과까지 관리하는 영역이라고 할 수 있다. 🤔 언제 사용되지? 자바스크립트 엔진은 우리가 쓴 코드를 실행하기 위해 평가와 실행 두 단계를 거친다. 먼저 평가 과정에서는 코드를 실행하기에 앞서 변수 및 함수 선언문들을 스코프에 등록한다. .. 더보기
this와 Dynamic binding 객체 지향 프로그래밍에 대해 공부하다 this를 명확하게는 모른다는 것이 느껴졌다 🥲 this가 자바스크립트에서 어떤 역할을 하는지, 동적 바인딩이 어떻게 이루어지는지 알아보고 더불어 화살표 함수에 대해서도 공부해보자. Object-Oriented Programming과 JavaScript 객체 지향 프로그래밍을 정리해보고, 처음 접했을 때도 혼돈의 카오스였던 자바스크립트의 Prototype Chaining에 대해서 알아보자. 객체 지향 프로그래밍이란? OOP (Object-Oriented Programming)은 프로그램 devlog-of-yein.tistory.com 👉🏼 this 란, 자바스크립트 엔진에 의해 암묵적으로 생성되는 객체(object)로, 자신이 속한 객체 또는 자신이 생성할 인스턴스를.. 더보기
Object-Oriented Programming과 JavaScript 객체 지향 프로그래밍을 정리해보고, 처음 접했을 때도 혼돈의 카오스였던 자바스크립트의 Prototype Chaining에 대해서 알아보자. 객체 지향 프로그래밍이란? OOP (Object-Oriented Programming)은 프로그램을 여러 개의 독립적인 단위인 객체들로 나타내는 프로그래밍 패러다임이다. OOP를 통해 데이터와 기능을 직관적으로 이해할 수 있고 반복적인 내용을 재사용하기 용이하다. 반대로 프로그램을 함수의 목록으로 보는 전통적인 방식을 절차 지향 패턴이라고 하며, 객체 지향 패러다임이 있기 전 대부분의 언어가 변수와 함수를 순차적으로 작동시키는 절차적 언어였다. 이름을 저장하고 인사하는 기능을 가진 객체를 하나 만드는 예시를 통해 일반 함수와 생성자 함수를 비교해보자. 일반 함수를 이.. 더보기
CSR, SSR 그리고 React v.18의 Suspense 작년 말 베타 버전이 배포된 React 18의 Suspense에 대해 알아보며, CSR(Client Side Rendering)과 SSR(Server Side Rendering)을 더 깊이 정리해보려 한다. 1. CSR Client Side Rendering 클라이언트(웹 브라우저)가 HTML 뿐 아니라 JS파일까지 몽땅 받아다 직접 렌더링 해야 하는 CSR (Client Side Rendering)은 밀키트 사서 요리해먹기로 비유할 수 있다. React, Vue 등으로 구현되는 SPA(Single Page Application)이 CSR 방식을 이용한다. 처음 재료들을 받고 손질하기는 오래 걸리지만 한번 정리해두면 그때그때 먹고 싶은 대로 조리해 먹을 수 있다. 즉, 다양한 로직들이 포함된 큰 용량의 .. 더보기
컴파일이란 무엇이며, 자바스크립트는 인터프리터 언어인가? 컴파일이란 무엇인가? 컴파일은 우리가 작성한 소스 코드를 오브젝트 코드로 변환시키는 과정이다. 인간이 알아듣기 쉬운 프로그래밍 언어인 High Level Language를 기계가 알아들을 수 있는 0과 1로 이루어진 기계 언어인 Low Level Language로 변환시키는 것이다. 이 과정은 네 단계로 세분화해볼 수 있다. 1. 전처리기 C언어로 예를 들자면, #으로 시작되는 소스코드를 처리하는 단계이다. stdio.h와 같은 헤더 파일을 불러와 코드 상으로 필요한 내용으로 채워주고 define으로 먼저 정의된 상수를 symbol table에 저장하는 등 매크로를 확장한다. 2. 컴파일 High Level Language인 소스코드를 기계언어에 가까운 Low Level Launguage인 어셈블리 언어.. 더보기
알고리즘과 정렬 | Bubble, Selection, Insertion, Merge, Heap, Quick 알고리즘은 프로그래머스나 백준에서 푸는 문제가 아니라 연산(컴퓨팅) 시 입력된 자료를 원하는 출력의 형태로 만들어내는 처리 과정이다. 이 처리 과정이 얼마나 정확하고 효율적인지에 따라 좋고 나쁨을 판별할 수 있다. 여기서 많이 들어봤던 시간 복잡도의 개념이 나오는데, 다양한 정렬 알고리즘을 정리하고 비교해볼 때 참고해볼 예정이다. ⌛️ 시간 복잡도란? 입력값이 커짐에 따라 증가하는 시간의 비율을 최소화한 알고리즘을 구현했는지 확인하는 척도이다. 최악, 최선, 평균으로 나타낼 수 있는데 프로그래밍에서는 주로 최악의 상황을 염두하는 것이 중요하므로, Big-O 표기법을 사용한다. 자세한 정리는 여기를 참고하자! A. 선형 탐색 (Linear Search Algorithm) 냅다 처음부터 끝까지 하나씩 둘러보.. 더보기

티스토리툴바