- 19
- 34 789
프론트맨
South Korea
Registrace 12. 03. 2024
프론트엔드 관련한 기술 정보와 강의를 전달해드립니다.
네카라쿠배 기본 역량 | CRA없이 react 앱 구성하기 | 4. webpack 적용하기
강의 관련하여 질문은 유튜브 댓글 또는, 아래 오픈카톡방에서 주시면 되겠습니다 (관리자가 부족하여, 즉각적인 답변은 어려울 수도 있습니다ㅠㅠ이는 추후 개선하도록 할 예정입니다)
강의 관련 질문을 할 때는 github 주소를 함께 올려주시면 좋아요! 에러가 발생한 상황을 보다 구체적으로 제시해주신다면, 더욱 정확한 답변을 드릴 수 있습니다 :)
1️⃣ 소스 코드 repo 링크
github.com/frontman-git/react-app-without-cra-code
2️⃣ 프론트맨 오픈카톡방 링크
open.kakao.com/o/gmP6SZqg
강의 관련 질문을 할 때는 github 주소를 함께 올려주시면 좋아요! 에러가 발생한 상황을 보다 구체적으로 제시해주신다면, 더욱 정확한 답변을 드릴 수 있습니다 :)
1️⃣ 소스 코드 repo 링크
github.com/frontman-git/react-app-without-cra-code
2️⃣ 프론트맨 오픈카톡방 링크
open.kakao.com/o/gmP6SZqg
zhlédnutí: 374
Video
프론트엔드 면접 단골 질문 7 | Virtual DOM에 대해 설명하시오
zhlédnutí 695Před 12 hodinami
원하시는 기업에 꼭 합격하시길 기원하겠습니다 :) 면접 연습에 스크립트가 필요하신 분들은 아래를 참고해주세요. 1. Virtual DOM의 개념에 대해 설명하세요 Virtual DOM은 웹 성능을 최적화하기 위해 사용되는 DOM 관리 방법으로, 웹 어플리케이션의 상태 변경 시, 객체 형태의 가상 DOM을 통해 변경된 부분만 찾아내어 이를 실제 DOM에 적용하는 기능을 합니다. Virtual DOM의 동작 순서는 Diffing과 Reconiliation, 크게 두 가지로 구분할 수 있는데, Diffing이란, Virtual DOM에서 변경점을 찾아내는 과정을 의미하며, Reconciliation이란, 찾아낸 변경점을 실제 DOM에 적용하는 과정을 의미합니다. 2. Virtual DOM이 동작하는 예시를 ...
INTP 개발자의 장단점 8가지 (본인 인팁임)
zhlédnutí 1,1KPřed 16 hodinami
오늘은 개발자로 업무하면서 느꼈던 인팁 성향의 장단점을 정리해 보았습니다. 물론 저에게만 해당되는 얘기일 수도 있겠지만요...ㅎㅎ인팁 여러분들의 생각은 어떠신가요??
네카라쿠배 기본 역량 | CRA없이 react 앱 구성하기 | 3. build process에 babel 적용하기
zhlédnutí 509Před 19 hodinami
강의 관련하여 질문은 유튜브 댓글 또는, 아래 오픈카톡방에서 주시면 되겠습니다 (관리자가 부족하여, 즉각적인 답변은 어려울 수도 있습니다ㅠㅠ이는 추후 개선하도록 할 예정입니다) 강의 관련 질문을 할 때는 github 주소를 함께 올려주시면 좋아요! 에러가 발생한 상황을 보다 구체적으로 제시해주신다면, 더욱 정확한 답변을 드릴 수 있습니다 :) 1️⃣ 소스 코드 repo 링크 github.com/frontman-git/react-app-without-cra-code 2️⃣ 프론트맨 오픈카톡방 링크 open.kakao.com/o/gmP6SZqg
자바스크립트 문제 | console.log의 출력값을 맞히시오
zhlédnutí 990Před 14 dny
console.log의 출력값을 맞혀보세요! 참고로 저는 6문제 맞췄습니다 🤣🤣 Q1 00:05 Q2 00:30 Q3 01:02 Q4 01:31 Q5 01:52 Q6 02:29 Q7 03:03 Q8 03:28 Q9 03:50 Q10 04:22
네카라쿠배 기본 역량 | CRA없이 react 앱 구성하기 | 2. Babel 적용하여 JSX 문법 사용하기
zhlédnutí 467Před 14 dny
강의 관련하여 질문은 유튜브 댓글 또는, 아래 오픈카톡방에서 주시면 되겠습니다 (관리자가 부족하여, 즉각적인 답변은 어려울 수도 있습니다ㅠㅠ이는 추후 개선하도록 할 예정입니다) 강의 관련 질문을 할 때는 github 주소를 함께 올려주시면 좋아요! 에러가 발생한 상황을 보다 구체적으로 제시해주신다면, 더욱 정확한 답변을 드릴 수 있습니다 :) 1️⃣ 소스 코드 repo 링크 github.com/frontman-git/react-app-without-cra-code 2️⃣ 프론트맨 오픈카톡방 링크 open.kakao.com/o/gmP6SZqg 3️⃣ Babel CDN 링크 unpkg.com/@babel/standalone/babel.min.js
네카라쿠배 기본 역량 | CRA없이 react 앱 구성하기 | 1. Webpack, Babel 없이 React 앱 개발하기
zhlédnutí 1,5KPřed 14 dny
목감기에 걸려 목소리가 안좋습니다ㅠㅠ 양해 부탁드리겠습니다 강의 관련하여 질문은 유튜브 댓글 또는, 아래 오픈카톡방에서 주시면 되겠습니다 (관리자가 부족하여, 즉각적인 답변은 어려울 수도 있습니다ㅠㅠ이는 추후 개선하도록 할 예정입니다) 강의 관련 질문을 할 때는 github 주소를 함께 올려주시면 좋아요! 에러가 발생한 상황을 보다 구체적으로 제시해주신다면, 더욱 정확한 답변을 드릴 수 있습니다 :) 1️⃣ 소스 코드 repo 링크 github.com/frontman-git/react-app-without-cra-code 2️⃣ 프론트맨 오픈카톡방 링크 open.kakao.com/o/gmP6SZqg 3️⃣ React CDN 링크 unpkg.com/react@18/umd/react.production.m...
네카라쿠배 기본 역량 | CRA없이 react 앱 구성하기 | 0. 강의 소개
zhlédnutí 1,5KPřed 14 dny
안녕하세요 :) 오늘부터 네카라쿠배 기본 역량 중 하나인, 번들러와 트랜스파일러에 대한 강의를 진행하려고 합니다. 이를 위해 우리가 이번 강의에서 해볼 작업은 바로 'CRA없이 React 앱 구성하기' 인데요, 많은 관심 부탁드리겠습니다 🙏🙏 강의는 격일로 하나씩 업로드 할 예정입니다. 첫 강의이다보니, 수강생 분들의 피드백을 받으며 진행하는 것이 좋을 것 같아서요ㅎㅎ 영상의 내용 중 부족한 부분이 있다면, 주저하지 말고 댓글로 피드백 부탁드리겠습니다. 강의 관련하여 질문은 유튜브 댓글 또는, 아래 오픈카톡방에서 주시면 되겠습니다 (관리자가 부족하여, 즉각적인 답변은 어려울 수도 있습니다ㅠㅠ이는 추후 개선하도록 할 예정이며, 구독자 분들의 이해부탁드리겠습니다) 강의 관련 질문을 할 때는 github 주...
대기업에서도 사용하는 VSCode 확장 프로그램 Best 5
zhlédnutí 9KPřed 21 dnem
오늘은 대기업 실무에서도 활용하는 VSCode 확장 프로그램들을 소개해 보았습니다. 그럼 모두 즐거운 코딩되시길 바랍니다 :) ⚠️ Bookmarks 익스텐션 설치 후, Turbo Console Log의 숏컷이 먹지 않는 이슈가 있습니다. Bookmarks의 숏컷과 충돌이 나기 때문인데요, 이 경우 각자 생각하는 우선순위에 따라 숏컷을 조정해주시면 되겠습니다.🙏🙏 ⚠️ 04:30 쯤 녹음이 잘못된 부분이 있습니다. Ctrl V가 맞습니다. 🙏🙏 1️⃣ 00:00 Code Spell Checker 링크: marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker 1. 왼쪽 사이드바 검색창에 Code Spell Chek...
프론트엔드 면접 단골 질문 6 | Reflow와 Repaint에 대해 설명하시오
zhlédnutí 1,8KPřed 21 dnem
원하시는 기업에 꼭 합격하시길 기원하겠습니다 :) 면접 연습에 스크립트가 필요하신 분들은 아래를 참고해주세요. 1. 리플로우란 무엇인지 설명해주세요 리플로우란, 웹 페이지 내에서 요소의 위치 또는 크기에 변화가 있을 때, 변화된 레이아웃을 다시 계산하여 렌더 트리에 적용하는 과정을 의미합니다. width, height, padding, margin 그리고 border-width와 같은 크기 관련 속성, position, top, left와 같은 위치 관련 속성, display, flex 속성과 같은 레이아웃 관련 속성, font-size, font-weight와 같은 폰트 크기 관련 속성이 리플로우를 유발하는 속성입니다. 2. 리페인트란 무엇인지 설명해주세요 리페인트란, 웹 페이지 내에서 요소의 시각적...
프론트엔드 면접 단골 질문 5 | 비동기 함수와 Callback 함수, 그리고 Event Loop에 대해 설명하시오
zhlédnutí 2KPřed 2 měsíci
원하시는 기업에 꼭 합격하시길 기원하겠습니다 :) 면접 연습에 스크립트가 필요하신 분들은 아래를 참고해주세요. 1. 비동기 처리는 왜 필요한가? 아시다시피, Javascript는 싱글 스레드 언어입니다. 그 말인 즉슨, 두 개 이상의 연산이나 함수를 동시에 실행할 수 없다는 뜻이죠. 하나의 연산이 실행 중이면, 쓰레드가 block되는 것입니다. 현대 컴퓨터 성능에서, 간단한 함수 실행에 의한 쓰레드 block은 체감하기 힘들지만, 네트워크 요청, DB Query, 파일 시스템 제어 등 시간이 오래 걸리는 작업도 있습니다. 이런 작업들이 메인 쓰레드를 block하고 있으면, 심각한 자원 낭비와 사용성 저하로 이어질 수 있겠죠. 따라서, 메인 쓰레드를 block하지 않고 이런 작업들을 수행할 수 있는 방안...
프론트엔드 면접 단골 질문 4 | key에 배열 index를 사용하면 안되는 이유
zhlédnutí 1,6KPřed 3 měsíci
원하시는 기업에 꼭 합격하시길 기원하겠습니다 :) 면접 연습에 스크립트가 필요하신 분들은 아래를 참고해주세요. React에서 사용되는 key는 무엇인지 설명하세요 Key는 리스트를 매핑하여 동일한 컴포넌트를 여러 개 렌더링할 때 각 컴포넌트에 전달되는 고유한 값입니다. 재조정 단계에서 각 노드의 key 값들을 비교하여 리스트에 추가, 삭제, 혹은 순서가 변경된 노드를 식별하고, 이를 통해 필요한 re-rendering만 수행하기 위해 사용합니다. 배열의 index를 key값으로 하면 안되는 이유가 무엇인가요? 배열의 인덱스를 key 값으로 사용하면 안 되는 이유는 순서가 변경되어도 동일한 key 값이 유지되기 때문입니다. A,B,C 순서로 rendering되어 있던 컴포넌트가 C,B,A 순서로 변경되어...
프론트엔드 면접 단골 질문 3 | Promise와 async-await의 개념
zhlédnutí 1,6KPřed 3 měsíci
원하시는 기업에 꼭 합격하시길 기원하겠습니다 :) 면접 연습에 스크립트가 필요하신 분들은 아래를 참고해주세요. Promise의 개념에 대해 설명해주세요 Promise는 비동기 연산의 상태를 나타내는 객체입니다. 비동기 처리가 진행중이면 pending, 성공이면 fulfilled, 실패면 rejected라는 상태값을 가집니다. Promise는 비동기 프로그래밍을 then과 catch의 체이닝을 통해 보다 간결하게 표현할 수 있도록, ES6에서 새로 도입되었습니다. Promise 등장 이전에는 어떤 방식으로 비동기 처리를 했는지 설명해주세요 Promise 등장 이전에는 비동기 작업을 처리하는 함수에 성공 콜백과, 실패 콜백을 각각 넘겨서 완료 상태에 따른 처리를 했습니다. 이런 방식이다 보니, 두 개 이상...
3문제ㅠ JS지식 많이 쌓고 가네요
좋은 정보 감사합니다!
webpack말고 다른걸 깊이 보는게 시간상 이득일것 같네요.. vite도 아니고 swc도 아니고 esbuild도 아닌 webpack 이라...
좋은 강의 감사합니다!
잘보고 있습니다! 직접 구성하는 걸 단계별로 보다보니 커스텀할 수 있다는 장점이 있지만 알고 있는 옵션이 없다면 하나 넣고 돌려보고, 오류 발생하면 해당하는 옵션 찾아서 추가하고, 또 돌려보고, 이걸 반복하는게 쉽지 않을 것 같다는 생각이 듭니다. (물론 그래서 이렇게 강의를 통해 기본적인 옵션을 알아보고 있지만요 ㅎㅎ) 실무에서는 어떤식으로 구축해나가는지도 궁금합니다. 초기 기본 셋팅을 하고 필요할 때마다 찾아보고 점진적으로 추가해나가게 되나요? 필요한 옵션을 잘찾는 방법도 있을까요? 좋은 강의 감사합니다!!
from "" import {} 이런 식으로 문법을 만들었어야 하는데, 왜 import { } from "" 이런 식으로 만들어서 추론이 불가능하게 문법을 만들었을까요...
CRA를 제외한다면, vite번들러를 쓴다면, 저런과정 없이 쉽게 react 프로젝트 생성이 되는데, webpack을 반드시 써야하는 상황이 있나요?
시청해주셔서 감사합니다 :) CRA나 vite을 쓰지 말아야하는 상황은 제 경험상 없던 것 같습니다. 다만, 해당 강의를 제작한 의도는 CRA와 vite을 사용하면 안될 상황이 있기 때문이라기 보단, CRA나 vite없이 개발 환경을 셋팅해보면서 기술적인 이해를 넓혀보는데에 초점을 두고 있습니다! vite은 엄밀히 말하면 번들러라기 보단, 빌드 도구로 보는게 적절할 것 같아요 :) 내부적으로는 Rollup이라는 번들러를 사용하고 있죠. 강의를 통해 기술적인 이해를 넓히다 보면 왜 CRA보다 vite이 요새 많이 쓰이고 있는지, 왜 개발 환경이 더 좋은지 등등 보다 깊이 있는 비교가 가능해질 것으로 보입니다. 구체적인 강의 제작 의도는 아래 영상 확인하시면 되겠습니당 :) czcams.com/video/V4j-207Umco/video.html
2번 문제 이해가 안돼서 노드에 돌려봤는데 baaa가 출력되는데...
저도 node에 해봤는데 banana가 잘 나오는 것 같아요~ 혹시 노드 버전은 몇 버전이신가요? 전 20.9.0 버전에서 해봤습니다
앗 대박 늘 궁금한데 개발하는덴 지장이 없어서 넘어갔던 부분을 이렇게 잘 설명해주시다니! 감사합니다
시청해주셔서 감사합니다 :)
2:24 실시간 민간사찰 당한 기분
님도 인팁?!
설명 깔끔하고 잘해서 잘 보고 갑니다 :)
감사합니다!!
와.. 자바스크립트 공부하면서 console.log 말고 다른건 사용해본적 없었는데 엄청난 꿀팁이군요..!!!
궁금했던 부분인데 마침 알고리즘에서 뜨네요ㅎ 정주행하는중입니다 도움되는 정보 많이 올려주세요:)
시청해주셔서 감사합니다 :)
리얼 개공감이네요 ㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋ인팁은 다 비슷한가봐요
주인장님 건강보단 강의가 우선입니다!
ㅋㅋㅋㅋㅋㅋㅋ알겠습니다!! 4강도 얼른 올려보죠
ㅋㅋ진짜신기하네 저도 인팁. 근데 생각보다 따뜻한데
그쵸ㅋㅋㅋㅋ그치만 인팁은 알게 모르게 벽을 치고 있는 느낌이라...사람들이 잘 안 다가오는 것 같아요ㅎㅎ
@@user-fw2se9ms4i ㅋㅋ저도 말 아무도 안검요 ㅜㅋㅋ
2024년 최고의 선택
감사합니다 :)
와 바나나..
저도 바나나 틀렸어요..ㅋㅋㅋㅋㅋㅋ
저도 INTP 개발자인데 매우 공감이 가네요 ㅋㅋ MBTI 별로 정리해보면 재밌을 것 같네요!
공감이 가신다니 다행입니다!! ㅎㅎ 저만 그런줄...ㅋㅋㅋㅋ
오오오오~ 구독!
오오오오~~감사합니다!!!
웹팩 강의도 해주시면 감사하겠습니다!!
넵 4강부터는 본격적으로 webpack에 대해 다룰 예정입니다!
와 잘보겠습니다!!!
봐주셔서 감사합니다!
너무 재밌어용!!
감사합니당!!
사이트 링크 : animista.net/
브금 무섭네요 ㅎㅎ 콘솔로 버그 잡는 모습 연출인줄 ㅋㅋㅋㅋㅋㅋㅋ
제 유튜브에도 이 사이트 소개하고 싶은데 괜찮을까요? 프론트엔드 개발 관련된 컨텐츠 다루는 유튜브입니다. 물론 다른 영역의 컴퓨터 지식도 다루긴 합니다만...
물론이죠~ㅋㅋㅋㅋ제가 만든 사이트도 아닌걸요 :) 여러 채널에서 홍보해주시면 사이트 제작자도 좋아할거에요
최고예요...!!!!!
감사합니다...!!!!!