목록과정 (7)
Frontend 개발자 - hyo.loui
🎯목적 : 웹페이지가 브라우저에 랜더링되는 과정을 기록합니다. 클라이언트에서 불러오고 싶은 파일을 서버에 요청한다 주소창에 직접 입력하거나, 클릭을 통해 해당 웹 페이지에 접근한다 클라이언트에서 요청한 URI를 DNS를 통해 IP 주소로 변환하고, 해당 IP를 가진 서버에 GET 요청을 보내게 된다 서버에서 응답으로 받은 HTML 데이터를 파싱한다 (바이트 > 문자 > 토큰 > 노드 > DOM) 서버에 존재하던 HTML 파일이 브라우저의 요청에 의해 응답된다 이때 서버는 브라우저가 요청한 HTML 파일을 읽어 들여 메모리에 저장한 다음 메모리에 저장된 바이트(2진수)를 인터넷을 경유하여 응답한다 브라우저는 서버가 응답한 HTML 문서를 바이트(2진수) 형태로 응답받는다 따라서 응답된 바이트 형태의 HTM..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (자바스크립트 스터디 내용) Project : Develife = 프로젝트 완성 ( 배포 >> 발표 ) javascript 스터디 = 각자 발표 chapter 1주차 마무리(모던 자바스크립트 딥다이브 교재) Project review 이번 프로젝트가 마무리되어 유튜브에 시연영상을 업로드 했다. https://www.youtube.com/watch?v=rfuRtHsHwQ4&t=49s OBS 소리가 작다...😥 Study review 부족하다고 생각했던 자바스크립트를 900페이지가 넘는 모던 자바스크립트 - 딥다이브 교재를 활용해서 한챕터 한챕터 서로가 준비하고, 발표하면서..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목적, 정리로 세분화) Project : Develife = 프로젝트 시작 ( 기획 >> 와이어프레임 >> 레이아웃(UI) javascript 스터디 = 각자 발표 chapter 정하고 시작(모던 자바스크립트 딥다이브 교재) 📚 Study review 프로젝트 마무리가 되어가면서 이번주는 공부에 목적을 두지 못했다.. 이번 팀원을 잘 만나서 모던 자바스크립트 스터디를 결성하고 한달 이내에 모든 챕터를 하나씩 돌아가면서 정해둔 발표시간 (약 15분)에 발표를 하고, 나머지 챕터는 정독 하면서 스터디를 하기로 결성되었다! 자바스크립트가 내용이 이렇게 많은 줄도 몰랐고 이렇..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목적, 정리로 세분화) Typescript 강의 및 실습 = Todo-List (리펙토링, cra-typescript) Project : Develife = 프로젝트 시작 ( 기획 >> 와이어프레임 >> 레이아웃(UI) 📚 Study review typescript를 배울 때는 쉽다고 생각했다.. 하지만 막상 적용하려고 하니.. state, props 등 작성해줘야 할 타입들이 생각보다 많아서 쉽지않았다.. 또한 web API(onclick, onsubmit, onchange 등) 사용 할 때에 파라미터로 전달하는 데이터에도 타입을 작성해야해서 당황했다. 하지만 여러 ..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 ( 프로젝트 [목표, 오류] 세분화) Project : MZL (MZ-Languagae) = 프로젝트 완성 ( 배포 >> 발표 ) React query 강의 및 실습 = (외부 API 활용) Project review 이번 '왕초보 mz 완성' 이라는 컨셉의 프로젝트는 IOS 와 안드로이드 환경에서의 개발을 동시에 진행 할 수 있는 React-native를 활용한 하이브리드 앱을 만들었다. UI는 낯선 태그들로 다들 복잡하다고 느꼈기 때문에 아주 심플하게 구성하고 로직에 대해 더 집중적인 작업을 진행했다. 기존 프로젝트에서 CRUD 를 구현하면서 회원가입, 로그인 기능에..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목표, 오류, 정리로 세분화) Project : MZL (MZ-Languagae)= 프로젝트 시작( S.A >> 기획 >> 디자인 >> UI완성 ) React Native 심화 강의 및 실습 = Movie app (React-Query) Project Start 'helprogrammers' 라는 Redux / RTK / thunk 활용한 프로젝트를 성공적으로 마치고 새로운 팀이 배정되었다 이번 프로젝트 첫 회의에 나온 공통적 의견으로 '기본에 충실하자' 라는 의견이 다수이기에 특별한 기능에 촛점을 맞추기 보다는, 이해도 높은 작업에 기반한 프로젝트를 진행하기로 결정되..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목표, 오류, 정리로 세분화) Project : helprogrammer = 프로젝트 완성 ( 배포 >> 발표 ) React Native 강의 및 실습 = Todo-List (Local >> FireStore) Project review 리덕스를 활용해 프로젝트를 해보니 더욱 데이터를 다루는 부분이 중요하다고 느꼈다.. 데이터가 어떻게 생겼는지, 어떤상태인지 본인이 잘 파악하고 있어야 원인 모를 에러 없이 잘 동작할 것이다 그래서 redux-devTool 을 사용하는데, 이번 프로젝트에서 devTool 사용을 간과하고, 내가 맡은 삭제 부분에서 오류가 났다. 해당 부분..