밴쿠버에서 테니스치는 한량나부랭이

고성능 대규모 프론트엔드 10개 프로젝트: 최적화부터 유지보수까지 한번에 끝내는 초격차패키지 오늘은 10월초부터 수강해오고 있는 고성능 대규모 프론트엔드 10개 프로젝트: 최적화부터 유지보수까지 한번에 끝내는 초격차패키지에 대해 얘기해보려한다. 프론트엔드 개발은 늘 새로운 프레임워크, 툴 등 업데이트와 개발이 빠른 분야라고 생각한다. 이제는 프론트엔드개발자도 AWS, Node.js는 거의 기본인 시대이다보니, 프론트개발과 백엔드개발의 경계가 모호해지고 있다고 생각한다. 물론 다 알면 좋지만, 게다가 장기적으로 프론트만 하고싶어하는 개발자는 없을것이다. 그래도 프론트엔드 개발자로서 프론트에 초점을 맞추고 좀 더 다양한 걸 개발하고 접할 수 있는 기회가 있다면 좋다고 생각했기에, 그리고 팀을 만들어서 팀프로..

지금 next.js로 프로젝트 하나 하고 있는데 아무리 생각해도 ts와 tsx의 차이를 모르고 있는 것 같아 궁금해서 찾아보았다. 정말 구구절절한 설명 다 빼고 간단하다. ts는 typescript만 사용할 때 tsx는 React Component에서 사용시 사용! 나는 Component에서 사용중이니까 tsx, 하지만 타입스크립트만 쓰는 리액트 컴포넌트가 없는 경우라면 .ts인 확장자를 쓰면 된다!.

중앙처리장치(CPU) - 메인보드에 가장 먼저 연결하는 장치 중 하나 - 인간의 뇌와 같은 역할 - 연산과 제어를 담당 - 3가지 모듈 => 산술/논리장치 (Arithmetic Logic Unit, ALU), 제어장치(Control Unit), 레지스터 (Register) 레지스터(Register) - 기본적으로 프로세스는 메인 메모리에 적재된다. - 실제 연산은 CPU내부에서 수행되므로, 데이터를 CPU로 가져와 처리해야한다. => 데이터를 일시적으로 CPU내부에 저장할 공간이 Register => 레지스터는 CPU의 현재 상태를 저장할 공간으로 사용되기도 한다. 산술/논리 연산 장치 (ALU) - CPU가 실질적으로 연산을 처리할 수 있도록 한다. - 산술 연산(+,-,*,/ 등) 및 논리 연산(AN..

일반적인 구조 - 하드웨어 : 컴퓨터가 동작하도록 해주는 내부 물리적인 장치들 - 소프트웨어 : 컴퓨터가 어떻게 동작해야하는지 명시되어있는 명령어 집합 일반적인 하드웨어 구성요소 소프트웨어 - 시스템 소프트웨어 : 하드웨어 자원에 대한 접근이 용이하며, 대개 저수준 언어로 작성된다. => 펌웨어, 운영체제, 컴파일러, 장치드라이버 - 응용 소프트웨어 : 컴퓨터 자원에 대한 직접적인 접근이 제한되며, 대개 고수준언어로 작성된다. 시스템 소프트웨어에 비해 접근하기 쉽고, 친화적이라는 장점이 있다. =>게임, 웹 브라우저

메인보드(Motherboard) - 다양한 물리적인 장치를 장착할 수 있는 인쇄회로기판(PCB) - 컴퓨터의 CPU, 메인 메모리, 하드디스크(보조기억장치) 등을 장착한다. - 다양한 컴퓨터 부품을 연결할 수 있는 인터페이스 제공 - Motherboard라고도 불림 GPU(Graphics Processing Unit) - GPU는 그래픽 관련 연산을 빠르게 처리하는 답을 도출하는 연산 장치 - 인공지능(딥러닝), 고화질 게임, 무인 자동차등에서 많이 쓰인다. - 컴퓨터 그래픽 / 영상처리에 유용하게 활용 - 대규모 행렬 및 벡터연산을 처리하는데에 뛰어난 성능을 발휘 보조기억장치( 하드디스크, SSD ) [Pros] 전원이 차단되어도 내용이 유지되고, 저장 용량이 크다는 장점 [Cons] 보조기억장치는 메..

JSON - JSON(JavaScript Object Notation) 은 데이터를 주고 받기 위해 사용하는 경량의 데이터 형식 중 하나 - JSON 형식에서는 KEY - VALUE 쌍으로 이루어진 데이터 객체를 사용 Session - 서버에서 가지고 있는 객체로, 특정 사용자의 로그인정보를 유지하기 위해 사용 [Pros] - 클라이언트에게는 세션 ID(회원식별목적)를 제공하고, 회원에 대한 중요한 정보를 서버가 가진다. - 민감한 데이터를 클라이언트에 직접적으로 보내지 않는다. - 클라이언트 브라우저가 가지고 있는 세션ID 자체에는 개인정보를 포함하고 있지 않다. [Cons] - 악의적인 공격자가 세션 ID를 탈취하여 사용자인 척 위장할 수 있다. =>세션 ID를 탈취당하는 경우, 사용자의 많은 권한 ..

OAuth - OAuth란, Google 로그인 기능과 같다. - 웹 서버에 Google 비밀번호를 제공하지 않고도, Google계정의 일부 접근 권한을 부여할 수 있다. - 실제로 많은 애플리케이션에서는 SNS 간편 로그인 기능을 제공한다. Unsafe 인증 방식( 계정정보를 알려주는) Safe 인증방식 - 사용자가 설정한 권한에 대해서만 Google 정보에 접근 할 수 있도록한다. - 바로 Access Token을 이용하는 것. OAuth 2.0 구성요소 설명 Resource Owner 사용자, 개인정보의 소유자 Client 개인 혹은 회사가 만든 서비스 일반적인 웹/앱 서버를 의미하지만 Client라 부른다. Resource Server(Google, Facebook등) 등의 입장에서는 Client..

REST 등장배경(Representational State Transfer) - HTTP는 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등) 를 지원한다. - 실제로는 서버가 HTTP 메서드를 기존 설명에 맞게 사용하지 않더라도, 프로그램 개발은 가능하다. 하지만 각 서비스가 서로 다른 방식으로 개발한다면, 개발자 사이의 소통에 문제가 발생할 수 있다. - 따라서 기준이 되는 아키텍처로 REST를 채택할 수 있다. REST의 구성요소 - 특정한 자원에 대하여, 자원의 상태에 대한 정보를 주고받는 개발 방식이다. 자원(Resource) URI 이용 행위(Verb) HTTP 메서드 이용 표현(Representation) 페이로드(Payload) 이용 REST 예제( 회원가입 ) ID : ..

HTTP - 웹상에서 데이터를 주고받기 위한 프로토콜이다. - 웹 문서를 주고 받기 위해 사용한다. - 웹뿐만 아니라 모바일앱, 게임 개발에서도 다양한 목적으로 사용되곤 한다. HTTP Method METHOD 설명 예시 GET 데이터 조회 요청 특정 페이지 접속, 정보 검색 POST 데이터 생성 요청 회원가입, 글쓰기 PUT 데이터 수정 요청 회원 정보 수정 DELETE 데이터 삭제 요청 회원 정보 삭제 HTTP 상태 관리와 세션 - HTTP는 상태를 저장하지 않는다.(Stateless) - 클라이언트는 HTTP로 서버에 연결한 뒤에, 응답을 받으면 연결을 끊어버린다. => 서버입장에서 접속 유지에 대한 요구가 적어, 불특정 다수를 대상으로 하는 서비스에 적합하다. 예시로, 상품확인 -> 장바구니 ->..

쿠키(Cookie)와 세션(Session) - 쿠키와 세션은 웹브라우저와 웹서버가 통신하는 과정에서 많이 사용되므로 자주 언급된다. 쿠키 (Cookie) - 사용자가 특정한 웹 사이트에 방문할 때, 사용자 컴퓨터에 저장하는 기록 파일 - 서버의 자원을 전혀 사용하지 않는다. - ex ) "아이디와 비밀번호를 저장하시겠습니까?" - Chrome과 같이 웹브라우저에서 저장하는 것은 별개 세션 (Session) - 한 명의 사용자(브라우저)의 상태를 유지하는 기술이다. - 서버가 클라이언트에게 고유한 Session ID를 부여하면, 클라이언트는 접속할 때마다 Session ID와 함께 요청한다. - ex ) 웹사이트에 한번 로그인했을 경우, 다른 페이지로 이동해도 계속 접속 상태가 유지된다. - 만약 Sess..

다양한 웹 브라우저 - 웹사이트 접속시 웹 브라우저 프로그램을 사용한다. 예를 들면, Chrome, Firefox, Safari => 웹 페이지를 서버에 요청(request)하여 서버의 응답(response)을 웹 문서형태로 받는다. => 받은 웹 문서(HTML, CSS 등)을 렌더링하여 모니터 화면에 웹 페이지를 표시한다. 서버(Server)와 클라이언트(Client) - 클라이언트가 요청(request)를 보내면, 서버(server)가 응답(response)한다. - 서버와 클라이언트 구조를 따르는 대표적인 예시로는 웹 서비스가 있다. - 클라이언트는 일종의 고객으로 이해할 수 있다. - 서버로 요청을 보낸 뒤에 응답이 도착할 때까지 기다린다. - 서버로부터 응답을 받으면, 서버의 응답을 처리하여 화..

이제 다시 구직중이라 오늘 면접을 다녀왔다. 리액트+next.js로 프로젝트 진행중이라 밤새고 갔다와서 준비를 하지 못했다 ㅠㅠ 내잘못이지 뭐.. 오늘 받은 기술질문 정리를 해보려한다. 왜 나는 하나도 기억을 못하는가!!! 화남.. 게다가 성격도 후딱 빨리 끝내야하는 성격이라 차근차근 얘기하지 못했다. 1. Vue.js 장점 - 러닝커브가 낮음. (내가 장본인.. 자바스크립트만 알고 있었는데 바로 그냥 실무 투입되서 코드분석하고 인강들으면서 개발함.) - React.js와 Angular.js의 장점을 모두 가지고 있음. (양방향 데이터 바인딩, 단방향 데이터 바인딩, 가상돔) - 빠른 렌더링과 가벼움. ( Vue.js가 React.js보다 정말 정말 정말 간소한 차이로 살짝 빠름 ) - 직관성 최고. (..