메이쁘

안녕하세요. React하면 사용하는 컴포넌트. class TestComponent extends React.Component { render() { return ( Hello React! ) } } 와 같이, 컴포넌트를 만들기 위해 React.Component 를 extends 해서 사용하는데요. 이 React.Component 에도 안드로이드의 Activity, iOS의 AppDelegate 처럼 생명 주기(Life Cycle) 가 존재합니다. 이 생명 주기에 대해 알아보겠습니다. 컴포넌트의 전체 생명 주기 컴포넌트가 생성되고, 업데이트(새롭게 랜더링) 되며 제거되는 전 단계를 요약한 사진입니다. (생성 -> 업데이트 -> 제거) 이렇게 보게 되면 헷갈릴 수 있으니까, 하나씩 정리해보겠습니다. 그 전에..

안녕하세요. CORS 대신 proxy 를 사용해 클라이언트에서 서버 사용을 가능하게 하고, 더 편하게 만들어봅시다. proxy란? - 클라이언트가 자기 자신 안에서 다른 네트워크 서비스에 간접적으로 접근하게 해주는 것. - 보통, 시스템이나 프로그램을 사용한 것을 proxy, 서버를 사용한 것은 proxy server 라고 하는데 요즘 거의 대부분은 proxy server를 사용하기 때문에 proxy server 를 proxy 라고 부르기도 합니다. - 즉, 클라이언트 -> 서버 로 바로 접근할 수 없고, 클라이언트 -> 프록시 -> 서버 과정을 통해 클라이언트가 서버에 접근할 수 있습니다. **** 자바스크립트는 정책 상 같은 출처(프로토콜, 도메인 이름, 포트) 로만 접근이 가능하기 때문에, Reac..

안녕하세요. 배열의 loop를 위해 ES6 전에는 for, forEach 문을 사용했다면 ES6 부터는 filter, map, reduce 함수를 다들 사용하게 되었습니다. 그러면 각각에 대해 핵심만 알아보겠습니다. *** 예제를 바로 테스트하고 싶다면, F12 - Console 에서 복사-붙여넣기 후 엔터 ! forEach() - "실행" 시 사용되는 순회 함수. 로그나 API 호출 시 적합합니다. - 즉, 배열의 원소를 하나씩 탐색하며 원소를 가지고 어떤 일을 하고자 할 때 사용합니다. - 밖으로 리턴 값을 줄 수 없습니다. 그래서 내부적으로 값 변경 후 저장하고 싶다면, 별도의 변수를 선언해서 담아야 합니다. - ES6 부터는 배열 뿐 아니라 Map, Set 에서도 사용 가능합니다. var arr ..

오글오글이란, 오글거리는 오늘의 글귀 이다. 오늘 하루를 나타내는 한 글귀, 인상깊은 대사 또는 명언, 앞으로에 있어 기억해두면 좋은 문장 중 하나와 내 코멘트를 적는 공간이다. 관심없는 말 열 마디는 피로를 유발하고, 듣고싶던 말 한 마디는 반응을 이끌어낸다. 마케팅 뿐 아니라 앞으로 살아가면서 머릿속에 넣어둬야 할 문장이다. 백날 길게 말해봤자 핵심이 없으면 장황한 말이 되고 두괄식으로 요점만 짧게 말하면 핵심이 된다. 앞으로 발표든 대화든 보고든 부연설명을 길게 늘이지 말고 상대방이 듣고싶어하는 말을 빠르게 파악해서 그 핵심과 전달의 목적만 확실히 담아 짧게 말해보자. 비즈니스던 사회던 인간관계던 요즘 시대에는 "짧고 굵게" 를 선호한다.

오글오글이란, 오글거리는 오늘의 글귀 이다. 오늘 하루를 나타내는 한 글귀, 인상깊은 대사 또는 명언, 앞으로에 있어 기억해두면 좋은 문장 중 하나와 내 코멘트를 적는 공간이다. "생각하는 대로 살지 않으면 사는대로 생각하게 된다." - 책 제목 책 제목으로 쓰인 이 문장은 곱씹어봐도 무척 멋진 문장이다. 나는 보통 목표를 잡고, 그 목표를 생각하며 살아오려고 노력했다. 물론 중간에 목표가 흐려지기도, 고되서 지쳐 포기하려 하기도 했었다. 하지만 끝까지 포기하지 않고 목표를 생각하며 달렸고, 지금은 조금 만족스런 성과를 이뤄냈다. 내가 중간에 주위 사람들의 말과 얘기만 듣고 '목표를 향해 달려가는게 남들보다 너무 힘든거아니야?' '나도 남들 하는 것 만큼만 해도 되지 않을까?' 라고 생각하면서 아무런 발..

******************** MAC 사양 : MacBook Pro(16인치, 2019) 프로세서 : 2.6 GHz 메모리 : 16GB ******************** 안녕하세요. React JS는 간단히 설명드리자면, Facebook에서 개발한 웹 / 앱의 View를 만들기 위해 사용하는 JavaScript 기반 라이브러리 입니다. 대표적인 React JS의 특징은 1) 가상 DOM 사용 2) 선언형 3) 컴포넌트를 활용한 웹 / 앱 의 View 제작 가능 4) SPA(Single Page Application) *** SPA에 대해 헷갈리시나요? [WEB CS] SPA(Single Page Application) 에 대해 간단 개념 정리! 안녕하세요. 스파 브랜드의 그 SPA가 아닌 웹에..

안녕하세요. Spring Framework 를 사용하다보면 MVC 중 컨트롤러에서 자주 사용하는 이 @Autowired 에 대해 알아보려 합니다. 예를 들어 @Autowired private TempBc tempBc; 이렇게 사용하곤 하는데요. 왜 저기서 @Autowired 가 사용되었을까? 궁금해서 찾아보며 공부해봤습니다. 그리고 제가 이해한 내용을 작성하면서 저와 같이 궁금한 사람들에게 정보를 나눠드리고자 포스팅하게 되었습니다. @Autowired 정의 - 알아서 의존 객체(Bean) 를 찾아서 주입한다. - 의존 객체(Bean) 가 2개 이상이면 오류를 발생시킨다. - 보통, 인터페이스 선언 시 사용된다. 잉?? 주로 다른 포스팅 글에서는 이렇게 정의내리고 끝나는데요. 의존 객체가 무엇인지, 어떻게..

안녕하세요. 이 카테고리는 "직무면접 중 CS 지식 대비" 이고, 이 게시글은 "면접 대비 간단한 정리" 입니다. 그렇기 때문에, 자세한 정보를 얻고 싶으시면 제 글을 보신 후 구글 검색 또는 위키를 참고해주시면 감사하겠습니다. TCP 및 UDP : 데이터를 전송하기 위해 사용하는 프로토콜 비교 정리 표 TCP UDP 연결 지향형 프로토콜 비연결 지향형 프로토콜 순서 보장 O. 속도는 상대적으로 느린 편 순서 보장 X. 속도 상대적으로 빠른 편 데이터 신뢰성 보장. 안정적 데이터 신뢰성 보장 X. 불안정 헤더 크기는 20 byte 헤더 크기는 8 byte 수신, 준비 확인 O 수신, 준비 확인 X 오류 발생 시 오류 부분 회복 가능 (다시 전송받음) 오류 발생 시 오류 부분 회복 불가능 (날라감) 일대일..

안녕하세요. 개발 또는 프로젝트 설계 시 듣는 용어 중 하나인 CI과 DI. 주로 로그인과 회원가입 개발할 때 알아두면 좋은 용어 입니다. 큰 규모의 프로젝트에서는 반드시 고려해볼 사항이니까요. CI (Connection Information) ? - 본인확인(본인인증) 기관에서 개인별로 고유하게 부여하는 개인 식별 정보. *** 본인인증 기관은 대표적으로 NICE평가정보, SCI평가정보 등 이 있습니다. - 어느 업체(또는 사이트) 에서든지 개인 별로 유일한 식별 정보를 제공받습니다. 즉, A라는 사람이 티스토리, 네이버, 구글 사이트에서 본인인증을 진행했을 시, CI는 전부 "temp" 로 같습니다. - 온라인 주민등록번호 라고 생각하면 됩니다. - 총 88 Byte로 구성되어있습니다. - 핸드폰, ..

안녕하세요. 스파 브랜드의 그 SPA가 아닌 웹에 사용하는 SPA 에 대해 다뤄보겠습니다. SPA(Single Page Application) ? - 페이지가 하나인 어플리케이션 (!) - 주로 페이지 이동 시 Ajax로 동적 데이터를 요청하고, 받은 json 결과를 View에 바로 뿌려주는 Application. 그래서, 페이지는 하나. SPA 사용 이전까지는 페이지 요청 시 웹 서버에서 HTML을 만들고, 꾸미고 해서 그걸 받아 렌더링했었습니다. (뷰는 서버 - 사이드에서 담당) 그 결과, 웹의 규모가 커질수록 데이터 전송 과부하로 점점 속도가 느려졌습니다. 이를 해결하기 위해 SPA가 나왔는데요. 서버 단에서 HTML을 만들어서 클라이언트는 그 결과만 화면에 출력했다면, SPA는 클라이언트 - 사이..