my dev diary

변수와 상수 var 기존의 변수 키워드. 전역 변수를 남발할 가능성이 높아 현재는 거의 사용하지 않음. 재할당/재선언 가능. let ES6 이후 사용되는 변수 키워드. 재할당 가능. 재선언 불가. const ES6 이후 사용되는 상수 키워드. 재할당/재선언 불가. 【 일반적인 변수와 상수 선언 】 let a = 1; const b = 3; var c = 5; console.log("a", a); // a 1 console.log("b", b); // b 3 console.log("c", c); // c 5 【 const는 재할당되지 않음 】 let d = 1; const e = 3; var f = 5; d = 5; e = 7; f = 9; console.log("d", d); // d 5 console...

TIL 2023. 6. 13.

React란? UI 구축을 위한 JavaScript library. SPA 기반의 프론트엔드 개발 프레임워크 중 하나. 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법 사용. 비슷한 프레임워크 : AngularJS, VueJS SPA(Single Page Application) 아키텍처 정의 Single Page Application, 즉 한 개의 페이지로 이루어진 애플리케이션. MPA(Multi Page Application)과는 상반된 개념. 기존 MPA의 문제점 SNS에서 '좋아요'를 누를 때마다 웹사이트가 다시 로딩된다면, 리랜더링(re-rendering)이 너무 많이 이루어짐. 계속해서 페이지가 깜빡거리며 UX(사용자경험)가 안 좋아짐. ➔ SPA는 '좋아요'에 해당되는 요소만 색이 채워지며 ..

TIL 2023. 6. 12.

이번 팀 프로젝트에서 드디어 깃허브를 사용하여 협업했다. 생각보다 어렵고 변수가 많아 고생했다. 특히 pr 후에 merge 할 때마다 메인 브랜치가 잘못될까 봐 걱정이었는데 실무에서는 일반적으로 메인브랜치에 merge 하기 전에 먼저 병합해 보는 브랜치를 하나 더 가진다고 한다. : 각자 작업하는 브랜치에서 작업이 완료되면, > 테스트 브랜치로 1차 merge 후에 문제없는지 확인한다.(B ← C) >> 문제없을 시 주석까지 다 지운 깨끗한 코드를 메인 브랜치로 merge 한다.(A ← B) >>> 이 메인 브랜치가 최종적으로 사용자에게 공개될 브랜치!(A) 이렇게 하면 메인 브랜치가 안전하게 관리될 수 있다. 다음 팀 프로젝트 때는 이 방법으로 협업해 봐야겠다.

WIL 2023. 6. 11.

팀 프로젝트 Vanilla JS를 사용하여 기존의 개인 과제(인기 영화 사이트 만들기)의 심화 버전 사이트 만들기. 팀원들의 프로젝트 중 1개를 대표로 선택하여 발전시킬 것. 커밋 컨벤션 Feat(페이지 경로 또는 컴포넌트) 새로운 기능 추가 또는 기능 업데이트 Fix(페이지 경로 또는 컴포넌트) 버그 또는 에러 수정 Style(페이지 경로 또는 컴포넌트) 코드 포맷팅, 코드 오타, 함수명 수정 등 스타일 수정 Refactor(페이지 경로 또는 컴포넌트) 코드 리팩토링(똑같은 기능인데 코드만 개선) File(페이지 경로 또는 컴포넌트) 파일 이동 또는 제거, 파일명 변경 Design(페이지 경로 또는 컴포넌트) 디자인, 문장 수정 Comment(페이지 경로 또는 컴포넌트) 주석 수정 및 삭제 Chore ..

카테고리 없음 2023. 6. 5.

* CLI 명령어는 기본적으로 숙지하고 있어야 한다. 명령어를 보려면 아래의 더보기 클릭! 더보기 CLI : 명령어 기반 인터페이스 깃 : CLI 도구 * 소스트리는 안정성이 낮아 추천하지 않으므로 명령어 외우기! CLI 명령어 윈도우 : git bash macOS : terminal 명령어 = 마우스의 클릭, 더블클릭 암기 X, 숙달 O! * 경로 절대경로 : 전체(최초 ~ 현재까지) 경로 상대경로 : 현재 경로를 기준으로 나타낸 경로.(현재경로는 . 상위경로는 ..으로 지칭) [ CLI 명령어 ] pwd 현재 경로(현재 디렉토리) 확인하기 clear 화면을 깨끗하게 비우기 ls 현재 경로의 파일 및 폴더를 조회 ls -a 현재 경로의 숨김파일 및 폴더(파일/폴더 이름 앞에 .이 있음)까지 모두 조회 ..

TIL 2023. 5. 24.

JS 기본 문법 * 코드 작성 후 결괏값 확인하기 @.js 파일에서 코드를 작성 후 console.log() 입력 > 터미널에 node @.js 입력하여 실행 후 결괏값 확인. * 주석 // (JS 엔진이 해석하지 않음) 단축키 : com + / ❖ 변수 & 상수 변수 * 모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고 저장된 값을 읽어서 재사용함. 변수의 5가지 주요 개념 변수 이름 : 저장된 값의 고유 이름 변수 값 : 변수에 저장된 값. 변수 할당 : 변수에 값을 저장하는 행위 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 변수 참조 : 변수에 할당된 값을 읽어오는 것. ex) var x = "hello"; console.log(x); x 변수 이름. 어떤 내용이 와도 상관 ..

TIL 2023. 5. 23.

JavaScript 언어의 특징과 역사 JS의 역사 1995년에 탄생한 브라우저 동작 스크립트 언어. 2005년 AJAX 등장 AJAX : JS 기반의 기술. 페이지 전체가 아닌 일부분만 새로고침할 수 있게 함. 비동기 웹 애플리케이션 개발 가능 UX(User Experience, 사용자 경험) 향상 2008년 V8 엔진 출시(google) 브라우저 속도 향상(코드 실행 속도 상당 부분 개선) 2009년 Node.js 등장, 서버 개발 활성화 FrontEnd + BackEnd + DB(MongoDB) = FullStack 2015년 ECMAScript6(ES6) 버전 출시 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화 현재 자바스크립트는 프런트엔드 및 ..

TIL 2023. 5. 22.

첫 번째 팀 프로젝트가 끝났다. 총평 단기간임에도 퀄리티 높은 결과물을 낼 수 있어서 만족스럽다. 오히려 기간이 너무 짧으니까 더 효율적으로 작업할 수 있었다. 다만 코드를 짜다가 막힐 때, 혼자서 해보고 팀원분들께도 물어보다 안되면 튜터님께 찾아갔었다. 좀 자주.. 어떻게든 알아서 해결해야 하는데 자꾸 도움 받는 게 습관 될까 봐 걱정이었다. 하지만 튜터님께서 해봐도 안되거나 모르는 게 있으면 망설이지 말고 찾아오라고 해주셨다. 엉뚱한 곳에서 헤매는 시간을 줄이고 로직을 이해하고 활용하고 습득하는 게 더 중요하다고. 마음이 편안해졌다. 또 다른 팀 발표 때 다들 내가 힘들어하던 부분과 비슷한 곳에서 어려움을 겪는 걸 봤다. 할 만한 곳에서 고민한거구나 싶어 안심됐다. 결론적으로 짧은 기간동안 몰입의 힘..

WIL 2023. 5. 21.