BO의 개발로그

매번 '문송합니다(문과라서 죄송합니다)'를 말해야 했던 내가 프론트엔드 개발자의 꿈을 꾸게 된 계기는 언니가 쏘아 올린 작은 공으로부터 시작된다. 정확히 2년 전에 마케터로 다니던 회사를 그만두고 앞으로 무엇을 할지 고민하던 때가 있었다. 사실 나는 사업 기획팀에서 기획자 겸 마케터로 1년가량을 일했었는데, 일을 하면서 내가 하는 일에 크게 매력을 느끼지 못한 상태였기 때문에 고민이 더 많았다. (근데 지금 돌이켜 보면 이건 내가 진짜 그때 기획의 '기', 마케팅의 '마'자도 모르던 뽀시래기 시절이었어서 그런 거 같다. 지금 다시 돌아가면 잘 할 수 있을 거 같은 근자감이 차오른다.) 그러던 때에 언니가 마침 UX/UI 디자이너로서 커리어 확장을 위해 퍼블리싱까지 공부하던 중이었고, 공부를 해보니 내 성..

일단 해라! 과정은 사라지고 결과만 남는다. 남들처럼 술술 읽히는 글을 쓰는 것도 아니고, 멋진 어휘력으로 내 생각을 잘 표현하는 것도 아닐뿐더러 쓰고 나서 읽어 보면 맨날 영양가 없는 소리들만 하는 거 같아서 쓰고 지우고 쓰고 지우고를 반복했었다. 최근 들어서 글쓰기가 사실 거창한 게 절대 아니라는 것을 깨달았고, 남의 기준에 맞춘 글쓰기가 아닌 내 스타일로 생각들을 기록하려고 많이 연습하고 있다. 항상 속으로만 생각하던 것을 공개적인 곳에 등록하기까지 꽤 오랜 시간이 걸렸다. "일단 해라! 과정은 사라지고 결과만 남는다"라는 말을 어디선가 본 적이 있는데, 몇달간 그 말을 격하게 공감했었고, 더 늦기 전에 이제부터라도 차곡차곡 생각 기록을 해봐야겠다는 결심이 드디어 섰다! 앞으로 이곳에서 다양한 생각..

✅ 삼색 볼펜법 활용 빨간색: 핵심내용 파란색: 핵심은 아니지만 중요하다고 생각되는 내용 초록색: 흥미로운 내용 2장 실행 컨텍스트 실행 컨텍스트: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념 1. 실행 컨텍스트란? 스택: 출입구가 하나뿐인 깊은 우물 같은 데이터 구조 개발자들 사이에서 유명한 사이트인 스택오버플로우는 아래와 같은 이유로 네이밍되었다고 생각하면 된다. 데이터를 100개만 저장할 수 있는 우물에 100개 이상의 데이터를 넣으려고 하면 넘친다(overflow). 많은 프로그래밍 언어들은 이처럼 스택이 넘칠 때 에러를 던진다. 큐: 양쪽이 모두 열려 있는 파이프 전체 코드의 환경과 순서 1. 동일한 환경에 있는 코드들을 ..

✅ 삼색 볼펜법 활용 빨간색: 핵심내용 파란색: 핵심은 아니지만 중요하다고 생각되는 내용 초록색: 흥미로운 내용 1장 데이터 타입의 목표 자바스크립트가 데이터를 처리하는 과정을 살펴봄으로써 기본형 타입과 참조형 타입이 서로 다르게 동작하는 이유를 이해하고 이를 적절히 활용할 수 있게 되는 것을 목표로 한다. 1. 데이터 타입의 종류 자바스크립트 데이터 타입의 종류 - 기본형: 숫자, 문자열, 불리언, null, undefined, 심볼(ES6) - 참조형: 객체, 배열, 함수, 날짜, 정규표현식, Map, WeakMap, Set, WeakSet 등 기본형과 참조형의 구분 기준 - 기본형: 값이 담긴 주솟값을 바로 복제 - 참조형: 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제 2. 데이터 ..

타입 호환성은 인터페이스를 공부할 때 꼭 짚고 넘어가야 하는 특성 중 하나이다. 타입 호환성은 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미하는 것인데, 아래 코드를 살펴보자. interface Restaurant { name: string; star: number; } let pinetree: Restaurant; // pinetree 변수 선언 let pinetreeWithAddress = { // pinetreeWithAddress 변수 선언하고 초기화 name: "대나무한정식", star: 5, address: "동대문", }; pinetree = pinetreeWithAddress; Restaurant 타입은 name과 star 두 가지의 프로퍼티만 있기 때문에 pinetree..

자바스크립트에서는 인터페이스가 존재하지 않지만, 자바, C, 타입스크립트와 같은 정적 타입 언어에서는 자주 사용되는 개념이다. 자바에서의 인터페이스는 클래스에서 꼭 구현해야 하는 메소드를 정의할 때 사용된다. 인터페이스는 상호 간에 정한 약속이나 규칙을 의미하는데, 타입스크립트에서의 인터페이스는 리액트 프로젝트에서 가장 많이 쓰이는 타입 중 하나로 인터페이스 변수, 함수, 클래스, 파라미터 등의 범주에서 약속을 정의한다. 주로 state와 props의 타입을 정의하는 데 사용한다. 1. 객체 타입 정의 인터페이스는 객체의 타입을 정의할 때 사용된다. function getInfo(restaurant: { name: string }) { console.log(restaurant.name); } getInf..

매번 변수를 선언할 때마다 타입을 일일이 정의하는 것이 번거롭다고 생각할 수도 있다. 그런 번거로움을 해결하기 위해 타입 추론이라는 개념이 존재한다. 정적 타입 언어는 원래 모든 변수에 정확히 타입을 정의하지 않으면 에러가 나지만, 타입스크립트에서는 타입을 표기하지 않아도 타입스크립트 컴파일러가 변수에 할당된 값을 보고 타입을 추측한다. let starArr = [1, 2, 3]; starArr.push('4점'); // 에러: Argument of type 'string' is not assignable to parameter of type 'number'. 위와 같이 starArr라는 변수에 숫자로만 된 배열을 정의하고, push 메소드를 활용하여 string을 배열에 넣어주려고 하면 string은 ..

> 학습 기간: 8/23(월)~8/29(일) 이번 주 배운 것들 TypeScript for React Project 전역 상태 관리 Redux 이번 주 한 일 - 월: 월요일 세션(타입스크립트)을 듣고, 새로운 팀이 배정되었고 새로운 과제도 받았다! 이번에는 토요일까지 해야 하는 과제인데, 타입스크립트로 투두리스트를 구현해야 하는 작업이었다. 새로운 팀과 커밋 컨벤션을 정했고, 프로젝트 초기 환경 및 기능 설계하고 헤어졌다! - 화: 오전에 팀원들을 만나 기능 분담을 하였고, 나는 컴포넌트 마크업&스타일링, 더미데이터 생성, 모달 작업을 담당하였다. 생각보다 전체 레이아웃은 오래 걸리지 않아 저녁에 PR을 날렸다. - 수: 오전에 역시나 Daily Stand Up Meeting을 가지고, 어제 한 날린 ..