태그 목록
전체보기 (49)JavaScript(14)React(13)CSS(10)html(8)TIL(8)typescript(3)component(2)context(2)전달인자(2)인자(2)class(2)리엑트(2)State(2)json(2)position(2)Array.map(2)redux(2)변수(2)Array.filter(2)Map(2)styled component(2)method(2)block(2)function(2)selector(2)object(2)interactive(1)npm(1)instance(1)여러 인자(1)GET(1)POST(1)interpreter(1)compile(1)F12(1)JSON.stringify(1)console.log(1)window10(1)http(1)CRA(1)리액트(1)호이스팅(1)Request(1)Response(1)객체(1)전역상태관리(1)컴포넌트(1)block scope(1)시간복잡도(1)리덕스(1)float(1)매개변수(1)목데이터(1)함수표현식(1)Sync(1)fixed(1)decorator(1)img(1)mock data(1)async(1)return(1)parameter(1)padding(1)Flex(1)타입스크립트(1)scope pollution(1)local variable(1)콜백함수(1)layout(1)keyframes(1)settings(1)margin(1)객체는순서가없다(1)non-semantic(1)인스턴스(1)Node(1)global scope(1)const(1)let(1)var(1)box-sizing(1)global variable(1)비동기함수(1)아키텍처(1)즉시실행함수(1)박종선.js(1)삼항연산자(1)authorization(1)개발자도구(1)inline block(1)window(1)메서드(1)DOM(1)Sass(1)Constructor(1)font(1)inline(1)mock(1)array(1)setState(1)스타일컴포넌트(1)Fetch(1)addEventListener(1)spa(1)빈스트링(1)woff(1)함수형과 클래스형(1)flux 아키텍처(1)render(1)state불변성(1)비교문줄이기(1)함수선언식(1)JSX(1)Token(1)새로고침이 일어나면(1)attribute value(1)Props(1)구조분해 할당(1)생성자(1)비구조화할당(1)chrome(1)scope(1)Prop(1)MVC패턴(1)tag(1)argument(1)Event(1)scss(1)비구조화 할당(1)variable(1)Flux(1)sticky(1)background-size(1)semantic tag(1)promise(1)global namespace(1)동기함수(1)id(1)array.concat(1)
post-thumbnail

Styled-Component에서의 코드 품질 향상을 위한 고민

나는 요즘 개인프로젝트로 React UI 컴포넌트 프로젝트를 하고 있다. 프로젝트라기보다는 개인적으로 좋아하는 UI부분이기에 취미?로 하고 있다. React, TypeScript, Styled-Component를 활용한다. github: https://gith

2020년 8월 5일
·
0개의 댓글
post-thumbnail

Redux, Context

전역 상태관리 라이브러리. 전역상태관리란 말 그대로 상태(state) 관리를 전역(grobal)으로 한다는 것1멀리 떨어진 곳의 컴포넌트의 상태값을 변경하기 위해서는 상위컴포넌트를 통해서만, 굉장히 불필요한 렌더가 필요할 수 있다. 심지어 중간에 있는 컴포넌트들을 통하

2020년 7월 31일
·
0개의 댓글
post-thumbnail

Redux와 Flux 아키텍처

참고: https://taegon.kim/archives/5288참고: https://www.youtube.com/watch?v=zw-Oz6oNjQEModel : 백그라운드에서 동작하는 로직을 처리.View : 사용자가 보게 될 결과 화면을 출력.Co

2020년 7월 31일
·
0개의 댓글
post-thumbnail

리엑트에서 타입스크립트 적용하기

타입스크립트는 javascript의 수퍼셋으로 언어이다.리엑트뿐아니라 javascript를 사용하는 곳에서 타입지정을 하여 사용하는 언어이다.타입스크립트 전체는 공식문서를 참조하고,나는 타입스크립트와 리엑트(라이브러리)에서 사용하는 법을 다룬다.위와같이 변수선언을 하며

2020년 7월 24일
·
0개의 댓글
post-thumbnail

React + TypeScript 세팅

리엑트 + 타입스크립트 조합으로 프로젝트를 진행할 때 사용한 세팅.리엑트는 CRA로 타입스크립트버전으로 시작하였으며 airbnb eslint 스타일을 사용했다.

2020년 7월 24일
·
0개의 댓글
post-thumbnail

Sass

css와 같은 스타일을 파일이나 css에서 조금 더 확장된 기능을 추가한다고 생각할 수 있다.자주 사용되거나 value가 복잡하다던지 등을 변수로 저장하여 원하는 곳에서 하나의 값으로 사용할 수 있다.스타일도 스크립트나 html처럼 부모자식관계로 묶어 관리할 수 있다.

2020년 7월 24일
·
0개의 댓글
post-thumbnail

styled-component

스타일을 컴포넌트화한다.예전처럼 html, js, css를 따로 작성하고 관리하는 것이 아닌 컴포넌트 단위로 관리하기 위해 스타일또한 한 컴포넌트에 함께 작성한다.jsx 문법을 사용한 컴포넌트 내용에서 마치 또하나의 컴포넌트처럼 선언하고 그 내용을 styled.tag로

2020년 7월 24일
·
0개의 댓글
post-thumbnail

REACT CRA Typescript (OS WINDOW10) 초기세팅하기

CRA도 기본 javascript환경외에 typescript 환경도 가능함.처음 빌드 파일들을 설치하는 명령어로 초기 빌드 구성.\* 만약 기존 javascript로 빌드된 CRA에서 typescript를 사용하고자 한다면 업그레이드 하는 다른 명령어가 있음. 필요시

2020년 6월 28일
·
0개의 댓글
post-thumbnail

wecode 2차 프로젝트를 마치며

가장 기본이자 쉽게 구현할 있다고 생각했던 Nav바이다. 그런데 한가지 고민이 생겼다. "Nav바 상태나 회원정보는 쭉 유지하는게 어떨까?"라는 것이다.(위에서 해당 페이지를 알려주는 파란 밑줄도 Redux가 관리하는 값이다.)1차 프로젝트 때도 했던 고민인데 보통 사

2020년 6월 20일
·
0개의 댓글
post-thumbnail

wecode 2차 프로젝트

이미 서비스 중인 사이트를 clone하는 clone coding 프로젝트로대상 사이트는 "https://www.wanted.co.kr/" 입니다.github : https://github.com/wecode-bootcamp-korea/Wepick-fr

2020년 6월 20일
·
0개의 댓글
post-thumbnail

멀티캠퍼스 프로젝트를 회고하며

github : https://github.com/latte-horse서비스 url : http://www.issuewhatshow.com실시간 검색어를 바탕으로 뉴스기사를 수집하여 뉴스기사의 중요키워드를 추출하고 분석하여, 그 키워드들간의 관계를 한

2020년 6월 7일
·
0개의 댓글
post-thumbnail

wecode 1차 프로젝트를 마치며

이 글을 1차 프로젝트를 마치며 개인적으로 담당했던 부분에 대하여 자세하게 남기고자 씁니다.

2020년 6월 6일
·
0개의 댓글
post-thumbnail

wecode 1차 프로젝트

이미 서비스 중인 사이트를 clone하는 clone coding 프로젝트로대상 사이트는 "https://www.osulloc.com/" 입니다.clone coding클론 프로젝트는 순수 개발시간의 극대화를 위해 기획이나 디자인 시간을 제외하기 위하여 진행하는

2020년 6월 6일
·
0개의 댓글
post-thumbnail

박종선.js

안녕하세요! 프론트엔드 주니어 개발자를 꿈꾸는 박종선입니다.

2020년 6월 6일
·
0개의 댓글
post-thumbnail

목데이터 사용하는 법

get요청을 해서 백엔더 api에서 데이터를 받듯이 내 로컬 목데이터 저장주소로 데이터를 요청하고 받는것이다.이것은 local 또한 하나의 서버로 하여 보내고 받는 것이다.

2020년 5월 31일
·
0개의 댓글
post-thumbnail

react에서 자주 사용할 이벤트

리스트페이지가 있다고 할때 리스트의 하나를 그려주는 자식요소 component그리고 그 자식요소를 반복적으로 뿌려줄 list component로 구성했다.comment.js에서는 가장 기본단위로 한개의 댓글을 그려준다.comementList.js에서는 댓글 data(j

2020년 5월 31일
·
0개의 댓글
post-thumbnail

font 설치하는 법

먼저 원하는 폰트를 다운받아야 한다. 웹에서 사용중인 것을 다운받고 싶을 땐 해당 웹페이지에서개발자도구로 들어가서 네트워크탭에서 새로고침 후 나오는 font탭을 보면 알 수 있다.src\\styles\\fonts\\에 해당 woff 나 woff2 파일을 집어넣는다.

2020년 5월 31일
·
0개의 댓글
post-thumbnail

react Route

리액트의 기본 모드는 cra에서는 기본적으로 페이지를 이동하는 routing을 위한 로직이 없다.그래서 추가적으로 react-router 를 설치하여 페이지 이동을 하였다.!! 이런것만 봐도 리액트가 자유도가 높다는 말을 알 수 있다. 기본 route를 위한 것도 추

2020년 5월 24일
·
0개의 댓글
post-thumbnail

비구조화 할당/구조분해 할당

정의 비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)'입니다.간단하게 정리하면 배열 \[], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸

2020년 5월 24일
·
0개의 댓글
post-thumbnail

react tip

쉽게말해서 차이점은 간결하다는 것이다. 당연히 함수형이 클래스형보다 간결하니까.또한 당연히 하는 일은 하는일은 같다.그러면 무조건 함수형을 써야되냐? 아니면 클래스형을 써야되냐? 우선 기본기를 다지기 위해 클래스형을 공부하고 나중에는 함수형도 빠르게 쓰면 될것으로 생각

2020년 5월 24일
·
0개의 댓글