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 과제 제출을 완료하고 같은 반 인원들과 모여서 가볍게 뒤풀이 겸 자기소개하는 시간을 가졌다. 나처럼 전혀 다른 직군에서 일을 하다 항해에 참여하신 분들이 많았다는 사실을 알게 되어 대부분 나와 비슷한 상황인 분들이 많다는 사실에 안도하는 하루가 되었다. ..

https://school.programmers.co.kr/learn/courses/30/lessons/12925 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제설명 주어진 코드 문제해결 문자열을 숫자로 변환하는 메서드 → Number( ) 메서드를 이용해서 문제를 풀었다. function solution(s) { let answer = 0; return Number(s); } https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number Number - Java..

오늘 새벽에 완성한 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() 찍어보면서 확인해봤는데... 정말 어처구니없는 실수를 했다.

프로그래머스 (직사각형 별찍기) 문제설명 주어진 코드 process.stdin.setEncoding('utf8'); process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); console.log(a); console.log(b); }); 문제해결 process.stdin.setEncoding('utf8'); process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); const row = "*".repeat(a) for (let i = 0; i < b; ..

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

자바스크립트란 일종의 체계 메뉴얼 /안내책자/설명문이다. 누군가 업데이트를 하면 모든 브라우져에서 작동하게 된다. 메뉴얼을 받아 자기들 방식으로 실행이 된다. ES5랑 ES6 같이 ES 뒤에 붙은 숫자는 specification의 버전을 나타내는 숫자다. 바닐라 자카스크립트는 JavaScript의 한 종류로 Library가 없는것을 의미한다. 자바스크립트는 language, ECMAScript는 specification ES란? ECMA Script의 약자이며 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어다. 자바스크립트 표준화를 위해 만들어진 자바스크립트의 새로운 이름/버전이다. ES버전은 매년 버전이 갱신되고 있는데 ES6는 2015년에 만들어졌는데 이때, 자바스크..