본문 바로가기

개발일지 Dev Diaries30

[회고] (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.
[트러블슈팅] npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. 문제상황 npm create-react-app 이나 npm test 같은 명령어를 터미널에 입력 시 아래 오류 메시지가 뜸 npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. 해결 Step 1: C 드라이브 / Program Files / nodejs 폴더에 들어가서 파일 npm 을 텍스트 에디터(저는 VSCode 사용) 로 연다. Step 2: npm.cmd 파일의 12번째 줄, npm 파일의 23번째 줄에서 prefix -g 로 되어있는 것을 prefix --location=global 으로 고쳐 저장한다. (관리자 권한으로 수정) 참고 https://stackoverflow.com/q.. 2022. 7. 19.
[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.
[트러블슈팅] VS Code live server 무한 새로고침 현상 - 첫 live server 오픈 시에는 잘 열린다. - 프로젝트 파일을 수정, 저장했을 때 새로고침이 시작되는데, 새로고침이 끝나지 않고 계속 반복된다. 시도 1. 설정- auto save를 검색해 사진과 같이 afterdelay로 변경! delay를 1000 으로 변경 이러면 ctrl+s를 하지 않아도 1초마다 자동 저장된다. 그러나 문제해결에는 도움이 되지 않았다. 2. live server Host 를 localhost 로 변경 - 아래와 같이 Host 를 localhost 로 변경했다. 그러나 문제는 지속되었다. - 그랬다가 다시 Default 설정인 127.0.0.1 로 변경했는데.. 잘 된다! 해결 Host 설정 이슈인 것으로 추정된다. 정확한 원인은 파악하지 못했지만, Default .. 2022. 6. 13.
[항해99 92일차] (22.06.06.) WIL_실전 프로젝트 정리 Q&A 이번 WIL 은 이력서 작성과 향후 기술면접을 대비해서 Q&A 형식으로 정리해보려 한다. 여기에 계속 내용을 정리해나가면 좋은 참고자료가 될 것이라고 생각된다. React 관련 Q1. useRef는 어떤 목적으로 사용했나요? - 값이 변경되지 않아야 하는 변수를 할당할 때 사용했습니다. useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다 - 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있습니다.. 리액트 공식문서에서는 useRef 로 만든 변수를 사용하여 다음과 같은 값을 관리 할 수 있다고 말합니다. setTimeout,.. 2022. 6. 6.

티스토리툴바