데일리 리뷰란 무엇일까? 얼핏 들으면 일기 같은 것이라 생각이 들 수 있지만, 여기서 말하는 데일리 리뷰는 오늘 일한 내용을 정리하고 스스로 리뷰해보는 것을 말한다. 데일리 리뷰 꾸준히 잘 쓰기 위해서는 어떻게 해야할까? 데일리 리뷰를 쓰다보면 “오늘은 피곤해서”, “귀찮아서”, “힘들어서” 온갖 핑계거리로 안쓸 때가 있는데, 이렇게 안쓰다 보면 나중에는 결국 안쓰게 된다. 꾸준히 쓰기 위해서는 동기부여가 필요한데, 뭔가 썼을 때 이점(보상)이 있으면 좋을 것같다. 그렇기에 정리해보자면 데일리 리뷰를 꾸준히 썼을 때 아래와 같은 이점들이 있는 것 같다. Working History Share Improve Writing Working History 당장 3일 전에, 회사에서 무슨일을 했는지 떠올려 보자. 여기서 바로 했던 일이 상세히 떠올려지는 사람은 꽤나 드물 것이라 예상한다. 왜냐하면 하루 8시간 혹은 그 이상, 일을 하면서 여러가지 이슈와 회의, 개발을 하는데 3일전 아니 하…

이번 글에서는 Git의 기본적인 내용들과 자주 사용하는 Git 명령어, 그리고 Alias를 통해 간단하게 Git 명령어를 사용하는 방법에 대해 정리해보려고 한다. 사용하는 Git 명령어가 많아질수록 하나씩 추가해 나갈 예정이다. Git Lifecycle 출처 자주 쓰는 Git 명령어 에 변경사항 추가 현재 Git 상태 조회 저장소에 저장 : 커밋 시 메시지를 작성할 수 있다 : Staging Area 생략 ‘add’ 함과 동시에 커밋 가능 : 이전의 커밋을 완전히 새로 고쳐서 새 커밋으로 변경 파일명 변경 간혹 파일의 대소문자를 변경했을때, git이 이에 대한 변경사항을 알아채지 못할 때 사용 Remote 저장소에 Push Branch 명 바꾸기 Local 브랜치 명 변경 Remote 브랜치 명 변경 Remote 브랜치는 기존 브랜치를 지우고, 새로운 브랜치에 커밋하는 방식으로 rename이 가능하다 Branch 생성 Branch 이동 에 변경사항 추가 현재 Git 상태 조회 저…

벌써 첫 회사에 온 지 1년 7개월, 573일이 지났는데요. 짧다면 짧고 길다면 길었던 첫 회사를 정리하고 새 회사로 이직하려고 합니다. 이직을 결정하는 데 까지 많은 고민이 있었고, 주변 동료분들의 잔류 설득도 있었지만, 그럼에도 불구하고 이직을 결정하게 되었습니다. 이번 글을 통해 어떤 생각을 가지고 이직을 결정하게 되었는지, 또 앞으로 계획에 대해 정리해보려고 합니다. 1. 왜 떠나는지 저는 원래 학교 개발팀에서 “서비스 시나리오 구상” 및 “DB 설계” 하는 것에 흥미가 있어 백엔드를 위주로 개발했었고, 웹 개발에도 관심이 있어 웹 프론트엔드도 종종 학습했었습니다. 그래서 취업을 준비할 때도 프론트엔드/백엔드 분야를 가리지 않고 여러 회사에 지원하였었습니다. 그 중 (지금은 퇴사한) 한 프롭테크 회사에 취업을 하게 되었는 데, 백엔드는 제 스펙과 다른 스펙으로 개발되고 있었습니다. 회사에 백엔드 스펙을 학습하여 투입되기에는 시간적 문제가 있으리라 생각되어, 그간 학습한 프론…

개발하면서 자주 쓰게 되는 코드 조각(?)들을 단축키로 만들어 놓은 것을 코드 스니핏 code snippet이라고 하는 데요. 그 예로 JavaScript나 React.JS와 같은 언어나 라이브러리에서 자주 쓰이는 코드들을 모아둔 Snippet Extension인 JavaScript (ES6) code snippets, Reactjs code snippets 등이 있습니다. 최근 회사에서 코드에 주석을 쓸 때, 몇가지 형식을 약속하여 자주 쓰게됬던 주석이 있는 데, 아래 코드와 같습니다. 이 처럼 단락을 구분 짓고, 주석을 읽을 때 더욱 편하게 하기 위하여 이와 같은 주석 포멧을 채택하였습니다. 하지만 주석의 형식을 정확하게 기억하지 못하여 의 개수를 통일하지 못하거나 매번 쓸 때마다 어디서 복붙해와야한다는 점에서 불편함을 느꼈었습니다. 이러한 문제점을 해결하기 위해 VSCode 에디터에서 지원해주는 기능을 활용하기로 하였는 데, 그개 바로 Code Snippet 입니다. 사용자정…

실행 컨텍스트(Execution Context)란 자바스크립트 코드가 실행되고 연산되는 범위를 나타내는 추상적인 개념으로, 코드가 실행된다면 실행 컨텍스트에서 작동하고 있는 것이라고 보면 됩니다. 실행 컨텍스트는 자바스크립트의 다양한 개념 중 기본이 되는 개념이기 때문에, 이를 이해하고 자바스크립트 코딩을 한다면 코드를 이해할 때 많은 도움이 되리라 생각합니다. 실행 컨텍스트, 왜 필요할까? 앞서 말했듯이 코드를 실행하기 위해 필요한데, 어떻게 실행하기 위함인지가 중요합니다. 소프트웨어 구현 전략 중에 하나는 코드를 여러 조각(functions, modules, packages 등등)으로 나누는 것입니다. 이렇게 분리하는 이유는 단 하나, 프로그램의 복잡성을 분리하고 관리하기 위함입니다. 이제 코드를 작성하는 입장이 아닌 코드를 해석하는 자바스크립트 엔진 관점에서 생각해봅니다. 코드 해석의 복잡성을 관리하기 위해 코드의 영역을 분리하여 위와 같은 전략을 사용할 수 있는 데 그게 바…

어느 덧 2020년이 끝나가고 있습니다. 올해는 정말 많은 일이 있었던 것 같은데요. 힘들고 지치는 일도 많았지만 그만큼 성장한 한 해를 보내지 않았나 생각이 듭니다. 올해가 가기 전에 있었던 일들을 기록하고 반성해보면서 더 나은 새해를 맞이해보려 합니다. 🙂 😷 2020 이모저모 2020년 올해는 3월부터 유행하기 시작한 코로나19 바이러스로 일상이 송두리째 바뀐 년도였죠. 마스크는 없으면 허전할 정도로 일상이 되었고, 많은 분이 일하는 데 있어서 어려움을 겪고 있는 지금입니다. 하지만 각자의 자리에서 책임감을 가지고 노력해주신 덕분에 한국은 다른 나라에 비해 (여전히 많지만) 적은 감염이 일어나지 않았나 생각이 듭니다. 코로나 때문에 약 2개월을 집에서 보내고 취업을 일찍한 탓에 마지막 고등학교 3학년 생활을 겨우 2~3개월밖에 하지 못해서 올해 학교에서 있었던 일을 생각했을 때, 특별하게 많이 생각나는 게 없는 것 같아 아쉬움이 남는 것 같습니다. ⛅ 지난 해 목표 작년 회고…

자바스크립트를 통해 개발하다보면 가끔보게 되는 키워드가 있는 데, 바로 라는 녀셕입니다. “this? 대충 이렇게 작동하는 녀석아닌가??” 하고 지나칠 수 있지만, 정확히 알고 적절하게 활용한다면 더욱 깔끔하고 디버깅이 편한 코드를 작성할 수 있을 것입니다. 일단 this를 찍어보자 키를 눌러 console에서 를 한번 찍어봅시다. 그러면 아래와 같은 값이 나올 것 입니다. 네, Window 객체가 나옵니다. Window 객체는 일반적으로 브라우저의 요소와 자바스크립트 엔진과 관련된 모든 정보를 포함하고 있는 객체입니다. 하지만 단순히 = 라면, 이 글을 쓰지 않았겠죠? 문법에 따라 this가 바뀐다? 전에 커뮤니티에 이런 글이 하나 올라왔었습니다. Q . 과 (화살표 함수)의 차이점이 무엇인가요? A : “this가 달라요” B : “function은 this를 가지고, 화살표함수는 this를 가지지 않아요” 틀린 답변은 아니지만, 정확히 어떻게 가 다르다는 걸까요? 입문…

Dependency Injection, 객체지향 프로그래밍을 하다보면 한번 쯤 듣게 되는 용어중 하나인데요. 이번 글에서는 의존성 주입이 무엇이고 어떤 배경으로 생겨난 개념인지, 왜 필요한지에 대해 간단히 정리해보려고 합니다. 문제점 개발을 하다보면 코드에 의존성이 생기기 마련입니다. 그럼 의존성은 무엇이고, 왜 생겨나는 걸까요? 아래의 코드를 봐주세요. 위 코드와 같이 클래스에서 함수가 호출되기 위해서는 클래스를 필요로 합니다. 이것을 Programmer 클래스는 Coffee 클래스의 의존성을 가진다 라고 합니다. 이와 같이 코드를 설계하였을 때, 코드의 재활용성이 떨어지고, 위 예제에서 클래스가 수정 되었을 때, 클래스도 함께 수정해줘야하는 문제가 발생합니다. 즉, 결합도(coupling)가 높아지게 됩니다. DI(의존성 주입)를 해야 하는 이유 DI로 프로그램을 설계 했을 때, 다음과 같은 이점을 얻을 수 있습니다. Unit Test가 용이해진다. 코드의 재활용성을 …

2019년 한 해가 얼마 남지 않았군요. 12월 달이 되기 전에 미리 써야지 하다가 진짜 12월 마지막 날이 되서 쓰게 되네요…😅 그래서 2019년이 가기전에, 2019년을 반성하고 되돌아 보면서 올해보다 멋진 2020년을 준비해보려고 합니다. 📆 2019 이모저모 2019년에는 딱 두 가지 목표가 있었는 데, 첫째는 제가 들어간 팀의 코드를 마스터(?)하는 것이었고, 두 번째로는 아무 서비스나 한가지라도 실사용해보는 것이었습니다. 목표는 제가 성장할 수 있도록 도와줬지만 반대로 성장을 막기도 했던 것 같아요. 첫 번째 목표는 반 년만에 달성했었습니다. 정확히는 제가 생각하기에 마스터했다고 착각한 것이었죠. 이것을 깨닫지 못하고 달성했다고 생각했을 때, 성장이 멈추는 느낌을 받았습니다. 그래도 아주 늦게 깨닫지는 않아서 현재 더 좋고 효율적인 코드를 쓰기 위해 노력하고 있습니다. 두 번째 목표는 달성하지 못한 목표입니다. 개인적으로 프로젝트를 할 시간을 만들지 못한 탓도 있고, 중…

학교에 고등학생 개발자를 채용하기 위해 기업설명회가 열렸었는데, 지원하고 싶은 3학년 학생과 2학년 학생들을 대상으로 채용 면접이 진행되었습니다. 성장하는 스타트업 회사이고, 떨어져도 좋은 경험이 될 수 있을 것 같아 웹 프론트 개발에 지원하여 면접을 진행하였습니다. 난생처음 보는 기술면접에서 한 50%정도만 정확히 이야기 한 것 같았는 데, 면접을 통해 개발을 할 줄 아는 것도 중요하지만 개발에 필요한 이론을 습득하는 것도 꽤나 중요한 것 임을 알게 되는 계기가 되었던 것 같습니다. 이 글에서는 면접의 질문 내용 중에 웹 개발에 있어서 꽤나 중요했던 질문들이 있어서 정리해보려고 합니다. 1. 웹 표준이란? 웹 표준이란 www(World Wide Web) 의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다 보통 웹 개발과 디자인에 관계되어 표준이 되는 규칙등을 말한다. 이러한 규칙들은 W3C 에서 표준을 정의하고 발표(?)한다. HTML : 접근…

2021/05/17 업데이트 ⚠️ Notice ⚠️ 해당 포스트는 Storybook 5버전을 기준으로 작성된 포스트입니다. 최신 버전에 대한 튜토리얼은 스토리북 문서를 찾아보시는 걸 추천드립니다. 이번 포스트에서는 Storybook 이라는 것을 알아볼까 합니다. Storybook은 UI 구성 요소(컴포넌트)를 개발하기위한 오픈 소스 도구입니다. 예전에는 페이지 단위의 개발을 하였다면 요즘에는 컴포넌트 단위로 프론트엔드를 개발하고, 많은 분들이 React, Vue나 Angular를 이용하여 개발합니다. 여기서 컴포넌트는 외부에 영향을 받지 않고 독립적인 개체를 이루며 재사용가능한 단위라고 할 수 있습니다. 이러한 특성을 잘 지켜가며 컴포넌트를 개발할 수 있도록 도와주는 오픈 소스 라이브러리가 바로 Storybook입니다. 🤔 문제점 저와 같은 경우에는 보통 React.js를 이용하여 프론트 개발을 합니다. 하지만 항상 컴포넌트를 설계할 때, 필요한게 생길 때마다 해당 케이스에 맞게 컴…

Typescript를 배우면서 중요한 내용을 정리한 글입니다. 이전부터 타입스크립트의 장점과 필요성을 알고는 있었지만 Typescript를 쓰지 않고도 개발을 잘 해왔기 때문에 사용을 꺼려왔었습니다. 그리고 평소처럼 React로 javascript만을 이용하여 웹 어플리케이션 개발을 하던 도중 (대충 Props로 값을 넘겨줄 때, 타입정의를 하지 않아 버그가 발생했다는 내용…) props-type을 정의 하지 않는 이유도 있지만 개발하면서 일일히 props-type을 정의 하는 것은 꽤나 번거러운 일입니다. 그래서 이번 기회에 Typescript를 사용해보자고 마음먹게 되었습니다…ㅎㅎ 왜 타입스크립트 인가? 타입스크립트는 타입이 있는 자바스크립트란 단어는 보다 정확히는 정적 타입 시스템(static type system)을 도입한 자바스크립트라는 뜻입니다. 또한 JS는 인터프린터 이지만 TS는 컴파일을 통해 타입을 체크하여 오류검출 등을 하여 정적 타입을 이용하여 코딩을 할 수 있…

과거에는 브라우저가 웹서버에 웹페이지를 요청하여 클라이언트를 제공하여 웹페이지가 작동하였습니다. 하지만 최근에는 SPA(Signle-Page-Application)를 이용하여 클라이언트(대표적으로 React, Vue, Angular)를 구현하며, 클라이언트를 서버와 분리하여 클라이언트 로직을 분명히 합니다. 또한 서버에 API를 요청하므로써 웹 어플리케이션을 개발합니다. REST API가 무엇인가? REST API에 REST는 Representational State Transfer의 약자로 소프트웨어 프로그램 아키텍처의 한 형식입니다. REST api의 등장은 2000년도에 HTTP의 주요 저자 중 한 사람인 로이 필딩이 그 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표 하였습니다. REST 구성 REST API는 다음의 구성으로 이루어져있습니다. 자원 (Resource) -…

오늘 써볼 글은 React의 상태관리를 할 때 많이 사용하는 라이브러리인 Mobx의 데코레이터를 CRA에서 없이 사용하는 법을 알아보겠습니다 :) 보통은 Mobx 말고도 데코레이터를 사용할 수 있습니다. 하지만 Mobx를 사용하면서 데코레이터를 많이 사용하고 react에서 데코레이터를 사용할 때 여러가지 설정에 관한 문제를 겪었기 때문에 이를 해결하고자 하는 글을 써봅니다. 🤔 eject 란? 기본적으로 CRA로 만든 프로젝트에서 를 하면 숨겨져 있던 웹팩, 바벨 등의 설정을 보여주고 이것을 커스터마이징 할 수 있도록 해주는 명령어입니다. 주의 : 한번 eject를 하면 이전 상태로 돌아갈 수 없습니다. 🚫 eject를 했을 때 생길 수 있는 문제 하지만 eject를 했을 때 다음과 같은 문제 아닌 문제가 발생합니다. CRA의 웹팩, 바벨과 같은 모든 configuration를 직접 관리해줘야 한다. (익숙하지 않다면 관리하는 것이 까다롭다) One Build Dependency…

도커란 간단하게 말해 서버환경에서의 다양한 프로그램, 실행환경을 컨테이너라는 격리된 환경에서 실행할 수 있게 해주는 컨테이너 기반의 오픈소스 가상화 플랫폼 입니다. 이를 이용하면 복잡한 서버환경을 코드로 쉽게 관리할 수 있고 안정적인 배포환경 (무중단 배포 등) 구성할 수 있습니다. 그래서 이번 글에서는 도커에서 이미지를 받고 컨테이너를 생성하고 삭제 할 때, 자주쓰는 기본 명령어를 알아보려 합니다 :) docker 설치 리눅스 자동 설치 스크립트 우분투 윈도우, 맥 Docker for windows, Docker for Mac 설치 📜 이미지 관련 도커에서는 도커 이미지를 이용하여 컨테이너를 생성할 수 있는데, 도커 이미지를 이용하면 이미지에 설정해둔 대로 컨테이너의 구성환경을 적용할 수 있습니다. 이미지 목록 보기 이미지 검색 이미지 받기 버전: latest 를 쓰면 최신 버전으로 받을수 있다. 이미지 삭제 컨테이너를 삭제하기 전에 이미지를 삭제 할때, -f 옵션을 붙어면 컨테…

이 포스트에서는 CORS에 대한 이슈에 대해서 다뤄볼려고 합니다. 웹 개발을 하다보면 한번쯤 겪게되는 이슈로 클라이언트와 서버의 오리진이 다를 때 발생하는 이슈입니다. 🤔 CORS? 크로스 도메인? CORS는 Cross Origin Resource Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘을 말합니다. 이때 요청을 할때는 cross-origin HTTP 에 의해 요청됩니다. 하지만 동일 출처 정책(same-origin policy) 때문에 CORS 같은 상황이 발생 하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단합니다. 그로 인해 정상적으로 데이터를 받을 수 없습니다. 동일 출처 정책(same-origin policy) 불러온문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 이것은 잠재적 악성 문서를 격리하여, 공격 경로를 줄이는데 도움이 됩니다. — MDN web docs — …