본문 바로가기

UI

(227)
[JS]선언과 함수의 이해 이 글은 드림코딩 영상을 보고 작성된 글입니다. 선언과 함수에 대한 전체 과정 : 선언 -> 호출 1. 우리가 어떤 값을 반을 건지 인자들 정의 2. 코드 블록 작성 ( curly brackets 안에 내용을 코드 블록이라 지칭 => { '코드블록' }) 단, 선언만으로 한다고 함수호출이 자동적으로 되는 것은 아님) 3. 함수이름 옆 '( )' 안에 정의된 인자값(1 번에서 작성한 내용) 호출 (※ 함수의 이름 자체는 함수를 가르키는 (add)함수자체가 된다. 즉 ()를 쓰지 않고 함수이름만 다른 함수 인자로 전달 또는 다른 변수에 할당하게 되면 함수 자체를 가르키게 됨.) 코드 블럭 삽입이 안 먹어서 이미지로 활용 선언(1~2) 빨간 박스 : 인자들 함수 호출(3번) 다른 예시 1번 화살표의 방향은 "..
[JS]function 안 this의 History? JS에서 function이 타입인지를 확인하여 현 this.명사 사용에서 this가 가르치는 의미를 알아보려고 한다. 이와같은 자료는 '드림코딩' 채널을 통해서 작성해 보았다. ※이와 같은 function 회기 아이디어는 전적으로 개인적인 생각을 바탕으로 구성되었기 때문에 참고로만 활용하기 바란다. 초기 function const person = makePerson('ellie', 30) // 아마도 초기 ES의 function은 아래와 같지 않았을까? function makePerson(name, age){ return { name : name, age : age, }; } 중기 function - 초기에서 key와 value의 명칭이 동일하다면 shorthand 원칙에 따라 아래와 같이 축약 func..
[JS]data type 별 Memory 할당 그리고 reference의미 Primitive data type, Special data types and Non-Primitive data types (new in ECMAScript 2015) Primitive data types number, string, boolean, null, undefined, symbol Special data types undefined, null Non-Primitive data types array, object, function, data, regex etc 변수 = 담다 = Container 변수를 선언하면 computer's memory에 선언 변수 공간 생김(할당) -> Memory에 특정 양 bite 공간 확보 변수를 할당할 때 복사할 변수긔 값을 그대로 복사(Object의 경우 ref..
[JS]데이터 타입 Var -> let - 사용 하지 말것 - 이유는 hoisting(선언 변수가 글로벌처럼 상단으로 가기 때문에) - NO block scope( '{ }'안 에서 선언한 것은 안에서만 쓸 수 있고 밖에서는 더 이상 사용할 수 없는데, var은 밖에서도 사용가능 = global variable) const(constants) - favor immutable data type due to some reasons(security, (hardware)thread safety, reduce human mistake) Variable Types - Primitive, single item : number, string, boolean, null, undefiedn, symbol - Object, box contai..
[JS] function 과 'window'의 개념 이해 요즘 공부가 안됨. 그래도 꾸역꾸역하는데 집중도 안됨. 후 This 에 대해서 공부를 알아보고 시작했지만, this in JS에서 문맥적으로 해석되기 때문에 문맥을 이해해야한다. 그런데 전역변수(Global variable)이 되는 순간 window를 나온다. 이게 뭘까? How 'window'? The window object is the global object in a web browser's JavaScript environment, and all global variables and functions are essentially properties and methods of the window object. So, when you call a function without specifying a..
[JS] JavaScript Way 객체지향 자바스크립트는 함수형 언어이다. - JavaScript를 자유롭다 표현하는 이유는 함수(method) 객체에 종속되지 않고 this의 맥락에 따라 종속주체가 달라지기 때문이다. - JavaScript에서 객체를 만드는 주체는 함수다. 함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은 자바스크립트에서 함수의 위상을 암시하는 단서이면서 또 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있다. from 생활코딩 - Type is to be defined during the runtime. Object { } 객체 Property object(객체) 내의 varable(변수) 속성(field) Method property(속성)에 담겨 있는 function(함수) 행동 객체 지향 Pr..
[UX]위기에는 핵심만 위기 상황에서는 핵심을 말하는 것이 그 무엇보다 중요하다. 마이애미대학의 우즈마 칸 교수와 보스턴대학의 대니얼라 쿠포 교수는 이와 관련해 연구를 발표. A 그룹에게 새로운 의약품에 대해서 들려주면서 발작을 일으킬는 부작용이 있을 수 있음을 설명 B 그룹에게 A 그룹에 전한 정보에 더해 발작보다는 덜 위험한 부작용인 혼란감이나 피로감같은 부작용에 대해 추가 정보 설명 결과는? B 그룹 실험 참여자들이 오히려 새로운 약품을 덜 위험하다고 판단. 왜 더 작은 위험 혹은 이득이 추가되면 경각심 혹은 이등에 대한 매력이 평가 절하될까? 이유는 바로 주의 분산과 확룰에 있다. 사람들은 높은 발생 확률을 지닌 작은 위험이나 이득이 추가 될 때 발생 확률을 지닌 작은 위험이나 이득이 추가 될 때 발생 확률은 낮아도 큰..
[Network]Socket과 Segment,Packet 등 대명제 : Socket은 a File이다. 문맥에 따라서 Socket의 달라짐. Bluetooth socket, IRDA socket, TCP socket etc File의 기본 명제 Open(Read, Write, execute) Create Close Delete TCP에서 File == TCP Socekt --> TCP File 에 대한 입·출력 방법론 - Write == Send / Read == Receive - 데이터 단위 : stream(각 층에서 사용하는 조각 단위 ex, L4:segment, L3:packet) Stackflow A packet is a chunk of data. All IP networks send data in small chunks across the network...
[Lecture]Network : Cookies, Proxy Server Cookies 1) 서버가 cookes를 initiate 해 (ID == set-cookie) 라는 필드로 넣어 Response to User. - 서버에서 Unique ID 생성 in Server's Backend Database. 2) 브라우저는 서버가 알려준 Cookies ID 정보 저장 3) 다음에 다시 요청할 때, cookies 값에 ID 담아서 요청 -> 서버는 해당 클라이언트를 cookies(history, keyword etc) 관리할 수 있음 User Server ID Process cookie-specific action - stored a User information in Server Database by customized data stucture. If user has got a..
[CSS]Navigation을 만들때, li tag에 float 그리고 ul사라짐 영상을 보면서 CSS 를 공부하고 있었다. li에 float 를 먹이면 화면에서 ul 영역이 사라짐 .nav ul{ list-style-type: none; background-color: rgb(95, 95, 95); padding : 0px; margin : 0px; overflow: hidden; ---> li에다가 float:left를 먹인 후 overflow:hidden;을 적용하면 보임 } .nav ul a{ color :aliceblue; text-decoration: none; padding : 10px; display: block; text-align : center; } .nav ul a:hover{ background-color: rgb(53, 52, 52); } .nav li{ fl..
[Browser]브라우저 구조와 작동원리 업데이트 2024.3.25 공통 브라우저 구조 1. User Interface 사용자 인터페이스는 브라우저 상단 표시줄로, 컨트롤이 있는곳. 여기에는 URL을 입력하는 공간, 뒤로/앞으로 가기 버튼, 탭과 설정 옵션이 있는 공간이 포함. 2. Browser engine 브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이의 다리 역할을 합니다. 사용자의 입력을 기반으로 렌더링 엔진을 쿼리하고 조작합니다. 3. Render engine 기본 기능은 '' 및 관련 기호 및 속성을 찾아 HTML을 구문 분석한 다음 CSS를 구문 분석하고 마지막으로 스크립트를 구문 분석하는 것입니다. 주목해야 할 점은 모든 구문 분석이 병렬로 진행된다는 점입니다.( Parsing 진행순서 HTML -> CSS -> JS) CS..
[Browser]CPU와 GPU를 통해 할당 받는 Process 애플리케이션을 시작하면 프로세스가 생성됩니다. 프로그램이 작업을 돕기 위해 스레드를 생성할 수도 있지만 이는 선택 사항입니다. 운영 체제는 프로세스에 작업할 수 있는 메모리의 "슬래브"를 제공하며 모든 애플리케이션 상태는 해당 개인 메모리 공간에 보관됩니다. 애플리케이션을 닫으면 프로세스도 사라지고 운영 체제에서 메모리를 확보합니다. When you start an application, a process is created. The program might create thread(s) to help it do work, but that's optional. The Operating System gives the process a "slab" of memory to work with and all ap..
[CSS]Display and visibility block : div inline : span div{ background-color : tomato; } span{ bakcgorund-color : aliceblue; } width & height : 100px div{ background-color : tomato; width : 100px; height : 100px; } span{ bakcgorund-color : aliceblue; width : 100px; height : 100px; } Display : inline div{ background-color : tomato; width : 100px; height : 100px; display : inline; } span{ bakcgorund-color : aliceblue; width :..
[Lecture]컴퓨터 네트워크 5강 : Message, Layer Detail 5 Layer Internet Protocol Stack각 계층은 아래 계층의 서비를 제공받는 Service User / 윗 계층에게 서비를 제공하는 Service Provider.PDU(Protoco Data Unit)은 각  Protocol이 처리하는 기본 단위. 단 모든 층의 데이터 단위가 다름 Application (Message)Transpor (Segment)Network(Packet, Datagram) : 출발지로부터 도착지까지   Routing 수행Link (Frame) : 한   Hop을 지나가는 일 수행Physical :     4 : Application Layer: Where a Communication OriginatesThe packet's history begins when a..
[Lecture] 4강 / Chapter2 : Layers Application architecture 2 type(by HOST로 구분) - client-server - peepr-to-peer(P2P) Client-Server architecture 통신을 하는 주체는 프로그램이라고 함. 실행중인 프로그램을 프로세스(Process)라고 칭함. OS 관점에서. Server:precess that initiates communictation - always-on host - permanent IP address - data centers for scaling Clients:process that waits to be contacted - communicate with only server - do no communicate directly with each ot..
[HTMl]form&post w enctype 왜 인코딩(endcoding)이 필요한가? Chat GPT에게 물어보니 2가지를 이야기 해줬다. 1. 글씨와 바이너리 데이터를 읽을 수 있어서 2. 영어가 아닌 이상 character 인코딩이 필수 여서 The multipart/form-data encoding, enabled by the enctype attribute, allows the form data to be structured in a way that accommodates both text and binary data. If your form contains non-ASCII characters, such as accented letters or characters from languages other than English, using ..
[HTML]Radio button  단일 선택 방법 Radio with Name label을 통해서 라디오 버튼을 묶지 않으면 단일 선택일 할 수 없다. Title Mr. Ms. PhD. 하지만 여기서 각 input에 name="title"로 묶으면 단일 선택으로 변경된다. Title Mr. Ms. PhD.
[Lecture]Network 3강 : 1.4 delay, loss, throughput in networks One-Hop(Link) Delay 1. Processing delay(routing table lookup&swiching) 2. Queueing delay(output buffer at router when data be crowed) 3. Transmission delay (bit --> singal depanding on a cable performance) 4. Propagation delay(router to router) Nodal processing - routing table lookup & switching from input port to output port(store and forward) 1. Check bit erros 2. Determine output link Queuein..
[Lecture]Network 2강, Internet Structure. Physical Link : transmitter -> Receiver Guided media : signals propagate in solid. copper(Ethernet), fiber(HFC) , coax Unguided media : signals propagate freely. no physical "wire", radio link type ex) WIFI, Cellular(wide-area), terrestrial microwave, satellite End systems --> access networks --> links --> access network--> End systerms 1.3 Netwrok core : packet switiching, circuit switching, ne..
[Lecture]Network 1강 Internet is network of networks Network structure network edge == millions of connected computing devices : hosts = end systems network core == packet switches : foward packedts(chunks of data) : routers and switches access network, physical media == communication links : fiber, copper, radio, satellite. Protocol Protocols define format, order of messages sned and received among network entities..