[회고]FE프로젝트 최종 회고

회고 방법 이번에는 4L 방식으로 회고를 해봤다. 노션에 먼저 작성을 했었고 그 내용을 그대로 가져왔기 때문에 다소 딱딱해 보일 수 있지만 기록을 남겨둔다는 것에 의의를 두고싶다. 4L 회고를 진행하기 전에 간단하게 서론을 써본다. 첫 팀 프로젝트였고 굉장히 재밌게 했다. https://unsunghero.netlify.app/ Unsung Hero unsunghero.netlify.app 아쉽게도 6월 쯤에 백엔드 서버가 닫힐 예정이라 이후엔 동작하는 모습을 볼 순 없을 것 같다. 처음 써보는 기술스택도 많이 써봤다. 사실 더 써보고 싶은 기술들이 많았는데 현실적으로 프로젝트 기간안에 다 소화할 수 없을 것 같다고 판단해서 사용하지 않은 기술들도 있다. 여러가지 문제도 많았다. 사진이 매~우 느리게 등..

→2023.01.27

데브 코스/TIL

[회고]2.5달 되돌아보기

지난 2.5달 전체를 되돌아보기보다는 최근에 느낀 생각을 정리했다. 선요약: 1. 모든 코드를 따라 칠 필요없다. 다만 어떤 내용이 있었는지는 알아야 한다. 그리고 나중에 찾아보고 싶을 때 바로 찾을 수 있을 정도(어느 강의였는지, 어떤 키워드를 검색해야 하는지)는 기억해야 한다. 2. 디테일한 코드를 이해하는게 어렵다면 로직, 흐름은 이해해야 한다. 3. 강의를 듣고 나서 구현을 '직접' + '많이' 해봐서 체득하는 게 답이다. 지금까지는 JS나 CSS 등 (vue는 제외) 그래도 '한 번쯤은' 들어보고 사용해본 내용들에 관해서 수업을 들었다. 그러나 현재 상황은 매일 새로운 내용을 배우고 있고 기본적인 내용(내 기준)을 벗어나서 다양한 라이브러리 사용법, 컴포넌트 | custom hooks 만드는 방..

→2022.12.28

데브 코스/TIL

[JS]스레드, 프로세스

프로세스란? 컴퓨터에서 연속적으로 실행되고 있는 컴퓨터 프로그램. 실행된(중인) 프로그램을 의미한다. 프로그램 자체는 생명이 없지만 실행되어 메로리에 적재 되면 생명이 있는 프로세스가 된다. CPU가 매~우 빠르게 실행할 프로세스를 교체하기 때문에 여러가지 프로세스를 동시에 실행하는 것 '처럼' 느낄 수 있다. 멀티 프로세스는 하나의 프로그램을 여러 개의 프로세스로 구성하는 것이다. 크롬은 멀티 프로세스다! 스레드란? 프로세스 내에서 실행되는 여러 흐름의 단위 => 프로세스가 할당받은 자원을 이용하는 실행단위다. 스레드는 프로세스 내에서 각각 Stack만 따로 할당 받고 Code, Data, Heap영역은 공유한다. 한 스레드가 프로세스 자원을 변경하면, 다른 이웃 스레드(sibling thread)도 ..

→2022.12.28

데브 코스/TIL

[TIL] TDZ

TDZ(Temporal Dead Zone): 스코프의 시작 지점부터 초기화 시작 지점까지의 구간. (일시적 사각지대) javascript의 변수는 3가지 단계가 있다. 선 - 초 - 할 선언(Declaration): 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계. 초기화(Initialization): 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계. 이 단계에서 할당된 메모리에는 undefined로 초기화 된다. 할당(Assignment): 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단게이다. var 키워드 변수는 변수 선언전에(var 변수명; 을 만나기 전에) 선언 단계와 초기화 단계를 동시에 진행한다. 그래서 변수를 선언하기 전에 호출해..

→2022.12.20

데브 코스/TIL

화살표 함수

ES란, ECMASript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다. ES5는 2009년, ES6는 2015년에 출시 됐다. ES6에서 등장한 화살표 함수에 대해서 알아보자. 함수 표현식을 화살표 함수로 표현할 수도 있다. 화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되어 가독성 및 유지 보수성이 올라갔다. 만약 함수의 본문(body)에 return만 있는 경우 화살표 함수는 return과 {}를 생략할 수 있다. 단, 같이 생략해야한다. return문에서 소괄호는 사용가능하다. 단, 모든 경우에 화살표 함수를 사용할 수 있는것은 아니다. 화살표 함수(함수명 대신 변수명에 함수 코드를 저장하는 구현 방식)는 익명 함수로만 사용할 수 있다. 또는 콜백 함수로 사용할 수 있다. f..

→2022.12.20

데브 코스/TIL

[React]setInterval

1초마다 1씩 증가하는 autoCounter를 구현해봤다. import { useState, useRef } from "react"; function Counter() { const [count, setCount] = useState(0); const intervalId = useRef(); const handleStart = () => { intervalId.current = setInterval(() => { setCount((count) => count + 1); console.log(count); }, 1000); }; const handleStop = () => { clearInterval(intervalId.current); }; const handleCurrent = () => { conso..

→2022.12.20

데브 코스/TIL

프로토타입

자바스크립트는 프로토타입기반 객체지향 언어이다. 클래스 기반 객체지향 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체를 생성한다. 그런 JS는 클래스 없이도 객체를 생성할 수 있다.(ES6에서 클래스가 추가됨.) 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 이것은 객체 지향의 상속 개념과 같이 부모의 객체 프로퍼티 또는 메소드를 상속받아 사용할 수 있게한다. 이러한 부모 객체를 프로토타입 객체 || 프로토 타입 이라고 한다. 더보기 자바스크립트의 모든 객체는 [[Prototype]]이라는 인터널 슬롯을 가진다. 이 내부 슬롯 값은 프로토타입의 참조이다. (인터널 슬롯은 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사..

→2022.12.20

데브 코스/TIL

[회고]노션 클로닝.

데브 코스를 진행하면서 첫 번째 개인 프로젝트를 진행하였다. 내용은 notion의 기능들을 비슷하게 구현해 보는 것이었다. 리뷰 반영까지 어느 정도 하고 나서 회고를 작성하고 싶어서 오래 걸린 것 같다. 아 처음엔 쉬울줄 알았지~~ 😁 아예 처음부터 진행하는 것은 아니었고 여태까지 들었던 강의의 내용을 바탕으로 진행할 수 있었다. 강의의 내용을 바탕으로 요구사항들을 구현할 수 있겠다고 판단했기 때문에 프로젝트 시작 전, 계획 단계에서는 프로젝트가 어렵지 않을 것이라고 생각했다. 누구나 그럴싸한 계획을 갖고 있다.. 처맞기 전까지는.. 가장 어려울 것이라고 예상됐던 문제는 화면 좌측에 문서 리스트를 구현하는 것이었다. 태그 안에 태그를 넣는 구조로 만들고 싶었는데 이것을 API fetch를 통해서 내려받은..

→2022.11.25

티스토리툴바