1. 문제a. 평소에 바닐라 자바스크립트를 거의 사용하지 않는데 과제를 바닐라 js로 풀어보려고 하니까 어떻게 접근해야할지를 몰라서 며칠동안 고민했었던 것 같다. b. props drilling을 피하고 외부 컴포넌트에 있는 값을 사용할 수 있는 방법을 고민하였다. 2. 시도a. 처음에는 제공된 코드(main.js)를 그대로 가져와서 리팩토링 해보려고 했는데 DOM 조작을 최소화해야한다는 것을 보고템플릿 리터럴로 HTML 요소를 생성해볼까 시도해보았다.b. props를 객체화하여 전달하는 방식으로 여러가지 함수들을 부모 컴포넌트에서 하나의 객체로 합쳐서 그 객체를 props로 전달하였다. 3. 해결a. 그것도 영 맘에 들지 않았고 코드가 지저분해 보였다.그래서 그냥 리액트를 임포트하고 main.basic..
1. 문제개인적인 문제이긴 하지만 이번주에 새 회사로 출근하게 되면서 적응기간이라 피로도가 굉장히 높았다.과제 풀기가 조금 버겁게 느껴졌다. 2. 시도gpt를 많이 활용했던 것 같다... 이번에 gpt4o 구독을 시작했다.테오께 멘토링을 받으면서 gpt의 도움을 받는것이 구글링의 도움을 받는 것과 차이 없다고당연히 활용해야 된다는 말씀을 듣고 용기를 얻어 다른 분들의 코드를 참고하면서 과제를 풀었다. 3. 해결gpt로 문제의 의도 파악을 하는데 도움을 많이 받았다. 테스트 코드의 의도에 대한 설명이라든지, 과제로 나온 함수에 파라미터가 어떤 의도로 들어간 것인지 파악할 수 있었다. 4. 알게된 것a. 바닐라 js로 리액트의 기본 기능을 구현하면서 어떤 방식으로 동작하는지 간단히나마 알 수 있게 되었다.b..
회사에서 이미 생성되어있는 프로젝트를 클론하여 pnpm을 이용해 종속성 패키지를 설치하였다. 그런데 npm으로 설치한 동료와 다르게 특정 몇가지 모듈을 찾을 수 없다는 오류가 발생하며 추가로 패키지들을 설치해야 제대로 애플리케이션이 실행되는 문제가 있었다. pnpm과 npm 의 차이pnpm과 npm은 모두 Node.js 환경에서 패키지 관리와 디펜던시 설치를 위한 도구이다. 둘 다 동일한 기능을 제공하지만, 성능과 저장 방식에서 차이가 있다.주요 차이점1. 성능 및 디스크 사용npm:모든 디펜던시를 프로젝트의 node_modules 디렉토리에 직접 설치한다.디펜던시가 중복될 수 있어서, 특히 큰 프로젝트에서는 디스크 공간을 많이 차지할 수 있다.pnpm:패키지를 중앙 저장소(글로벌 스토리지)에 한 번만 ..
1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)이번 주차를 지나며 겪었던 문제가 무엇이었나요?a. 과제 난이도가 좀 어려워서 어떻게 접근해야할 지 어려움이 있었다.b. 특히 advanced 문제는 풀어 놓고도 코드리뷰 시간에 내 코드를 설명하기가 어려웠다.2. 시도문제를 해결하기 위해 어떤 시도를 하셨나요?a. 다른 동기 분들의 코드를 참고하거나, 챗 GPT를 구독,,,하여 문제를 풀었다.b. advanced 문제에서 다루는 useContext나 Provider 관련해서 리액트 공식문서를 통해 학습을 진행중이다.3. 해결문제를 어떻게 해결하셨나요?a. 다른 동기 분들의 코드를 참고하거나, 챗 GPT를 구독,,,하여 문제를 풀었다.b. advanced 문제에서 다루는 useContext나..
1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)이번 주차를 지나며 겪었던 문제가 무엇이었나요?처음 시작하는 주였어서 그런지 큰 문제는 없었던 것 같지만,학습 자료에 첨부된 레퍼런스나 동영상들이 다 영어로 되어 있어서 바로바로 알아듣기에 좀 무리가 있었다.2. 시도문제를 해결하기 위해 어떤 시도를 하셨나요?처음에는 유튜브 영상에 영어자막을 자동 번역해주는 기능이 있어서 사용해봤는데 제대로 한국어로 번역이 되지 않아서(번역이 밀리거나 생략되는 부분이 많았음....)그냥 영어 자막으로 보았다..영어로 작성된 레퍼런스 블로그는 pdf로 저장해서 아이패드로 해석해가면서 읽었다.3. 해결문제를 어떻게 해결하셨나요?영상은 영어 자막을 설정 해놓고 자막을 한 줄 한 줄 읽어가면서 해석하면서 들었고 유..
리액트에서 성능 개선하면 메모이제이션이 가장 먼저 떠오를 것이다.최근 애플리케이션의 성능을 개선하길 원하며 수많은 함수들이 useCallback으로 래핑되어 있다.하지만 모든 함수를 useCallback으로 감싼다고 해서 애플리케이션의 성능이 좋아지는 것일까? 메모이제이션이 왜 필요할까?이는 자바스크립트에서의 값 비교와 관련이 있다. string이나 boolean같은 원시 값들은 비교가 매우 직관적이다.const a = 1;const b = 1;a === b // true 보이는 값이 바로 그 값이다. 즉, 위의 예제에서 a와 b를 비교했을 때, 보이는 것과 같이 두 변수의 실제 값은 동일하다. 하지만 object와 array, function과 같은 참조 값들은 다르다.어떤 변수에 객체를 할당했을 때 ..
개발자로서의 첫 발을 디딘 회사에서 재정악화로 하차하게 되면서 나는 낙동강 오리알이 되었다.박살난 멘탈을 수습하여 재취업에 운좋게 성공하게 되었지만, 다시금 취업 준비를 하고 면접을 보러 다니면서 내가 사용한 기술에 대해서 사용한 이유와 방향성에 대해 남들이 납득할 수 있게 설명하는 것에 대한 필요성을 많이 느꼈다.지금까지 얼레벌레 되는대로 개발했다면 내가 개발하는 방향성에 대해서 확신을 가지고 개발하고 싶다는 생각이 들었다. 혼자 공부하면서 이렇게 공부하는게 맞을까 고민하던 차에 지인을 통해 주니어 웹 개발자를 대상으로 하는 부트캠프에 대해서 알게 되었다.혼자 공부하는 것도 물론 도움이 되겠지만 내 상황에, 내 시기에 도움 받을 수 있는 커리큘럼을 가진 교육기관을 이용하는 게 좀 더 빠른 길이 아닐까 ..
0. FOIT과 FOUT 토이프로젝트로 지뢰찾기를 만들던 중 배포 후 폰트가 늦게 적용되는 현상이 나타났다. 폰트가 늦게 적용되는 현상에는 FOIT(Flash of Invisible Text), FOUT(Flash of Unstyled Text)가 있는데,FOIT은 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 현상이고,FOUT은 브라우저가 폰트를 다운로드하기 전까지 폰트 스타일이 적용되지 않는 현상이다.나의 경우 FOUT 현상이 나타났다. 폰트가 늦게 적용되는 현상이 일어나는 것은 브라우저의 동작에서 원인을 찾을 수 있다.아래 그림은 브라우저가 페이지를 렌더링할 때 정보를 요청하는 순서를 나타낸다. T0: 브라우저가 HTML 문서 요청T1: DOM 구성, 브라우저가 CSS, JS 및 기타 ..
