본문 바로가기

개발일지 Dev Diaries/회고 Retrospective11

[회고] (22.08.20) JS 변수, 호이스팅, 객체 오늘 공부한 것 1. 변수 & 호이스팅 호이스팅 개념 정립이 잘 안되어 있던 것 같아 다시 정리해본다. 호이스팅이란 var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성을 말한다. 즉, 자바스크립트는 모든 선언문(var, let, const, function, function*, class)이 선언되기 이전에 참조 가능하다. 변수의 생성 3단계도 다시 정리해본다. 선언 단계(Declaration phase) 변수 객체(Variable Object)에 변수를 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. 초기화 단계(Initialization phase) 변수 객체(Variable Object)에 등록된 변수를 메모리에 할당한다. 변수.. 2022. 8. 20.
[TIL] (22.08.10.) React 버튼 onClick 이벤트 처리 상황 리액트 프로젝트에서 비슷한 기능을 수행하는 두 개의 버튼을 만들었다. 해당 버튼들에 onClick 이벤트로 모달창을 띄우도록 isModalOpen 값을 변경해주는 함수를 적용하고자 한다. 그리고 클릭한 버튼이 무엇인지에 따라 Modal 컴포넌트에 다른 children 을 주어 Modal 내에 다른 내용이 띄워지도록 처리하고 싶었다. 기존 코드는 이런 식이었다. 고민지점 문제는 특정한 버튼을 클릭할 때, 이 버튼이 어떤 버튼인지에 따라 Modal 의 children 에 들어가야 하는 값이 달라져야 하는데, 그걸 어떻게 해야할지 모르겠다는 점이다. 적용 일단은 하드코딩 느낌이 있지만, 버튼 별로 띄워주고자 하는 Modal 이 다른 거라고 생각했고, 각 버튼에 변경해줘야 하는 모달 상태를 따로 설정하고,.. 2022. 8. 10.
[TIL] (22.07.22) 타입스크립트를 쓰는 이유, 모듈, Node.js, npm,자바스크립트 데이터 타입, 배열과 연결리스트 새로 정리한 개념 1. 타입스크립트를 쓰는 이유 1) 데이터 타입을 엄격하게 지켜주기 위해 사용한다. 자바스크립트는 다이나믹 타이핑을 제공하는 언어이기 때문에 데이터 타입을 알아서 변경하는 경우가 있고, 오류를 발생시키는 경우가 있다. 2) 타입을 체크하기 때문에 명확한 에러 메시지를 받을 수 있다. 자바스크립트는 에러메시지가 추상적인 경우가 많은데 비해, 타입스크립트는 ‘여기 숫자가 들어와야 하는데 문자가 들어왔다’라던지 오타 교정 등의 작업을 수행한다. 2. 모듈 모듈은 애플리케이션을 구성하는 개별 요소로, 파일 단위로 분리되어 있다. 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다. 모듈은 아래와 같은 이유로 사용한다. 유지보수성 : 기능들이 모듈화.. 2022. 7. 22.
[WIL] (22.07.04~10) 세 번의 면접 세 번의 면접 이번 주에 세 번의 면접을 보았다. 각 회사의 면접 스타일과 방식, 주요 확인 지점이 달랐다. 내가 무엇이 부족한지 객관적으로 확인할 수 있는 시간이었고, 좋은 경험이었다. 회고 면접 회고 내용은 개인 notion 에 기록해두고, 다음 주 목표로 회고 결과를 대체한다. 결국 중요한 건 기초를 다지고, 코드를 많이 쳐보면서 연습하는 수밖에 없다는 생각이 든다. 가장 빠른 압축성장은 실무를 통해 이룰 수 있다고 생각한다. 좋은 실무 경험을 할 수 있는 곳을 찾아 지원하고, 커리어 패스를 구체화해나가자. 다음 주 목표 다음주에는 아래의 내용을 중점으로 공부해보려 한다. Javascript 모던 자바스크립트 Deep Dive 의 후반부 내용들까지 제대로 읽어보려고 한다. this 실행 컨텍스트 객.. 2022. 7. 10.
[TIL] (22.07.05) 객체 지향 프로그래밍, React 렌더링 과정, TDD 오늘 한 일들 1. JavaScript 개념 공부 자바스크립트는 뭔가요? 객체 지향 프로그래밍 2. React 개념 공부 왜 setState 는 비동기인가요? 리액트 렌더링 과정 3. TDD 개념 공부 및 코딩 회고 1. JavaScript 모던 자바스크립트를 읽으며 JavaScript 개념을 팠다. 개념들이 계속 이어져 있어서 책을 앞뒤로 왔다갔다 하면서 읽어나갔다. 2. 리액트 리액트의 랜더링 과정에서 batch update, reconcilation 개념이 중요한 것 같다. 조금 더 파보아야할 것 같다. 3. TDD 테스트 코드 작성을 꾸준히 해보아야겠다는 생각. 2022. 7. 5.
[TIL] (22.07.02) 자료구조&알고리즘, OS, 네트워크, 자바스크립트, 리액트 오늘 한 일 1. 기본기 다지기 (강의) 자료구조 & 알고리즘 강의 수강 : Big O, 스택 React TDD 강의 찾기 : 인프런, 드림코딩 중 택 1 하여 수강 예정 2. 기술면접 대비 Notion 정리 OS 메모리 구조 프로그램 & 프로세스 & 스레드 네트워크 OSI 7 layer HTTP, HTTPS, TCP, UDP, IP 등등 자바스크립트 var, let, const 깊은 복사, 얕은 복사 이벤트 루프 실행 컨텍스트 브라우저 브라우저 렌더링 과정 DOM Virtual DOM 프론트엔드 전반 SSR, CSR SPA, MPA 메모이제이션 React React 의 등장 배경, 사용하는 이유 React 가 리렌더링 하는 방식 Angular, Vue, React 의 차이점 회고 1. 많은 범위를 훑는.. 2022. 7. 2.
[WIL] React - DOM , 서버리스 DOM(문서객체모델) html 단위 하나하나를 객체로 생각하는 모델. 예를 들어, 'div'라는 객체는 텍스트 노드, 자식 노드 등 하위의 어떤 값을 가지고 있음. 이런 구조를 '트리 구조'라고 함. - document 와 body, head 는 부모-자식 관계. - body 와 head 는 형제 관계 - dom 트리 확인하기 // 현재 dom 트리 확인 document // dom 트리 중, body의 내용 확인 document.body // dom 트리 중, head의 내용 확인 document.head - 자식 요소에 접근하기 // childNodes document.body.childNodes // children document.body.children //getElementsByTagName(.. 2022. 3. 27.
[WIL, TIL] 3월 2주 정리 (작성중) 배운 것 1. 동적 웹페이지와 템플릿 언어 1) 개념 정적 웹페이지(static web page)는 서버에 저장되어있는 HTML+CSS 파일 그대로 보여주는 것! 반면 동적 웹페이지(dynamic web page)는 상황에 따라 서버에 저장되어있는 HTML에 데이터 추가/가공을 해서 보여주는 방법입니다 🙂 정적 웹페이지는 추가적인 통신&계산이 필요 없기 때문에 속도가 빠르고 서버에 부담이 적은 반면, 추가/수정/삭제 등 내용 변경이 필요할 때 HTML 자체를 수정해야 하기 때문에 번거롭다는 단점이 있습니다. 동적 웹페이지는 한 페이지에서 상황/시간/사용자요청에 따라 다른 모습을 보여줄 수 있다는 장점이 있지만 상대적으로 보안에 취약하고 모습이 계속 변하기 때문에 (많은 경우 주소도 같이 변하죠!) 검색 .. 2022. 3. 12.
[TIL] 개발자 공부, 뭐 부터 해야할까? 출처 :개발자 되는법 - 코딩 처음부터 배울때 뭐부터 해야해요? https://youtu.be/d3Kp8QB74-4 ※핵심 (영상 26:40) 1. 취업이 목표라면 해야 할 것 - 자료구조 - 알고리즘 - 언어 아무거나 1가지 - 코딩테스트 2. 하지 말아야 할 것 - 특정 언어 마스터 - 특정 프레임워크 마스터 - 포트폴리오 시간 대부분 할애 2022. 3. 1.

티스토리툴바