Homile

React? JavaScript 라이브러리이며 사용자 인터페이스를 만드는 데 사용됩니다. 화면을 새로고침하여 모든 요소를 렌더링 하지 않고, 요청하는 요소만 렌더링하는 방식인 SPA를 사용한다. 내장된 기능은 많지 않아서 라우팅 같은 기능이 필요하다면 추가적으로 서드 파티 라이브러리를 설치해야 한다. React를 사용하는 이유 일반적인 DOM을 조작하여 HTML들의 요소들을 렌더링 할 때는 JavaScript만 사용해도 가능하지만 사용자에게 뭔가 다른 요소들을 보여주려 할 때 새로운 HTML 페이지를 불러오지 않고 화면만 변경해 사용자에게 보여줄 수 있게 해주는 것이 가능하다. 개발자에게 확장 가능한 대화형 웹 응용 프로그램을 구축하기 위한 검증된 도구를 제공하는 코드를 작성할 수 있다. 최신 반응형 사..

📌 오늘은 약간 쉬어가는 듯한 느낌이 들었다. 이론적인 부분만 학습을 진행했기 때문이다. 네트워크의 동작과정은 대학교 학부생 시절 많이 들었던 내용이어서 이해하는데는 그렇게 크게 문제는 없었다. 하지만 기술면접에서 물어봤을때 바로 답을 할 수 있는가 라는 질문을 내게 던져보았는데 하지못한다는 것을 알고 정리하면서 다시 암기를 하는형식으로 학습을 진행하였다. 📗 오늘 학습한 내용 네트워크 기초 Client Server Architecture (2티어 아키텍처) 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것.(리소스=정보) Client: 리소스를 사용하는 앱 웹 사리트, 어플리케이션 Server: 리소스를 제공 웹, 파일, 메일, 데이터 서버 3티어 아키텍처 2티어 아키텍처에서 데이터베이스 저..

📌 State, Props를 사용하여 트위터를 클론코딩 하는 과제를 어드밴스까지 진행하였다. 구현은 데이터 삽입, 삭제, 선택 등을 할 수 있게 하였지만, 수정은 아직 구현하지 못하였다. 이부분에 대해서는 조금 더 학습할 필요가 있다. 📗 오늘 학습한 내용 React useEffect 렌더링 할 때 마다 특정 작업을 실행할 수 있도록 하는 React Hook 비동기로 처리할 수 있다. uuid 랜덤으로 고유한 Key 값을 생성 v4를 많이 사용한다. v1: 타임스탬프(시간) 기준 v3: MD5 해시 기준 v4: 랜덤값 기반 v5: SHA-1 해시 기준 📘 추가로 공부할 내용 React React Hook useMemo useEffect useRef useContext useCallback useReduc..

📌 코드스테이츠에서 state와 props를 학습했다. 내가 학습한 내용과 비슷했지만 예제가 있어서 조금 더 이해를 할 수 있었고, 페어프로그래밍 중 페어분과 실습을 진행하며 많은 것을 배우게 되었다.!! 📗 오늘 학습한 내용 React State 변할 수 있는 값 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 useState state를 다루를 방법이며 배열을 반환한다. const [저장 변수, 갱신 함수] = useState(초기값); Props 바꿀 수 없는 값. (속성) 함부로 변경될 수 없는 읽기전용 데이터 외부로 부터 전달 받은 값 부모 컴포넌트로부터 전달받은 값 화면에 어떻게 표시되는지를 기술하는 React Element를 반환 최초 렌더링의 초기값 설정 객체 타입 반환 📘 추가로 ..

📌 리액트 state, props에 대해서 한번 더 학습을 해보았으며, Firebase의 DB와 리액트를 연동시켜 보았다. 📗 오늘 학습한 내용 React State Props Firebase DB 생성 리액트 프로젝트 연동 📘 추가로 공부할 내용 React 노마드 코더 React 영화 웹 클론(진행중) AWS 연동 📝 오늘 느낀 점 & 마음 가짐 솔로 프로젝트 만드는 기간이 6월 21일로 잡혀있는데 백엔드 없이 혼자서 작업할 수 있는 방법에 대해서 생각해보았는데 대학교 학부생 시절 사용하였던 파이어베이스가 생각이 나서 사용해보기로 했다. 파이어베이스는 프론트엔드 개발자가 솔로 프로젝트를 할 때, 가장 많이 사용되는 서버이다. 하지만, 나중에 있을 AWS와도 연동하는 방법에 대해 생각하고 검색하여 공부해..

📌 React에서 핵심 기능이라고 생각되는 Single Page Appliacion을 학습하는 날이다. 중요하니까 꼭 기억하도록 하자! 📗 오늘 학습한 내용 React SPA(Single Page Application) 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식 SPA 장점 사용자와의 상호작용이 빠르게 반응한다. 필요한 데이터만 서버에서 전달받기 때문에 서버 과부화 문제가 해결된다. 더 나은 유저의 사용환경을 제공한다. SPA 단점 JS 파일의 크기가 크다. JS 파일을 기다리는 시간으로 처음 로딩하는 시간이 길다. 검색 엔진 최적화(SEO)가 좋지 않다. 와이어 프레임 웹 페이지의..

📌 리액트를 코드스테이츠 기간 중 처음 사용하는 날이다. 미리 학습을 해왔던 것이 도움이 되었다. 📗 오늘 학습한 내용 React 선언형 컴포넌트 기반 Component 하나의 기능 구현을 위한 여러 종류의 코드 묶음 UI를 구성하는 필수요소 트리구조 라이브러리로 범용성이 좋다 특징 3가지 JSX문법을 사용한다. JSX: JavaScript를 확장한 문법이며, 코드를 이해하기 편하게 한다. Babel을 사용한다. Babel: JSX를 브라우저가 이해할 수 있는 JS로 컴파일한다. CSS, JS만 가지고 개발이 가능하다. JSX의 규칙 하나의 엘리먼트 안에 모든 엘리먼트가 포함된다. CSS의 class를 지정하려면 className으로 표기해야 한다. JS 표현식 사용 시 중괄호를 사용한다. 사용자 정의 ..

📌 오늘은 어제에 이어 fetch API를 작성하는 방법에 대해 알아보았다. 📗 오늘 학습한 내용 JavaScript Fetch API URL로 요청하는 것을 가능하게 하는 것 서버의 데이터를 가져올 수 있음 사용법: fetch(url).then((response) => response.json()) 📘 추가로 공부할 내용 React 노마드 코더 React 영화 웹 클론 states props component SPA 📝 오늘 느낀점 & 마음 가짐 조금이라도 게으르게 살지 말자! 힘차게 나아가자!

📌 타이머API, fs모듈이라고 해서 조금 재밌을 것 같다고 생각하고 즐거운 마음으로 시작했다.!! 📗 오늘 학습한 내용 JavaScript 비동기 callback promise Promise.all([promise1, promise2, ...]: 여러개의 promise들을 한개로 그룹화한다. async/await fs모듈 fs.readFile("파일 경로.파일이름", 옵션, function): 파일을 읽어오는 모듈 JSON.parse(): 문자열을 객체로 반환한다. React 사용하는 이유: 한국의 웹 사이트의 44%가 리액트로 이루어져 있고 장기간 버텨온 라이브러리기 때문에 앞으로도 사용할 수 있다고 생각이 들어 학습하게 되었다. 📘 추가로 공부할 내용 React 노마드 코더 React 영화 웹 클론..

📌 JavaScript의 심화 부분인 만큼 어려운 부분을 배웠던 한주였고 마음이 맞는 페어도 만난것 같아서 좋았던 일주일 이었다. 📗 일주일간 학습한 내용 기술면접 준비 고차함수 콜백함수 객체지향 클래스와 인스턴스 프로토타입 프로토타입 체인 동기 비동기 promise resolve, reject then catch finally 상태: 대기, 이행, 거부 📘 다음주간 공부할 내용 JavaScript 비동기 node.js fs모듈 fetch API React component SPA props state 📝 일주일 간 느낀 점 & 마음 가짐 일주일간 힘들었지만 재미있기에 여기까지 오게되었다고 생각한다. 앞으로도 의지를 잃지 않고 해보도록 하자!