본문 바로가기

개발일지 Dev Diaries30

[항해99 35일차] (22.04.10) WIL_주특기 심화 마감, 미니 프로젝트 시작 Week Record 1. 주특기 심화(W5) 마감 항해99 32일차(22.04.07) 항해 주특기 3주차 중 가장 어려웠다. 멘붕이 정말 많이 왔고, 아직 정신을 차리지 못한 상태이다. 그럼에도 잘한 점은 어떻게든 과제를 제출했다는 것이다. 마지막 날에 결국 샘플 페이지의 소스코드를 확인하였지만, 어쨌든 요구사항으로 있던 대부분의 기능들을 구현하여 제출했다. (기한을 지켜 요구사항을 최대한 수행하는 것은 중요하다.) 사실 데이터 흐름에 대해 완전히 숙달된 상태는 아니라, 개념이 드문드문 머릿속에 들어있는 기분이다. 그래도 해냈다는 것에 의의를 둔다. 각 기능 구현을 위한 업무 흐름을 머릿속에 숙지할 수 있도록 필기, 암기, 반복 작업을 더 해야겠다. 2. 미니 프로젝트(W6) 시작 항해99 33일차(2.. 2022. 4. 10.
[항해99 28일차] (22.04.03) WIL_주특기 숙련 마감, 주특기 심화 시작 항해99는 매주 일요일을 일주일 중 유일한 휴일로 두고 있다. 그렇지만 마냥 쉬는 건 아니고... WIL 을 작성하며 1주 간 공부한 것을 회고하도록 한다. 4월 1주 WIL (Weekly I Learned) 를 정리해본다. 이번 주 이해한 것 React 개념 [알고가기] 가상돔이란? DOM은 html 단위 하나하나를 객체로 생각하는 모델. 예를 들면 'div'라는 객체는 텍스트 노드, 자식 노드 등등 하위의 어떤 값을 가지고 있음. 이런 구조를 트리 구조라고 함. 가상돔은 메모리 상에서 돌아가는 가짜 DOM 가상돔의 동작 방식 : 기존 DOM과 어떤 핸동 후 새로 그린 DOM(가상돔에 올라갔다고 표현함)을 비교해서 정말 바뀐 부분만 갈아끼워 넣어줌. DOM 을 새로 그리는 경우 - 처음 페이지 진입 시.. 2022. 4. 3.
[항해99 27일차] (22.04.02) 자바스크립트/리액트 파고들기 어제 밤까지 자바스크립트 비동기 처리를 파고들다가, 체력의 한계가 와서 잠들었다. 오전 중에 promise, async/await 의 개념을 이해하고 오후에는 본격 리액트 파고들기를 해보려고 한다. 오늘 배운 것 1. 자바스크립트 비동기 처리 1) Callback 콜백 지옥 콜백함수는 특정 함수에 매개변수로 전달된 함수를 의미한다. 그 콜백함수는 함수를 전달받은 함수 안에서 호출된다. 콜백지옥은 JavaScript를 이용한 비동기 프로그래밍시 발생하는 문제로서, 함수의 매개변수로 넘겨지는 콜백함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 말한다. 예제 step1(function (value1) { step2(function (value2) { step3(function (v.. 2022. 4. 3.
[항해99 26일차] (22.04.01) 주특기 심화 첫째 날 Chapter 3-3. 주특기 심화 (W5) 첫째 날. 항해는 매주 금요일을 일주일의 첫 날로 정해 일정을 운영한다. 오늘은 오전 9시에 OT 가 진행되었다. OT 에서는 이번주 해야할 것으로 개인과제, 팀과제가 있음을 안내받았다. 더불어 과제수행에 도움이 되는 강의를 지급받았다. 내 주특기는 React. React와 함께한지 3주차로 접어들고 있다. 오늘 학습한 것 자바스크립트 기초 1. 변수와 상수 : 변수 생성의 3단계(선언->초기화->할당) 선언: 스코프가 참조하는 대상이 되도록 실행 컨텍스트에 변수 객체를 등록 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화) 할당: undefined로 초기화된 변수에 실제 값을 할당 변수 선언 키워.. 2022. 4. 1.
[WIL] React - DOM , 서버리스 DOM(문서객체모델) html 단위 하나하나를 객체로 생각하는 모델. 예를 들어, 'div'라는 객체는 텍스트 노드, 자식 노드 등 하위의 어떤 값을 가지고 있음. 이런 구조를 '트리 구조'라고 함. - document 와 body, head 는 부모-자식 관계. - body 와 head 는 형제 관계 - dom 트리 확인하기 // 현재 dom 트리 확인 document // dom 트리 중, body의 내용 확인 document.body // dom 트리 중, head의 내용 확인 document.head - 자식 요소에 접근하기 // childNodes document.body.childNodes // children document.body.children //getElementsByTagName(.. 2022. 3. 27.
[WIL] 3월 3주_ JavaScript, ES, ES5/ES6 1. JavaScript ? - 1995년, Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발된 객체(object) 기반의 스크립트 언어. - HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있음. - 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용 가능함. - 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있음. 2. ES ? - ECMAScript 의 줄임말. - 넷 스케이프 사의 자바스크립트가 인기를 끌자, MS사가 자바스크립트를 Reverse engineering 해서 IE 3에 JScript라는 이.. 2022. 3. 20.
[WIL, TIL] 3월 2주 정리 (작성중) 배운 것 1. 동적 웹페이지와 템플릿 언어 1) 개념 정적 웹페이지(static web page)는 서버에 저장되어있는 HTML+CSS 파일 그대로 보여주는 것! 반면 동적 웹페이지(dynamic web page)는 상황에 따라 서버에 저장되어있는 HTML에 데이터 추가/가공을 해서 보여주는 방법입니다 🙂 정적 웹페이지는 추가적인 통신&계산이 필요 없기 때문에 속도가 빠르고 서버에 부담이 적은 반면, 추가/수정/삭제 등 내용 변경이 필요할 때 HTML 자체를 수정해야 하기 때문에 번거롭다는 단점이 있습니다. 동적 웹페이지는 한 페이지에서 상황/시간/사용자요청에 따라 다른 모습을 보여줄 수 있다는 장점이 있지만 상대적으로 보안에 취약하고 모습이 계속 변하기 때문에 (많은 경우 주소도 같이 변하죠!) 검색 .. 2022. 3. 12.
[항해99] 스파르타코딩클럽 : 웹개발 종합반 2주차 [수업 목표] Javascript 문법에 익숙해진다. jQuery로 간단한 HTML을 조작할 수 있다. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다. [배운 것 WIL] - Javascript 복습 - jQuery - 서버 API와 Ajax [세부내용] jQuery, Ajax - HTML파일을 받았다고 가정하고, Javascript로 다시 서버에 데이터를 요청하고 받는 방법을 배움. - jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고, Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보겠습니다. Javascript 홀짝 판단 let even = 4; console.log(even % 2); // 2로 나눈 나머지가 0입니다. let odd = 5; console.. 2022. 3. 2.
[TIL] 개발자 공부, 뭐 부터 해야할까? 출처 :개발자 되는법 - 코딩 처음부터 배울때 뭐부터 해야해요? https://youtu.be/d3Kp8QB74-4 ※핵심 (영상 26:40) 1. 취업이 목표라면 해야 할 것 - 자료구조 - 알고리즘 - 언어 아무거나 1가지 - 코딩테스트 2. 하지 말아야 할 것 - 특정 언어 마스터 - 특정 프레임워크 마스터 - 포트폴리오 시간 대부분 할애 2022. 3. 1.