티스토리

Sunny Summer

검색하기

블로그 홈

Sunny Summer

summereumi.tistory.com/m

안녕하세요 ! 주니어 프론트엔드 개발자 Summer입니다!

구독자: 4

방명록 방문하기

주요 글 목록

[JAVA] java와 객체지향 프로그래밍 기초 1. 자바 언어의 특징 - c/c++ 언어와 문법적으로 유사하나 훨씬 단순하다 - 플랫폼에 독립적이다 (자바 플랫폼이 있으면 어떠한 운영체제던 수정없이 실행이 가능하다) - 완전한 객체지향 언어이다 - 엄격한 자료형의 검사가 가능하다 - 예외 처리 기능을 제공하고 멀티 스레딩을 지원한다 2. 자바 프로그램의 실행 - JAVA 소스 프로그램의 확장자는 .java이다 - 바이트 코드 : java 소스를 컴파일한 결과물, 확장자는 .class이다. : 자바 플랫폼의 javaVM에서 실행 가능한 코드 3. 애플리케이션과 애플릿 - 애플리케이션 : java 플랫폼에서 실행되는 프로그램 : 실행을 위해 main() 함수가 필요함 - 애플릿 : html 웹페이지에 포함되어 웹 브라우저를 통해 실행 : 브라우저의 웹 .. 공감수 0 댓글수 0 2023. 5. 21.
[SQLD] 1-2 데이터 모델과 성능 - 성능 데이터 모델링 : DB 성능향상을 목적으로, 설계 단계의 데이터 모델링 때부터 정규화, 반정규화, 테이블 통합, 조인구조 등등 데이터 모델링에 반영될 수 있도록 하는 것 - 성능 데이터 모델링 고려사항 순서 1. 데이터 모델링시 정규화를 정확하게 수행한다 2. DB 용량산정을 수행한다. 3. DB에 발생되는 트랜잭션의 유형을 파악한다. 4. 용량과 트랜잭션의 유형에 따라 반정규화를 수행한다. 5. 이력모델의 조정, pk/fk 조정, 슈퍼/서브 타입 조정 6. 성능관점에서 데이터 모델을 검증한다 - 정규화 : 반복적인 데이터를 분리하고, 각 데이터가 종속된 테이블에 적절하게 배치되도록 하는 것 - 1차 정규화 : 같은 성격, 내용 컬럼이 연속될 때 속성의 원자성을 확보하고 기본키를 설정한다. : .. 공감수 0 댓글수 0 2023. 2. 27.
[SQLD] 1-1 데이터 모델링 (Data modeling) - 데이터 모델링이란? : 현실세계의 데이터베이스를 추상화하여 표현하는 것. : 데이터가 사용되고 읽히는 프로세스를 파악하여 표기법을 사용하여 명확하게 표현해야 한다. : 누구나 데이터 모델을 보고 접근하고 이해할 수 있도록, 단순하게 표현해야 한다. -> 추상화, 단순화, 명확성..데이터 모델링의 3가지 중요한 특징 ! - 데이터 모델링 단계 1. 개념적 모델링 - 전사적 관점에서 업무 전체에 대하여 데이터를 모델링 하는 것 - 중요한 부분을 위주로 모델링 하며, 추상화 수준이 가장 높다 - 계층형, 네트워크, 관계형 등과 상관없이 업무 측면에서 모델링 하는 것 - 엔터티와 속성을 도출하고, 개념적 ERD를 작성한다. 2. 논리적 모델링 - 개념적 모델링 -> 논리적 모델링의 변환작업을 의미 - 특정 .. 공감수 0 댓글수 0 2023. 2. 27.
[Deep Dive] 10장 객체 리터럴 - 객체란 ? : 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체라고 할 수 있다. : 원시값은 변경 불가능한 단 하나의 값만 나타내지만, 객체는 복합적인 자료구조 타입이기 때문에 변경 가능한 값이다. -> 객체는 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. - 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. : 자바스크립트 함수는 일급 객체이기 때문에 ! 함수도 프로퍼티 값이 될 수 있다. 프로퍼티 값이 함수일 때, 이를 메서드라고 부른다. - 프로퍼티 : 객체의 상태를 나타내는 값(data) - 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작 (behavior) - 객체 리터럴에 의한 객체 생성 - 클래스 기반 객체지향 언어는 클래.. 공감수 0 댓글수 0 2023. 2. 24.
Multi Repo vs Mono Repo와 lerna 레르나에 대하여 - 멀티리포와 모노리포의 차이를 이해해보자 ! - 형상 관리 시스템상에서 소스 리포지토리를 관리하는 방법인, 멀티리포와 모노리포를 비교하고 분석해보자. - 실무적인 구조를 이해하고, 적용하기 위해서는 프로젝트 구조에 대한 이해가 있어야 하기 때문이다. - 실제로 내가 들어가야하는 회사 프로젝트 레포를 받고, 멀티레포의 구조가 명확하지 않아 공부를 시작한다... ! - 모노리딕 시스템의 프로젝트 - 프로젝트 초기에는 대부분 개발자의 수도코드가 적고, 모든것을 한 곳에서 처리하기 때문에 하나의 레포로 관리한다. - 하지만 프로젝트가 거대화되면서 모노리딕 시스템은, 낮은 결합도와 응집력이라는 치명적인 단점을 지니게 된다. - 따라서 각 부분을 도메인 별로 분리해서 마이크로 서비스로 구성하기 시작하고, 개발 조.. 공감수 0 댓글수 0 2023. 2. 7.
자스 개발자의 첫 자바 프로그래밍 입문 ! (자바로 계산기 만들었어!!!!!) **인프런 이재환님의 강의를 기반으로 작성된 블로그 입니다. - 자바를 배울 때 : JDK 설치, 환경변수 설정, 이클립스 설치.. 해야하지만 설치없이 자바 기초 코드를 https://replit.com/ 을 통해 스윽 훑어보자! **막간 용어 정리 (어차피 나중에 다 알아야 하니까) - JDK란 : 자바가상머신(JVM), 자바런타임환경(JRE)과 함께 자바 프로그래밍에 사용되는 3대 핵심 기술 패키지 가운데 하나다. : 프로그램을 실행하는 자바 플랫폼 구성요소다 ( 컴파일러, 클래스 라이브러리를 포함한다) : 자바 기반 소프트웨어를 개발하기 위한 도구들로 이뤄진 패키지이다. : JRE는 자바 코드를 실행하기 위한 도구들로 구성된 패키지이다. replit을 이용해서 실행하는 환경이다. 오른쪽 콘솔창은 리.. 공감수 0 댓글수 0 2023. 1. 27.
[GIT] 협업을 위한 git....깃의 기초부터 살펴보자.. ! - git init : 저장소 생성하기 git init을 통해 저장하고자 하는 디렉토리 안에 저장소를 생성한다. ls -al 커맨드로 확인해보면 .git 폴더가 생긴것을 확인 할 수 있다. .git폴더는 해당 폴더 안의 소스코드가 변경, 삭제될 때의 이력을 가지고 있기 때문에 저장되었다면 해당 지점으로 복원이 가능하다. 하지만 .git 폴더가 삭제 된다면 모든 이력이 사라지게 된다 - git config : 사용자 설정하기 user.name과 user.email을 설정할수 있다. 자주 이용하는 깃헙이나 컨플에서 잔디가 안심긴다면 깃 config user.name과 email을 확인해보자 (깃헙 연동된 메일과 같아야 한다) git remote -v 명령어를 통해 사용자 설정을 확인할 수 있으며, 나의 로컬.. 공감수 1 댓글수 1 2023. 1. 25.
[신입OJT] SCSS란? **참고 : https://heropy.blog/2018/01/31/sass/ - CSS는 상대적으로 배우기 쉽고 재미있지만, 작업이 고도화되고 프로젝트 규모가 커질수록 효율이 떨어진다. 웹에서는 표준 css만 작동하기 때문에, SCSS라는 전처리기의 사용을 통해 편하게 작성하고 CSS로 바꿔주면 된다 ! SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원해준다. Sass를 좀 더 CSS스럽게 사용할 수 있도록 해준다고 생각하면 될듯 ! **SCSS에서는 믹스인 방식이 조금 다르기 때문에 쓸때 찾아보면 될듯 ! - 컴파일 방법 ? SCSS는 웹에서 동작하지 않기 때문에 컴파일 해야한다. node-sass, webpack등..있지만 비교적 Parel(웹 애플리케이션 번들러)로 단순하게 컴파일 할 .. 공감수 0 댓글수 0 2023. 1. 19.
[신입OJT] 모든 개발자를 위한 HTTP 웹 기본 지식 **모든 자료와 내용은 인프런 김영한 지식공유자의 '모든 개발자를 위한 http 웹 기본지식'의 출처입니다. Section1. 인터넷 네트워크 - IP (인터넷 프로토콜) - 지정한 IP주소에 데이터를 전달하는데, 패킷이라는 통신단위로 데이터를 전달한다. IP 프로토콜의 한계 : 1. 비연결성 : 패킷 받을 대상의 상태에 관계없이 전송됨 2. 비신뢰성 : 중간에 패킷이 사라지거나, 순서대로 안가는경우가 존재 3. 프로그램 구분 : 같은 IP를 사용하는 서버에서 통신하는 애플리케이션이 둘 이상이면 어쩌지..? - TCP / UDP - 인터넷 프로토콜 스택에는 4계층이 있다 .. ! - 내가 메시지를 하나 보낸다고 할때 프로토콜의 작동원리는 어떻게 될까? - 그림을 자세히 봐보면, ip 프로토콜로 해결되지 .. 공감수 0 댓글수 0 2023. 1. 18.
[신입OJT] 배워서 바로쓰는 SQL 쿼리 **해당 학습내용과 자료의 출처는 인프런 "배워서 바로쓰는 SQL쿼리"입니다 **회사가 강의도 보여주고 시험비도 주니까 빨리 3월꺼보자 여름...! SQL - Structured Query Language 이다. SQL은 컴퓨터에게 데이터를 가져오는 일(+조작하는 일)을 시킬때 쓰는 구조화된 질문을 하는 언어이다. SQL의 기능별 분류 SQL은 대표적인 관계형데이터베이스 (RDB)이다! 따라서 테이블간의 공통점으로 테이블이 연결되어 있어야 한다. 데이터 저장소간 어떤 형태의 관계를 맺고있는 체계적인 구조의 집합 ! - NOSQL이란? 기존 RDB의 경우 데이터에 대한 리소스가 많이 들어, 정규화와 인덱싱 등을 거치지 않고 그대로 저장하는것. - 저장은 쉽지만, 조회는 쉽지 않다. - SQL은 RDB에 대.. 공감수 0 댓글수 0 2023. 1. 17.
[신입OJT] CLOUD R&D / 가상화와 클라우드 / Docker Container / Docker Image, Kubernetes/ 실습 **본 수업내용과 자료의 출처는 엔키아 연구소의 이대준부장님에게 있습니다 클라우드의 범위는 넓지만, 우리가 다루고자 하는 클라우드는 IT인프라와 관련된 클라우드이다. 사내에 서버를 사와서 구축해서 제공하는것이 온프레미스(on-premise) 였었다. 하지만 현재는 Iaas/PaaS/SaaS를 거쳐서 FaaS까지 많이 발전했지! (왼쪽에서 오른쪽으로 변하는 과정대로 살펴봐보자!) - 서버란? 어플리케이션을 하나 개발하기 위해서는 물리적인 서버가 필요하다! 서버 안에는 CPU, MEM, DISK, Network로 구성되어 있고, 서버위에 OS(Unix,Linux,Windows..)를 설치해서 우리는 앱을 만들지! 서버 여러개를 연결할때 쓰는것은 L2 스위치이고, 연결된 물리서버들은 각각 private net.. 공감수 0 댓글수 0 2023. 1. 16.
[엔키아를 찾아라] 엔키아 공채8기 신입사원 김아름입니다! Q. 지원동기? - 사실 개발자로서 회사를 다닌지 7개월차에, 현 회사의 심각성을 느끼고 이직준비를 하게 되었다. 따라서 당시 회사에서 느끼고 있었던 불편함이 이직을 할 때 고려해야할 중요점들로 다가왔다. 가장 큰 두가지를 적어보도록 하겠다. 첫째, 회사 조직도가 팀별로 명확하게 구분되고, 각 팀 별 KPI가 뚜렷하게 구분되어 있으며 성과가 보여질 것. -> 내가 다니고 이직하고자 하는 회사는 IT솔루션 분야의 업체들이었다. 해당분야의 특성상 자사의 제품을 여러개 만들어 제공하는 프로젝트별의 성향이 크기 마련인데, 프로젝트별로 정확한 인원배치와 업무분배, 기획이 이루어지지 않고 어떠한 팀에서 어떠한 사업을 진행하고 성장율과 달성율이 얼마인지 결과적으로 보이지 않는 회사는 b2b사업을 지속적으로 최적화 시.. 공감수 2 댓글수 0 2023. 1. 11.
[Deep Dive] 9장 - 타입 변환과 단축 평가 (data && data.name와 data?.name와 data || data.name 의 차이를 모른다면...!) ( 논리연산자 ||, null 병합 연산자 ??, 옵셔널 체이닝) - 명시적 타입 변환 (타입 캐스팅) : 개발자가 의도로 값을 바꾸는 것 let x = 10; // 명시적 타입변환 // 숫자를 문자열로 타입 캐스팅한다 let str = x.toString(); - 암묵적 타입 변환 (타입 강제 변환) : 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것 let x = 10; //암묵적 타입 변환 //문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다 let str = x + ""; 타입 변환이 기존 원시값 (예 x)를 직접 변경하는 것은 아니다. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 명시적 타입 변환은 개발자의 의도에 의해 코드에 드러나지만, 암묵적 타입 변환은 가급적 에러를 발생시키지 않.. 공감수 0 댓글수 0 2022. 12. 29.
[CSS] 폰트에 적용되는 스타일에 대하여..! ( line-height / letter-spacing / word-spacing / text-align / vertical-align / text-indent / text - transform / word-break / overflow-wrap / text-overflow ) 1. line-height : 텍스트의 행간을 설정한다. -> 아무런 단위없이 입력하게 되면 배수로 적용이 되기때문에, px단위로 적용해주고 싶다면 px을 꼭 붙이자! 2. letter-spacing : 텍스트의 자간을 설정한다. 3. word-spacing : 텍스트의 단어 간 간격을 지정한다. **단어 : 띄어쓰기의 한 구절 구절을 의미한다. 4. text-align: 블록요소나 표 안에서 텍스트의 가로 정렬 방식을 지정한다. 5. vertical-align: 인라인요소나 표 안에서 텍스트의 가로 정렬 방식을 지정한다. 6. text-indent : 텍스트의 들여쓰기를 설정한다. ** 기본값은 0이다 7. text - transform : 영문 텍스트의 대/소문자를 바꿀 수 있다. 8. word-br.. 공감수 0 댓글수 0 2022. 12. 28.
[CSS] Flex 요소가 한 줄 이상일때 사용할 수 있는 속성들 ! ( Flex-wrap/Align-content/Flex-flow/ Order / Flex-basis / Flex-grow / Flex-shrink) - Flex-wrap : flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것인지 결정한다 ** align-items는 flex-item이 한 줄일 때 우선 적용 된다. 두 줄 이상일 때에는 align-content라는 다른 속성을 써주어야 한다. - align-content : 여러 줄이 된 flex-item의 중심 반대 축 정렬을 어떻게 할 지 결정한다. (stretch가 기본값) - Flex-flow : flex-direction과 flex-wrap을 합쳐놓은 단축 속성 ** 지금까지 다양한 flex 속성들을 container에 주면서 배치를 정렬하였지만, flex박스 안에 있는 item들에게도 줄 수 있는 속성이 있다. - Flex item에 줄 수 있는 속성들 1 . or.. 공감수 0 댓글수 0 2022. 12. 26.
[CSS] float 레이아웃?/ clear 예시코드를 보고 이해하기 (회사 레포에서 float를 발견했을때 이해 못하면 안되니까요) 1. block요소인 일반 div 하나와, inline 요소인 p태그가 일반적으로 배치되어있을때 2. div요소에 float : right 속성을 주었을때 3. float : left를 주었을때 (창을 줄였을때 p태그가 흘러내려오는 모습을 볼 수 있다) 4. p태그에 clear : right속성을 주었을때 ( 가로로 나열되는 inline요소들을 블록요소들처럼 세로로 정렬하고 싶을때 floar와 clear속성을 함께 쓰면 된다) clear 속성은 주로 right, left 따로 쓰지않고 인라인요소들을 아래로 깔끔하게 정렬할때 사용하기 때문에, 정렬할 요소에 직접 구현하지 않고, clearfix라는 div를 효과를 주고싶은 라인에 만들어서 5. clear: both 속성을 부여한다! ( clearfix라는 .. 공감수 0 댓글수 1 2022. 12. 26.
[통신 이론] MQTT 프로토콜이란? - MQTT란? MQTT(Message Queueing Telemetry Transport)는 2016년 국제 표준화 된 발행 - 구독 기반의 메시지 송수신 프로토콜이다. 작은 코드 공간이 필요하거나 네트워크 대역폭이 제한되는 원격 통신을 위해, 즉 IoT와 같은 제한된, 혹은 대규모 트래픽 전송을 위해 만들어진 프로토콜이다. 따라서 TCP/IP 프로토콜 위에서 동작하지만 동시에 굉장히 가벼우며, 많은 통신 제약들을 해결해준다! (블루투스처럼 별도의 모듈로 별도의 대역폭을 가지는 통신 규약이 아닌, WiFi나 기타 방법으로 인터넷을 통해 TCP/IP 기반의 메시지 송수신을 한다는 의미이다) - 구체적인 장점들 1. 가볍고 효율적이다 : IoT 디바이스에 구현할 때는 최소한의 리소스가 필요하다. 가장 작은.. 공감수 0 댓글수 0 2022. 12. 26.
[Deep Dive] 8장 제어문 (블록문, 조건문, switch문, while문, do...while문, break문, 레이블문, continue문 예시) - 제어문? 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 일반적으로 코드는 위에서 아래로 순차적으로 실행되지만 제어문을 사용하면 코드의 흐름을 인위적으로 제어할 수 있다. - 블록문 ? 0개 이상의 문을 중괄호로 묶은것으로 코드 블록이라고 한다. 자바스크립트는 일반적으로 블록문을 하나의 실행 단위로 취급한다. 일반적으로 제어문이나 함수를 정의할 때 사용하는것이 일반적이다. - 조건문 ? 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다. 자바스크립트의 조건문은 if-else, switch문이 있다. 잘 알고있는 if ~ else문의 설명은 생략하고, switch문을 봐보자! switch문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 .. 공감수 0 댓글수 0 2022. 12. 26.
[Deep Dive] 5장 표현식과 문 , 리터럴 , 콘솔창의 undefined는 완료값이었던 것이다..! 우선 표현식 , 문 이라고 하면 우리는 이 용어를 많이 쓰고있지만, 정확히 이해하고 설명할 수는 없을것이다 ! 이런 기본적인 단어 말고도, 자바스크립트 공부를 하다보면 대부분의 용어가 컴퓨터 공학 전반에서 사용하는 용어기 때문에, 용어를 쓸때마다 제대로 정의를 알아두고 가도록 하자 ! 1. 값 : 표현식(expression)이 평가(evaluate)되어 생성된 결과를 말한다. *평가(evaluate) : 식을 해석해서 값을 생성하거나 참조하는 행위! 예제로 이해해보면, 1 + 2 = 3이라는 식이 있을때 1 + 2 는 평가되어서 -> 숫자 값 3을 생성하는 것이다! 모든 값은 *데이터타입을 가진다. 메모리에는 비트(2진수)의 나열로 저장되고, 저장된 값은 데이터 값에 따라 다르게 해석된다. 예시 ) 값 .. 공감수 0 댓글수 0 2022. 12. 23.
[Deep Dive] 4장 변수 , 메모리 , 식별자, 재할당, 가비지콜렉터, 매니지드언어란 ? - 변수 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 자바스크립트 엔진이 이러한 코드를 계산하고 실행한다고 생각해보자. 10 + 20 JS엔진이 코드를 평가하려면 10,20,+라는 기호(리터럴과 연산자)의 의미를 알고 있어야 하며, 10 + 20이라는 식(표현식)의 의미도 파싱할수 있어야 한다. 표현식을 인지하고 연산자와 피연산자를 기억해야한다. 사람은 두뇌를 통해 연산하지만, 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. - 메모리 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다. 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 1바이트 단위로 데이터를 저장하고 읽어들인다. 각 셀을 고유의 메모리 주소를 갖는다. 메모리 주소는 공간의 위치를 나타.. 공감수 0 댓글수 0 2022. 12. 22.
[Deep Dive] 2장 - 3장 자바스크립트에 관해 (ECMAScript, V8, Node.js, npm, Web API) - 1장에서는 너무나 기초적인 컴퓨팅 사고, 기계어 등등을 알아보면서 컴퓨터가 어떻게 우리가 작성한 코드를 해석하고 실행하는지 기본적인 작동원리에 대하여 배울수 있었다. - 2장부터는 본격적인 자바스크립트의 정의와 특징, 런타임 환경에 대하여 설명이 시작되니 상세하게 이해하는 흐름대로 적어보며, 알고있는 내용들도 많지만 꼼꼼히 찾아보고 이해하며 이번년도 목표였던 자바스크립트의 바이블인 딥다이브 1회독! 을 재빠르게 마무리 지어보자. - 자바스크립트 1995년 넷스케이프가 브라우저에서 동작하는 경량 프로그래밍 언어를 만든것이 바로 자바스크립트! "모카" - "라이브스크립트" - 를통해 "자바스크립트"라는 이름으로 명명되었다. 마이스로소프트와 넷스케이프가 시장 점유율을 높이기 위해 자사 브러우저에서만 동작하.. 공감수 0 댓글수 0 2022. 12. 22.
디자인 패턴에 관하여 (MVC, MVP, MVVM) - MVC MVC는 Model + View + Controller를 뜻한다. Model : (데이터와 비즈니스 로직) 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분 View : (레이아웃과 화면) 사용자에서 보여지는 UI 부분 Controller : 사용자의 입력(Action)을 받고 처리하는 부분 (명령을 model과 view로 라우팅) - MVC 동작원리 Model은 데이터를 정의한다. 데이터가 변경되면 View에게 알리며, 다른 로직이 필요할 경우 Controller에게 알리기도 한다. View는 데이터를 보여주는 방식을 정의한다. 사용자에게 보여지는 방식을 정의하고, 데이터를 model로 부터 받는다. Controller는 입력에 대한 응답으로 model/view를 업데이트하는 로직.. 공감수 0 댓글수 0 2022. 12. 22.
프론트엔드 전반 면접 단골 질문 정리 (+ 리액트 핵심 용어) 프론트엔드 전반 - 브라우저 렌더링 과정에 대하여 1. 브라우저 주소창에 특정 주소가 입력된다 2. DNS가 해당 주소를 변경하여 실제 서버가 있는 곳으로 연결해준다. 3. 서버에서 index.html을 받아와서 브라우저에서 파싱하며 DOM트리를 만들어 나간다 4. link태그를 만나 css요청이 발생하면 중단된 CSSOM트리를 만든다. 5. 완성된 두개의 트리를 합쳐서 브라우저에 표시할 렌더트리를 만든다. 6. 렌더트리를 layout(배치)하고 화면에 painting(그림)한다. 7. 위 과정에서 script태그를 만나면 제어 권한을 JS 엔진에게 넘기고, 자바스크립트 파일을 로드해서 파싱하고 실행한다. (script 태그에 defer 속성을 주면, 문서 파싱은 중단되지 않고 문서 파싱이 완료된 이후에.. 공감수 0 댓글수 0 2022. 12. 19.
자바스크립트 핵심 용어정리! (프론트엔드 단골 면접 질문 모음) - Javascript 란? HTML과 CSS는 정적인 언어이다. 브라우저에서 화면에 보여지면 변경 할 수 없다는 의미이다. 하지만 자바스크립트는 웹 페이지를 동적으로 변경해주는 언어이다. (초기의 자바스크립트는 기능이 적고, 주류가 아닌 객체지향 모델이어서 인기가 많지 않았다) 구글이 구글 맵스를 자바스크립트와 HTML, CSS만으로 데스크탑 애플리케이션과 유사한 빠른성능의 부드러운 브라우저를 보여주자, AJAX, JQUERY등과 함께 빠르게 성장하였다. 자바스크립트는 단순하지만, 프로그래밍에 중요한 변수, 반복, 조건, 함수, 객체까지 중요한 것들을 가지고 있는 프로그래밍 언어이고, 다양한곳에서 많이 사용되고 있는 중요한 언어라고 할 수 있다. - 타입스크립트란? 코드에 목적을 명시하고 맞지않는 타입.. 공감수 0 댓글수 1 2022. 12. 19.
[React-Router] Suspense 기능을 이용하여 렌더링 전 공통 컴포넌트 노출시켜주기! (리액트 17버전도 잘됩니다!) / Switch 컴포넌트는 왜 써야하지 ? -Suspense 우선 18버전 독스링크 먼저..!! https://reactjs.org/docs/react-api.html#reactsuspense React Top-Level API – React A JavaScript library for building user interfaces reactjs.org 리액트가 18버전이 업그레이드 되면서 이전의 17버전과 차이점이 조금씩 존재하지만..! 아직은 17버전을 쓰고있는 우리에게는 제공되는 api들의 17버전이 필요하다 ..!! 17버전 독스링크..! deprecated 나올때마다 왠지 잘못하고 있는것 같은 느낌이지만~ 아주 잘 작동된다 ! https://17.reactjs.org/docs/concurrent-mode-suspense.html 기본적으로.. 공감수 0 댓글수 0 2022. 12. 16.
[Axios & Redux-Saga] axios 인스턴스 생성하기(interceptor), 리덕스 사가 데이터 통신 실무 활용법을 한 흐름에 살펴봐보자! ( axios , reducer, saga, slice를 활용한 데이터 통신 로직과 효율적인 폴더구조) Axios의 interceptor를 왜 써야 하는가 ? -> api 호출할 때마다 비효율적으로 axios 인스턴스를 생성하고, axios 마다 동일한 content-type, token와 같은 헤더값을 처리하고 TIMEOUT 시간, base url등에 대한 중복 처리 들이 있기 때문에.. -> 유지보수에 최악 ! (아래 예시 코드들은 로그인 성공시 유저의 데이터를 받아오는 api통신을 뜯어보았다!) axios를 생성하고, 중복 로직과 데이터 요청&응답에 대한 전/후처리 그리고 오류처리까지 지정하여 인스턴스를 생성해주자 ! 1-1. api.ts(AxiosInstanceCreator를 사용하여 interceptor내부를 설정 ) const instance =axios.create({ baseUrl: 데이터를.. 공감수 0 댓글수 0 2022. 12. 16.
[IT 인프라구조] 3. 3계층형 시스템을 살펴보자1 - 시스템 상에서 데이터 흐름을 봐보자 ! ( 웹 서버/AP 서버/ 프로세스와 스레드/OS 커널 /시스템 콜 인터페이스 ) 1장에서 알아보았던 웹 서버, AP 서버, DB서버를 통달한 하나의 그림이다 ! 세 대의 서버는 스위치로 연결되어 있고, 각각의 서버 내부에는 CPU, 메모리, 디스크 같은 하드웨어 부품이 나열되어 있다. 이번 장에서 살펴볼 부분은 논리 구성 부분이다! 이번 장에서 배울 논리구성부분에서는 "OS(오퍼레이팅 시스템)" 영역을 볼 예정이다. 위의 그림에서 서버 내부에 해당하는 부분은, 확대해서 보았을때 1,2장에서 배웠던 물리장치들이다! ( CPU, 메모리, 디스크, NIC/HBA등,,) OS를 이해하는데 필요한 필수 개념 3가지를 먼저 알아보자 ! - 프로세스와 스레드 프로그램 실행 파일 자체가 아닌, OS상에서 실행되어 독립성을 가지고 동작하는 것. 프로세스 및 스레드가 활동하려면 메모리 공간이 필요하다.. 공감수 0 댓글수 0 2022. 12. 14.
[Redux-Saga] 리덕스에 사가를 함께 써보자! 리덕스 사가 콘솔에 기본 코드 찍어보며 확인하기 ! 이 전 글에서는 redux를 써야하는 이유와, 기본적인 구독의 개념, 리듀서 생성하여 state 를 변경해주는 법 , 호출함수를 통해 화면에 그려주는 법까지 알아보았다! 이번 글에서는 reduxjs에서 다루기에 까다로운 비동기 작업들을 처리해주는 redux-saga와 함께 써보도록 하자! - redux-saga를 함께 쓰면, 액션을 모니터링 하고있다가 발생했을때 특정 작업을 하는 방식으로 사용할 수 있다. - redux-saga의 장점 1. 비동기 작업에서 기존 요청을 취소 처리 할 수 있다. 2. 특정 액션에 발생했을때, 다른 액션을 디스패치 하거나, 자바스크립트 코드를 실행 할 수 있다. 3. 웹소켓 라이브러리 사용시 Channel이라는 기능을 사용가능하다. 4. API요청이 실패했을 때 재요청하는 .. 공감수 2 댓글수 0 2022. 11. 29.
[React] Redux를 알아보자 - 리액트 없는 리덕스, 그 잡채만 써보자고! 리덕스의 작동원리, 개념, 리덕스 사용이유 **생활코딩 영상을 보며 제가 이해하는대로 정리해보았습니돠 대표적인 react의 상태관리 라이브러리인 Redux ....! 내가 2주안에 추가 기능 개발 진행해야하는 ..사내 프로젝트가..Redux와 Saga..가 사용되어있어서 .. 🥲 불가피하지만 아주 빠르게 공부를 해서 잡티없이 개발을 진행해보자 ! Redux를 사용해야하는 경우 - 컴포넌트들의 조합으로 이루어진 프로젝트에서 props로 다양한 상태를 관리하기 복잡할 때 - 컴포넌트의 트리가 복잡하거나, 여러 다른 방식으로 업데이트가 되어야 할 때 위의 예시를 들어서 순서의 흐름대로 봐보자 ! 1. submit 버튼을 눌렀을때 예시로 적어준 "create"라는 타입으로 dispatch에 전달한다. 2. 그 때, dispatch는 두가지 일을 할 수 .. 공감수 0 댓글수 0 2022. 11. 21.
[IT인프라구조]2. 서버란? 하드웨어 장비와 데이터의 흐름을 알아보자 1장의 아키텍쳐를 공부하면서, 서버라는 단위로 생각 한다는 것을 이해했었다. 물리 서버 내부 구조에 대해 더 자세히 살펴보자! - 서버 : 서버는 랙(Rack)이라는 것에 장착된다. 랙에는 서버, 하드디스크, 랜선 스위치 등도 탑재가 되어있다. - 랙 한 칸을 1U라고 하며, 서버 높이는 이 단위를 따르고 있다. 2U 서버는 약 2칸이자 높이 9cm의 서버임을 의미한다. - 서버 크기 (U), 소비 전력(A), 중량(Kg)등이 서버 설치 시에 중요한 정보이다 ! - 컴포넌트들은 버스(Bus)라는 선으로 연결된다 ! 도식화 된 그림을 보고 차근히 이해해보자 그림을 천천히 이해해보면, CPU가 두 개 연결돼 있고, 그 옆에 메모리가 물리적으로 직접 연결 배치 되어있다. 밑으로 PCI Express 슬롯은 외.. 공감수 1 댓글수 0 2022. 11. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.