전체 글 182

더블엔씨 기업조사 1일차

더블엔씨 기업 조사를 해보려고 한다. 그래도 무작정 조사하는 것 보다는 목표를 가지고 조사를 하는게 좋겠다는 생각이 든다. 1. 더블엔씨에 대한 기본적인 정보 취득 (어떤 서비스를 제공하는지 / 최근에는 어떤 활동이나 이벤트를 하고 있는지 ...) 2. 내가 이 기업에서 어떤 일을 해보고 싶은지 구체적으로 말 할 수 있어야한다. (그럴려면 어떤 업무가 있는지도 알아야겠다. 입사 후 포부 등에 구체적으로 적을 수 있도록) 1. 니콘내콘 사업 현황 및 고객층 분석 자료 위 이미지에서 다시 한번 알게 된 사실은 니콘내콘앱을 짠테크 유저들이 정말 애용한다는 점이다. 유튜브를 보니까, 아예 이런 기프티콘 되파는 것으로 재테크를 하는 사람도 있었다. 이런 짠테크 유저들을 겨냥한 이벤트나 혜택이 더 많았으면 좋겠다...

3장 컴포넌트

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p85 ~ p.117 새로 알게된 사실 1. 함수 컴포넌트가 클래스형 컴포넌트보다 선언하기가 편하고, 메모리 자원도 덜 사용한다. 2. ES6의 화살표 함수는 함수를 파라미터로 전달할 때 유용하다. 3. 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 4. props는 컴포넌트 속성을 설정할 때 사용하는 요소이다. 5. props 값을 따로 지정하지 않았을 때 기본값을 설정하는 것은 defaultProps를 통해 가능하다. 6. 컴포넌트 태그 사이의 내용을 보여주는 props는 props.children을 통해서 가능하다. import..

2장 JSX

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 음 2장을 통해서 알아야하는 것은 무엇일까? 나는 어떤 대답을 할 수 있어야할까? 한마디로 2장 JSX 단원의 목표가 무엇일까? 목표: 1. WHY? => JSX를 왜 쓰고, 어떤 문제를 해결해주는지 명확하게 대답을 할 수 있어야 한다. 2. HOW? => JSX를 어떻게 쓰는지 알아야 한다. (규칙) 2.1 코드 이해하기 Create-React-App을 통해서 프로젝트를 만들고 index.js에 들어가보자. import React from 'react'; 이 코드는 리액트를 불러와서 사용할 수 있게 해 줍니다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데요. 프로젝트..

리액트 스터디 시작!!

2022.1.18일 부터 리액트 스터디를 본격적으로 시작한다. 멋쟁이 사자처럼 1기 스터디원들과 새롭게 '리액트를 다루는 기술' 이라는 책(김민준 저- 길벗출판사) 으로 스터디를 하기로 했다. 월/화/수/목/금 매일 18시 30분에 디스코드 방에서 모이기로 했다. 각자 한 파트씩 맡아서 발표를 하는 형태로 스터디를 진행하기로 했다. 내가 이 글을 쓰는 이유는 자바스크립트 딥다이브 스터디에서 느꼈던 한계나 단점에 대해서 이번에는 보완을 하고 싶어서이다. 그리고 딱 한가지 목표만 잡아서 그것을 이 책을 통해서 이루고 싶다. 그래서 여러모로 생각을 정리하고자 블로그에 글을 작성하기로 했다. 목표를 뭘로 잡을까? 딥다이브 스터디때 아쉬웠던 점은 이론만 공부해서 뭔가 공중에 날라간 느낌도 들었다. 물론 여러 전문..

SPA(Single Page Application)로 구성된 페이지에서 SEO(Search Engine Optimization)를 할 수 있는 방법은 무엇일까?

SPA (single page application) : 클라이언트에서 데이터를 불러와서 , HTML을 클라이언트에서 생성하는 역할 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다. 즉, 현재의 HTML을 고정하고 변경되는 부분에 대해서만 서버에서 불러와 클라이언트 사이드에서 렌더링하는 방식인 것입니다. 해결책 (1) SSR (Server Side Rendering) 만약, 우리 사이트가 구축 전이어서 SEO 구축이 필요한 상황이라면 SPA를 SSR (서버사이드렌더링) 방식으로 구축하여야합니다. SPA는 기본적으로 CSR (Client-Side Rendering) 방식으로 구현됩니다. 즉, 서버에서는 HTML, ..

Cross-Site Scripting (XSS)을 설명하고, 해결 방안은 무엇인가?

XSS(Cross-Site Scripting) : 관리자가 아닌, 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 기법 특징 대부분 사용자가 글을 쓰고 읽을 수 있는 게시판에 많이 발생하지만, 사용자의 입력 값을 웹 페이지에 보여주는 곳에서도 발생한다. 악의적인 사용자가 C&C 서버로 리다이렉션 하기 위해 리다이렉션 스크립트를 주입하여 중간 경유지로 활용하기도 하고, 사용자의 쿠키를 탈취하여 세션 하이재킹(Session Hijacking) 공격을 수행하기도 한다. 위험성 1. 쿠키 정보 및 세션ID 획득 2. 시스템 관리자 권한 획득 3. 악성코드 다운로드 4. 거짓 페이지 노출 해결방안 1. 입출력값 검증 XXS는 입출력 값 검증이 제대로 이루어지지 않아 발생하는 취약점이다. 따라서 서버측에..

반응형 웹과 적응형 웹의 차이는? 🤔

반응형 웹: 미디어 쿼리를 사용하여 화면의 크기를 사용하고 유연한 이미지와 그리드로 화면의 크기의 변화에 그에 맞는 크기가 된다. 적응형 웹: 서버나 클라이언트에서 웹에 접근한 디바이스를 체크하여 그 디바이스에 최적화된 마크업을 호출한다. 반응형 웹과 적응형 웹의 차이점 반응형 웹 장점: 하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하다. 단점: 사용자는 단 하나의 기기만으로 접속하지만 그 경우에도 모든 기기를 위한 CSS를 전부 다운로드 해야하니 데이터를 낭비하고 로딩시간을 늘리는 단점을 가진다. 적응형 웹 장점: 사용자의 기기에 맞는 템플릿 및 CSS만 다운로드하므로 데이터 낭비가 적고 로딩 속도가 빠르다. 단점: 각각의 기기별로 별도의 템플릿을 작성해야하므로, 개발이 ..

api broken pipe 발생원인과 해결 방법은 무엇인가?

발생원인 1)잦은 입출력 호출로 인하여 발생한다. 요청 처리가 끝나기도 전에 새로고침이나 등록 버튼을 연속으로 눌러 재요청을 여러번 보내는 경우가 그러하다. 이 경우 소켓이 끊어지면서 발생한다. 2) 클라이언트가 받은 응답 데이터를 적절한 타이밍에 처리하지 못하면 발생하는 Excepiton이다. 네트워크가 느리거나 서버의 cpu 이슈로 느리게 처리되는 경우가 그러하다. 두 원인 모두 공통점이 있다. 두 소켓상의 통신에서 소켓을 담당하는 프로세서(혹은 스레드)가 어떤 이상이 생겨서 종료가 된 상황이다. 또한 상대 소켓은 이를 알지 못해서 데이터를 전송하려는데 문제가 생긴 상황이다. 해결 방법: 1) request 후 response 기다리기 : 클라이언트에서 보낸 데이터를 받고 응답을 기다리도록 설정한다...

기술 면접 대비 시작!!

미리미리 기술 면접을 준비하고자, 이 카테고리를 만들게 되었다. :) 개인적으로 나를 위함도 있지만, 이 글을 읽고 다른 사람들의 면접에도 도움이 되었으면 하는 바람으로 글을 쓴다. 글을 어떻게 쓸까 조금 고민이 된다. 우선 장황하게 내용을 쓰는거보다 (정의 + 장점 + 한계 + 실제 예시) 이런식으로 실제 면접에서 말 할 수 있도록 적을 예정이다. 좋은 결과가 있었으면 좋겠다 ^^ 아이 기분 좋아

자바스크립트) DOM

본글은 자바스크립트 딥다이브 39장 DOM 파트를 요약한 내용입니다 (p.677~ p.709) 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM (Document Object Model) : HTML 문서의 계층적 구조와 정보를 표현하여 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료 구조다. 39.1 노드 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 반환된다. 이때 HTML 요소의 속성은 속성 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 요소의 콘텐츠 영역(시작태그와 종료 태그 사이) 에는 텍스트 ..

📙 (JAVASCRIPT) 2022.01.03