Danwoo

React 임민영 튜터님의 라이브 세션이 있었다. 브라우저 동작 방식이라는 주제로 강의가 진행되었다. 내가 이해한 내용을 다시 정리하는 마음으로 TIL(Today I Learned)을 작성했다. 브라우저 동작 방식 자바스크립트란? 객체 기반의 스크립트 프로그래밍 언어이다. 정적인 HTML을 동적으로 표현하기 위해 만들어졌다. 호스트란? 자바스크립트가 돌아가는 플랫폼 호스트는 브라우저, 웹서버, 냉장고 등이 될 수 있다. 각 플랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, 자바스크립트 명세서에선 이를 '호스트 환경'이라고 부른다. 브라우저 웹 페이지, 이미지, 비디오 및 기타 파일을 포함하여 콘텐츠를 찾고 검색하고, 표시하는 데 사용되는 고도..

같이 항해하시는 분께서 동기부여를 위한 유튜브 영상을 공유해주셨다. (감사합니다..!!) 성장을 바라는 웹 프론트엔드 개발자를 위한 제언이라는 영상이었다. 성장을 열망하는 나에게 있어서 매우 유익했다. 우리는 100M 달리기 선수가 아니라 마라톤 선수이기 때문에 현재 답답하고 불안한 마음이 들지라도 조급해하지 않아야 한다. "성장에 영향을 주는 환경에 대해 생각해봅시다" 태도 > 동료 > 회사 > 멘트 > (기술) 영상에서 태도를 가장 중요시한다고 하는데 매우 동의한다. 항해에서도 가장 중요하게 생각하는 포인트가 태도였고, 우리가 평가받는 상황에서는 대부분 태도를 많이 볼 수밖에 없는 것 같다. 어떤 회사를 들어가도 신입의 기술 능력을 다른 요소를 모두 제치고 중요하게 생각하지 않는다. 어떤 상황에서도 ..

09:00 ~ 12:00 리액트에 대한 개념이 매끄럽게 이해되지 않아서 유튜브에 올라와 있는 강의들을 보면서 오전 시간을 보냈다. 13:00 ~ 18:00 CSS 꾸밀 시간에 그동안 자바스크립트와 리액트 배운 내용 복습하는 게 나을 거 같다는 생각이 들었다. 19:00 ~ 21:00 저녁먹고 과제 제출을 완료했다. 팀원들과 마지막으로 남은 팀 과제를 진행하고 마무리하는 시간을 가졌다. 과제 제출 (My Todo List) 만들기 21:00 ~ 22:00 과제 제출을 완료하고 같은 반 인원들과 모여서 가볍게 뒤풀이 겸 자기소개하는 시간을 가졌다. 나처럼 전혀 다른 직군에서 일을 하다 항해에 참여하신 분들이 많았다는 사실을 알게 되어 대부분 나와 비슷한 상황인 분들이 많다는 사실에 안도하는 하루가 되었다. ..

오늘 새벽에 완성한 My Todo List에 css를 수정해서 꾸며봤다. 과제 제출까지 아직 시간이 남아서 구현하고 싶은 기능을 좀 더 추가해볼까한다. 더 구현하고 싶은 기능 react app 출력되는 화면에서.. 배경에 GIF를 넣어서 생동감 있는 My Todo List를 만들기 '리스트 수정하기' 기능 추가하기 명시적 형변환 ✏️ 문자에서 숫자로 바꿀 때는 parseInt( ) let a = "11"; console.log(parseInt(a)); 11 // console 에서 파란색으로 나오면 숫자라는 뜻 ✏️ 숫자에서 문자로 바꿀 때는 .toString( ) let b = 11; console.log(b.toString()); 11 // console 에서 검정색으로 나오면 문자라는뜻 묵시적 형변..

에러 찾는데 시간을 많이 쓴 날이었다. setTodos is not a function 에러가 나왔다. setTodos 값을 잘못 준 건가 해서 React Hook 관련 글을 3시간 정도 구글링 했다. 지정 값도 잘 들어가 있고 로직에 문제가 없는 듯했다. react-dome.development 등 리액트 기본 패키지 파일에 들어가서 어떤 종류의 error 가 뜬 건지도 확인해봤는데 문제는 없어 보였다. 혼자 해결이 어려워서 해당 오류를 정리해서 팀원들에게 도움을 요청했다. 화면 공유하면서 팀원들과 문제를 공유했고, 팀원들도 에러 표시된 Form.jsx 부분에 잘못된 부분은 없는 것 같다고 하고 console.log() 찍어보면서 확인해봤는데... 정말 어처구니없는 실수를 했다.

오전에는 CS스터디 발표가 있어서 PPT 발표 정리를 했다. 오후에는 리액트 관련해서 아직 모르는 개념이 많아서 유튜브 강의를 들으면서 정리했다. 리액트를 공부하면서 리덕스 관련한 내용이 많아서 리덕스를 쓰는 이유에 대해 강의를 찾아봤다. 기본적으로 JavaScript Application들의 state(상태)를 관리하는 방법이다. React와 별개다 / 그저 React와 많이 사용해서 유명해진 것. React에 의존하는 라이브러리가 아님 리덕스를 사용하는 이유 모든 component가 props 없이 state 직접 꺼내서 쓸 수 있다. state(상태관리)가 용이하다. 리덕스는 library 배경 component에 지정한 변수는 메뉴 component에서 바로 사용할 수 없어서 props문법을 넣어..

리덕스란? 리덕스는 오픈 소스 자바스크립트 라이브러리의 일종으로 state를 이용하여 웹사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용한다. 리덕스를 사용하는 이유 모든 component가 props 없이 state 직접 꺼내서 쓸 수 있다. state(상태관리)가 용이하다. 리덕스 스토어에 조건문이나 요청에 관련된 코드를 짜놓으면 각각의 component는 리덕스 스토어에 요청만 하면 된다. 버그가 발생했을 때 추적이 쉽고 component에 오류가 발생하면 어떤 component에서 발생된 오류인지 각각의 component를 추적할 필요없이 리덕스 스토어에서 오류를 확인하면 된다. 💡 즉, 리덕스를 사용하면 component의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관..

자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요? 1) 배열(Array) 단일 변수에 여러 값을 순차적으로 저장할 때 사용되는 유형이다. 각 값은 숫자 인덱스를 가지며 모든 데이터 유형이 될 수 있다. 배열은 length 속성 가지고 있으며, length 속성은 배열에 항목 수가 추가되거나 삭제될 때 자동적으로 업데이트해준다. 2) 유사배열(Array-like objects) 자바스크립트에서 말 그대로 배열처럼 보이는 유사한 객체다. 일반적으로 인덱싱된 액세스와 length 속성이 있지만, 배열과 달리 push, pop, join, map 등 과 같은 메소드 사용이 불가하다. 유사배열은 배열의 기능이 없으며 for-in 루프도 작동하지 ..

호이스팅과 TDZ는 무엇일까 ? 스코프, 호이스팅, TDZ 스코프(Scope, 유효범위) let x = 'global'; function foo () { let x = 'function scope'; console.log(x); } foo(); // ? console.log(x); // ? 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다. 프로그래밍은 변수를 선언하고 값을 할당하며 변수를 참조하는 기본적인 기능을 제공하며 이것으로 프로그램의 상태를 관리할 수 있다. 변수는 전역 또는 코드 블록(if, for, while, try/catch 등)이나 함수 ..