전 강의 25% 할인, 딱 하루만 더 ⏰

블로그

이정환 Winterlood

한입 FE 완강 챌린지 2기를 모집합니다

🏃 시작부터 완강까지! 함께합니다.한입 FE 챌린지는 수강생 여러분들의 완강을 도와드리고자 하는 목적으로 기획되었습니다.매일 매일(일요일 및 공휴일 제외) 조금씩 강의를 완강하실 수 있도록 진도표를 제공해드리며당일 배운 내용을 바로 복습하실 수 있도록 매일 미션도 함께 제공해 드립니다.미션 검사도 당연히 제공됩니다 🫡 챌린지 강의 목록한입 FE 챌린지 2기는 다음 2개의 강의로 진행됩니다.한 입 크기로 잘라먹는 Next.js  한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지자바스크립트 학습을 염두에 두셨던 분들이라면 “한 번에 끝내는 자바스크립트” 챌린지에Next.js 학습을 염두에 두셨던 분들이라면 “한 입 크기로 잘라먹는 Next.js”에 참여하시는걸 추천드립니다. 상세 안내참여 혜택참여 리워드참가하시기만 해도 받으실 수 있는 리워드입니다.완강 의지를 불태우기 위한 특별 강의 할인 쿠폰을 제공합니다. (미 구매자 한정)완주 리워드모든 미션을 완료해야 받을 수 있는 리워드입니다.한입 FE 멘토들의 다른 강의 할인 쿠폰을 제공합니다.향후 챌린지 개설시 프리패스로 참여하실 수 있습니다.기간 및 일정모집 기간 :09월 1일 ~ 09월 07일(토) 자정까지활동 기간 :한 번에 끝내는 자바스크립트 : 09.09(월) ~ 09.27(금), 전체 기간 3주, 미션 수행일 14일한 입 크기로 잘라먹는 Next.js : 09.09(월) ~ 10.05(토), 전체 기간 4주, 미션 수행일 20일매주 일요일, 공휴일(추석 연휴 기간 포함)에는 쉽니다 😴활동 내용진도표에 맞춰 강의 수강하기하나의 강의를 선택해 완강합니다.매일 매일 체계적으로 수강하실 수 있도록 강의별 진도표를 제공합니다.커뮤니티를 통해 매일 인증합니다.퀴즈 및 과제 수행하기당일 배운 내용을 복습할 수 있는 퀴즈(or 과제)를 매일 제공합니다.커뮤니티를 통해 매일 인증합니다.커뮤니티에서 지식&경험 공유하기챌린지 참여자분들과 함께 한입 FE Discord 채널에서 소통합니다.미션 제출, 수강 인증, 스몰톡 등의 활동을 진행합니다.접수 방법https://bit.ly/4cJqGgZ위 링크로 신청해주세요 문의onebite.fe@gmail.com

프론트엔드챌린지스터디완강JSNext.jsJavaScriptNextjsNext

아셀

자바스크립트, 더 이상 고민하지 마세요!

웹 페이지부터 서버, 애플리케이션까지 뚝-딱만들 수 있는 만능 프로그래밍 언어, 자바스크립트!​하나라도 해당되신다면 꼭! (。•̀ᴗ-)✧✓ 개발자로의 취업을 앞두신 분✓ 코딩/웹 개발을 시작하는 분✓ 자바스크립트의 개념을 탄탄히 쌓고 싶은 분✓ 다양한 프로젝트로 실력을 늘리고 싶은 분> 딱 맞는 자바스크립트 강의 보러 가기 <한 눈에 보는 추천강의 PICK내가 찾던 '그' JS 강의 살펴보기(1) JS Best 강의(2) 왕초보를 위한 강의(3) 한 번에! 올인원 강의(4) 가볍게 시작하는 무료 강의​"제일 많은 수강생에게 인정받은 강의로 시작하고 싶어요"(1) 인프런이 자신있게 소개하는 최고의 JavaScript 강의제대로 파는 자바스크립트 (JavaScript)✓ 평점 4.9점✓ 수업 80개 (13시간 3분)✓ 수강생 2,142명가장 최신의 자바스크립트에 대해 배우고 싶다면? 학습을 위해 복붙 가능한 실습 명령어+코드까지코어 자바스크립트✓ 평점 4.8점✓ 수업 8개 (1시간 57분)✓ 수강생 3,868명2시간만에 JS 핵심을 빠르게 배우고 this, 콜백, 스코프 등에 대한 동작원리 학습하기시나브로 자바스크립트✓ 평점 5.0점✓ 수업 118개 (19시간 56분)✓ 수강생 426명자바스크립트의 동작원리를 '제대로' 배우고 how가 아닌 why에 집중하는 정석 강의인프런에서만 만날 수 있는 맞춤형 자바스크립트 강의!왕초보를 위한 강의, 올인원 강의,그리고 가볍게 시작하는 무료 강의까지더 많은 강의로 나에게 딱 맞게 시작할 수 있으니까더 이상 고민하지 마세요! ദ്ദി˶ˊᵕˋ˵)>> 내게 맞는 강의 보러 가기 <<

웹 개발자바스크립트JS코딩프로그래밍언어웹개발프론트엔드javascript프로젝트개발자무료강의

HYERIN JO

인프런 워밍업 클럽 스터디 1기 FE 2주차 발자국

인프런 워밍업 클럽 2주차 발자국스터디 첫 모임에서 예산 계산기 앱 코드리뷰를 했는데 확실히 다른 사람들 코드를 보면서 배우는 것들이 있는 것 같다. 강의 요약리액트란?React 는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다React는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다Framework vs LibraryFramework는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 갖고 있다Library는 어떠한 특정 기능을 모듈화 해놓은 것이다리액트를 사용하는 이유?상대적으로 배우기 쉬운 라이브러리여러 기능들을 위해 이미 만들어져 있는 라이브러리 환경이 많음많은 기업들의 사용으로 검증이 된 라이브러리컴포넌트?리액트로 만들어진 앱을 이루는 최소한의 단위브라우저가 그려지는 원리와 가상돔리액트의 주요 특징 중 하나는 가상돔을 사용한다는 것이다Critical Rendering PathDom tree 생성Render tree 생성LayoutPaint가상돔이 작동되는 방식?리액트에서는 항상 렌더링 이전의 객체(가상돔)와 렌더링 이후의 객체(가상돔)를 가지고 있다리액트에서는 어떠한 State(데이터)가 바뀌면 가상돔이 새로 생성된다Diffing: 바뀐 부분을 찾는 과정Reconciliation: 바뀐 부분만 실제 돔에 적용시켜주는 것SPA웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것JSX자바스크립트의 확장 문법리액트에서는 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타내준다Key 속성?key는 React가 변경, 추가 또는 제거된 항목을 식별하는데 도움이 된다key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있다Array.prototype.map배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드Array.prototype.filter주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 한다state컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체Spread Operator(`...`)ES6에 새롭게 추가되었으며, 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다React HooksReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 기능필요한 이유?Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해 개발됨Propsproperties의 줄임말props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다구조 분해 할당배열이나 객체의 속성을 해체하며 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식스스로 칭찬하고 싶은 점평일 낮에는 시간이 거의 없음에도 불구하고 금요일 스터디에 참여하기 위해 어떻게든 예산 계산기 앱 을 완성시켰다.아쉬웠던 점2주차 발자국을 제때 작성해서 올리지 못한 것과 주말에 시간이 있음에도 밀린 강의를 듣는 거에 시간을 많이 투자하지 못했다.다음주 목표발자국 마감기한에 맞춰 올리기!포켓몬 도감 앱 완성하기!

프론트엔드인프런워밍업클럽JS

HYERIN JO

인프런 워밍업 클럽 스터디 1기 FE 1주차 발자국

인프런 워밍업 클럽 1주차 발자국시간 분배를 잘못해서 강의를 거의 듣지 못하고 미션도 해결하지 못했다...2주차부터 열심히 따라가야 한다.강의 요약console 객체새로 알게 된 메서드: table(), warn(), time(), timeEnd(), clear()var, let, constvar: 중복 선언, 재할당 가능let: 중복 선언 불가능, 재할당 가능const: 중복 선언, 재할당 불가능변수의 참조 범위var: 함수 레벨 스코프let, const: 블록 레벨 스코프호이스팅코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어올려지거나 끌어올려지는 경우JS 타입원시 타입: String, Number, Boolean, Symbol, null, undefined,참조 타입: Object, Array...JS 타입 변환String(), Number() constructor 사용toString() 등의 메서드 사용자동 타입 변환string + number = stringJS 연산 및 Math Object+, -, *, /, %Math.PI, Math.E, Math.round(), Math.ceil(), Math.min(), Math.max(), Math.randon(), ...Template Literalsbacktick을 사용Loopsforfor/inwhiledo/whileWindows 객체브라우저에 의해 자동으로 생성되며 웹 브라우저 창을 나타냄브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어할 수 있음var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 됨DOM?메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해줌웹 페이지를 이루는 요소들을 JS가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델을 의미함DOM 트리를 DOM에서 제공해주는 API를 이용해서 조작할 수 있음CRP 과정DOM Tree 생성 > Render Tree 생성 > Layout(reflow) > Paint스스로 칭찬하고 싶은 점1주차 강의를 거의 듣지 못했지만 연휴를 활용하여 강의를 듣고 공부를 했다.아쉬웠던 점1주차 강의를 거의 듣지 못했다. 열심히 따라가야한다.보완하고 싶은 점평일에 시간이 부족하여 진도를 따라가지 못하므로 주말을 활용해서 따라가도록 해야겠다. 우선은 내일까지 연휴이니 연휴를 활용해서 진도를 따라잡아야겠다...다음주 목표최소 진도 따라잡기! 중간 점검까지 미션 3개 이상 완료하기! 

프론트엔드인프런워밍업클럽JS

채널톡 아이콘