TIL

지난 주말에 사 온 책인데, 오늘 1/4 정도 읽은 것 같다. 확실히 초판 발행일이 2012년인 책이라 지금과 조금 다른 점이 있어 감안해야 하지만, 자바스크립트의 구조나 성능에 대한 비교 실험이 있어 흥미롭게 쭉쭉 읽어나갈 수 있었다. 특히 실행문맥과 스코프체인, 활성화 객체와 전역 객체가 어떤 순서로 사용되는 흐름을 알 수 있었는데, 두루뭉술하게 '전역변수보다 지역변수를 사용해라'라고만 알고 있던 걸 좀 더 확실하게 공부한 느낌이다.실행 문맥: 함수가 동작하는 환경을 나타내며, 브라우저 내부에서 사용되는 객체 => 함수가 실행될 때 새로 생성되고, 함수가 종료될 때 소멸되며 함수의 스코프 체인에 대한 참조를 가지고 있게 된다.스코프 체인: 함수를 실행하면서 어떤 속성(변수, 객체 등)에 접근해야 할 ..

몇 시간 동안 피카츄랑 노니깐, 내적 친밀감이 부쩍 올라갔다...피카츄 놀이터 만들기평소에 많이 하던 홈페이지를 구성하는 것과 다르게 이벤트 핸들러를 다루는 과제라 처음 봤을 때는 '어떻게 구현할까?' 고민을 많이 했었다. 여러 폴더 구조도 고민해 보고, 어떻게 컴포넌트를 나눌까도 열심히 고민해 보는 시간을 가져 의미 넘쳤던 과제! 과제를 구현하면서 질문거리도 많이 생겼는데, 주말이라 물어볼 튜터님이 안계신다 ㅠㅠ 구글링이나 gpt를 통해서도 명확하게 나오지 않아 튜터님께 질문드리고 정리해 봐야겠다. 아래는 github README.md에 적었던 후기🔎 후기- 과제 목표였던 useState와 props 기능에 충실해서 완성하려 노력했습니다.- 만약 실제 게임이었다면 어떻게 컴포넌트를 나눌지 고민해 보았..

1.  2024 스타트라인 내일배움캠프 X 신한카드 온라인 커리어 컨퍼런스인 2024 스타트라인(STARTLINE)에 참여하였다. 이것저것 개발자와 관련해서 웹서핑을 하다 발견했는데, 참가비가 5,000원 밖에 되지 않는데 선착순으로 굿즈와 배민 상품권도 주는 혜자스러운 컨퍼런스였다.(이게 창조경제..?)   다양한 직군에 따른 세션들이 마련되어 있었는데, 내가 희망하는 프론트엔드와 관련이 깊은 직군들이어서 더욱 열심히 들었다. 특히 첫 번째 세션인 이현호 님의 발표가 정말 흡입력 있어서 앞으로 있을 세션들에 대한 기대감이 커졌다. 특히나 많은 발표자분들께서 개발자의 역량 중 하나로 '내가 같이 일하고 싶은 사람'을 말씀해 주셨는데, 다행히 현재 진행 중인 내일배움캠프에서 몇 주가 멀다 하고 팀이 바뀌기..

React 입문주차 개인 과제인 TodoList를 제출하니, 아래와 같이 튜터님께 피드백이 도착했다!확실히 input의 변화를 onChange로 감지하면서 '아 입력할 때마다 input의 값을 실시간으로 가져오는구나'라고만 생각했지 매번 리렌더링이 일어난다고 생각해보지 않았던 것 같다. 부분적으로 작은 범위의 리렌더링이라 신경쓰지 못했던 것 같고, 피드백에서 언급해주시지 않았다면 계속 이 방법대로 썼을 것 같은데 새로운 방법을 알게 되었다.(피드백 최고..!)  ※ 코드 개선하기1. 개선 전 코드에 onChange와 value를 사용 2. 개선 후 코드useRef를 이용해 의 값을 가져온 코드useRef는 DOM 요소에 접근하는데 사용되며, 이렇게 생성된 객체는 값이 변경되어도 컴포넌트가 다시 리렌더링하..

오늘 3시에 진행된 챌린지반 수업에서는 튜터님이 직접 todolist 과제를 구현하는 것을 실시간으로 볼 수 있었다. 매번 강의로 편집된 프로젝트만 보다가 이렇게 실시간으로 시니어 개발자가 코드를 작성할 때 어떤 순서로, 어떤 기능을 우선적으로 개발하는지 알 수 있어 굉장히 유익했다.  ※ 실시간 세션 중 알게 된 지식들1. 변수명은 F2로 바꾸기변수에 F2를 누르게 되면, 변수명을 바꿀 수 있는 창이 뜨는데 이걸 통해 동일한 변수명을 동시에 바꿀 수 있음2. useRef 사용useRef는 값이 변경되어도 리렌더링이 일어나지 않아, 보존하고 싶은 값을 넣어 둘 수 있음DOM 요소에 접근하고 싶을 때 사용됨useRef의 값은 그 자체에 들어있는 게 아닌 current에 담겨 있음const titleRef ..

평소 진유림 님이 작성해 주신 블로그 글도 많이 읽었고, 유튜브에 올라온 인터뷰나 컨퍼런스 영상도 거의 다 볼만큼 팬(?)이고 해당 발표의 내용도 너무 좋아서 기록해 두고 싶었다. 개발자로서의 역량에는 어떤 게 있을까? 당연히 개발을 잘 해야겠지만, 개발만 잘한다고 해서 인정받는 개발자가 되는 건 어렵다. 발표에서 '코딩은 개발자들이 해야 하는 많은 일 중 하나이며 개발자의 필요조건'이라고 말씀하시는데, 코딩 외에도 많은 기술적 판단과 커뮤니케이션적 요소들 또한 필요로 한다. 기본적으로 다양한 직군들과 협업도 해야 하며, 주어진 업무에 대한 목표 산정과 개발 일정 산출하기, 비기능적 요구 사항 검토하기 등 비즈니스적 측면에서 다양한 능력을 필요로 한다. 발표에서는 발표자 주위의 훌륭한 개발자들이 주어진 ..

- React 입문 강의 중 한 번 더 리마인드가 필요한 내용 정리  1. Javascript 런타임 환경 런타임? 프로그래밍 언어가 구동(running)되는 환경(environment)런타임 환경은 크게 브라우저와 node 환경으로 나뉨// 아래 파일을 브라우저에서 실행하면 정상작동 하지만, node 환경에서 실행하면 오류가 발생// test.jsfunction printAlert() { alert('이 함수는 브라우저 환경에서만 실행됩니다.');}printAlert(); 2. React Children의 사용children은 props 중 하나로, 자식 컴포넌트로 정보를 전달하는 방법컴포넌트 태그 안에 적는게 아닌, 컴포넌트의 opening 태그와 closing 태그 사이의 내용이 childre..

동기적 처리(동기적 흐름): 선행 작업이 끝날 때까지 기다렸다가 후행 작업이 진행되는 작업 흐름 ⇒ (가능한 그대로 외우기)실행 자체가 뒤에 된다는게 아님! 실행은 동기적으로 되지만, 작업이 끝날 때 까지 기다리지 않는 것※ 동기적: 위에서 아래로 실행도 되면서 ‘완료’도 되는 것// 동기적 작업 흐름의 예console.log(1)console.log(2)console.log(3)※ 비동기적: 위에서 아래로 작업은 실행은 되지만 완료는 기다리지 않고 다음 코드로 넘어가는 것// 비동기 처리의 예console.log(1)//setTimeout의 time이 0이더라도 3이 먼저 실행됨setTimeout(() => { console.log(2) }, 1000) console.log(3)01. PromisePr..