본문 바로가기

개발공부

 (105)
Lists and Keys (리스트, 키) / 여러 개의 컴포넌트에 렌더링하기 [처음 만난 리액트 #28] 10강. Lists and Keys [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com List List: 목록 컴퓨터 프로그래밍에서는 같은 아이템을 순서대로 모아놓은 것이 리스트에 해당됩니다. 리스트를 위해 사용하는 자료구조가 Array(배열)입니다. Array : JavaScript의 변수나 객체들을 하나의 변수로 묶어놓은 것 const numbers = [1, 2, 3, 4, 5]; ▲ JavaScript에서의 배열 리액트에서는 배열을 사용해서 리스트 형태로 element들을 렌더링할 수 있습니다. Key Key: 열쇠 열쇠의 특징? 열쇠는 모두 ..
조건부렌더링을 사용하여 로그인 여부를 나타내는 툴바 만들기 실습 [처음 만난 리액트 #27] 9강. Conditional Rendering [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 1. VS Code로 create-react-app을 이용해 만든 프로젝트 열기 2. chapter_09이라는 이름의 폴더를 생성 3. 만든 폴더에 Toolbar.jsx라는 이름의 파일을 새로 만들고, 아래 코드처럼 Toolbar이라는 이름의 함수 컴포넌트를 만든다. Toolbar 컴포넌트는 사용자의 로그인 여부를 나타내는 isLogedIn이라는 값을 props로 받아서 조건부 렌더링을 사용해 환영메세지를 표시하거나 감추고 로그인, 로그아웃 버튼을 보여주는..
Conditional Rendering의 정의, JavaScript의 Truthy와 Falsy, Element Variables의 개념, Inline Conditions [처음 만난 리액트 #26] 9강. Conditional Rendering [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com Conditional Rendering이란? - Condition은 영단어로 조건이라는 의미입니다. - Conditional Rendering은 조건에 따른 렌더링이라는 뜻 → 조건부 렌더링 : 어떠한 조건에 따라서 렌더링이 달라지는 것 * 여기서 조건이란? 프로그래밍에서 사용하는 조건문을 말합니다. 조건문의 결과는 true아니면 false가 나오는데, 이 결과에 따라서 렌더링이 달라지는 것을 조건부 렌더링이라고 합니다. ex) True이면 버튼을 보여주고..
개발자 학습 로드맵: 개발 분야, 공부법 [스파르타 코딩클럽 - 개발자 취업 준비의 모든 것 #2] ▼ 강의 수강 링크 개발자 취업 준비의 모든 것 | 스파르타코딩클럽 무료특강 비전공자인데, 개발자로 취업이나 이직을 고민하고 계시나요? 스파르타 CTO가 1시간 동안 가감없이 알려드립니다! spartacodingclub.kr 개발 분야 웹 개발자 프론트엔드 엔지니어 백엔드 엔지니어 풀스택 엔지니어 모바일 애플리케이션 개발자 게임 개발자 데이터 사이언티스트 AI 개발자 SI/SM 등의 전산시스템 개발자 데브옵스(DevOps) 엔지니어 보안 엔지니어 → 수요가 많고 비전공자들이 성공할만한 커리어를 쌓을 수 있는 분야는 웹 개발자 개발 트렌드를 보려면 대표 IT 기업의 채용 공고를 보면 됨 프론트엔드 vs 백엔드 vs 풀스택 - 프론트엔드: 이용자의 눈에 보이는 부분 프론트엔드 개발은 주로 웹 및 모바일 솔루..
개발자 취업 시장, 직업적 특징 [스파르타 코딩클럽 무료 패키지 - 개발자 취업 준비의 모든 것 #1] 우연히 인스타 광고를 보고 수강하게 된 스파르타 코딩 클럽의 "개발자 취업 준비의 모든 것" 무료 강의라고 하고 내가 요즘 딱 필요했던 정보들이 많을 것 같아서 수강을 하지 않을 이유가 없었다. 수강 기간은 5일동안 주어지고, 수강 기간 내에 수강을 완료하면 평생 강의를 소장할 수 있다고해서 바로 수강하게 되었다! 도움이 되는 정보들이 많아서 만족했고, 이 강의는 완전 비전공생을 위한 강의라는 생각이 들었다. 나는 복전생이다보니 아는 정보들도 많았지만 아예 이 분야에 대해 모르는 비전공생들이 듣고 공부 방향이나 분야 등에 대해 갈피를 잡기 좋은 강의인 것 같다. ▼ 강의 수강 링크 개발자 취업 준비의 모든 것 | 스파르타코딩클럽 무료특강 비전공자인데, 개발자로 취업이나 이직을 고민하고 계시나요? 스파르타..
클릭 이벤트 처리하기 실습 [처음 만난 리액트 #25] 8강. Handling Events [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 확인버튼 컴포넌트를 직접 만들고, 클릭 이벤트에 event handler를 연동하는 실습 (클래스 컴포넌트와 함수 컴포넌트를 모두 실습) ① 클릭 이벤트 처리하기 실습 1. VS Code로 create-react-app을 이용해 만든 프로젝트 열기 2. chapter_08이라는 이름의 폴더를 생성 3. 만든 폴더에 ConfirmButton.jsx라는 이름의 파일을 새로 만들고, ConfirmButton이라는 이름의 클래스 컴포넌트를 만든다. - ConfirmButto..
Event의 정의 및 Event 다루기 [처음 만난 리액트 #24] 8강. Handling Events [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com Event란? ● 이벤트 = 사건 ● 특정 사건을 의미 ex) 사용자가 버튼을 클릭한 사건 => 버튼 클릭 이벤트 ● 웹사이트에는 다양한 이벤트들이 있는데, 이 이벤트들이 발생했을 때 원하는대로 잘 처리해주어야 웹사이트가 정상적으로 돌아갈 수 있습니다. ● 이벤트를 처리하는 것을 이벤트를 handling 한다고 표현 DOM의 Event Activate 버튼이 눌리면 Activate라는 함수를 호출 -> DOM에서는 클릭 이벤트를 처리할 함수를 onclick을 통해 전..
[Spring] IntelliJ IDEA 학생 무료 교육용 라이센스 설치 IntelliJ IDEA: JetBrain 사에서 제작한 상용 자바 통합 개발 환경 통합 개발 환경 (IDE, Integrated Development Environment) 란? 프로그래머가 소프트웨어 및 어플리케이션 개발을 위해 사용하는 기본 도구코딩, 디버그, 컴파일, 배포 등 프로그램 개발에 관련된 모든 작업을 하나의 프로그램 안에서 처리하는 환경을 제공하는 소프트웨어 예) Eclips, IntelliJ, Microsoft Visual Studio 예전에는 이클립스로 많이 개발하였는데, 최근 IDE는 IntelliJ를 활용하는 경우가 많습니다.편리한 인터페이스와 코드 자동완성 장점으로 많은 개발자들이 IntelliJ를 사용하고 있습니다. IntelliJ Ultimate(유료 버전)과 Communi..

티스토리툴바