회사에서 앱을 출시하게 되면서 기존 Vue로 웹 개발을 진행함과 동시에 RN 앱 개발도 맡게 되었습니다. 기존에 React로 프로젝트도 진행해보고, 인턴십도 진행해본터라 오랜만에 리액트를 다시 시작하게 되어 기대 반 설렘반으로 앱 개발을 시작하게 되었습니다. 기존 R

실제 웹/앱 서비스를 개발하다 보면, 사용자 입장에서 최적화된 UI/UX를 구현하기 위한 끊임없는 고민과 노력을 하게 됩니다. 어떻게 하면 사용자가(또는 고객이) 계속해서 우리 서비스를 만족하면서 지속적으로 사용하느냐가 굉장히 중요하기 때문입니다. 사실 UI/UX 최

What is typescript? 타입스크립트는 자바스크립트의 superset으로 자바스크립트를 기반으로 하는 언어이자 라이브러리입니다. 자바스크립트를 통해서도 코딩을 할 수 있는데 굳이 타입스크립트를 쓰는 이유는 뭘까요? 그 이유는 자바스크립트가 동적 언어이기 때문

자바스크립트로 코딩을 하면서 아마 가장 많이 쓰이는 메소드가 Array method가 아닐까 합니다. 배열은 데이터를 처리할 때 많이 쓰이기 때문에 그만큼 활용 빈도도 높으며 이에 따른 다양한 메소드들이 있기 때문입니다. 따라서 오늘은 여러가지 Array method를

자바스크립트는 프로토타입 기반 언어입니다. 클래스 기반의 언어에서는 상속을 사용하지만, 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻습니다. (유명한 대부분의 프로그래밍 언어의 상당수가 클래스 기반입니다.) 6

클로저의 개념은 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성입니다. (추후 객체지향 프로그래밍, 함수형 프로그래밍에 대해 블로깅할 예정입니다.)클로저에 대해 여러 서적에서는 다양하게 정의하지만, MDN에서는 클로저에 대해 함수와 그 함수가 선언될 당시의 Le

4-1 콜백 함수란? 콜백함수는 다른 코드의 인자로 넘겨주는 함수를 의미합니다. 콜백함수의 가장 큰 특징은 다른 코드에 인자로 넘겨주면서 그 제어권도 함께 위임한다는 것입니다. 콜백 함수를 위임받은 코드는 로직에 의해 이 함수를 적절한 시점에서 실행하게 되는 것입니다.

What is 'this'? 다른 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미합니다. 그러나, 자바스크립트에서 this는 어디서든 사용 가능합니다. 자바스크립트에서 this의 또 다른 특징은 동적으로 변경된다는 것입니다. 상황에 따라 t

2-1 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바 스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념입니다. 자바스크립트는 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 호이스팅하고, 외부 환경 정보를 구성하고, this

지난 번 자바스크립트의 비동기 처리가 어떻게 이루어지는지, 콜백 함수를 통해 어떻게 비동기 처리를 하는지, 또한 콜백 함수가 왜 콜백 지옥으로 불리게 되는지에 대해 자세하게 알아봤습니다. 이번 시간에는 Promise에 대한 기본적인 개념과 이를 통해 비동기 처리를 하는

Epilogue 3개월간의 위코드 부트캠프가 끝나고 어떤 공부를 더 해야할까 고민했습니다. 부트캠프의 특성상 자바스크립트를 포함한 다양한 라이브러리, 프레임워크에 대한 원론적이고 심층적인 개념 이해보다는 실무에 바로 투입될 수 있는 역량을 기르는데에 초점이 맞춰져있기

1. 비동기 처리? 프론트엔드 개발자로서 개발을 하다 보면, 비동기 처리로 인해 애를 먹는 경우가 많습니다. 저 역시도 프로젝트를 진행하면서 백엔드 API로부터 데이터를 요청할 때, 예상과는 다르게 undefined가 뜨거나 로직에 오류가 발생하는 경우가 많았고 이로

🗓 작업 기간 - 2020.10.5 - 2020.10.16 🔧 기술 Stack - JavaScript(ES6+) - React hooks - Routes.js - Styled Components - Git rebase - HighCharts Library - Red

async와 await는 무엇일까요?

React에서 컴포넌트를 선언하는 방식에는 2가지가 있다.첫 번째는 1차 프로젝트 때 사용했던 Class형 컴포넌트 방식이고,다른 하나는 이번 2차 프로젝트 때 사용했던 함수형 컴포넌트 방식이다.그러나 우리가 앞서 배웠던 함수의 특징을 생각해보면 이상하다는 생각이 든다

지난 번 Git이 무엇인지, Github은 무엇인지, Git의 기본 flow와 Git을 통한 프로젝트 방식에 대해 블로깅을 했다.충분히 Git merge방식을 통해서도 별 일 없이 프로젝트를 수행할 수 있는데 굳이 Rebase를 하는 이유는 무엇일까?먼저, Rebase

렌더함수가 실행되면 React가 JSX를 DOM에 붙여준다. 붙여준 그 순간 특정한 동작을 할 수 있게 만든다. 그게 바로 ComponentDidMount() ComponentDidmount 는 render가 성공적으로 실행됐을 때 실행된다. Class형 컴포넌트의

개발자라면 필수적으로 알아야 할 Git!Git은 무엇인가?개발자들은 Git을 왜 알아야 하는가?또한 Git은 어떤 flow로 진행되는가??Git의 공식 명칭은 분산 버전 관리 시스템(VCS)으로 프로젝트 파일의 변경 사항을 추적하는 시스템이다.이런 버전 관리 시스템은

2020.09.14 - 2020.09.25JavaScript(ES6+)ReactSASSGitCRA 초기 세팅로그인, 회원가입 페이지 레이아웃 구현로그인, 회원가입 유효성검사(validation) 구현fetch를 통한 API호출, 응답받은 데이터를 통한 로그인, 회원가입

1. margin, padding, border (1). margin, padding 속성 순서 속성을 네 개 넣는 경우 : top → right → bottom → left 속성을 세 개 넣는 경우 : top → (left & right) → bottom 속성을 두