우당탕탕 개발일지

1. 터미널을 켜서 bash인지 zsh인지 확인 exec bash vi ~/.bash_profile export NVM_DIR="$HOME/.nvm" [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm [ -s "/usr/local/opt/nvm/etc/bash_completion" ] && . "/usr/local/opt/nvm/etc/bash_completion" # This loads nvm bash_completion ls ~/.nvm PATH=/usr/bin:/bin:/usr/sbin:/sbin export PATH PATH=/usr/local/bin:/usr/local/sbin:"$PATH" P..

'?.'의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 체이닝 연산자와 비슷하게 동작하지만, 만약의 참조가 null 혹은 undefined여도 에러식을 뱉지 않고 undefined값을 리턴한다. 함수 호출시에도 마찬가지로 값이 없다면 undefined를 리턴한다. ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 1. 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소 ..

6주차에는 미니프로젝트가 진행되었다. 첫 주차를 제외하고는 프론트엔드와 백엔드가 구분되어 프로그램이 진행되었고, 이번주에 처음으로 다시 프론트와 백이 한 팀이 되어 프로젝트를 구현하게 되었다. 리액트 공부를 대략 3주간은 한 것 같은데 아직도 머리속에서 개념이 뒤죽박죽 섞인채로 6주차가 시작되어서 걱정이 컸지만 늘 그랬듯이 걱정하는 시간이 길어지지 않았을 때 정신없이 프로젝트가 시작되었다. 우리 팀이 하게 된 프로젝트는 최근에 " 논쟁"이라는 이름으로 사람들의 의견이 분분한 주제들에 대해 mbti별로 의견을 나누어볼 수 있는 게시판 형식의 프로그램을 만드는 것이었다. 프로젝트를 진행하면서 지난주차에 했던 매거진 만들기가 많은 도움이 되긴했지만, 기능 구현하는 부분도 중요하지만 협업에 있어서 백엔드분들과의..

항해에 입성하고 정신없이 하루의 일정을 마무리 해나가다가보니 어느덧 5주차가 지나가고 있다. 리액트 심화주차에서는 리덕스나 파이어스토어 등 새롭게 배운 내용들을 활용해서 게시판을 만들고 글을 작성할 수 있는 기능을 갖춘 페이지를 만드는 과제를 진행했다. 요구하는 기능들 중 작성한 게시글을 수정하는 기능 등 구현하지 못한 기능이 꽤 있어서 다음 주차가 걱정되는 마음도 없지 않아 있지만 다음주차에 요구되는 기능들을 하나하나 해결해나가다 보면 이번주에 어렵게 느껴졌던 기능들도 해결해낼 수 있을 것이라고 생각하고 이번주를 마무리한다. 이번주차까지는 리액트와 스프링이 나누어져서 각자의 주특기에 대한 과제를 진행했다면, 다음주부터는 리액트와 스프링이 한팀이 되어 협업을 하게 되기때문에 그 과정에서 유용하게 쓰여질 ..

라이프 사이클 ( 클래스형 vs 함수형) 라이프 사이클은 크게 3가지 유형으로 나눌 수 있는데 생성이 될 때, 업데이트할 때, 제거할 때이다. 리엑트에서는 이러한 작업을 Mount, Update, Unmount 라고 한다. Mount는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻한다. Update는 다음과 같은 4가지 상황에서 발생한다. Props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제로 렌더링을 할 때이다. Unmount는 DOM에서 제거되는 것을 뜻한다. Lifecycles in Class Components (클래스형) 일반적인 순서 생성될 때 (마운트 될 때 - Mounting) : constructor, render, co..

React 버전 점검하기 ✔️ React Router v6는 Reack hook를 많이 사용하므로 v6를 사용하기 위해 React 16.8 이상이 요구된다. switch -> Routes Switch는 기본적으로 동시에 여러개의 route들이 렌더 되지 않도록 막는 역할을 해준다. v6 부터 switch는 routes로 네이밍이 변경된다. //v5 //v6 exact 옵션 삭제 기존의 라우트 경우 경로의 앞부분만 일치해도 전부 매칭되기 때문에 정확히 라우트를 일치시키고자 exact옵션을 사용하였다. 하지만 v6부터 exact가 기본으로 적용이 되었고, 만약 하위경로에 여러 라우팅을 매칭시키고 싶다면 다음과 같이 URL 뒤에 * 을 사용하면 된다. //v6 Route children, component -..

어느덧 스파르타에 입성한지 3주가 지나고 있다. 매일 아침저녁으로 출석체크를 할 때, 출석 시간이나 캠프 랭킹순위가 관심을 끌어서 다른걸 볼 겨를이 없었는데 오늘은 캠프 21일차라는 부분이 가장 먼저 눈에 들어오더라. 빡빡한 스케줄에 그만둬야하나 생각을 하지않았다면 거짓말이지만 21일차라는걸 보니 정신이 번쩍 들었다. 벌써 3개월 중에 1개월이 끝나간다는 생각에 벌써부터 알게모르게 아쉬운 마음도 들고 각자 하던거 하다가도 모르는 부분있다고 마이크 켜면 최선을 다해서 도와주는 감사한 팀원분들도 너무 애틋해지는 느낌,,, 팀으로 활동한다는 것은 어떻게 보면 부담으로 다가올 수 있겠지만, 사실은 힘들 때 팀원들을 보며 의지를 다지기도 하고 어려운 부분을 공유하며 실력을 향상시키기도 할수있다는 점이 큰 장점으로..

JavaScript의 ES란? JavaScript는 언어 / ES(ECMA Script)는 JavaScript의 표준, 규격 즉 스펙 자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었다. 자바스크립트가 잘 되자 MS에서 Jscript라는 언어를 개발해 IE에 탑재했는데 두 스크립트가 너무 제각각이라 표준이 필요하게 되었다. 표준을 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와 통신시스템의 비영리 표준 기구에 제출하였고 표준에 대한 작업을 ECMA-262란 이름으로 1996년 11월에 시작해 1997년 6월에 채택되었다. ES5/ES6 문법 차이 우리가 사용하는 언어들이 시간이 지..

실습 과제 콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요. let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b); //1 } //console.log(a); console.log(b); //1 101 hi(); console.log(b); //1 주석을 풀은 것 //수정 전 let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b); } console.log(a); consol..

스코프, 호이스팅, TDZ 스코프 스코프란 사전적으로 '영역','범위' 라는 뜻을 가지고 있다. 자바스크립트에서는 이를 변수에 영향을 미칠 수 있는 범위 혹은 변수에 접근할 수 있는 범위이다. 이러한 관점에서 스코프는 전역(global) 스코프와 지역(local) 스코프로 분류할 수 있다. 전역 스코프란 변수가 함수 바깥에 선언되어 있거나, 변수 선언 시 var 키워드를 사용하지 않으면 변수는 전역 스코프에 포함된다. 호이스팅(hoisting) 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. TDZ TDZ은 일시..