- 전체보기(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)
Styled-Component에서의 코드 품질 향상을 위한 고민
나는 요즘 개인프로젝트로 React UI 컴포넌트 프로젝트를 하고 있다. 프로젝트라기보다는 개인적으로 좋아하는 UI부분이기에 취미?로 하고 있다. React, TypeScript, Styled-Component를 활용한다. github: https://gith
Redux, Context
전역 상태관리 라이브러리. 전역상태관리란 말 그대로 상태(state) 관리를 전역(grobal)으로 한다는 것1멀리 떨어진 곳의 컴포넌트의 상태값을 변경하기 위해서는 상위컴포넌트를 통해서만, 굉장히 불필요한 렌더가 필요할 수 있다. 심지어 중간에 있는 컴포넌트들을 통하
Redux와 Flux 아키텍처
참고: https://taegon.kim/archives/5288참고: https://www.youtube.com/watch?v=zw-Oz6oNjQEModel : 백그라운드에서 동작하는 로직을 처리.View : 사용자가 보게 될 결과 화면을 출력.Co
리엑트에서 타입스크립트 적용하기
타입스크립트는 javascript의 수퍼셋으로 언어이다.리엑트뿐아니라 javascript를 사용하는 곳에서 타입지정을 하여 사용하는 언어이다.타입스크립트 전체는 공식문서를 참조하고,나는 타입스크립트와 리엑트(라이브러리)에서 사용하는 법을 다룬다.위와같이 변수선언을 하며
React + TypeScript 세팅
리엑트 + 타입스크립트 조합으로 프로젝트를 진행할 때 사용한 세팅.리엑트는 CRA로 타입스크립트버전으로 시작하였으며 airbnb eslint 스타일을 사용했다.
Sass
css와 같은 스타일을 파일이나 css에서 조금 더 확장된 기능을 추가한다고 생각할 수 있다.자주 사용되거나 value가 복잡하다던지 등을 변수로 저장하여 원하는 곳에서 하나의 값으로 사용할 수 있다.스타일도 스크립트나 html처럼 부모자식관계로 묶어 관리할 수 있다.
styled-component
스타일을 컴포넌트화한다.예전처럼 html, js, css를 따로 작성하고 관리하는 것이 아닌 컴포넌트 단위로 관리하기 위해 스타일또한 한 컴포넌트에 함께 작성한다.jsx 문법을 사용한 컴포넌트 내용에서 마치 또하나의 컴포넌트처럼 선언하고 그 내용을 styled.tag로
REACT CRA Typescript (OS WINDOW10) 초기세팅하기
CRA도 기본 javascript환경외에 typescript 환경도 가능함.처음 빌드 파일들을 설치하는 명령어로 초기 빌드 구성.\* 만약 기존 javascript로 빌드된 CRA에서 typescript를 사용하고자 한다면 업그레이드 하는 다른 명령어가 있음. 필요시
wecode 2차 프로젝트를 마치며
가장 기본이자 쉽게 구현할 있다고 생각했던 Nav바이다. 그런데 한가지 고민이 생겼다. "Nav바 상태나 회원정보는 쭉 유지하는게 어떨까?"라는 것이다.(위에서 해당 페이지를 알려주는 파란 밑줄도 Redux가 관리하는 값이다.)1차 프로젝트 때도 했던 고민인데 보통 사
wecode 2차 프로젝트
이미 서비스 중인 사이트를 clone하는 clone coding 프로젝트로대상 사이트는 "https://www.wanted.co.kr/" 입니다.github : https://github.com/wecode-bootcamp-korea/Wepick-fr
멀티캠퍼스 프로젝트를 회고하며
github : https://github.com/latte-horse서비스 url : http://www.issuewhatshow.com실시간 검색어를 바탕으로 뉴스기사를 수집하여 뉴스기사의 중요키워드를 추출하고 분석하여, 그 키워드들간의 관계를 한
wecode 1차 프로젝트
이미 서비스 중인 사이트를 clone하는 clone coding 프로젝트로대상 사이트는 "https://www.osulloc.com/" 입니다.clone coding클론 프로젝트는 순수 개발시간의 극대화를 위해 기획이나 디자인 시간을 제외하기 위하여 진행하는
목데이터 사용하는 법
get요청을 해서 백엔더 api에서 데이터를 받듯이 내 로컬 목데이터 저장주소로 데이터를 요청하고 받는것이다.이것은 local 또한 하나의 서버로 하여 보내고 받는 것이다.
react에서 자주 사용할 이벤트
리스트페이지가 있다고 할때 리스트의 하나를 그려주는 자식요소 component그리고 그 자식요소를 반복적으로 뿌려줄 list component로 구성했다.comment.js에서는 가장 기본단위로 한개의 댓글을 그려준다.comementList.js에서는 댓글 data(j
font 설치하는 법
먼저 원하는 폰트를 다운받아야 한다. 웹에서 사용중인 것을 다운받고 싶을 땐 해당 웹페이지에서개발자도구로 들어가서 네트워크탭에서 새로고침 후 나오는 font탭을 보면 알 수 있다.src\\styles\\fonts\\에 해당 woff 나 woff2 파일을 집어넣는다.
react Route
리액트의 기본 모드는 cra에서는 기본적으로 페이지를 이동하는 routing을 위한 로직이 없다.그래서 추가적으로 react-router 를 설치하여 페이지 이동을 하였다.!! 이런것만 봐도 리액트가 자유도가 높다는 말을 알 수 있다. 기본 route를 위한 것도 추
비구조화 할당/구조분해 할당
정의 비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)'입니다.간단하게 정리하면 배열 \[], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸
react tip
쉽게말해서 차이점은 간결하다는 것이다. 당연히 함수형이 클래스형보다 간결하니까.또한 당연히 하는 일은 하는일은 같다.그러면 무조건 함수형을 써야되냐? 아니면 클래스형을 써야되냐? 우선 기본기를 다지기 위해 클래스형을 공부하고 나중에는 함수형도 빠르게 쓰면 될것으로 생각