로니의 개발 이야기

목표 시멘틱 마크업이 무엇인지에 대한 이해 시멘틱 마크업의 사용 이유 정리 시멘틱 마크업의 사용법 알기 시멘틱 마크업?(Semantic Markup) 시멘틱 마크업은 글자 그대로 해석하면, ‘의미론적인 HTML 태그 문서 작성’을 뜻합니다. 즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다. 그렇다면 이러한 방식은 왜 사용되는 것일까요? 시멘틱 마크업을 사용하는 이유 시멘틱 마크업을 사용함에 따라 얻을 수 있는 효과는 다음과 같습니다. 웹 접근성에 효율적 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있기 때문입니다. 코드 가독성에 따른 유지 보수의 용이 끊임없는 div 들을 탐색하는 것보다, 의미 있는 코드 블록을 찾는 것..

실행 컨텍스트는 자바스크립트에서 가장 중요한 핵심 개념 중에 하나입니다. 자바스크립트에서 작동하는 다양한 것들의 동작 원리를 담고 있기 때문입니다. 이를 정확히 이해하는 것은 자바스크립트 개발자에게 매우 중요합니다. 목표 실행 컨텍스트에 대해서 이해한다 실행 컨텍스트란? 실행 컨텍스트는 실행 가능한 코드에 제공할 환경 정보들을 모아놓은 객체를 말합니다. 따라서, 우리가 코드를 작성하고 실행하게 된다면 실행 컨텍스트 내부에서 실행되고 있는 것입니다. 여기서 말하는 실행 가능한 코드는 아래와 같습니다. 전역 코드 : 전역 영역에 존재하는 코드 함수 코드 : 함수 내에 존재하는 코드 Eval 코드 : eval 함수로 실행되는 코드 block 코드 : while, if , for, function 등에서 만들어..

프론트 엔드 개발을 진행하면서, 백엔드 개발자와 협업을 진행하기 위해서는 REST의 개념에 대해서 알아야 할 필요가 있습니다. 오늘은 REST와 REST API, RESTful API에 대해서 알아보겠습니다. 목표 REST의 개념 및 특징을 이해한다 REST API의 개념 및 규칙을 이해한다 RESTful의 개념을 이해한다 REST의 정의 먼저 REST는 ‘Representational State Transfer’의 약자로 자원을 이름으로 구분하여 자원의 상태를 주고받는 모든 것을 의미합니다. REST의 개념 REST는 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시합니다. HTTP Method(GET, POST, PUT, PATCH, DELETE..

리액트는 DOM에 리액트 컴포넌트를 렌더링 해주는 render메소드를 제공한다. ReactDOM.render(element, container[,callback]) render는 컨테이너 DOM에 element를 렌더링 하는 함수이다. 이 render함수는 container의 자식으로 react component를 넣어주는데, 기존에 이미 렌더링 된 react component가 있다면, 업데이트만 해주게 된다. 그리고 렌더링이 완료되면 세 번째 인자로 전달된 callback이 실행되게 할 수 있다. 이 방식은 CSR(Client Side Rendering)을 할 경우에 사용된다. 그렇다면 SSR(Server Side Rendering)을 사용하는 프레임워크를 사용할 경우에는 어떻게 해야 할까? 이때 사..

React 환경에서 개발을 진행하면서 CRA를 통해 보통 개발 환경을 구축해왔다. 하지만, '프론트엔드 개발자라면 빌드 시스템을 직접 구축할 수 있어야 하지 않을까?'라는 생각이 들었다. 또한 상황에 맞게 환경 설정을 수정하며, 성능을 개선해 나가는 작업이 필요하다고 생각했다. 이번 작업은 macOS 환경에서 진행하였고, CRA 없이 react 개발 환경 구축을 시작해보겠다. package.json 만들기 가장 먼저 내가 작업하고자 하는 위치에 가서 프로젝트 초기화를 통해, 어떤 프로젝트를 진행하고자 하는지에 대한 정보를 입력한다. yarn init 명령어를 통해서 내가 작업하고자 하는 폴더를 node.js 프로젝트로 초기화 시킨다 해당 명령어를 진행하면 아래와 같은 question이 나오게 되는데, 내..

2022년 3월 29일부로 react version 18을 사용할 수 있게 되었다. v17에서 v18로 업데이트되면서 root API에서 변화가 생겼는데, 이번에 그 부분에 대해서 다뤄볼까 한다. ‘root’는? root는 react가 렌더링 할 트리를 추적하는 데 사용하는 최상위 데이터 구조에 대한 포인터이다. Legacy root API(v17) : root는 DOM 요소에 연결하고 DOM 노드를 통해서 액세스 했다. New root API(v18) : root를 만들어주고, 그것을 렌더링 한다. // Before import * as ReactDOM from 'react-dom'; import App from 'App'; const container = document.getElementById('..

브라우저의 핵심 기능은? 사용자가 참조하고자 하는 웹페이지를 서버에 요청(request)하고 서버의 응답(response)을 받아 브라우저에 표시하는 것이다. 자원의 주소는 URI에 의해 정해진다. 그렇다면 브라우저는 어떻게 동작할까? 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. 렌더링 엔진은 HTML 문서를 파싱 해서 각각의 태그를 DOM 노드로 변환하여 DOM 트리를 생성하고 CSS 문서를 파싱 해서 CSSOM 트리를 생성한다. 그리고 이 둘을 결합하여 렌더 트리를 만들게 된다. 그 다음은 레이아웃 단계이다. 이 단계에서는 각 노드의 크기와 위치, 레이어 간 순서와 같은 정보를 계산하여 어디에 배치할지, 어떤 크기를 가질지가 정해진다. 페인팅 단계에서는..

var, const, let의 차이점을 비교하려면 var의 문제점을 알아야 한다. 그렇다면 var를 사용함으로써 어떤 문제가 발생하게 될까? var를 사용하면서 발생하는 문제점 ⓵ 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다. ⓶ 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다. ⓷ 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. ⓸ 어떤 의도로 선언되었는지 알 수 없다. 위와 같은 문제들이 발생할 수 있는데, 이를 개선하기 위해 ES6에서 나온 새로운 키워드가 const와 let이다. 이제 var, const, let의 차이에 대해서 알아보겠다. var, const, let의 차이 const와 let은 중복 선언이 불가능하다 → 어떤..

스코프(scope)란? 식별자의 유효 범위를 뜻하며, 선언된 위치에 따라 유효 범위가 달라진다. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 갖는다. 전역 변수는 어디에서든지 참조가 가능한 값이다. 반면, 지역 변수는 함수 몸체 내부를 말한다. 따라서 지역 변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효하다. 블록 레벨 스코프 자바스크립트에서 모든 코드 블록(ex. 함수, if, for, while, try/catch 문 등)을 지역 스코프로 인정하는데, 이를 블록 레벨 스코프라고 한다. 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 함수 레벨 스코프 var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지..

변수란? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙여진 이름을 말한다. 즉, 변수란 값의 위치를 가리키는 상징적인 이름을 말한다. var foo = 135; console.log(foo) // 135 변수명(식별자)인 foo는 변수의 값이 아닌 메모리 주소를 기억하고 있고, 변수명을 사용하게 되면 자바스크립트 엔진이 변수명과 맵핑된 메모리 주소를 통해 value 값을 반환한다. 아래의 예제를 살펴보자. console.log(foo); // ① undefined var foo = 135; console.log(foo); // ② 135 { var foo = 246; } console.log(foo); // ③ 246 var 키워드를 사용하여 선언한 변수는..

react 개발을 진행하면서 webpack에서 빌드를 할 때, 계속 아래와 같은 오류가 발생해서 이를 해결해보고자 했다. 오류에 따르면 뭔가 최적화가 안되고 있고, react-icon 주에서 fa와 md에서 최대 값인 500kb를 초과하고 있다는 내용이었다. [BABEL] Note: The code generator has deoptimised the styling of .. react-icons/fa/index.esm.js as it exceeds the max of 500KB. [BABEL] Note: The code generator has deoptimised the styling of .. react-icons/md/index.esm.js as it exceeds the max of 500KB...

Optional chaining 이 필요한 이유? 옵셔널 체이닝은 왜 필요한 것일까? 일단 옵셔널 체이닝(optional chaining)?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다고 한다. 에러 없이 안전하게 접근한다? 음.. 어떤 부분에 대해서 안전할까에 대해서 한번 천천히 생각해보도록 하자. 만약, data라는 배열을 받아와서 핸들링한 후 리턴하는 예시가 있다고 해보자. 코드의 결과는 당연히 undefined가 나올 것이다. 왜 undefined가 나올까? 그것은 data가 아직 도착하지 않았는데 map 함수가 실행되었기 때문이다. map 함수 입장에서는 data가 뭔지 모르겠으니까 data를 undefined 취급해줄 수밖에 없는 것이다. const examp..

CORS? 개발을 하다 보면 쉽게 접하게 되는 CORS에 대해서 한번 정리해보고자 한다. 그렇다면 먼저 CORS란 무엇일까? CORS는 Cross-Origin Resource Sharing의 줄임말로, 직역하면 교차 출처 리소스 공유이다. 교차 출처 리소스 공유라는 말은 쉽게 와닿지 않는다. 쉽게 말해, 내가 가지고 있는 모자를 친구가 빌린다고 했을 때, 내가 알겠다고 하는 느낌으로 생각하면 될 것 같다. 그렇다면, 출처(Origin)란 무엇일까? 서버의 위치를 뜻하는 URL들은 여러 개의 구성 요소로 이루어져 있는데, 이중에 sheme(protocol), host(domain), port로 구성되어있는 것이 출처이다. 예를들어, https://aosjehdgus.tistory.com/라는 주소가 있다고..

AWS EC2 Instance에 ping test를 진행해봤더니 아래와 같이 timeout 메시지를 받게 된다. 그리고 테스트를 종료해보면 100.0% packet loss라는 메시지를 보게 된다. 그렇다면 ping test 진행을 위해서 어떠한 설정을 해주어야 할까? Request timeout for icmp_seq 0 이것을 해결해주기 위해서는 인바운드 규칙을 별도로 추가해주어야 한다. 순서는 다음과 같다. AWS EC2에 접속 후에, 좌측 네비게이션 바에서 보안 그룹을 클릭한다. 내가 수정하고 싶은 보안 그룹을 클릭한다. 인바운드 규칙 편집을 클릭한다. 규칙 추가 버튼을 클릭한다. 여기서 유형 , 프로토콜 , 소스 를 지정해주면 된다. 각각의 설정 내용은 아래와 같다. 유형 : 네트워크 트래픽에 ..

npx create-react-app taskbox 명령을 사용했는데, 아래와 같은 오류가 발생하여서 이를 해결해보고자 한다. 간단하게 이제 글로벌 설치가 지원되지 않는다는 것이다. You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) We no longer support global installation of Create React App. 해당 오류를 해결하기 위한 방법으로 아래와 같은 방법이 터미널에 제시되고 있다. Please remove any global installs with one of the following commands: npm uninstall -g create-react-app ya..

웹 접근성 개요 웹은 원래부터 사용자의 환경이나 사용하는 기기, 운영체제에 가능한 영향을 받지 않고 웹이 제공하는 정보를 사용자에게 전달하고자 하는 목적에서 만들어진 정보 전달 체계이다. 따라서, 웹 접근성은 새롭게 대두되는 것이 아니라 당연히 가져야 할 개념이라고 볼 수 있다. 그러나 최근의 웹의 현질은 웹의 기본적이고 중요한 목적을 무시하고 특정 기기 또는 운영체제에만 최적화되어 있는 경우가 많았다. 특히나 노약자 또는 장애인 등은 정보화의 혜택이 필요한 계층임에도 불구하고 국내의 웹 환경으로 부터 소외되고 있다. 이러한 상황은 웹이 생활 속에 파고든 현 시점에서 커다란 문제점으로 제기되고 있는 것이다. 따라서, 이번에는 웹 접근성에 대해서 자세히 알아보는 시간을 가져보려고 한다. 웹 접근성이란? 웹..

mongoDB Compass를 외부 서버의 컴퓨터에 연결을 하면서 많은 시행착오를 겪어서, 내용을 천천히 기록으로 남겨보려고 합니다. 먼저 이 과정은 mongoDB, mongodb-compass 가 정상적으로 설치되어 있고, 환경 설정이 끝났다는 가정하에 진행되었습니다. mongoDB Compass를 실행 시켜보면 아래와 같은 화면을 볼 수 있습니다. 여기서 연결하는 방법이 두가지가 있는데, 저는 string 형식을 사용하지 않기 때문에 Fill in connection fields individually를 눌러 줍니다. 그러면 아래와 같은 폼을 볼 수 있습니다. 여기서 Hostname은 default로 localhost로 두고, port도 마찬가지로 27017로 둡니다. (별도의 변경 사항이 없었다면)..

머리말 다양한 구글링을 해보면서 mongoDB 를 설치를 하다 보니 각각 다른 환경 설정을 가지고 있어서 여러 문제가 발생하는 것 같습니다. 그래서 저의 mac 에 맞는 설치 및 인증 설정 기록을 남겨보려고 합니다. 저는 homebrew 를 통한 설치 방법을 진행해보겠습니다. (homebrew 가 설치되어있다고 가정하고 진행) 설치 과정 패키지 저장소를 확보합니다. $brew tap mongodb/brew 설치할 mongodb 버전을 찾습니다. $brew search mongodb 저는 mongodb-community@4.4 버전을 설치하도록 하겠습니다. $brew install mongodb-community@4.4 설치를 하고 나면 아래와 같은 메시지가 뜨게 되고, 이 메시지를 주목할 필요가 있습니다..

지난 포스팅에서는 로그인 인증 - 세션과 쿠키 인증 방식에 대해서 알아봤다. 이번엔 토큰 인증 방식에 대해서 알아보려고 한다. 그렇다면, 토큰을 이용한 인증 방식은 뭘까? 토큰 인증 방식은 인증받은 사용자들에게 토큰을 발급하고, 서버에 요청을 할 때 헤더에 토큰을 함께 보내도록 하여 유효성 검사를 한다. 세션 방식과 달리 상태를 유지하지 않으므로 stateless 한 구조를 갖는다. 이러한 토큰 인증 방식에서 대표적으로 사용되는 JWT 를 이용한 토큰 인증 방식에 대해서 알아보고자 한다. JWT(Jason Web Token)이 뭘까? JWT 는 정보를 JSON 객체 형태로 사용자에 대한 속성 정보(Claim)를 저장하는 암호화된 문자열(token)이다. JWT는 토큰 자체를 정보로 사용하는 Self-co..

로그인 인증 방식에는 대표적으로 JWT를 이용한 토큰 기반의 인증 방식과 세션/ 쿠키 인증 방식이 있다. 이 중에서 오늘은 세션과 쿠키를 이용한 인증 방식에 대해서 알아보려 한다. 세션(Session)은 뭘까? 세션이란 일정 시간 동안 같은 사용자로부터 들어오는 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이다. 여기서 일정 시간이란 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점부터 웹 브라우저를 종료함으로써 연결을 끝내는 시점을 말한다. 즉, 유저가 웹 서버에 접속해 있는 상태를 하나의 단위로 보고 세션(Session)이라고 말한다. 쿠키(Cookie)는 뭘까? 특정 웹 사이트를 방문했을 때 만들어지는 정보를 담는 파일을 지칭하는 것으로, 상태 정보를 유지하는 기술이다. 세션과 쿠..