나는 오늘도 멋있다

1. 모든 행동에는 목표를정하고, 근거가 있어야 한다 2. 다른사람의 관점을 고려하자 3. 문제가 발생하였을때는 해결보다는 원인을 찾자 4. 알고자하는것의 정의는 무엇인가? 5. 알고자하는것의 의도하는 바는 무엇인가? 목적 브라우저의 동작원리를 파악하여, Vanilla JS로 개발하였을경우 문제점과, Virtual DOM의 필요성을 파악하고자 조사한다 #간단요약 1. 사용자가 브라우저 도메인을 입력한다 2. 운영체제가 내부 DNS 캐시에서 사용자가 입력한 도메인IP를 찾는다. # DNS란?: 입력받은 도메인에 대한 IP를 찾아주는 시스템 3. 내부 DNS에서 해당 도메인을 찾지 못한다면 외부 DNS 서버로 조회 요청을 보낸다 #한번도 방문한 적이 없다면 외부 DNS 조회 4. 외부 DNS에서 해당 도메인..

1. 모든행동에는 목표를 정하고, 근거야 있어야 한다. 2. 문제가 발생하면 해결보다는 원인을 찾아 3. 다른사람의 관점을 고려하자 4. 알고자 하는 것의 정의는 무엇인가 5. 알고자 하는 것의 의도는 무엇인가 목적 클로저의 개념을 보다보니, 실행 컨텍스트 부터 렉시컬 환경을 보게되었고 이전부터 많이 봤던 단어들이다. 확실하게는 알고 있지 않아 확실하게 알고자 글들을 찾아보다가 문득 JS의 동작을 전체적으로 아는것이 좋다고 판단을 하였고, 내가 쓰는 언어의 동작은 알아야 되지않나? 라는 생각을 가지게 되어 JS의 동작을 주제로 글을 적어본다. JavaScript의 Google V8 엔진 V8엔진은 JavaScript를 실행하기 위해 단일 프로세스를 사용한다. JavaScript는 주로 단일 스레드로 동작..

1. 모든행동에는 목표를 정하고, 근거야 있어야 한다. 2. 문제가 발생하면 해결보다는 원인을 찾자 3. 다른사람의 관점을 고려하자 목적 JS를 하면서 많이 접하는 프로그래밍 패러다임은 객체지향 프로그래밍, 함수형 프로그래밍 처럼 두가지를 많이 접하게 된다. 객관적으로 스스로에게 이 프로그래밍 패러다임에서 이해하고 있냐고 물어본다면, 감각적으로는 알고있지만 다른사람을 이해할수 있게 쉽게 설명할수는 없을것 같다. 그말은 나도 두루뭉실하게 알고있는게 아닐까? 하는 생각으로 정확히 학습하고자 한다. 명령형(How) 프로그래밍 vs 선언형(what) 프로그래밍 함수형 프로그래밍, 객체지향 프로그래밍을 알기전에 먼저 선언형, 명령형에 대한 방식, 차이점을 알아야 한다. [명령형 프로그래밍] - 어떻게? 명령형 프..

1. 모든행동에는 목표를 정하고, 근거가 있어야 한다. 2. 문제가 발생하면 해결이아닌 원인을 찾아야 한다. 3. 다른사람의 관점을 고려 해야한다. 학습목적 저번 글 에서는 AWS에서 EC2 인스턴스를 생성하여, 간단한 설정을 하고 접속까지 진행했다. 그렇다면 서버를 사용해야 하기 때문에 환경을 구축하고 간단한 파일들을 SFTP를 이용해 전송해보려고 한다. 환경 구축은 JSP를 사용할 예정이다. JSP란? JavaServerPages의 약자로 Java 기반의 웹프로그래밍 언어이다. HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹페이지를 생성하여 웹 브라우저에 돌려주는 서버 사이드 스크립트 언어이다. JSP 환경구축 Server Update 인스턴스에 접속한 상태에서 현재 시스템에 설치된 버전들..

1. 모든 행동에는 목표를 정하고 근거가 있어야 한다. 2. 문제가 발생하면 해결이 아닌 원인을 찾아야 한다. 3. 다른사람의 관점을 고려해야한다. 학습목적 사용자가 웹서비스를 이용하기 위해서는 사용자 -> 웹브라우저 -> 서버 의 구조를 가진다. 모든 웹은 서버를 가지고 있어야 운영이 가능하다. 서버가 없는 웹이 있을까? 있다고해도 서비스할수 있는 웹은 아니라고 생각한다. 간단한 정보또한 서버에 저장하고, 클라이언트에서 이것을 활용해야한다. Server를 확보하기 위해서는 Server를 구입할수 있지만, 큰비용,서버환경,보안적인 문제 등이 있다. 하지만 추후에는 돈이 들어가지 않는 장점이 있다. 그렇기때문에 간단한 서비스를 배포하기에는 적합하지 않을 수도 있다. 예를 들어서도 내가 취업을 위한 포트폴리..

1. 모든 행동에는 목표를 정하고 근거가 있어야 한다. 2. 문제가 발생하면 해결이 아닌 원인을 찾아야 한다. 3. 다른사람의 관점을 고려해야한다. 학습목적 상태관리와 함께 자주들었던 Context API를 들었을때는 전역상태관리 할때 쓰이는것 아닌가? 라는 생각만을 가지고 있었다. 보통 "가벼운 프로젝트에서 사용하기좋다", "좀더 큰프로젝트에서는 다른 상태관리 라이브러리" 라는 글들을 보았다. 왜그럴까? 사용법을 알아아보고 그에 대한 이유를 알아보자. 모든내용은 내가 추측한 것이아닌 공식문서의 내용을 토대로 하며, 요약 타이틀에만 나의 의견을 반영한다. Context API란? Context API는 React에서 제공하는 기능으로, 컴포넌트 간에 Props를 통해 명시적으로 정보를 전달하지 않고도 하..

목적 부트캠프 과정의 두번째 과제로 HTML과 CSS 만으로 Youtube의 홈부분을 flex로 구조를 잡는 과제였다. Flex는 항상 써왔다. 그래도 Flex의 각 속성에 대해 좀더 깊이이해하고 쓰자는 생각으로 이글을 작성한다. Flex란? 주로 CSS Flexbox 레이아웃을 만들때 사용되는 속성으로, 웹페이지의 레이아웃을 효율적으로 설계하고, 요소들을 유연하게 배치하기 위한 CSS 기술이다. Flex의 속성들 Flex의 Container는 부모요소를 뜻하고, Item은 자식요소를 뜻한다. Container 속성 속성명 설명 단위 속성 dispaly 부모요소를 Flexbox 컨테이너로 만든다. flex, inline-flex justify-content 주축의 요소들을 정렬한다. flex-start,..

1. 모든 행동에는 목표를 정하고 근거가 있어야 한다. 2. 문제가 발생하면 해결이 아닌 원인을 찾아야 한다. 3. 다른사람의 관점을 고려해야한다. 학습목적 React의 hook은 각목적에 맞게 쓰이고 자주 사용되는 hook들이 있다 useState는 상태변경, useEffect는 side Effect 등 말이다. 그중 useReducer은 명칭은 익숙하지만 사용해본적이 없다. Redux에서도 reducer함수에 따라 상태를 업데이트 하는데, Redux와 관계가 있는건가? 하는 궁금증으로 학습을하게 되었다. useReducer란? 여러 상태 업데이트가 많은 구성요소는 상태관리를 하기가 힘들수도 있다. 이런 복잡한 구성 요소의 상태를 하나의 함수로 관리하여, 단일 컴포넌트 내의 복잡한 상태들을 구조화하여 ..