프론트엔드✏️/코드캠프

호이스팅(Hoisitng)

변수 선언 방식 - var, let, const var, let, const 여기서 var는 재선언과 재할당이 가능하기 때문에 현재는 사용하지 않는 선언 방식이다. 뿐만 아니라 호이스팅에서 문제가 된다. console.log(hoisting); let hoisting = 3; 이럴 경우 hoisting을 찾을 수 없다는 에러 메세지가 나온다. console.log(hoisting); var hoisting = 3; 이 경우엔 hoisting의 값이 undefined로 출력된다. 이게 호이스팅 때문이다! 호이스팅 코드 실행을 위한 컨텍스트를 만들면서 코드 관련된 식별자(변수명, 함수명)을 수집하면서 발생한다. 호이스팅은 변수와 함수의 선언부만 코드의 최상단으로 끌어올려 주는 것을 의미한다. (C++배울 때..

원시 자료형 vs 참조 자료형

원시 자료형(primitive data type) 원시 시대할 때 그 원시 맞음 프로그래밍 언어가 제공하는 자료형 중 하나다. 내장형이나 기본형으로도 불린다. 가장 빨리 연산처리된다. 대부분의 언어들은 프로그램에 의한 원시형의 조작을 허용하지 않는다. 고정된 저장 공간을 차지한다. 하나의 데이터를 담고 있다. ex. 문자(character,char), 정수(int, short, long, byte), 부동소수점수(float, double, real), Boolean(true/false) 자바스크립트에선 - string, number, boolean, undefined, symbol, null 참조 자료형(reference data type) 원시 자료형이 아닌 모든 자료형 Object로 구분되는 자료형...

@media, 반응형 디자인(Responsive Design)

사이트는 크게 반응형 사이트, 적응형 사이트 두 가지로 나뉜다. 요즘 트렌드는 반응형이다. 배달의 민족, 오늘의집, 직방(정말 조아하시는. ), 코드캠프 등이 있다. 적응형 사이트의 대표적인 예는 네이버, 다음, 쿠팡, 페이스북, 옥션, 크몽 등이 있다. 화면에서 보여줘야할 내용이 너무 많으면 반응형으로 만드는 것도 힘들고 UX 좋지 않다. 무조건 반응형으로 만들어야 한다는 건 잘못된 생각이고, 들어가야 할 곳과 아닌 곳을 구분해서 디자인 한다. 웹을 기획하는 단계에서 반응형 기획과 디자인이 같이 들어가야 한다! 반응형 웹을 만들기 위해서는 화면 구간을 나눠줘야 한다. 보통 모바일 크기일 때, 태블릿 크기일 때, pc크기일 때로 나눈다. 이런 나뉘는 포인트를 breakPoint 라고 한다! 화면을 전환하..

알아두면 유용한 개발자 도구

1. Apollo Client Devtools 설치 후 app.tsx에서 client 설정 부분에 connectToDevTools : true 로 설정해야 한다. (웨일에서도 사용가능하다.) https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm 2. wappalyzer 사이트에 들어가면 그 사이트에서 사용된 스택을 분석해준다. (리액트로 만들었는지 제이쿼리 썼는지, 이모션 썼는지 등등) (웨일에서도 사용가능하다.) https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnf..

CI/CD, 지속적 통합/지속적 제공

애플리케이션 개발 단계를 자동화하여 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법 새로운 코드 추가로 인해 발생하는 integration hell을 해결하기 위한 솔루션 애플리케이션의 지속적인 자동화, 지속적인 모니터링 CI(Continuous Integration) 개발자를 위한 자동화 프로세스, 지속적인 통합 CD(Continuous Delivery/Continuous Deployment) 지속적인 제공, 지속적인 배포 파이프라인의 추가 단계에 대한 자동화, 얼마나 많은 자동화가 이루어지고 있는지 지속적인 제공 개발자들이 애플리케이션에 적용한 변경 사항이 자동으로 업로드 되는 것 애플리케이션을 실시간 프로덕션 환경으로 배포할 수 있음 ex. GitHub의 컨테이너 레지스트리 지속적인 배포의 ..

검색엔진! 웹 렌더링! SEO, CSR, SSR, SSG 🐾

SEO(Search Engine Optimization) 검색엔진 최적화! 검색엔진에서 찾기 쉽도록 사이트를 만드는 것 네이버나 구글 같은 애들이 뽈뽈 돌아다니면서 정보를 수집하는데, 거기서 정보가 유기적으로 연결되어 있고, 동적인 데이터도 받아올 수 있어야 검색엔진이 좋은 점수를 매긴다! 검색이 잘되게 하려면 SEO가 필요하다! 태그를 쓴다든지, 으로 제목을 표시하는 등의 방법도 있다! CSR(Client Side Rendering) 치니까 기업의 사회적 책임이 먼저 나온다...! 클라이언트 측 렌더링이다. 클라이언트 측 렌더링이란?!!! 웹사이트의 JavaScript가 웹 사이트의 서버가 아닌 브라우저에서 렌더링 되는 것을 의미한다. 즉 HTML에서 모든 내용을 가져오는 대신에 JS 파일을 포함하는 ..

도메인, 호스팅, DNS. Domain, Hosting, DNS

Domain name 네트워크상에서 컴퓨터를 식별하는 호스트명, 도메인 레지스트리에게서 등록된 이름 통틀어서 웹 주소라고 부르기도 한다. 쉽게 말해 웹 사이트 이름이다. 인터넷 사용자가 웹 사이트에 액세스할 수 있는 주소다. 만약 이 도메인을 사서 적용한다면... 주소창에 "정말신기해.com" 이런식으로 치면 내가 원하는 내 페이지로 이동하게 할 수 있는 것!!! 가비아, 고대디 등 도메인을 구입하고 관리할 수 있는 사이트가 있다. Hosting 웹 사이트를 www를 통하여 인터넷에서 액세스할 수 있도록 해주는 파일들을 저장하는 서버의 공간을 판매하거나 임대해주는 기업(웹 호스트)에서 제공하는 서비스다. 쉽게 말해 서버 컴퓨터의 공간을 이용할 수 있도록 임대해주는 서비스를 말한다! 이런 서비스들이 있어서..

중첩된 배열구조 - flatten, unflatten

flatten - 납작하게[반반하게] 만들다. 중첩된 배열구조를 하나의 배열로 만드는 것을 의미한다. unflatten 반대로 중첩된 배열구조를 의미한다. let array = [[1,2],[3,4]]; Array.prototype.flat() flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 평평하게 만든 새로운 배열을 생성한다. let array = [[1,2],[3,4]]; array.flat(); // [1,2,3,4] array.flat()의 반환결과는 [1,2,3,4]다. 이런 좋은 기능이 있었다니... default 깊이 값은 1이다. 즉 depth 1만큼 평평하게 만든다는 뜻 depth는 뭐냐?? let array = [[1,[2,3]],[4]]; 너무..너무 끔찍하고 보기 힘든..

재귀 함수(recursive function)

재귀(再歸) - 다시 돌아온다 재귀 함수 - 자기 자신(함수)을 호출하는 함수를 말한다. 함수가 함수를 다시 부르는 것으로 중단점을 설정하지 않으면 끝없이 자신을 호출하는 루프에 빠진다. const recursion = () => { return recursion(); } 이런 함수를 만들고 recursion을 호출한다면, 끝없이 자기자신을 호출하는 무한루프에 빠질 것이다. (Runjs 같은 곳에서 하지 않길 바란다,,,,) const recursion = (i) => { if(i { if(i

알고리즘 - [카카오 인턴] 키패드 누르기

이 전화 키패드에서 왼손과 오른손의 엄지손가락만을 이용해서 숫자만을 입력하려고 합니다. 맨 처음 왼손 엄지손가락은 * 키패드에 오른손 엄지손가락은 # 키패드 위치에서 시작하며, 엄지손가락을 사용하는 규칙은 다음과 같습니다. 엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당합니다. 왼쪽 열의 3개의 숫자 1, 4, 7을 입력할 때는 왼손 엄지손가락을 사용합니다. 오른쪽 열의 3개의 숫자 3, 6, 9를 입력할 때는 오른손 엄지손가락을 사용합니다. 가운데 열의 4개의 숫자 2, 5, 8, 0을 입력할 때는 두 엄지손가락의 현재 키패드의 위치에서 더 가까운 엄지손가락을 사용합니다. 4-1. 만약 두 엄지손가락의 거리가 같다면, 오른손잡이는 오른손 엄지손가락, 왼손..

220630 프론트엔드 부트캠프 51일차 : 동적 배포 마무리, Docker

Docker에 대한 내용은 아래에 적었다. https://hani-honey.tistory.com/129 도커(Docker) 고래 모양 그거 도커 개발 환경 요소들이 설치된 모습을 이미지로 저장합니다. 그리고 그 저장한 이미지를 클라우드에 올리고 그 이미지들이 서로 연결돼서 동작하는 설정을 문서(Dockerfile)로 저장합니다. 새 hani-honey.tistory.com 동적 배포 (2) 어제 하던 것 이어서... 인스턴스 컴퓨터(EC2)안에서 curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash sudo npm install -g yarn sudo yum install git yarn install yarn build yarn start 해줍니다...

도커(Docker) 고래 모양 그거

도커 개발 환경 요소들이 설치된 모습을 이미지로 저장합니다. 그리고 그 저장한 이미지를 클라우드에 올리고 그 이미지들이 서로 연결돼서 동작하는 설정을 문서(Dockerfile)로 저장합니다. 새 컴퓨터에서 도커만 설치하면 이 문서의 내용대로 이미지를 다운받아 설치합니다. 가상머신과 비슷하지만 그것보다 훨씬 빠르고 자원을 효율적으로 사용합니다! 불필요한 추가적 운영체제 설치가 필요 없습니다. 도커를 쓰는 이유? 서버를 돌리기 위해선 환경이 갖춰져야 합니다. 예를 들어 회사에 각각 윈도우와 맥을 쓰는 개발자가 있었고, 리눅스를 쓰는 개발자가 신입으로 들어왔다고 해봅시다. 그럼 신입의 컴퓨터에 Node 등 버전을 똑같이해서 깔아야겠죠. 깔았는데 실행이 안돼요! 왜냐면 운영체제에 따라서 환경이 달라지기 때문입니..