전체 글

[HTML] href 속성이 없는 a태그의 웹접근성 문제

HTML에서 어떤 요소를 클릭했을 때 동작을 수행하는 방법은 두가지 경우가 있다. 1. 버튼 태그를 쓰는 경우 2. a태크를 쓰는 경우 위 두가지 경우 모두 태그 요소에 클릭 이벤트를 바인딩해 원하는 동작을 수행하게 하면 된다. 하지만 여기서 문제점이 발생하는데 겉으로 보기에는 잘 동작하기에 전혀 이상이 없어 보이지만 이런 태그에서는 가장 중요한 치명적인 문제점이 생겨난다. 💬 Answer 🌏 웹 접근성 👉 웹 접근성이란 ? 웹 접근성은 한국정보회진흥원 웹 접근성 연구소의 정의 어떠한 사용자(장애인, 노인 등). 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보를 접근할 수 있도록 보장해주는 것. 2021.06.10일 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹..

[React] 리덕스 (Redux)란 ?

리덕스(Redux) 란? 공식문서를 참조한 정의는 다음과 같다. 자바스크립트로 구동되는 어플리케이션에서 예측 가능한 상태관리를 도와주는 상태관리 라이브러리 그런데, React의 setState, Hooks의 useState로만 사용해서 구현해도 충분히 상태관리에 이상이 없는데 굳이 리덕스를 사용하는 이유는 무엇일까? 우리가 알고 있는 리액트에 상태관리는 각 컴포넌트 안에서 이루어지는데, 각 컴포넌트에 필요한 상태에 대해서는 각각의 컴포넌트 내에서 선언되고 수정된다. Redux는 (Flux 패턴을 활용) 전역상태를 관리하기 위한 라이브러리이다.(React,Vue,Angular에서 모두 사용 가능) 예를 들어 위 그림과 같이 컴포넌트 구성이 있다고 가정하고, 자식 컴포넌트6에서 자식 컴포넌트8로 상태를 전달..

[javascript] 함수형 프로그래밍 과 자바스크립트와 객체지향

이번 시간에는 Javascript는 객체지향 프로그래밍인가 + 함수형 프로그래밍과 객체지향 프로그래밍 (OOTP)에 대해 알아보도록 하겠습니다.! 이번 시간에 가장 중요한 면접 질문일 수 도 있습니다!! 1. 함수형 프로그래밍이란? 함수형 프로그래밍은 명령형 프로그래밍에 속합니다. 무엇을 구현하겠다를 초점을 두어, 자료 처리를 수학적인 함수의 계산으로 취급해 상태(state)와 가변적인 데이터(variable data)를 배제하는 프로그래밍 입니다.(선언형) 실행 순서를 지정할 필요가 없기 떄문에 비절차형 언어(non-procedural language)라고도 합니다. 함수형의 중요한 개념인 순수함수 동일한 input에는 항상 같은 output을 반환한다. 함수의 실행이 프로그래밍에 영향을 주진 않는다...

[React]setState는 비동기 동작

React를 통해서 웹 개발을 하다보면 당연스럽게 만지게 되는 주요 메소드들이 있는데 그 중에 하나가 setState입니다. 1. setState는 어느 기능을 가지고 있는가? 리액트는 state가 변화될때 다시 render를 해주기 때문에 setState는 component를 re-render할때 꼭 필요합니다. 그런데 setState를 사용하다보면 state가 정상적으로 업데이트도지 않거나 조금 느린 템포로 업데이트되는 상황을 종종 찾아볼 수 있습니다. 그럼 이제 왜 그런 상황이 발생하는지 좀더 자세히 알아보도록 해보겠습니다. 2.setState를 조금 더 깊게 알아보자 setState를 알려면 본인의 소스코드에 대해서 잘 살펴보아야 합니다. CRA(create-react-app) 보일러 플레이트를 ..

CORS란 무엇인가?

이번시간에는 CORS이 무엇인가에 대한 포스팅을 시작하겠습니다. 웹 개발을 하다보면 CORS 정책위반으로 인한 에러가 발생하는 상황은 흔해서 누구나 한번쯤 겪게 된다고 해도 과언이 아닙니다. 주니어 프론트엔드 개발자들에게는 CORS의 문제가 어렵다는 것은 인지하고 있을 것입니다. CORS에 대한 문제점은 초기 개발자들이 많은 오해가 일어날 수 있는데 CORS를 해결하는 방법은 이미 존재하지만 그것들을 잘 모르는 경우도 많은 것 같다. CORS에 대한 사람들이 쉽게 오해할 만한 몇가지를 바로잡고, CORS로 인한 오류 해결방법을 제시해보겠다. CORS에 대한 몇가지 오해 프론트엔드 개발만 해본 웹개발자라면 해볼만한 CORS에 대한 오해가 몇가지 있다. 이것들을 풀고나서 해결방법을 알아보자. 오해 1 : C..

Cookie vs LocalStorage vs SessionStorage

1.Cookie(쿠키) 쿠키는 클라이언트에 대한 정보를 이용자의 PC에 있는 하드디스크에 보관하기 위해 웹사이트에서 클라이언트 웹 브라우저에 전송하는 정보이다. 1-1. Cookie의 특징 쿠키를 웹 사이트에서 설정하면 모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송된다. 쿠키는 개수와 용량에 있어 제한을 걸어두고 있다. 하나의 사이트에서 저장 가능한 최대 쿠키수는 20개이며, 하나의 사이트에서 저장 가능한 최대 쿠키 크기는 4KB로 제한되어 있다. 1-2. Cookie의 장/단점 장점 대부분의 브라우저에 지원이 다 된다. 단점 api가 한번 더 호출되면서 서버에 부담이 증가된다. 2. WEB STORAGE (웹 스토리지) HTML5에는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조..

[React] Stateful / Stateless

이번 시간에는 상태가 있는 Stateful Component 와 상태가 없는 Stateless Component에 대해 알아보겠다. 1. React의 Stateful Component 말그대로 State(상태)가 있는 Component를 말한다. class에서 this 인스턴스를 통한 state에 접근하고 상태를 관리함 CASE A. class선언후 생성자 인스턴스에서 this를 통한 state(상태)관리 // Here is an excerpt from the counter example constructor(props) { super(props); this.state = { count: 0 }; } CASE B. React Component Class 중 useState module을 사용해 상태관리 ..

[React] React Life Cycle 생명주기

시작하기 전에 리액트 라이프 사이클에 대해 정확하게 알고 있지 않기에 이 포스트를 작성하기로 했다.이 링크를 참고하면 좀 더 자세하게 LifeCyle을 이해할 수 있다. 앞으로 LifeCylcle의 업데이트된 사항을 위 링크에서 확인해 보고 이전과 비교하면 더 좋을 것이다. 1. 리액트에 라이프 사이클 이란 ? 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리 언어이다. 그렇다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링 되기 전 준비 과정에서 시작해 페이지에서 사라질때 끝이난다. 위의 이미지는 리액트의 라이프 사이클을 나타낸 화면이다. 이제 이 각각의 메서드들이 어떤 역할을 하는 지 알아보겠다. 2. 라이프사이클의 분류 ..

[React] React Hooks이란?

1.Hook 이란? 상태 관리가 가능하고 라이프사이클 API를 사용할 수 있는 함수형 컴포넌트 리액트에서 컴포넌트를 정의하는 방법 리액트에서 컴포넌트를 정의하는 방법은 두가지 가 있다. 클래스형 컴포넌트 - state를 가지고 있어 상태 변화에 대한 관리를 할 수 있다. - 단계별로 라이프 사이클을 경험할 수 있고, 라이프 사이클 API를 사용할 수 있다. 함수형 컴포넌트 - 클래스형 컴포넌트에 비해 선언하기가 간편하여 주로 화면을 그리는 역할을 한다. - 메모리 자원을 클래스형 컴포넌트 보다는 덜 사용한다. - state와 라이프사이클 API 사용이 불가능 하다. 한마디로 클래스형은 stateful component, 함수형은 stateless component라고 할 수 있다. ※ 그러나 React ..

[React] 컴포넌트 성능 개선 React.memo()

1.React.memo란? React.memo는 함수형 컴포넌트에서 동일한 파라미터로 생성된 함수들을 메모이제이션을 이용하여 재사용하게 도와 줍니다. 예를 들어 다음과 같은 상황이 있다고 가정해보겠습니다. 이름, 나이, 주소값을 받는 useState를 이용해 표현하고 있고 주소를 제외한 이름, 나이를 파라미터로 받는 컴포넌트가 있습니다. 여기서 이름, 나이 값이 변경되면 해당 값을 가져다 사용하는 컴포넌트도 당연히 리 렌더링이 발생되어 수정된 화면을 보여줘야 합니다. 하지만 주소값이 변경될 경우에는 어떨까요? 주소 값이 변경되더라도 useState로 정의된 값들을 같이 리 렌더링이 발생되기 때문에 이름,나이,값이 동일함에도 불구 하고 해당 값들을 가져다 사용하는 컴포넌트도 리 렌더링이 발생됩니다. 결국 ..

[javascript]비동기적 처리(Callback, Promise, Async-Await)

데이터를 처리하는 방식인 동기, 비동기 처리에 대해서 알아보도록 하겠습니다. 동기 (Synchronous) 와 비동기 (Asynchronous) 동기 방식은 서버에 요청을 보낼때 응답이 돌아와야 다음 작업을 수행할 수 있습니다. 즉 A작업이 모두 진행 되기 전까지는 B작업은 대기해야합니다. 비동기 방식은 반대로 요청을 보낼때 응답 상태와 상관없이 다음 동작을 수행할 수 있습니다. 즉 A작업이 시작 되었을때 동시에 B작업이 실행됩니다. A작업은 결과값이 나오는대로 출력됩니다. 동기적 처리 (Synchronous) console.log("1st"); console.log("2nd"); console.log("3rd"); 위와 같은 코스를 작성한뒤 실행해보면 예상되는 결과는 1st, 2nd, 3rd일 것입니다..

[React Native] React Native를 사용하는 이유

Front-End, Aplication 개발을 하는 분들이라면 한 번쯤 리액트 네이티브(React Native)라는 단어를 한 번쯤 들어보셨을 겁니다. ReactNative는 페이스북이 개발한 오픈소스 모바일 애플리케이션 프레임워크로 Javascript를 알고 있는 개발자 라면 안드로이드, ios로 앱을 만들 수 있는 크로스 플랫폼 (하이브리드 플랫폼) 입니다. 1.리액트 네이티브의 장단점 1-1. 리액트 네이티브란? 리액트 네이티브는 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크입니다. Javascript로 개발이 가능하고 하나의 프로그래밍 언어로 IOS와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼입니다. Application을 개발한다고 하면 Android는 Kotlin과..