티스토리

DEV BLOG

검색하기

블로그 홈

DEV BLOG

lemu-devblog.tistory.com/m

Znero 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

(WEB) 웹 서비스 구조 이해 2편, 웹의 발전과 다양한 기술의 등장 이번 포스팅은 웹의 발전과정에 관한 포스팅이다. 1편은 웹의 탄생과 초기 구조에 관한 포스팅이며, 하단 링크를 통해 접속할 수 있다. (WEB) 웹 서비스 구조 이해 1편, 웹의 탄생과 초창기 웹의 구조프론트엔드를 지망하는 주니어 개발자로서 웹의 단편적인 지식만을 공부하다 보니 오히려 이해가 떨어지는 것을 느꼈다. 웹이 왜 생겼는지, 어떤 과정을 통해 발전했고, 어떤 문제가 발생했는lemu-devblog.tistory.com 발전하는 웹모든 기술은 발전을 하면서 3가지로 나뉘게 된다. 초반에는 이 3가지가 결합된 형태로 나타날 수 있지만 결국 유지보수를 위해 3가지로 분리된다. 이 세 요소는 아래와 같다. 1. 자료구조(data) : 데이터2. 제어(logic) : 데이터를 제어하기 위한 소프.. 공감수 0 댓글수 0 2024. 8. 15.
(WEB) 웹 서비스 구조 이해 1편, 웹의 탄생과 초창기 웹의 구조 프론트엔드를 지망하는 주니어 개발자로서 웹의 단편적인 지식만을 공부하다 보니 오히려 이해가 떨어지는 것을 느꼈다. 웹이 왜 생겼는지, 어떤 과정을 통해 발전했고, 어떤 문제가 발생했는지, 또 그 문제를 해결하는 과정에서 어떤 기술이 생겨났는지 궁금해 공부를 하다가 좋은 영상을 발견해 이를 정리하고자 한다. 이번 포스팅은 초창기 웹의 구조를 정리하고자 하며, 참고한 영상은 포스팅 하단에 추가하였다. 웹의 탄생웹은 유럽 입자 물리학 연구소(CERN)에서 연구하던 팀 버너스 리에 의해 개발되었다. 그 당시 인터넷에서는 대부분 텍스트 기반 문서가 사용되었기에 정보를 찾아보는데 불편함이 컸다. 버너스 리는 텍스트 내에 링크가 있어서 연관된 정보를 서로 묶을 수 있다면, 정보를 찾기 훨씬 수월할 것이라고 생각했.. 공감수 0 댓글수 0 2024. 8. 15.
(Linux) 유저 & 그룹 개념 정리, 유저 계정 관리, 그룹 관리 유저 (user)리눅스에 로그인하고 다양한 작업을 수행하며 운영체제랑 상호작용 하는 개인 혹은 개체 유저 종류 루트 계정 (root) : 모든 권한을 가진 특별한 사용자 (UID 0)시스템 계정 : 리눅스 설치시 기본 생성 계정사용자 계정 : 관리자가 생성한 계정 유저 구조user name : 시스템 내의 계정 식별자UID (user id) : 사용자 식별에 이용되는 고유한 숫자GID (group id) : 그룹 식별에 사용되는 고유한 숫자home directory : 사용자 파일과 데이터가 저장되는 공간default shell : 사용자 기본 쉘 (명령 인터프리터, 기본은 bash)password : 엑세스하기 위한 비밀번호group : 유저가 속한 그룹 유저 생성 & 비밀번호 설정 sudo us.. 공감수 0 댓글수 0 2024. 7. 20.
(Git) 커밋 메시지 컨벤션 그동안 혼자서 작업했기에 git의 commit 메시지를 신경 쓰지 않았는데 협업 시에는 commit 메시지가 중요해질 것 같아서 commit 메시지의 컨벤션을 조사해 보았다. 다양한 컨벤션이 있었고, 이번 포스팅은 아래 가이드들을 참고해 정리했다. commit-messages-guide/README_ko-KR.md at master · RomuloOliveira/commit-messages-guideA guide to understand the importance of commit messages and how to write them well - RomuloOliveira/commit-messages-guidegithub.com 커밋 메시지 가이드 | Blockly | Google for D.. 공감수 0 댓글수 0 2024. 7. 20.
(Git) 개념, 기본 명령어 정리 (영역 설명, 명령어 사용법) 이번 포스팅에서는 git의 영역과 기본 명령어에 대해서 설명한다. git은 총 4가지 영역(workspace, stage, local repository, remote repository)으로 구분되며, 이 4가지 영역을 이동하는 기본 명령어(add, commit, push, pull)가 있다. git 영역git의 영역은 크게 4가지로 구분된다.work space (working directory) : git이 추적하고 있는 실제 디렉터리stage : 커밋되지 않은 변경사항을 저장하는 공간local repository : 커밋 히스토리와 변경사항이 저장되는 공간remote repository : 인터넷으로 접근 가능한 외부에 있는 저장소 (git hub 등) git 명령어add 워크 스페이스에 .. 공감수 0 댓글수 0 2024. 7. 15.
(Git) checkout 명령어 사용법 정리 git 명령어 중에서도 checkout은 정말 다양한 기능을 갖고 있다. 이번 포스팅에서는 checkout 명령어의 다양한 기능을 정리한다. 먼저 checkout 기능의 종류는 크게 아래와 같다. 브랜치 전환 / 새 브랜치 생성 & 전환커밋으로 전환(detached head)파일 복원 브랜치 전환브랜치를 전환할 때 사용된다. 이때 이미 브랜치 이름이 존재한다면 에러가 발생한다.git checkout [기존 브랜치 이름] 새 브랜치를 만들고, 그 브랜치로 전환하고 싶다면 아래 명령어를 사용한다.git checkout -b [새 브랜치 이름] 커밋으로 전환 (detached head)특정 커밋의 해시 번호를 뒤에 작성하면 해당 커밋으로 전환된다. 해시 번호는 앞 7자리만 사용해도 무방하다. 이때 .. 공감수 0 댓글수 0 2024. 7. 11.
(CS) 터미널, 콘솔 기본 명령어 & 옵션 콘솔, 터미널 명령어는 파일 관리 및 정보 확인을 위해 많이 쓰이는 명령어이다. 이번 포스팅에서는 가장 많이 쓰이는 기본 명령어들을 정리하고자 한다. cd (change directory)현재 디렉토리를 변경하고 싶을 때 사용하는 명령어cd.. 을 사용하면 현재 디렉토리의 상위 디렉토리로 이동한다. (.. 은 상위 디렉토리를 나타낸다)사용법 : cd [이동할 경로] cd Documentscd Documents/newProjectcd .. ls (list)현재 디렉토리에 포함된 내용을 나열하는 명령어옵션, 경로를 제외하고 'ls'만 사용하는 경우 현재 디렉토리 내용을 보여준다.사용법 : ls [옵션] [경로] 옵션 종류 -a : 숨긴 파일들도 모두 보여준다.-l : 상세 정보도 모두 보여준다.-h :.. 공감수 0 댓글수 0 2024. 7. 9.
(Javascript) 자바스크립트 배열 메서드 some, every, find, findIndex 사용법 이전에 자주 쓰이는 배열 메서드에 대해 다룬 적이 있다. 이 외에도 종종 쓰이는 배열 메서드가 있어서 이번 포스팅에서 정리해보고자 한다. some 메서드 배열 안의 요소가 판별 함수를 적어도 하나라도 통과하는지 테스트, 조건을 만족하는 요소가 하나라도 있으면 true, 그렇지 않으면 false를 반환const array1 = [1, 2, 3, 4, 5];console.log(array1.some(e=>e%2===0)); //trueconst array2 = [1, 3, 5, 7, 9];console.log(array2.some(e=>e%2===0)); //false every 메서드배열 안의 요소가 판별 함수를 모두 충족하는지 테스트 모든 요소가 조건을 만족하면 true, 그렇지 않으면 false를 .. 공감수 0 댓글수 0 2024. 7. 4.
(Algorithm/Javascript) stack이란? 자바스크립트로 stack구현하기 stack 자료구조란?stack은 자료구조 중 하나이다. stack은 데이터가 나중에 들어온 것이 먼저 나가는 구조를 가지고 있다. (LIFO-Last In, First Out - 후입선출) 바구니에 담긴 cd를 생각하면 편하다. 바구니의 바닥은 막혀있기에 가장 아래에 있는 cd를 꺼내기 위해서는 순서대로 위에서부터 cd를 꺼내야 한다. stack 사용처stack은 undo 기능(사용자 명령을 저장했다가 가장 최근에 한 명령부터 되돌림) 등에 사용된다. 자바스크립트 엔진의 호출스텍 역시 stack 구조이다. 따라서 최대 호출 스택 크기를 초과하면 stack overflow 에러가 발생할 수 있다. stack 구현자바스크립트는 별도의 스택 자료구조를 제공하지 않는다. 대신, 자바스크립트의 배열.. 공감수 0 댓글수 0 2024. 7. 2.
(Algorithm/Javascript) 트리 노드 만들고 xml 형태로 출력하기 상속관계가 위와 같은 트리가 있다고 가정하면 상속관계는 아래와 같이 표기할 수 있다. 이때 최상위 부모인 A는 부모가 없으므로 부모 정보에 null을 표기했다.//[parentName, myName]const relations = [ [null, "A"], ["A", "B"], ["A", "C"], ["B", "D"], ["B", "E"], ["C", "F"],]; 트리 노드 만들기이후 상속 정보가 담긴 relation을 순회하면서 노드를 만든다. myName으로 만들어진 노드가 없다면 노드를 만들고, parentName가 null이 아닌 경우를 제외하고 parentName으로 만들어진 노드가 없다면 노드를 만들고, parentName노드 자식 리스트에 myName 노드를 추가한다. 이렇게.. 공감수 0 댓글수 0 2024. 7. 1.
(Javascript) 2차 배열 만드는 방법, 2차 배열의 참조가 같아지는 오류 2차 배열에서 주의해야 하는 참조 자바스크립트에서 빈 문자열로 2차 배열을 만들어야 한다고 하자 이때 new Array와 full을 이용해 아래와 같은 방법을 생각해 낼 수 있다.//error! 배열 내부의 참조가 모두 같아져 버린다.new Array(len1).full(new Array(len2).fill(0)) 하지만 결론적으로 말하자면 위와 같이 배열을 설정하면 안 된다. 그 이유는 배열이 생성되는 과정을 자세히 들여다보면 알 수 있다. 1. new Array(len2).fill(0)가 배열을 생성한다. 2. new Array(len1)가 배열을 생성한다.3. new Array(len1)의 fill 함수가 new Array(len2)의 참조로 배열 내부를 채운다. 결론적으로 new Array(l.. 공감수 0 댓글수 0 2024. 6. 27.
(Typescript) 제너릭 generic이란? 사용 방법 제너릭이란?코드를 작성하다 보면 input 타입에 따라 return 타입을 제어해야 하는 경우가 생긴다. 이 경우 any 타입을 사용하면 자유롭게 입력 타입과 반환 타입을 설정할 수 있지만, 타입 안정성이 떨어져서 연결이 끊어진다. 그렇다고 타입이 다른 함수를 각각 정의하려니 코드가 반복되어 비효율적이다.이런 문제를 해결하기 위해 등장한 것이 바로 제너릭(generic)이다. 제너릭은 코드의 재사용성을 높이고, 타입 안전성을 유지하면서 다양한 타입을 처리할 수 있게 해주는 강력한 기능이다. 제너릭(generic)을 사용하면 반복되는 코드를 아래와 같이 간단하게 나타낼 수 있다.//같은 기능에 타입만 다른 함수들을 반복적으로 선언해야한다.function returnNumber(item: number): n.. 공감수 0 댓글수 0 2024. 6. 23.
(Typescript) 타입 선언 방법 3탄, 클래스 타입 선언 방법 이전 포스팅으로 객체와 변수, 함수 등의 타입 선언 방법에 대해 다루었다. 이번 포스팅에서는 클래스의 타입을 선언하는 방법에 대해서 정리하고자 한다. 타입스크립트의 클래스 선언 방법은 자바스크립트와 유사하지만, 접근 제어자, getter/setter, 인터페이스, abstract 클래스 등 타입스크립트만의 고유 기능이 있으며 이 기능들을 활용하면 좀 더 명확하고 안정성이 높은 코드를 짤 수 있다. 1. 클래스의 타입 선언 방법 / constructor 단축구문클래스의 타입을 설정하는 타입스크립트의 기본 문법은 아래와 같다. 자바스크립트의 클래스 선언과 동일하게 필드 선언과 초기화(constructor)가 들어가 있고, 여기에 타입이 추가된다.class User { name: string; a.. 공감수 0 댓글수 0 2024. 6. 22.
(Typescript) 유니온 타입(|)과 인터섹션 타입(&)이란? 사용법 정리 이번 포스팅에서는 타입스크립트에서 사용되는 유니온 타입(|)과 인터섹션 타입(&)을 다룬다. 생김새는 기존 자바스크립트의 논리연산자(||, &&)와 유사하게 생겼지만, 사용법은 전혀 다르다. 이번 포스팅에서는 타입스크립트에서 해당 타입이 어떻게 사용되는지 정리하고자 한다. 유니온 타입 (Union Type, |)유니온 타입은 여러 타입 중 하나의 타입을 가지는 타입을 정의할 때 사용된다. 예를 들어 해당 타입이 문자열 또는 숫자 중 하나가 될 수 있다면 string | number 이런 식으로 표현할 수 있다. let score: number | string;score = 98;score = "100"; 배열도 유니온 타입으로 설정할 수 있다. 다만 배열은 괄호를 어떻게 사용하느냐에 따라 차이가.. 공감수 0 댓글수 0 2024. 6. 21.
(Typescript) 타입 선언 방법 정리 2편, 인터페이스란? 타입 별칭과의 차이 이전 포스팅에서 다양한 타입 선언 방법에 대해서 포스팅했다. 그중에서 타입 별칭이라는 선언 방법이 있었는데, 이 타입 별칭이라는 선언 방법이 인터페이스 선언 방법과 상당히 유사하다. 인터페이스와 타입별칭은 사용 방법도, 생김새도 비슷하지만 약간의 차이점이 있다. 이번 포스팅에서는 둘의 차이점을 정리한다. 먼저 타입 별칭이 무엇인지 궁금하다면 하단 포스팅을 참고하면 된다. (Typescript) 타입스크립트, 타입 선언 방법 정리 1편타입스크립트에서는 타입을 선언할 수 있는 방법이 다양하다. 워낙 다양하다 보니 타입을 선언하는 방법이 헷갈리기에 해당 포스팅으로 정리하고자 한다. 기본 타입 정의자바스크립트의lemu-devblog.tistory.com 1. 인터페이스는 객체 타입만 정의할 수 있.. 공감수 0 댓글수 0 2024. 6. 20.
(React) useState를 이용한 input 필드 입력받기, 한 글자만 입력 되는 이유 자바스크립트와 다른 react의 input바닐라 자바스크립트로 요소의 value를 받아오고자 할 때 아래와 같은 순서를 거친다.HTML input 태그로 요소를 생성한다.자바스크립트로 해당 요소 DOM을 받아온다. (querySelector, getElementById 등 사용)받아온 DOM의 value 값을 가져온다. 하지만 리액트를 사용해 위와 같이 접근하려고 하면 문제가 생긴다.JSX로 요소를 생성해도 자바스크립트와 달리 한 글자만 입력되는 난감한 상황이 펼쳐지기 때문이다.이는 리액트 특유의 렌더링 방식 때문에 생기는 현상이다. 요소에 value 속성을 설정하고 onChange 핸들러를 제공하지 않으면입력값이 리액트 상태에 반영되지 않는다. 리액트는 이때 사용자 입력을 감지하고 컴포넌트를.. 공감수 0 댓글수 0 2024. 6. 18.
(React) useState 배열, 객체 업데이트 패턴 정리 useState를 사용해 상태 변수(state)와 상태를 변경하는 함수(setState)를 생성할 때, 원시 타입(primitive type)이 아닌 객체나 배열을 사용해야 할 때가 있다.문제는 객체나 배열은 원시 타입과 다르게 참조에 의해 할당되거나 복사되므로, React가 객체 변경을 감지할 수 없다는 것이다. 객체는 메모리 주소를 가지므로 내용이 변경되어도 참조 값은 변하지 않기 때문이다.따라서 useState로 객체를 업데이트할 때는 스프레드 연산자(...)를 사용해 새로운 객체를 만들어 반환해야 한다. 이번 포스팅에서는 useState로 객체를 업데이트할 때 사용할 수 있는 패턴을 정리하고자 한다. 1. 배열/객체에 새로운 요소를 추가해야 할 때배열/객체를 상태 변수(state)로 만들고,.. 공감수 0 댓글수 0 2024. 6. 17.
(React) useState 기본 사용법 정리, 주의할 점 리액트는 다양한 내장 함수인 훅(hook)을 제공하며, useState도 그중 하나이다.useState는 리액트에게 특정 상태(state)가 변경될 때 컴포넌트를 다시 렌더링 해달라고 요청하기 위해 사용된다.상태가 없다면 리액트는 어떤 변화를 기준으로 렌더링해야 할지 모르기에, 상태를 통해 이러한 변화를 리액트에게 알려주는 것이다. 기본 사용 방법useState는 크게 다음 과정을 거쳐 사용할 수 있다.useState import 하기useState()함수로 state(상태변수)와 setState(상태 변수 변경 함수) 생성하기state(상태변수)가 변경돼야 하는 부분에 setState(상태 변수 변경 함수)를 사용해 상태변수 변경하기import { useState } from 'react'; //u.. 공감수 0 댓글수 0 2024. 6. 16.
(백준/구름) 자바스크립트로 입력 출력 받기, 백준/구름 세팅하기, 입력 유형별 코드 정리 프로그래머스와 달리 백준과 구름은 node.js로 입력과 출력을 직접 구현해야 하기에, 처음 시작할 때 다소 복잡하고 어렵게 느껴질 수 있다. 따라서 이번 포스팅에서는 입력 유형별로 기본 세팅 코드를 정리하려고 한다. 여기서 사용된 코드는 구름의 기본 코드를 기반으로 작성되었다. 1. 입력이 한 줄이고 띄어쓰기로 구분되어 있을 때const readline = require('readline');(async () => { let rl = readline.createInterface({ input: process.stdin }); const input = []; for await (const line of rl) { input.push(...line.split(" ").map(x=>.. 공감수 0 댓글수 0 2024. 6. 14.
(CSS) 자식 컨테이너에게 padding/margin을 주고도 스크롤이 생기지 않게 하는 방법 화면을 100%로 구성하는 와중에 자식 컨테이너에게 padding 혹은 margin을 주고 싶은 경우가 있다. 하지만 이런 경우, 아래와 같이 코드를 작성하면 스크롤이 생겨버린다. 먼저 아래 html, css를 적용하면 스크롤이 생기는 것을 확인할 수 있다. .parents{ width: 100vw; height: 100vh;}.child{ width: 100%; height: 100%; margin: 10px; border: 2px solid black;} 부모 컨테이너에게 padding 을 주는 경우기본 css를 리셋한 뒤, box-sizing: border-box;를 사용한다. 기본 브라우저 스타일로 마진과 패딩이 주어지기에 이를 모두 0으로 리셋하거나 reset.c.. 공감수 0 댓글수 1 2024. 6. 9.
(React) vite를 이용한 리액트 세팅 방법 이번 포스팅에서는 리액트로 프로젝트를 세팅하는 방법을 정리하고자 한다. 이번 포스팅에서는 Vite로 리액트 프로젝트를 시작하는 방법을 설명한다. Vite는 설정이 간단하고 확장이 쉽다는 장점이 있다. 1. node js 설치하기npm을 사용하기 위해 먼저 node js를 설치해야 한다. npm은 노드 패키지를 관리하는 툴로 node js를 설치하면 자동으로 설치된다. 2. 프로젝트 폴더 생성 & 터미널 오픈프로젝트를 생성하고 싶은 폴더를 새로 생성하고, visual studio code를 열어 해당 폴더를 오픈한다. 3. 리액트 프로젝트 생성제일 먼저 Vite를 이용해 리액트 프로젝트를 생성해야 한다. 아래 명령어에서 .은 현재 디렉토리를 의미하며, --template react는 .. 공감수 0 댓글수 0 2024. 6. 8.
(Typescript) 타입스크립트, 타입 선언 방법 정리 1편 타입스크립트에서는 타입을 선언할 수 있는 방법이 다양하다. 워낙 다양하다 보니 타입을 선언하는 방법이 헷갈리기에 해당 포스팅으로 정리하고자 한다. 기본 타입 정의자바스크립트의 선언문과 비슷하지만, : 옆에 타입을 선언한다. 타입스크립트는 옆에 할당되는 값을 보고 자동으로 타입을 추론할 수 있기에 붙이지 않아도 된다, 다만 배열에 타입을 선언할 때, 빈 배열인 경우 타입을 추론할 수 없으므로 기본 타입 정의를 해 주면 좋다. let name : string = "Lemu";let age : number = "27";//배열let fruit : string[] = ["apple", "banana"];let num : number[] = []; 타입 별칭 (Type alies)위에 기본 타입 선언처럼 .. 공감수 0 댓글수 0 2024. 6. 6.
(CSS) 무한하게 흐르는 텍스트 바 만들기, animation 바 내부에 텍스트를 무한하게 흐르는 효과를 내고 싶다면 key frame을 사용하면 된다. 1. HTML 세팅컨테이너 역할을 할 div를 만들고, 그 안에 p태그로 흐를 텍스트를 준비한다. 이때 텍스트는 어느정도 길게 만들어야 애니메이션을 적용할때 끊이지 않고, 무한으로 흐르는 것처럼 보인다. SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE .. 공감수 1 댓글수 0 2024. 6. 4.
(Algorithm) 알고리즘, 문제해결 패턴, 빈도 수 세기 패턴, Frequency Counter 이번 포스팅은 문제 해결 패턴 중 빈도수 세기 패턴에 대해서 포스팅하고자 한다. 해당 패턴은 특정 값의 빈도수를 체크할 때 유용하다. 객체나 세트를 이용해, 중복되는 값을 세며, O(N)의 시간복잡도를 갖는다. 예시 문제 1두개의 숫자가 주어졌을 때, 두 숫자의 자릿수가 같은 빈도수를 갖는지 확인하는 함수 sameNumFrequency를 만들어라. [예시 입출력]sameNumFrequency(12, 21) //truesameNumFrequency(45512, 25541) //truesameNumFrequency(1123, 2311) //truesameNumFrequency(13, 2311) //falsesameNumFrequency(42, 12) //falsesameNumFrequency(2, 22) /.. 공감수 0 댓글수 0 2024. 6. 3.
(Javascript) iterable, 유사 배열(arraylike)의 차이점, 사용법 유사배열과 iterable의 설명을 보다 보면 비슷하면서 다르기에 꽤나 헷갈린다. 이번 포스팅에서는 iterable과 유사배열의 차이를 확실히 정리하고자 한다. iterable이란? iterable을 직역하면 반복이 가능하다는 뜻이다. 이 말 그대로, 반복이 가능한 객체를 iterable로 부른다. iterable 객체에는 문자열, 배열, map, set 등이 있다. iterable이 되려면 특정 조건을 충족해야 한다. 가장 중요한 조건은 for...of를 사용할 수 있어야 한다는 것인데, for... of를 사용할 수 있으려면 해당 객체 내에 메서드 Symbol.iterator가 구현되어 있어야 한다. for... of를 사용하면 객체 Symbol.iterator가 자동으로 호출된다. [Sym.. 공감수 0 댓글수 0 2024. 5. 26.
(Javascript) 헷갈리는 this 고정시키기. bind, apply, call 사용법, 차이점 객체의 메서드를 호출하거나, 생성자 함수 또는 클래스로 새로운 인스턴스를 만들 때, this를 많이 사용한다. 다른 언어와 달리 자바스크립트에서 this는 상황에 따라서 다른 것을 가리키는 경우가 있기에 종종 this가 무엇을 가르키는지 헷갈릴 때가 많다. 따라서 이번 포스팅에서는 이런 헷갈리는 this가 가리키는 것을 아예 고정시키는 메서드 bind, apply, call 각각의 사용법 그리고 차이점에 대해서 설명하고자 한다. 참고로 this에 관해서는 아래 포스팅에서 자세히 설명해 두었다. (Javascript) this란 무엇인가? this 사용방법this는 객체 또는 함수와 같이 사용되는 키워드이다. 객체 내에서 사용되는 this는 호출방식에 따라 가리키는 것이 달라질 수 있다. 1. .. 공감수 0 댓글수 0 2024. 5. 25.
(Javascript) 논리 연산자 &&과 ||의 단축 평가 논리 연산자 &&와 ||는 boolen이 아닌 피연산자와도 사용할 수 있다. boolen이 아닌 피연산자를 이용할 때, 반환값을 boolen로 변환하지 않고, 그대로 반환한다. 이 때문에 처음 논리연산자와 단축평가를 접하면 아주 헷갈린다. 따라서 이번 포스팅에서는 논리연산자 &&와 ||에 대해 설명하고, 피연산자 값에 따라 달라지는 반환값을 정리하고자 한다. Falsy와 Truthy 값각 논리 연산자를 설명하기 전에 Falsy와 Truthy가 무엇인지 설명하고자 한다. 논리 연산자에 boolen이 아닌 피연산자를 추가하면, 논리 연산자는 해당 피연산자를 boolen으로 변환하려고 시도한다. 이때 아래에 해당하면 논리연산자는 해당 피연산자를 false로 취급한다. 아래 값들은 falsy값이라 불리며, .. 공감수 0 댓글수 0 2024. 5. 23.
(HTML) script 태그 로드 방법에 따른 차이 : async, defer, header안, body 끝 html에서 script 태그를 로드하는 방법에는 크게 4개가 있다. 이번 포스팅에는 각각의 방법과 그 방법에 따라 script가 어떻게 불러와지는지 정리하고자 한다. header태그 안에 작성body 태그 끝에 작성async 키워드 사용defer 키워드 사용 header 태그 안에 작성html 태그 중, header 태그 안에 script 태그를 작성하는 방법이다. script 태그를 불러오는 과정은 아래와 같다. HTML 파싱을 진행HTML header에서 script 태그를 만남HTML 파싱을 중단script 로드 후 실행HTML 파싱 재개빠르게 script를 불러올 수 있다는 장점이 있으나, script를 로드하고 실행한 뒤에 다시 html을 파싱 하므로 로딩시간이 길어지거나, 화면에 빈 .. 공감수 0 댓글수 0 2024. 5. 21.
(CS) XML, JSON이란? 역직렬화와 직렬화 XML과 JSON은 둘 다 데이터 교환 형식이라는 공통점이 있다. 데이터 교환 형식이라는 것은 데이터를 주고받을 때 사용하는 형식이라는 뜻이다. 데이터 교환 형식은 api 반환 형태나 시스템 구축 설정파일 등에 사용된다. 이런 데이터 교환 형식은 다른 언어의 영향을 받지 않아 독립적이며, 다양한 언어에서 사용이 가능하다. JSON JSON은 Javascript object notation의 약자이다. 즉 자바스크립트 객체 문법으로 구조화된 데이터 형식이다. 즉 JSON은 보통 아래와 같은 형태로 key & value로 구성된다.{"key" : "value"} 자바스크립트의 객체와 JSON의 차이점이 있다면, 바로 undefinted와 메서드가 포함될 수 없다는 것이다. undefined와 메서드.. 공감수 0 댓글수 0 2024. 5. 19.
(CSS, SCSS) scss란? scss 사용법, 주요 기능 Nesting, Mixins, Extend, Functions 사용법 scss란? 기본 css를 사용해 디자인할 때, css가 복잡해질수록 유지보수가 어려워진다. 이때 scss를 사용하면 유지보수에 도움이 될 수 있다. scss란 css 확장 스타일 시트 언어로, css의 모든 기능은 물론 고급기능이 추가되어 있다. 이런 고급기능들은 css코드를 간략화해서, 유지보수를 쉽게 만든다. scss 파일은 .scss 확장자를 가지며, scss 코드를 css로 컴파일 할 수 있다. scss의 설치 방법, 장점, 사용법은 아래 공식 사이트에서 자세히 확인할 수 있다. Sass: Sass BasicsCSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. Thi.. 공감수 0 댓글수 0 2024. 5. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.