Homile

📌 지인들의 공부하는 방법 및 속도, 시간 등을 보면서 나도 더욱 열심히 해야겠다는 의지를 다질 수 있는 계기가 되는 하루였다. 개발자로서의 길은 어렵고 힘들지만 하루하루 학습하다 보면 언젠가 나도 좋은 개발자가 될 수 있다고 생각하며 하루를 시작하게 되었다. 📗 오늘 학습한 내용 Python Study [Leetcode]Add Binary 2진수로 할당된 변수 a, b의 값을 10진수로 변환하여 더한 후의 값을 2진수로 변경하여 return하는 문제 [Leetcode]Plus One 배열에 들어있는 정수를 문자열로 합치고 1을 더한 수를 다시 배열로 쪼개서 return하는 문제 JavaScript Algorithm 해시(Hash) or 해시 테이블(Hash Table) 어떤 특정 값을 받으면 그 값을 ..

📌 서버에서 데이터를 구성하는 방식에 대해서 학습했다. 프론트엔드가 데이터를 API를 통해서 받을 때 웹의 장점을 최대한 활용해서 받기 위해서 설계된 아키텍쳐이다. 이런것 까지 왜 배운다라고 말한다면 이런것도 배워야 한다고 답을 할 수 있을 것이다. 📗 오늘 학습한 내용 REST API Representational State Transfer 웹의 장점을 최대한 활용할 수 있는 아키텍처 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고 HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 작성법(성숙도 모델) 성숙도 모델 0단계 HTTP 프로토콜만 사용해도 된다. REST API를 작성하기 위한 기본단계 성숙도 모델 1단계 개별 리소스와의 통신 준수 모든 자원은 개별 리소스에 ..

📌 오늘은 약간 쉬어가는 듯한 느낌이 들었다. 이론적인 부분만 학습을 진행했기 때문이다. 네트워크의 동작과정은 대학교 학부생 시절 많이 들었던 내용이어서 이해하는데는 그렇게 크게 문제는 없었다. 하지만 기술면접에서 물어봤을때 바로 답을 할 수 있는가 라는 질문을 내게 던져보았는데 하지못한다는 것을 알고 정리하면서 다시 암기를 하는형식으로 학습을 진행하였다. 📗 오늘 학습한 내용 네트워크 기초 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 영화 웹 클론..