프론트엔드(35)
-
[알고리즘] 자기 자신을 호출하는 , 재귀
프론트엔드 부트캠프를 수강하면서 알고리즘을 하나씩 풀어나가다 커다란 벽을 만났다. 자기자신을 호출하는 개념인 재귀인데, 재귀의 개념을 이해하는데는 그리 어려움이 없었지만 재귀를 이용해서 알고리즘 문제를 푸는데 애를 먹고있다. 재귀를 사용하기 좋은 경우 for (let i = 0; i < n; i++) { for (let j = 0; j < n; j++) { for (let k = 0; k < n; k++) { for (let l = 0; l < n; l++) { for (let m = 0; m < n; m++) { for (let n = 0; n < n; n++) { for (let o = 0; o < n; o++) { for (let p = 0; p < n; p++) { // do something s..
2022.09.07 -
[Typescript] 대세로 떠오른 타입스크립트 첫걸음!
기술 사용의 필요성 기존의 자바스크립트는 인터프리티드 동적타이핑 (dynamic typing) 언어이다. 컴파일 언어의 경우 컴파일 과정에서 오류를 발견할 수 있지만, 인터프리티드 언어의 특징으로 인터프리터를 통해 번역과정을 거치는 자바스크립트는 런타임에서야 오류를 발견할 수 있다 이 때문에 심각한 경우 배포단계에 되서야 오류가 발견될 수 도 있다. 무엇보다 문제는 동적타이핑 언어라는 특징에 있다. 자바스크립트는 다른 언어와 비교해봐도 독특한 타이핑 특성을 가지고있다 꽤나 유하게 타입추론을 진행하는데 이 때문에 자바스크립트 개발자를 조롱하는 밈 (meme)도 있을 정도이다. 기존 자바스크립트의 동적타이핑의 문제 아마 자바스크립트를 사용하는 개발자라면 위와같은 밈 을 한번쯤 본 적 있을 것이다. 자바스크립..
2022.09.05 -
[Redux] 리덕스의 기본!
리덕스(Redux)는 리액트(React)를 사용할때 발생할 수 있는 Props-drilling 문제 해결에 도움을 줄 수 있는 상태관리 라이브러리이다. 다만 하나 주의해서 알아야하는 것은, Redux는 React의 관련 라이브러리, 혹은 React의 하위 라이브러리 가 아니다. 리액트로 웹개발을 진행하다 보면 사용자설정 테마, 권한에 따른 페이지뷰를 위한 권한 설정 등 특정상태를 전역에서 사용하고 싶어질 때가 있다. 이럴때 Props를 사용해서 state를 관리하게되면 만드는 모든 컴포넌트에 state를 내려줘야하기 때문에 상당히 비효율적이다. Redux 동작과정 이런 복잡한 과정을 해결하기 위해서 Redux에서는 Store라는 특별한 전역저장소를 설정하고, 각 하위 컴포넌트는 이를 가져다 사용할 수 있..
2022.09.01 -
[REST API] 잘 디자인된 API
REST API 란? REST API 란 'Respresentational State Transfer' 의 약자로, 웹에서 사용되는 데이터나 자원을 HTTP URI 로 표현하고, HTTP프로토콜을 이용해 요청, 응답을 정의하는 방식을 이야기한다. 식용유를 두른 팬에 양파 당근 햄 순서로 볶은 다음 소금 후추로 간을 하고 밥과 함께 볶아낸 음식을 주세요 vs 햄 볶음밥 하나 주세요 우리가 음식점에 들어가서 메뉴를 주문할때, 음식에 들어가는 재료를 일일히 이야기하고, 조리법을 세세하게 설명하고 주문하지는 않는다. 대신 메뉴판을 보고 메뉴의 이름을 이야기하면 메뉴에 맞는 재료를 정해진 조리법에 맞춰 조리후 서빙하게 된다. 서버와 클라이언트 사이에도 데이터와 리소스를 요청하고 이에 맞는 응답을 받기 위한 메뉴판..
2022.08.05 -
[React] useState 를 이용한 상태관리
리액트에서 컴포넌트의 상태를 관리하기위해 useState라는 훅을 사용한다. 사용법 1. Import import {useState} from "react" 먼저 상단에 위와같은 코드를 사용해서 useState라는 Hook을 사용할 수 있게 import한다. 2. 정의 const [state,Setstate] = useState("") 컴포넌트의 상태를 만들어주려면 위와같은 형태로 함수내부에 스테이트를 정의 해주면된다. const [바꿀스테이트 , 스테이트를바꿔주는 함수] = useState(초기값) 배열의 첫번째인자는 스테이트로 사용할 변수를 적고, 배열의 두번째 인자로는 스테이트를 변경할 함수를 적게되는데 state값을 state를 바꿔주는 함수없이 임의로 바꿀경우 오류를 일으킬수 있으니, 반드시 상..
2022.08.03 -
[React] 리액트 컴포넌트의 속성 Props
react 컴포넌트는 states(상태) 와 props (속성)을 가질 수 있다. Props props 는 변하지않는 외부로부터 전달받은 속성을 의미한다. 성별, 이름과같이 변하지 않는 속성에 해당하며 부모 컴포넌트로부터 전달받은 값이다. 리액트는 단방향, 하향식의 데이터 흐름을 지향하는데 이에 맞게 Props는 함부로 변경될 수 없는 읽기전용 객체이다. Props 를 전달하는 방법 1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다. 2. props를 이용하여 정의된 값과 속성을 전달한다. 3. 전달받은 props를 렌더링한다. function Article(props){ return( {props.title} {props.contents} ) } function App(){ retu..
2022.08.02