회사 홈페이지 리뉴얼 작업중에 문제가 발생했다.큰 문제는 아니지만 이미지, 글꼴 로드에 많은 소요시간이 발생한다는 점이다.이로 인해 첫 페이지 진입 시, 이미지가 매우 늦게 보이고 글꼴도 처음에는 일반 글씨였다가 나중에 적용하려던 글씨로 바뀌었다.홈페이지를 방문하는 사

이번 프로젝트에 Issues와 Pull requests를 좀 더 체계적으로 관리하고, 템플릿을 만들어 편리하게 이용도 하고 이쁘게 꾸미고 싶었다.구글에서 Github issue template을 검색하는 도중 label 간편하게 커스텀 할 수 있는 github-lab

팀 프로젝트를 진행하는데 프론트쪽을 미리 배포를 하고 진행을 하려고 했다.여러가지 방법으로 배포가 가능하지만 비교적으로 편리한 Vercel을 이용하기로 했다.Vercel 페이지를 들어가서 로그인을 하면 이 페이지가 보일 것이다. 다른 페이지가 보인다면 Add new..

Backbone is a library, not a framework, and plays well with others. - backbonejs.orgBackbone은 프론트엔드 자바스크립트 코드의 틀을 만드는데 도움을 주는 경량 자바스크립트 라이브러리이다.프레임워크와

조금 늦은 회고 시작\~~7월 27일 데모데이가 끝나고 일주일 간 푹 쉬었다.바로 회고를 작성해야했는데 미루다가 이제 적어본다.코드와 기술에 대해서는 따로 다루고 이번 회고에서는 프로젝트를 하면서 도움이 되었던 활동에 대해서 이야기를 해보겠다.(주의!) 사진이 아주 많

드디어 Pre-Project가 끝났다.프로젝트 하나가 끝났다는 기쁨과 바로 Main-Project가 앞에 있다는 절망감이 공존한다.프로젝트를 하면서 내가 아직 많이 부족하구나 느꼈다.그동안 프로젝트 경험도 해봤고, 전공자이기 때문에 자신감이 있었는데 생각만큼 잘 해내지

Cors란?교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.웹

TypeScript에서 열거형은 다음과 같은 형태로 정의한다.Color라는 열거형을 정의하고 있다. 열거형의 값은 Red,Green,Blue 세 개입니다.열거형은 숫자형과 문자열형, 혹은 이 둘의 조합으로 정의될 수 있다. 디폴트 값으로 숫자형을 사용하며, 각 값은 자

TypeScript를 적용하기 전, 먼저 프로젝트 폴더 하나를 생성하자.터미널에서 생성해줘도 되고, 직접 폴더를 만들어도 된다.프로젝트 폴더를 생성했으면 프로젝트 폴더 안으로 이동하여, npm init -y명령어를 실행해 새로운 프로젝트를 초기화한다.이제 프로젝트 내부

TypeScript란?자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다.마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다.타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다.TypeScript를 꼭

저번 회고록 리뷰 원래 하루에 계획을 머릿속으로만 생각하고 진행하는 편이었다. 파워 P 답게 할 수 있는거 좀 하고 나머지는 나중에 해야지라는 마인드로 넘겨왔는데, 그게 쌓이고 쌓이다보니 진짜 많아졌다. 이제는 진짜 체계적으로 해야겠다는 생각이 들었다. 그렇다고 직접

재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요.UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요.Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요.useRef가 필요한 상황을 예시를 들어 설명해 주세요.상태관리 라

문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공한다.책처럼 순서대로 정보에 접근하는 방식이 아니라, 링크를 통해 사용자가 원하는 순서에

공식사이트를 참고하면Node.js란? Chrome V8 JavaScript엔진으로 빌드된 JavaScript 런타임이다. Node.js는 이벤트 기반, 논 블로킹 I/O모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈

Redux란 상태 관리 라이브러리를 이용해 count를 증가, 감소시켜보겠다.src폴더 내에 Actions,Reducers, Store 폴더 세 개를 만들어준다.Action폴더 내에 index.js파일을 만든다.\+ 버튼을 클릭하면, plusNum함수가 실행된다.dis

React, Redux 데이터 흐름 React에서는 가끔 불필요한 배치가 존재할 때가 있다. 위를 보면, 컴포넌트 3에서 컴포넌트 6으로 데이터를 전송하거나, 사용할 때를 보면 해당 상태를 사용하지 않는 최상위 컴포넌트, 컴포넌트 1, 컴포넌트 2를 모두 거쳐야한다.

React Custom Components 과제를 통해 Modal, Tab, Tag, Toggle을 만들어 보았다. 결과는 storybook을 통해 확인하면서 작업했다. Modal 기본적인 css와 로직 코드가 작성되어 있었다.

Code States에서 진행하는 Daily Coding 24번을 풀다가 발견한 사실이 있다. 문제 두 개의 배열(base, sample)을 입력받아 sample이 base의 부분집합인지 여부를 리턴해야 합니다. 처음에는 두 배열을 오름차순으로 정렬한 뒤, filt

Scope란?영어 단어의 뜻 자체는 영역, 범위를 말한다. 하지만 프로그램 언어에서의 유효범위는 어느 범위까지 참조하는지, 변수와 매개변수의 접근성과 생존기간을 뜻한다. 자바스크립트는 이 규칙대로 식별자를 찾는다.첫번째 콘솔 출력은 "Hello, kimcoding!"으

UI(User Interface)란?사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다.화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 UI라 볼 수 있다.UX(User Experience)란?사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하