프론트엔드 개발을 하면서 구현이외에 불편했던 점들은 백엔드 개발이 끝나야 프론트엔드 개발을 할 수 있다는 점이었다. 그리고 프론트엔드는 나 혼자였고, 3명에 백엔드 개발자들과 함께 하여서 한 번에 API가 많이 업데이트 되면 그만큼 몰아서 해야했다. 또한 로딩, 에러등

이번에 프로젝트 피드백을 받았는데, 컴포넌트를 나누는 기준이 무엇인지? 컴포넌트 추상화가 잘 안되어있다는 등의 피드백을 받았다. 그래서 React 컴포넌트를 어떻게 더 잘 추상화할 수 있을까? 라는 고민을 하게되었는데, OOP의 개념들을 더 알면 좋겠다는 생각이 들었다

toast ui의 editor를 사용하여 개발하던중 오류가 발생했다. editor에는 아래의 사진과 같이 코드를 작성했다. 하지만 작성이 완료된 글을 보면 아래와 같이 코드가 viewer에 다 보여지지 않고, 이상하게 보인다! 첫 번째로 확인할 점 : 디비에 제대로

npm은 자바스크립트 라이브러리 저장소(npm 레지스트리)이고, 프로젝트가 의존하고 있는 라이브러리들의 버전을 지정하는 방법(package.json)을 제공한다. npm은 세 가지 종류의 의존성을 구분하여 관리하고, 각각의 의존성은 package.json 파일 내의 별

의도치 않은 타입 안정성의 손실을 피하기 위해서 any의 사용 범위를 최소한으로 좁혀야 한다. 예를 들면, 방법 1방법 2방법 2이 방법이 권장된다. 그 이유는 x as any 는 다른 코드에 영향을 미치지 않기 때문이다. 또한 함수의 반환 타입을 추론할 수 있는 경우

4장은 실제 코드를 작성할 때 유용한 것들이 많이 포함되어 있었다. 유효한 상태와 무효한 상태를 둘 다 표현하는 타입은 혼란을 초래하기 쉽기 때문에 유효한 상태만 표현하는 타입을 지향해야 한다. 매개변수는 타입의 범위가 넓어도 되지만, 결과를 반환할 때는 타입의 범위

타입스크립트를 처음 접한 개발자들은 보통 자바스크립트에서 코드를 포팅할 때 가장 먼저 하는 일은 타입 구문을 넣는 것이다. 하지만 타입이 추론 되기 때문에 명시적인 타입 구문은 필요하지 않다. 또한 타입이 추론되면 리팩터링이 용이해지고 코드를 간결하게 작성할 수 있다.

편집기에서 타입스크립트 언어 서비스를 적극 활용해야 하고, 편집기를 사용하면 어떻게 타입 시스템이 동작하는지, 그리고 타입스크립트가 어떻게 타입을 추론하는지 개념을 잡을 수 있다.‘할당 가능한 값들의 집합’이 타입이라고 생각하면 이해하기 편하다.never는 타입스크립트

널리에서 웹 접근성 강의를 듣고 설명을 듣다보니 다양한 사용자들을 고려하지 않은 웹이었다는 생각이 들었다. 그래서 강의 들은것과 추가로 또 공부한 것들을 적용해보며 개선 해보려고 한다.!이 속성은 이 HTML 문서가 어떤 언어로 사용 되었는 지를 나타낸다.속성을 지정하

널리에서 강의를 듣고 정리한 내용이다. 원래 아는것도 있었지만, 몰랐던 것들도 많았다.. 😭 정리한 내용을 바탕으로 내 프로젝트에 적용해볼 생각이다. 🔥시각적으로 정보를 습득하기에 어려움을 겪는 사용자들은 스크린 리더로 해당 컨텐츠를 음성으로 듣기 때문에 텍스트가

모든 자바스크립트는 타입스크립트이지만, 모든 타입스크립트가 자바스크립트는 아니다.타입스크립트의 타입 시스템은 런타임에 오류를 발생시킬 코드를 미리 찾아낸다. 하지만 모든 오류를 찾아내지는 않는다.자바스크립트의 런타임 동작을 모델링하는 것은 타입스크립트 타입 시스템의 기

내가 생각하기에 프론트엔드 개발을 하면서 가장 중요하다고 생각한 것은 사용자 경험과 성능 개선이었습니다.내가 프론트엔드 개발자가 되어야겠다고 생각한 이유도 사용자 경험을 고민하고 개선하는데 흥미를 느꼈기 때문입니다. 그래서 나도 웹이나 앱을 사용할 때 사용자 경험이 좋

사이드 프로젝트를 하던 도중에 어떤 페이지는 Header,Footer,Nav가 보여져야하고, 어떤 페이지에서는 안보여주는 방법을 찾아보고 있었습니다. 😱 각 필요한 페이지마다 Header, Footer, Nav를 보여주도록 하는것은 비효율적이라는 생각이 들어서 원하는

2일동안 나를 힘들게했던 오류와 내가 어떻게 그 오류를 해결했는지에 대해 작성해보려고한다. 나의 성격이 약간 이해안되는 부분 있으면 무조건 해결하고 가야하는.. 그런 성격이다. 어떤 성격인지 아시는 분들은 아실거다 😅 개발할때는 좋은 점..? 인것 같다.. 😅 실

오늘은 useEffect와 useLayoutEffect의 차이에 대해 공부해보려고 합니다. 일단 2가지 과정에 대해 알아야합니다. Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표

웹 개발을 하다보면 웹, 모바일(안드로이드,iOS)환경에서 디버깅을 하게됩니다.Mac에서 iOS 디버깅 하는 방법을 잘 몰라서 조금 헤맸습니다. 다른 개발자분들은 쉽게 개발할 수 있도록 Mac에서 iOS 디버깅하는 법을 공유하고자합니다. 🔥Simulator를 켭니다.

Multi-page Application의 약자로 두 개 이상의 페이지로 구성된 애플리케이션을 의미Single-page Application의 약자로 하나의 페이지로 구성된 애플리케이션을 의미렌더링(Rendering)방식이란 결국 화면에 그려지는 것은 HTML인데 이것

실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이다. 쉽게 설명하자면, 실행 가능한 코드가 실행되기 위해 필요한 환경이다.

history.push로 페이지를 넘기는 작업중이었다. 그런데 매번 잘되다가 가끔 어떤 경우에 history.push를 할때 에러가 생기는것을 발견했다. 일단 this.props를 찍어보았다. 엥?!! history객체가 없더라.. 보통 App.js 에서 Route로

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다.에러 핸들링Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch()