본문 바로가기

분류 전체보기64

0014. Front-end 공부하기5 - State and Lifecycle(★중요★), React Developer Tools 섹션 6. State and Lifecycle 1강. State와 Lifecycle의 정의 State는 리액트의 핵심 개념, 완벽하게 이해될 때까지 들을 것 1) State State : 상태 = 리액트 Component의 상태 = 리액트 Component의 데이터 = 리액트 Component의 변경 가능한 데이터 개발자가 정의한다. 주의점! : 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함! 관련 없는 값까지 state에 포함시키면 불필요한 경우에 컴포넌트가 다시 렌더링 되어 성능을 저하시킬 수 있음 state는 따로 복잡한 형태가 있는 것이 아니라 그냥 하나의 JavaScript 객체이다. 이렇게 정의된 state는 정의 이후 일반적인 JavaScript 변수를 다루듯이 직접 수정.. 2023. 12. 15.
0013. Front-end 공부하기4 - Component와 props (☆★굉장히 중요★☆) 섹션 5. Components and Props (★☆굉장히 중요☆★) 1강 : Components와 Props의 정의 1. Component React Component는 개념적으로는 자바스크립트의 함수와 비슷 입력(Parameter) → JavaScript Function → 출력 입력(Props) → React Component → 출력 - 실제로는 : Props → React Component → React element(리액트 앱을 구성하는 가장 작은 블록) - 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴 붕어빵 틀을 갖고 있다면 계속해서 붕어빵을 만들 수 있는 것처럼, 컴포넌트가 있다면 엘리먼트를 계속해서 만들어낼 수 있다. 2. Props(Prop이 여러 개) .. 2023. 12. 13.
0012. Front-end 공부하기3 - JSX, Element, 시계만들기(Feat. 인프런, 처음 만난 리액트) 섹션 3. JSX 1강 : JSX의 정의와 역할 개념 : A syntax extension to JavaScript, 자바스크립트 확장 문법 문법을 확장시킨 방법 : JavaScript + XML/HTML JS : JavaScript 자바스크립트 관련 라이브러리도 이름 뒤에 JS가 붙어서 자바스크립트 라이브러리라는 것을 나타 리액트 풀네임 : ReactJS JSX의 역할 : JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거침. 그래서 JSX로 작성해도 최종적으로 JavaScript 코드가 나오게 됨. 여기서 JSX를 JS로 바꾸는 함수가 React의 creatElement 함수임. 그래서 리액트에서 JSX를 쓰는 것이 필수는 아님. 모든 코드를 creatElement .. 2023. 12. 12.
0011. Front-end 공부하기2 - 리액트 소개, 리액트 시작하기(Feat. 인프런, 처음 만난 리액트 with 챗GPT) 섹션 1. 리액트 소개 1강 : 리액트는 무엇인가? 정의 : A JavaScript library for building user interfaces. 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 라이브러리 : 자주 사용되는 기능들을 정리해 모아 놓은 것 문자열 관련 기능 숫자 관련 기능 날짜 관련 기능 사용자 인터페이스(User Interface, UI) 사용자와 컴퓨터 프로그램이 상호작용을 하기 위해 중간에서 서로 간의 입력과 출력을 제어해 주는 것 버튼, 텍스트 입력창 등이 모두 UI UI 라이브러리 : 사용자 인터페이스를 만들기 위한 기능 모음집, 화면을 만들기 위한 기능들을 모아 놓은 것. React JS: 대표적인 자바스크립트 UI 라이브러리 - 메타(페이스북)에서 만든 오픈소스 자.. 2023. 12. 6.
0010. Front-end 공부하기1 - 강의선정/준비하기(Feat. 인프런, 처음 만난 리액트(React)) 1. 강의는 인강이다. 사교육에 절어있는 한국인으로서 무언가를 배울 때는 인강이 최고다. 그래서 필자는 인프런이라는 사이트에서 강의를 듣기로 했다. 이 강의를 선택한 이유는 사람들이 많이 수강해서이다. 사람들이 많이 수강한 이유는 무료여서 그렇지 않을까 싶다. 무료임에도 강의 퀄리티가 상당히 좋은 것 같으니 추천하는 편이다. (지금 8.93% 듣고 추천하는 것이다. 판단은 알아서..) 2. 강의 노트 원래 강의를 들으면서 블로그에 차근차근 정리하려고 했는데, 양이 방대해서 그건 어려울 것 같다. 그냥 필자가 공부한 내용을 정리한 것이니 노트처럼 보면 될 것 같다. 사실 내가 보려고 만든거다. 섹션 0. 준비하기 1강 : HTML과 CSS HTML, Hyper Text Markup Language : 웹사.. 2023. 12. 5.
0009. 인생사 새옹지마(Feat. 꾸준히 코딩 하는 법) 1. 역시는 역시나, 작심삼일 저번에 썼던 글이 무려 10개월 전이다. 꾸준히만 했더라면 지금쯤은 어지간한 개발은 하고도 남았을 거다. 우리 모두 알다시피 인생에서 공부, 일 그 자체보다는 '꾸준히 하는 것'이 가장 어렵다. 열심히 하는 것을 전제로 '잘'하는 영역은 천재들의 영역이고, 필자 같은 일반인은 열심히 하기만 해도 어느 정도는 될 것이다. 90점에서 100점을 만드는 것은 어렵지만, 0점에서 80점을 만드는 것은 그리 어렵지 않은 것과 같은 이치다. 정말 유감스럽게도 지난 글의 제목이 '우리는 벌써 프로그래머?'였다. 감히 코딩할 준비가 됐다나 뭐라나.. 필자가 아무리 개그를 가미한 코딩 블로그를 쓴다고 해도 정말 부끄럽기 짝이 없는 내용이다. 저 글을 쓰고서는 10개월을 잠수를 타버렸다. 뭐.. 2023. 12. 4.
0008. 웹 프런트엔드의 시작 1. 벌써 우리는 프로그래머? 웹 프런트엔드라는 말이 아무렇지 않게 이해가 되었다면, 우리는 이제 감히 코딩을 시작해도 될 준비가 된 것이 아닌가 싶다. 이 문장은 써놓고도 무슨 말인지 헷갈리는데, 자신감이 없으면 원래 말이 장황한 법이다. 이제는 우리가 프로그래머의 길로 들어서는 것이기 때문에 살짝 어려운 용어가 나와도 이해할 준비가 되어있어야 한다. 우리는 이제부터 전문가니까 말이다. 앞서서 말한 것처럼(해석 : 난 설명했는데 기억하고 있음?) 우리가 컴퓨터와 소통하려면 언어를 알아야 한다. 특히, 웹과 소통을 하려면 웹의 언어를 알아야 한다. 웹 프런트엔드를 시작하기 위해서는 3대장이 있다는 것부터 알아야 할 것이다. 2. 웹 프런트엔드 3대장 시작하자마자 언어를 3개나 소개하니까 마음이 무겁다. .. 2023. 2. 4.
0007. 가장 만만한 녀석부터 시작하자! 1. 웹(Web)이 대체 뭐야? 웹은 World Wide Web의 약자로 우리가 인터넷에서 주소를 입력할 때 첫 부분에 주로 쓰인다. 매번 월드와이드웹이라고 부르기는 너무 길어서 웹(Web)으로 줄여서 부른다. 웹의 정의를 간단히 살펴보면 다음과 같다. 웹이란, 인터넷 상의 정보를 하이퍼텍스트 방식과 멀티미디어 환경에서 검색할 수 있게 해주는 정보 검색 시스템이다. - 출처 : 위키피디아 - 하이퍼텍스트 : 하이퍼(Hyper)는 [건너편의, 초월한]이라는 뜻으로 텍스트에서 다른 텍스트로 바로 연결되는 것을 말한다. 우리가 책을 보면 1, 2, 3, 4, 5... 페이지 순서로 읽는 게 일반적이다. 하지만 우리가 웹 사이트를 돌아다닐 때는 정렬된 순서로 보는 것이 아니라, 여기저기 건너뛰면서 정보를 접한다.. 2023. 2. 3.
0006. 코딩의 분야와 웹프로그래밍 1. 여의도의 Front와 Back 필자는 금융업에 종사하고 있다. 금융업에서도 Front, Back이라는 말이 자주 등장한다. 주로 고객과 가까울수록 Front라는 말을 쓰고, 고객과 멀리 있으면서 Front와 Middle을 지원하는 것이 Back이다. 즉, 고객과 맞닿는 최전선에서 영업하고 돈을 벌어오면 Front Office고, 고객과 멀리 떨어져서 Front를 지원하는 역할을 하는 것이 Back Office라고 보면 된다. 최근 여의도의 많은 회사들이 복장을 자율화하기 시작했다. 그러면서 점점 정장 중심이었던 여의도룩이 사라지고 조금씩 다양해졌다. 하지만 아직도 과거의 유산은 많이 남아있다. 여의도에서 사람들이 정장을 입고 딱딱한 복장이 많았던 것은 다 이유가 있었을 것이다. 또한, 판교룩이 알록.. 2023. 2. 3.
0005. 코딩 시작과 선택의 역설 1. 선택장애 '선택의 역설'이라는 말이 있다. 선택지가 많이 주어지면 오히려 선택하기가 어려워진다는 것이다. 쉽게 생각해 보면, 강의실에 자리가 딱 2개밖에 없다. 그러면 우리는 크게 고민하지 않고 자리를 고른다. 하지만 강의실에 들어갔을 때 몇 자리를 제외하고 텅 비어있다면, 오히려 어디 앉을지 오래 고민하게 된다. 이걸 선택의 역설이라는 어려운 말로 부른다. 필자 또한 코딩의 목표를 구체적으로 세우지 않고 시작했기에 많은 난관이 있었다. 그러면서 오히려 선택지가 많은 것이 화가 되어서 아직도 시작을 어려워하고 있다. 블로그 글도 지금 며칠만에 쓰는지 모르겠다. 그래서 결국은 그냥 무작정 따라 하기로 했다. 당장 나에게 필요하지 않더라도 늦어지는 것보다 시작하는 것이 중요하기 때문에 원래 시작했던 이.. 2023. 2. 1.

티스토리툴바