분류 전체보기 (47) 썸네일형 리스트형 React #2. JSX 소개 아래 변수 선언을 참조해보자. const element = Hello, world!; 이 태그 구문은 문자열이나 HTML이 아니다. JSX라고 부르는 JavaScript의 확장 구문이다. 쉽게 말해서 JavaScript와 HTML을 합쳐놓은 문법이다. JSX는 React의 요소(Element) 를 생성한다. (createElement) 경고: JSX는 HTML보다 JavaScript에 더 가깝기 때문에 React DOM은 camelCaseHTML 속성 이름 대신 속성 이름 지정 규칙을 사용한다. (ex) class --> className, tabindex --> tabIndex. JSX의 중괄호 안에 JavaScript 표현식을 넣을 수 있다. 아래의 예에서는, 자바 스크립트 함수 호출의 결과를 중괄호.. React #1. 리액트란 무엇인가 React는 Facebook이 만든 현재 가장 핫한 프론트엔드 라이브러리이다. 마치 2006년, 처음으로 jQuery가 나왔을 때의 인기가 이 정도였을까? 개발자들은 왜 React에 이렇게 열광할까? 포스팅에 앞서 React가 정확히 무엇인지, 왜 필요한지에 대해서 알아보자. 사실 단순한 정적 웹 사이트를 구현하기 위해서는 별도의 프론트엔드 라이브러리가 필요하지 않다. HTML, CSS만으로도 만들어 낼 수 있다. 여기에 JavaScript를 더하면 사용자의 행동 흐름에 따라 동적으로 웹 사이트를 표현할 수 있다. 하지만 요즘의 Web은 단순히 컨텐츠를 노출해주는 웹 페이지가 아닌 웹 애플리케이션이다. 브라우저 상으로도 JavaScript를 통해 자연스러운 흐름을 나타낼 수 있지만 UI를 동적으로 나타내.. React 공부 시 참고해야 할 5가지 SPA가 생겨나면서 React.js, Angular, Vue가 큰 주목을 받고 있다. 그 중에서도 Facebook이 제공하는 오픈 소스 라이브러리 React는 현업에서 가장 많이 쓰이고 있고, 기존의 JavaScript 개발자들의 큰 생산성 향상에 기여하고 있다. SPA (Single Page Application) 차세대 패러다임. 단일 페이지 어플리케이션은 브라우저에 로드되고 난 뒤에 페이지 전체를 서버에 요청하는것이 아니라 최초 한번 페이지 전체를 로딩한 후 이후부턴 데이터만 변경해서 사용할 수 있는 웹 어플리케이션 -> Angular, Vue, React가 생겨난 배경 필자 또한 React를 접하게 된 지 그리 길지 않아 능숙하지는 않지만, 학습 과정에서 여러 가지 방법들을 거쳐보면서 이렇게 공부.. 2020년의 웹 기술 개발 스택 웹 응용 프로그램을 개발할 때 고려해야 할 가장 중요한 것은 앱의 기반이 되는 기술 스택이다. 적절한 기술 스택을 통해 적은 예산으로 가장 큰 효과를 제공하는 것은 기업 입장에서는 특히 어려운 과제이며 올바른 기술 스택 사용은 프로젝트의 성공과 실패를 결정짓는 중요한 열쇠다. 물론 필자는 프로젝트를 직접 운영하고 있지도 않고, 사용할 기술 스택을 선택할 입장이 아니기 때문에 해당 사항이 없다. 하지만 2020년을 살아가는 Front-End 개발자로서 쌓아나가야 할 기술 스택의 방향성을 정하는 데 도움이 되고자 포스팅을 해본다. 2020년 웹 기술 개발 스택 최신 웹 기술 스택을 선택하기 이전에 웹 응용 프로그램 개발 프로세스 구성요소를 명확하게 이해해야 한다. 웹 개발에는 크게 클라이언트 쪽과 서버 쪽의.. JavaScript Immutability 현업에 들어와 본격적으로 JavaScript를 접하게 되면서 항상 의문이 들었던 부분이 있었다. " var 선언문 하나로 number, Array 등 다양한 데이터 타입들을 다루면서 어떤 타이밍에 값을 유지하고 변화시켜야 하지? " 적은 양의 변수가 아닌 10000개, 또는 그 이상의 수많은 변수를 선언하는 경우 이를 제어하기는 쉽지 않을 것이다. JS Immutability는 특히 React와 같은 라이브러리 또는 redux, time travel과 같은 고급 기법을 구현하는데 기초가 되기도 한다. 참고로 JS Immutability가 React의 기초 지식 state를 이해하는 데 큰 도움이 된다. 필자는 react를 처음 접한 뒤 Immutability를 정리하면서 유레카를 외쳤다... JavaSc.. 개발자로서 꼭 알아야 할 언어 2가지 최근 지인의 추천을 통해 포프 tv 유튜브 영상을 추천받아 보게 되었다. 링크 개발자로서 꼭 알아야 할 언어 2가지 흥미로운 주제 아래 현업 시장의 상황도 돌아볼 수 있어서 포스팅을 적어본다. 개발자로서 꼭 알아야 할 언어 2가지 1. Managed language - garbage collector가 되는 언어 - 메모리 관리 직접 해주는 언어 - Java, python, C#, JS 2. Unmanaged language - 하드웨어에 가까운 언어 - C, C++, Assembly 나 같은 경우 Framework R&D 현업에 들어오면서 주 언어가 JAVA에서 JS가 되었다. (JAVA도 그리 능숙하진 않았다.. 학부생의 폐해) 자바스크립트는 웹 퍼블리싱만을 위한 언어라는 약간의 고정관념 속에서 그저.. 첫 포스팅, 2020 tistory를 시작했다! 이번 2월은 여러모로 심경의 큰 변화들이 있었다. 항상 밀어두는 숙제같았던 자기개발에 손을 얹기 시작한 것. 현재 프론트엔드 개발 시장을 살펴보니 "Front-End = Design" 이라는 고정 관념이 깨지면서 여태까지의 내 커리어와 어렸을 때부터 그려왔던 미래에 일관성을 느끼며 흥미롭게 느껴진다. 내가 어떤 부분이 부족한지 실감 하면서 싱숭생숭한 마음을 다 잡으며 내가 2월 한 달동안 한 것들과 해야할 것들을 정리해본다. 요가 시작 한달 차 - 일주일만에 자세가 많이 교정되었다. 심신 안정에 좋음. React.js, node.js 튜토리얼 - 생활코딩과 Velopert 강의를 활용하고 있다. 내게 필요한 것? - GitHub Commit / tistory 운영 / 메모 생활.. 이전 1 ··· 3 4 5 6 다음
