본문 바로가기

전체 아티클136

대체 Yarn을 왜 사용해요? 목차 · Yarn이 무엇이길래 많이 사용해요? · Npm과 Yarn의 차이 · Yarn 설치 방법 · 레퍼런스 Yarn이 무엇이길래 많이 사용해요? Yarn은 2016년 페이스북에서 개발한 패키지 관리자이다. React와 같은 프로젝트를 진행하며 겪은 어려움을 해결하기 위해 개발이 되었고, Npm과 같은 기능을 수행하나 Npm 레지스트리와 호환하면서 속도나 안정성 측면에서 Npm보다 향상이 되었다. Npm은 자동으로 패키지에 포함된 다른 패키지 코드를 실행하는 특징이 있는데, 이 특징은 편리하지만 안정성을 위협할 수 있다. 이에 따라 보안 시스템에 몇가지 취약성이 발생하기도 하며 나중에는 이러한 부분들이 커져 심각한 문제가 발생할 수 있다. Yarn은 yarn.lock 또는 packge.json 파일에 .. 2023. 8. 28.
3개월 안에 토스 코어에서 사용하는 모든 기술 스택 찍먹하기 목차 · 토스라는 흥미로운 조직 · 토스 코어 챕터의 모든 기술 스택 토스라는 흥미로운 조직 대학 생활을 진행하면서, 프로젝트 기획 및 개발을 진행하면서 가장 큰 레퍼런스로 참고했던 곳이 `토스`라는 서비스였다. 토스를 통해 간접적으로 UX에 관련된 부분을 많이 배우기도 하였고, 토스에서 진행하는 NEXT 챌린지를 통해 스스로 많이 돌아보는 시간을 가질 수 있었다. 토스에서는 자체적으로 만드는 서비스가 많기 때문에, 토스라는 조직은 내가 너무나도 흥미로운 조직이면서 동시에 내가 발전을 위해서라면 목표성으로 잡고 가야하는 목표치의 일부분 중 하나였다. 우연치 않게 회사를 입사하면서 스스로의 커리어를 정리하기 위해 링크드인에 가입을 하게 되었는데, 토스 테크 HR을 담당하시는 분과 네트워킹을 하게 되었다. .. 2023. 8. 27.
정든 멋쟁이사자처럼을 떠나며 목차 · 멋쟁이사자처럼을 어떻게 시작하게되었나면요 · 일반 교육생 신분이었던 내가 학교 대표가 되기 까지 · 나에게 멋쟁이사자처럼이란 멋쟁이사자처럼을 어떻게 시작하게되었나면요 나는 고등학교 때 컴퓨터를 너무 많이 좋아하던 학생이었다. 고등학교 때 컴퓨터 동아리를 만들어 친구들과 함께 조그마한 웹 사이트를 만들기도 하고, 생활기록부에 컴퓨터 이야기가 많던 그런 학생이었다. 운이 좋게 고등학교를 졸업하고 집 주변 대학교에 입학을 하면서 사람들과의 네트워킹을 좋아하고, 새로운 배움에 대해 즐거움을 느끼는 것이 행복했기에 우연히 신입생의 용기로 `멋쟁이사자처럼` 이라는 웹 테크 동아리에 무작정 지원을 하게 되었다. 한달이라는 시간 동안 자기소개서를 쓰고, 면접에서는 실제로 회사에서 쓸법한 자기소개서라는 말을 들.. 2023. 8. 20.
Node OpenSSL 3.0 문제를 겪어보셨나요? 목차 · 회사 업무 중 처음 보는 에러를 마주하다. · OpenSSL.. Hash.. 이게 도대체 뭐에요? · OpenSSL이 뭐에요? · OpenSSL 문제를 겪었을 때 회사 업무 중 처음 보는 에러를 마주하다. 회사 업무에서는 주로 바닐라 자바스크립트를 이용해 개발을 진행하지만, 평소 사이드 프로젝트에서는 신기술을 사용하는 것이 너무 재밌어 리액트 경험을 살려 리액트 관련 업무를 진행하게 되었다. 아무래도 현재 매출액의 코어 부분을 담당하는 부분의 일부분을 담당하니 비록 최신 코드는 아니지만, 클래스 컴포넌트로 이루어진 코드를 받게 되었다. 클래스 컴포넌트에서 함수형 컴포넌트로 변환 과정을 진행하고, 보통 현직 프로젝트에서는 CRA를 통한 프로젝트 생성보다는 Webpack을 이용해 번들 사이즈를 줄이.. 2023. 7. 17.
RESTful하다, REST하다? 목차 · REST란? · REST 구성요소 · REST의 특징 · REST에서 가장 중요한 중심 규칙 2가지 · REST의 장점 · REST의 단점 · REST API는 무엇일까? · REST API의 설계 원칙 · RESTful이란? REST란? · REpresentational State Transfer의 약자 · 자원을 정의하고 자원에 대한 주소를 지정하는 네트워크 아키텍처의 모음 · 자원(Resource)의 표현(Representation)에 의한 상태 전달 REST 구성요소 Resource(자원) - URI · 모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다. · 자원을 구별하는 ID는 HTTP URI이다. · Client는 URI를 이용해서 자원을 지정하고, 해당 자원의.. 2023. 3. 29.
웹 접근성을 왜 지켜야해요? 목차 · 웹 접근성은 무엇일까 · 웹 표준과 웹 접근성의 차이는 무엇일까 · 웹 표준을 지킨 웹은 아래와 같은 장점을 가진다. · 웹 접근성 가이드 · 대체 텍스트 · 그 외에 준수해야할 것이 있을까? 웹 접근성은 무엇일까 모든 사람들에게 평등하고 공평한 웹의 이용을 위해 웹 접근성이라는 것이 만들어졌다. 보통 사람들과 달리 웹 이용에 불편함을 겪는 사람들 (장애인, 노약자 등)은 웹의 접근성이 떨어진다. 이를 위해 스크린 리더기, 마우스 스틱 등 보조 기기를 이용하는데 보조기기가 읽게 하기 위한 방법들을 통해 웹 접근성이 좋게 해야한다. 웹 표준과 웹 접근성의 차이는 무엇일까 우리가 흔히 알고있는 웹 표준이라는 정의는 누군가가 어떤 브라우저 및 기기를 통해서 웹에 접속했을 때 동일시한 내용을 전달받아야.. 2023. 3. 29.
왜 크로스 브라우징(Cross Browsing)을 고려해야해요? 목차 · 크로스 브라우징(Cross Browsing) 이란? · 브라우저 간 상호 호환성을 맞추려면, 브라우저간 100%의 동일성을 맞춰야하지 않나요? · 동등성과 등가성, 어디까지 맞춰야할까? · 크로스 브라우징에서 어떤 부분을 테스트해야할까? · 어떻게 맞출 수 있을까? · 어떻게 사용을 해요? · 레퍼런스 크로스 브라우징(Cross Browsing)이란? 크로스 브라우징이란, 한국 소프트웨어 진흥원 공개 SW 지원 센터에서 발간한 `Cross Browsing 가이드` 라는 문서에 따르면 크로스 브라우징에 대해 이렇게 설명을 한다. Cross Browsing 이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 치우치지 않도록 공.. 2023. 3. 21.
브라우저는 어떻게 작동할까? 목차 · 브라우저란? · 브라우저의 기본 구조 · 렌더링 엔진 동작 과정 · 그렇다면 자바스크립트는? · 레퍼런스 브라우저란? 웹 브라우저는 동기적으로 HTML+CSS, JavaScript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어이다. 웹 브라우저가 웹 서버에 필요한 자원(웹 페이지)을 요청하면 서버는 응답하고 웹 브라우저를 해석한 후 사용자에게 보여준다. 보통 자원은 HTML 문서지만, PDF, 이미지 등 다양한 형태일 수 있다. 브라우저의 기본 구조 · 사용자 인터페이스(UI) 사용자가 접근할 수 있는 영역입니다. URI를 입력할 수 있는 주소 표시줄, 이전/다음버튼, 북마크 메뉴, 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼, 홈 버튼 등 요청한 페이지를 보여주는 .. 2023. 3. 14.
보안 정책에 관련된 SOP와 CORS 목차 · SOP(Same-Origin-Policy) · 만약 서버의 도움없이 SOP를 회피해 외부 서버로 요청을 날릴 수 있는 방법은 없는걸까? · CORS(Cross-Origin-Resource-Sharing) · 서버에서 CORS(Cross-Origin-Resource-Shargin) 요청 핸들링하기 · 레퍼런스 SOP(Same-Origin-Policy) 웹 어플리케이션 보안 모델에서 중요한 개념 중 하나인 동일 출처 정책(Same-Origin-Policy)이다. 이 정책에 의해서 자바스크립트(XMLHttpRequest)로 다른 웹페이지에 접근할 때는 같은 출처(Same Origin)의 페이지에만 접근이 가능하다. 같은 출처라는 것은 프로토콜, 호스트명, 포트가 같다는 것을 의미한다. 웹 페이지의 스.. 2023. 3. 14.

티스토리툴바