- 전체보기(52)
- React(4)
- await(3)
- html(3)
- CSS(3)
- async(3)
- DressCode(2)
- Props(2)
- git(2)
- 와이어프레임(2)
- promise(2)
- ux(2)
- js(2)
- UI(2)
- 반복문(2)
- State(2)
- CSR(2)
- SSR(2)
- 커링함수(1)
- mui(1)
- 깊은 복사(1)
- onchange(1)
- spa(1)
- 추상화(1)
- TTI(1)
- API(1)
- instance(1)
- sleep(1)
- OOP(1)
- http(1)
- linux(1)
- 동기화(1)
- REST(1)
- 단축평가(1)
- 객체(1)
- intersection(1)
- local repository(1)
- 캡슐화(1)
- TTV(1)
- Arrow_Function(1)
- 프로토타입(1)
- 참조 자료형(1)
- Firebase(1)
- Recoil(1)
- Prototype(1)
- git-hub(1)
- Wrapper function(1)
- parse()(1)
- 상속(1)
- 부트캠프(1)
- 비동기(1)
- 개발일지(1)
- return(1)
- class(1)
- while(1)
- for(1)
- JavaScript(1)
- 고차함수(1)
- Spread/Rest(1)
- ip(1)
- tcp(1)
- 콜백함수(1)
- 조건문(1)
- UDP(1)
- JSX(1)
- remote repository(1)
- json(1)
- 비동기화(1)
- 얕은복사(1)
- 재귀함수(1)
- union(1)
- stringfy(1)
- delay(1)
- RMM(1)
- 함수(1)
- this(1)
- DOM(1)
- 원시 자료형(1)
- Enum(1)
- ES6(1)
- styled components(1)
- Constructor(1)
- autocomplete(1)
- 일급객체(1)
- redux(1)
- react router(1)
- cdd(1)
- scope(1)
- CRUD(1)
- typescript(1)
- type assertion(1)
- virtual DOM(1)
- object(1)
- 배열(1)
데이터 업로드 컴포넌트 재사용성 개선
개요 이 DressCode 작업은 개발자 공부를 시작하면서 동시에 시작한 작업이기 때문에 코드 곧곧에 문제점도 많고 개선해야할 부분도 많이 있다. 그 중 하나의 큰 문제가 컴포넌트의 재사용성이 떨어진다는 문제가 있었다. 이번의 문제도 데이터를 서버에 저장을 하는 것과
TypeScript(3)-타입별칭(Type Aliases)
타입 별칭(Type Aliases)이란 새로운 이름으로 기존의 타입을 참조하는 것을 의미합니다. 쉽게 말해 타입의 새로운 이름을 만드는 것인데 이때는 type 키워드를 사용하여 작성합니다. 이렇게 명시된 타입 별칭은 인터페이스에서도 참조가 가능합니다.comment1의
NavBar 버튼에 현재 페이지에 따른 스타일링 지정하기 ( 코드의 독립성과 유지보수의 편의성)
개요 우리가 어느 사이트에 들어가면 새로운 페이지로 이동하기 위한 NavBar를 흔히 볼 수 있다. 이러한 NavBar는 더 좋은 UX를 위해서 현재 페이지가 어느 페이지인지 알려주기 위해서 버튼의 스타일링에 차이를 준다. 나도 이런 효과를 주기 위해서 현재 url을
TypeScript(2) - 열거형(Enum), Interface
Enum은 특정 값의 집합을 정의할 때 사용되며 다음과 같은 형태로 정의할 수 있습니다. 열거형의 종류로는 문자형과 숫자형이 있으며 따로 사용되거나 이 둘의 조합으로 정의될 수 있습니다.숫자형 열거형은 디폴트 값으로 숫자형을 사용하며, 각 값은 자동으로 0부터 시작하여
TypeScript
JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장하게 되었습니다.아래는 JS코드의 한계 예시입니다.❗️기본적으로 하나의 타입만 작성하게 되어 있으
React Virtual DOM
Document Object Model의 약자로, 브라우저가 JavaScript와 같은 스크립팅 언어가 <html>, <head>, <body>와 같은 태그들에 접근하고 조작할 수 있도록 문서를 트리 구조로 객체화한 것을 의미합니다. 다시 말하자면 DO
데이터 호출의 효율성
데이터 저장 방식이 바뀌면서 데이터를 불러오는 방법도 바뀌었는데, 해당 과정을 수정하면서 데이터를 불러오는 과정도 다시 한번 훑어보게 되었다. 그런데 아니나 다를까 Style페이지와 clothes페이지에 필요한 데이터들을 공통된 상위 파일에서 useEffect를 사용해
자료구조
자료구조 자료구조란?? 자료구조란 여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것입니다. 데이터는 문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 모든 것들이 데이터가 될 수는 있지만 데이터 그 자체만으로 어떤 정보를 가지기는 힘듭니다. 그렇기
async/await문제(return의 중요성)
새로운 옷에 대한 정보를 firebase의 database에 저장하는 과정 중에 생긴 문제가 생겼다. 데이터는 객체 형태로 저장하려고 했고 다음과 같이 표현하였다.내 의도는 이미지 두개가 정상적으로 값이 있다면 firebase의 storage에 저장하고 다운로드 받은
Section3 기술면접
재귀의 사전적으로 '원래의 자리로 되돌아가거나 되돌아오다'라는 의미를 가지고 있습니다. 그 의미와 같게 개발적 관점에서는 '자기 자신을 호출하는 함수'를 재귀 함수라고 하고 이러한 제귀 함수를 사용한다면 반복적인 작업을 해야 하는 문제를 좀 더 간결한 코드로 풀어낼 수
블로깅 첼린지(네트워크)
우선 웹 애플리케이션 아키텍처를 이해하려면 웹 애플리케이션이 무엇인지를 이해해야한다. 웹 애플리케이션이란 한마디로 사용자와 상호 작용이 가능한 웹이라고 할 수 있다. 컴퓨터에 설치해서 사용해야 했던 애플리케이션의 기능을 웹이 대신하는 것이다.예시로 예전에는 MS 엑셀
네트워크 심화(IP, TCP, UDP)
패킷교환 방식의 네트워크 통신은 기존에 있던 회선교환 방식의 단점을 보완한 방식이다. 회선교환 방식이란 발신자와 수신자 사이에 데이터를 전송할 전용선을 미리 할당하고 둘을 연결하는 방식이다. 옛날에 존재했던 전화교환원 분들이 이런 회선교환을 도와주시던 분들이다. 하지만
React 블로깅(State&Props/ SPA)
컴포넌트의 속성(property)을 의미한다.상위 컴포넌트로부터 전달받은 값으로 변하지 않는 값이며 마치 함수의 전달인자처럼 사용할 수 있다.이때 props로 어떤 타입의 값도 넣어 전달할 수 있도록 객체의 형태를 가지고 있다.하위 컴포넌트에 전달하고자 하는 값과 속성
비동기
비동기란?? 우선 비동기의 반대인 동기(synchronous)가 무엇인지 알아보자. 동기적인 것은 선행작업이 끝나는 시점과 새로운 작업이 시작하는 시점이 같은 것을 말한다. 즉, 새로운 작업은 선행작업이 끝나기 전에는 시작될 수 없다는 말이고 이런 현상을 블로킹(blo
비동기
우선 비동기의 반대인 동기(synchronous)가 무엇인지 알아보자.동기적인 것은 선행작업이 끝나는 시점과 새로운 작업이 시작하는 시점이 같은 것을 말한다. 즉, 새로운 작업은 선행작업이 끝나기 전에는 시작될 수 없다는 말이고 이런 현상을 블로킹(blocking)이라
React에서 보다 구조적으로 코드를 작성하기 위한 Styled Components
CDD란 component-Driven Development의 약자로 레고처럼 부품 단위로 UI 컴포넌트를 만들어서 결합하는 개발 방법을 의미한다.CDD 개발 방법의 장점을 이야기해보자. 예를들어서 개발자와 디자이너가 협력하여 하나의 페이지를 만들었다. 그런데 기획자가
네트워크 기초
1. 웹 애플리케이션 아키텍처 우선 웹 애플리케이션 아키텍처를 이해하려면 웹 애플리케이션이 무엇인지를 이해해야한다. 웹 애플리케이션이란 한마디로 사용자와 상호 작용이 가능한 웹이라고 할 수 있다. 컴퓨터에 설치해서 사용해야 했던 애플리케이션의 기능을 웹이 대신하는 것이
와이어프레임 & 프로토타입
와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만듭니다.와이어프레임은 3가지 레벨로 나뉜다.Low Fidelity Wireframe(Lo-Fi Wireframe): 손으로
UI/UX
UI란 User Interface의 약자로 '사람들이 컴퓨터와 상호 작용하는 시스템'을 의미한다. 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다.GUI란 Gr
JSON(JavaScript Object Notation)
JSON이란 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 예를들어 우리가 네트워크에서 메세지를 전송하는데 그 형태가 다음과 같이 객체의 형태라고 가정해보자.위의 메시지를 전송하려면 다음과 같은 조건을 충족해야한다.발신자와 수신자가 같은 프로그램을 사용할 것.문자