imgyuzzzang

React.js: List의 map 함수를 사용하여 렌더링할 때, key prop을 추가해야한다. render(){ let list = this.state.fileList ? this.state.fileList.map(file => {file.dest}) : "" return( {list} ) } 예를 들어 다음과 같이 fileList의 element를 이용하여 return값을 띄우려고 할 때, 기존에 알고 있던 map 사용하듯이 Array.map(element => {element.name}) 이 아닌, element의 고유 식별 값이 list의 각 element에 key값으로 포함되어야함. 위 예시를 다음과 같이 바꾸어 쓴다. Array.map(element => {element.name}) 즉, 코..

OAuth ** 본 포스팅은 생활코딩 OAuth 수업을 정리한 내용입니다. https://opentutorials.org/course/3405 WEB2 - OAuth 2.0 - 생활코딩 수업소개 사용자가 가입된 서비스의 API에 접근하기 위해서는 사용자로부터 권한을 위임 받아야 합니다. 이 때 사용자의 패스워드 없이도 권한을 위임 받을 수 있는 방법이 필요합니다. 이를 위 opentutorials.org OAuth? 패스워드 없이! 구글, 페이스북과 같은 서비스의 API에 접근가능 => 내가 만든 서비스에서 사용 가능. access token을 받아와서 권한을 위임 받음 1. 등록 (new app/project) Client ID (외부 노출 ok) Client Secret (노출 절대 x) Author..

자주 헷갈리는 배치(container, grid, width, height, margin, padding) 정리 container container: 너비 고정 (양 옆 여백 존재), 화면 크기에 따라 max-width 바뀜. container-fluid: width는 항상 100% 고정 (여백 x) grid col-(sm/md/lg/xl)-(offset)-(1~12) 한 row의 전체 넓이는 12로 둠. sm : 576px 이상의 스크린 (모바일) md : 768px 이상의 스크린 (태블릿) lg : 992px 이상의 스크린 (작은 데스크탑) xl : 1200px 이상의 스크린 (큰 데스크탑) offset: 좌측에 offset-숫자 만큼의 여백(margin) width & height w-(%): wi..

풀이과정 두 점 (x1, y1), (x2,y2) 에 대하여 벡터는 (x1-x2, y1-y2) 또는 (x2-x1, y2-y1)을 만들 수 있다. 1번과 같은 방식으로 네 점에 대하여 생성가능한 합벡터는 (+x1-x2-x3+x4, +y1-y2-y3+y4), (+x1-x2+x3-x4, +y1-y2+y3-y4), (+x1+x2-x3-x4, +y1+y2-y3-y4)과 이 세가지 벡터에 -를 붙인 벡터이다. → 6가지 몇가지 경우를 하다 보면 +와 -의 조합 문제임을 알 수 있다. 즉, 서로 다른 N(짝수)개의 점에 대하여 생성 가능한 벡터를 nC(n/2)의 조합으로 선택하여 +를 붙이고, 나머지 n/2개의 벡터에 -를 붙여 더하면 생성 가능한 합벡터를 전부 확인 가능하다 예를 들어 N=4 일때 4C2 : 0011..

한번 날려먹고 다시 쓰는 규짱의 첫 포스팅....^~^ 웹프로그래밍 독학의 목표는 올해 안에 성공적으로 외주 받는 것으로 정하겠다 !! 두근 초딩들 웹 가르쳐주다가 문법은 지난주로 진도를 마쳤고, 이제 실습을 해야하기 때문에 내가 직접 만들어보려 했으나, (물론 목표는 5월 안에 만족스러운 웹페이지 뚝딱 만들기.....) 초반부터 그냥 막혀버림ㅎㅎ 레이아웃이 너무 까다롭다.. 이후 포스팅에서는 position도 따로 다루어야겠다. 게다가 div 배치할 때 float를 사용하였는데, 이는 꽤나 구식이라는 조언을 들어서 전에 잠시 공부한 기억이 남아있는 flex-box를 다시 정리해보겠다. Flex-container / Flex-item 사용 방법에 앞서 flexible box에서는 요소들을 배치하기 위해 ..