Front-End Developer
규모가 크지 않은 팀프로젝트의 git-flow전략(+인프런 강의영상)
하고싶은 말 이 긴 글을 쭉쭉내리며 음~하며 읽으시는것보다 (사실 정리가 잘 되어있는 글은 아닙니다.) 아래 강의를(무료) 보시며 한번 직접 따라해보시는것이 훨씬 도움이 됩니다! 꼭 두,세번정도 이것저것 시도해보시며 사이클을 돌려보시면 생각보다 쉬운데?! 하실거에요. 강의명 -> 깃&깃헙 브랜치 3개로 협업하기(주니어개발자 팀프로젝트) https://www.inflearn.com/course/30%EB%B6%84-%EC%8B%9C%EC%A6%8C4-%EA%B9%83%ED%97%88%EB%B8%8C# [무료] 30분 요약 강좌 시즌4 : 알잘딱깔센 GitHub - 인프런 | 강의 알아서! 잘! 딱! 깔끔하고! 센스있게! 정리하는 GitHub 핵심 개념 책의 무료강의입니다. 해당 책과 Notion 링크도 무..
리액트 유치원이 개원했습니다. (유투브 채널개설)
https://www.youtube.com/watch?v=Cs5kst_q-80 제가 워낙 지식이나 경험을 풀어서 전달하는 일을 좋아하기도 하고, '최고의 공부방법은 남에게 가르치는것이다'라는 신념 아래 제가 공부한 내용을 강의형식으로 만들어 유투브에 올리기 시작했습니다. 저의 전달력이 형편없지는 않으니 누군가에게는 도움이 되리라고 믿습니다. 물론 그 깊이는 정말 얕지만, 깊고 양질의 내용을 전달할 수 있을때까지 열심히 해봐야겠죠. 앞으로 해보고싶은 컨텐츠는 많은데요, 근본있는 자바스크립트 주니어개발자 기술면접시리즈 가능하다면 프론트앤드 개발자 취준일기 등등이 있습니다. 욕심이 많네요ㅎㅎ 요즘엔 정말 '도전'이라는게 뭔지 가슴깊게 느끼고 있습니다. 이 길의 끝에 저는 어디에 닿아있을까요. 프론트앤드 개발자..
useState Lazy initialization - 게으른 초기화가 대체 뭔소리야? (+유투브 영상 업로드)
해당 주제로 유트브에 영상을 올렸습니다! 체키라웃. 완전쉬움 https://youtu.be/Z_eWhLpnhbk 결론: 콜백은 괜히 콜백이 아니다~! 사건의 발단 useState를 배우며 Lazy initialization이라는 개념이 나왔다. 근데 당최 뭔 소리인지 이해가 되지 않았다. 콜백을 사용하면 초깃값을 한번만 실행해서 좋다는건 알겠는데... 왜 그런건지가 명확히 이해가 안되었다. 그래서 내가 이해하려고 정리해봤다. 사실 이해하니까 별거아니다! useState Lazy initialization 만약 함수컴포넌트 안 아무데나 'console.log'를 넣는다면 이후에 화면이 재렌더링되는 어떤 일을 할 때마다(버튼을 클릭했다 치자) 콘솔로그가 출력되는 것을 발견할 수 있다. 이는 당연한 결과인데,..
면접관님: 메세지 큐와 이벤트루프가 뭔지 아시나요? (+ 유투브)
네. 압니다. https://youtu.be/8AevEF4hOg8 나의 언어로 풀어본 최종 답변 이는 자바스크립트 동작원리에 관련이 있다고 말할 수 있습니다. 흔히 자바스크립트는 single thread라고 말하는데요, 이는 우리의 코드를 실행시켜주는 Stack이라는 공간이 단 하나뿐이고, 코드를 한번에 한줄씩만 순차적으로 실행시킨다는 것을 의미합니다. 이를 ‘동기적'이라고 표현하기도 하죠. 그런데 setTimeout같은 코드를 내 코드의 중간에 넣었다고 가정했을 때, 뒷사람들 다 기다리게 하면서 setTimeout함수가 실행되기를 기다릴 수는 없잖아요? 그래서 잠깐 대기실과 같은 역할을 하는 web APIs로 보내게 됩니다. 그곳에서 기다리다가 설정한 시간이 다 지나게 되면 바로 Stack에서 실행될 ..
면접관님: 브라우저 렌더링 과정을 설명해보시겠어요?(+유투브)
https://youtu.be/_87sAy_SsxQ 나의 언어로 풀어본 최종 답변 우선 사용자가 URL을 입력하면 브라우저 엔진은 쿠키나 세션에 원하는 데이터가 캐싱이 되어있는지 확인합니다. 만약 요청한 정보가 있으면 렌더링 엔진에게 바로 보냅니다. 반면 요청한 정보가 없다며 도메인네임시스템(DNS)에 찾아가서 IP주소를 요청하여 받은 IP주소의 서버를 찾아가서 자료를 요청하고 데이터를 받아와 렌더링 엔진에게 전달합니다. 렌더링 엔진은 HTML문서를 파싱하여 돔트리를 구축하고, CSS 파일과 함께 모든 스타일 요소를 파싱하여 CSSOM 트리를 만듭니다. 그러다가 JS를 만나게 되면, 작업을 중지하고 JS Engine에게 제어 권한을 넘겨 JS Engine이 script를 파싱합니다. DOM트리와 CSSO..
useCallback. [의존성 배열] 난 너만 바라봐
결론: [의존성 배열] 난 너만 바라봐. useCallback useCallback(() => { return value; }, [의존성배열]) const calculate = useCallback((num) => { return num + 1; }, [의존성배열] 이렇게 함수를 useCallback으로 감싸주면 이제 이 calculate라는 변수는 메모이제이션된 함수를 갖고있게된다. 이는 의존성 배열 안에있는 값이 변경될 때 에만 초기화된다. 이 useCallback이 필요한 이유를 알고 이해하기 위해 상황을 설정해보자. 상황설정 간단한다. 인풋하나와 버튼하나가 있다. 인풋값은 number만 들어간다. 그리고 useState를 사용하여 변경값을 input value에 넣어준다. 버튼의 변화를 감지하여 ..