분류 전체보기138

• 

  [Basic] for …in 반복문을 처리하는 배열과 객체 (obj & array for looping) The developer say code. 배열인 경우는 index를 출력한다. 객체인 경우는 key 값을 순서대로 출력한다. 객체를 만약 {a:1, c:2, b:3} 이렇게 입력했으면, a,c,b 순서로 출력을 행한다. 이런 특성을 Enumerable 이라고 한다고 한다. Enumerable 이라는 것 자체가 순서를 열거할 수 있는 것에 대한 것을 말한다. 사실 find나 map, filter 같은 것도 모두 동일한 특성을 갖고 있다. (추가적인 자료는 밑에 참조 경로를 참조) index 나 key를 string 으로 받기 때문에 index가 있거나, key가 있을 때, 예를 들어, if(Array.key=== "a") { /* codes */} 같은 방식으로 실행이 가능 할 것 같다. input co.. Javascript/Basic 2021. 6. 23.

• 

  여러개의 state 값을 1개의 객체로 관리하는 방법 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 코딩하다가 check 에 관한 컴포넌트 여러개의 check 여부를 1개의 state로 관리할 수 있을 것 같았다. 방법은 간단했다. 아래와 같이 useState 안에 배열, 그 안에 객체를 넣으면 된다. 순서는 컴포넌트 순서겠지? 미리 세팅해두면 된다ㅎㅅㅎ 이렇게 하면, 어떤 check 컴포넌트가 선택되었을 때, Re-Rendering 이 될 필요가 있으면, Re-Rendering 할 수 있게 된다. const [ch.. React & TypeScript/React 2021. 6. 17.

• 

  try / catch 를 사용해야 하는 이유 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 아래 handleClick() 내부에 try Catch 같은 것을 처리하는 것이 좋다. 이벤트핸들러의 경우에만 try / catch 를 사용한다. 그동안 예외 처리에 대해 그다지 신경을 안썼는데, 이제는 이렇게 했을 때, 문제를 인식하기 시작하게 되었다...(나름 성장한 것인가...?) 암튼, 앞으로는 이벤트핸들러를 동작할 때는 사용하기로... class MyComponent extends React.Component.. Javascript/Basic 2021. 6. 10.

• 

  [JavaScript] 자바스크립트 배열 추가, 삭제 방법 (push, pop, splice) [펌] 자바스크립트 배열 추가, 삭제 함수 배열 추가 : Array.push(), Array.unshift(), Array.splice() 배열 삭제 : Array.pop(), Array.shift(), Array.splice() 배열 요소를 추가하는 방법 var arr = ['a', 'b', 'c']; // arr = ['a', 'b', 'c', 'd'] arr.push('d'); // 배열의 끝에 요소를 추가 var arr = ['a', 'b', 'c']; // arr = ['d', 'a', 'b', 'c'] arr.unshift('d'); // 배열의 앞쪽에 요소를 추가 var arr = ['a', 'b', 'c']; // arr = ['a', 'b', 'd', 'c'] arr.splice(2, 0, 'd.. Javascript/Basic 2021. 5. 28.

• 

  [javascript] try..catch & 에러 핸들링 try { // 코드... } catch (err) { // 에러 핸들링 } finally { // 에러 발생 여부와 상관없이 try/catch 이후에 실행됨 } 위와 같은 방식으로 작성한다. 어떤 코드가 에러가 발생할 수 있기 때문에 그에 대한 대비책으로 코드를 작성해둘 수 있다. useEffect 안에서 무조건 실행되지 않는 구문이 있을 수 있다. 그런 경우에 catch 문을 활용해서 로그인 화면으로 이동시키거나, 특정 String으로 적용시키는 게 좋을 수 있다. 코드라는 게 완벽할 수 없다. 어떤 상황에 에러가 발생할지 예상은 하지만 모든 예상이 불가능하다. 그렇기 때문에 위 코드를 작성하는 것이다. 스크립트가 중단되는 것을 막는 것이다. 과용하면 코드가 복잡해질 가능성이 매우 크다. 중요한 핵심.. Javascript/Basic 2021. 5. 27.

• 

  [CSS] CSS 수정 시 캐쉬 충돌 방지 하는 방법 (쿼리 스트링) [펌] 결론 위와 같은 방식으로 css 주소 뒤에 Query String을 붙여준다. ?ver=1.1 일 필요는 없고 아무거나 붙여도 된다. 관용적으로, 이전 버젼과 다음 버젼을 구분하기 어렵기 때문에 ver=1.1 .. 1.2 ..1.3 이렇게 붙이는 것을 권장할 뿐.. after 라고 쓰든.. spring이라고 쓰든...기존 호출문과는 다르게 해서 css를 다시 호출해야 한다고 인식만 하게끔 하면 된다. 퍼온 글 웹사이트를 운영하다보면 웹사이트의 디자인이나 프론트엔드 동작을 바꾸기 위해서 CSS 또는 javascript 파일을 수정하는 일이 종종 생기게 된다. 이때 수정된 파일을 서버로 배포하더라도, 기존 웹사이트를 이용하던 유저의 브라우저 캐쉬때문에 수정된(fresh) 파일을 다운로드 하지 않고 캐쉬를 이.. HTML&CSS 2021. 5. 25.

• 

  [Basic] 특정 기간 내 배너 띄우기, 현재 시각 확인 하기 배경 홈페이지가 업데이트되면서 리뉴얼을 시작하게 되었다. 이에 따라 배너를 특정 기간에 띄워야 할 필요가 있었다. 이를 해결하기 위해서 코드를 찾아보았었다. 코드 const startDate = new Date ("2021-05-24T00:00:00z"); // 뒤에 z를 안붙이면 IE10 > 일 경우, 에러. 꼭 붙이자 const endDate = new Date ("2021-05-31T23:59:59z"); const now = new Date(); // 현재 날짜 확인 const readyStartDate = new Date ("2021-06-01T00:00:00z"); const readyEndDate = new Date ("2021-06-01T10:00:00z"); if(endDate > now.. Javascript/Basic 2021. 5. 21.

• 

  [Basic] 깊은 복사, 얕은 복사 shallow copy, deep copy, slice, JSON.parse, JSON.stringify 개요 자바스크립트는 근본적으로 깊은 복사가 불가능하다. 이를 해결하기 위해 아래와 같은 짓을 한다. 기초적 방법 let tempJson = JSON.parse(JSON.stringify(json)); 위 방법이 깊은 복사를 하기 위한 가장 기초적인 방법이다. 배열은 slice로도 깊은 복사가 가능하다. (1 depth 배열인 경우) 그러나, 객체인 경우는 위 방식을 택하거나, 현재 기준으로 2가지 라이브러리를 사용하는 방법이 있다. Lodash 와 Ramda 깊은 복사를 할 수 없어서 만들어진 라이브러리인데, 기본적으로 처리하는 방식은 같은 것으로 보인다. (자바스크립트의 언어적 특성 때문에 이런 돌려차리를 해야 한다는 게 우습긴하다.) 자세한 내용은 아래 출처를 이용합시다. 출처: https://bba.. Javascript/Basic 2021. 5. 20.

• 

  [HTML] Form TAG에서 name의 의미 어제 antd를 react 에서 사용하다가 Form 태그에서 자꾸 에러가 났었다. form에 있는 내용을 지우는 것이였는데, 지워지지 않았었다. 원인은 form.item 마다 설정되어 있던 name을 삭제해서였다. form 컴포넌트나 태그를 사용할 때, name을 사용하지 않으면, form의 정보를 핸들링 하는 것이 불가능하다. 바꿔 얘기하면, form을 핸들링할 필요가 없으면, name을 설정하지 않아도 무방하다는 뜻이기도 하다. 어찌보면, 단순하고, 기초적인...그러나 알아차리기 힘든. 습관처럼 작성하는 코드였을 수도 있기 때문에 헤매이다 어제 간신히 발견하게 되었다. console에도 버그가 따로 찍히지 않아서 완전 헤매었지...ㅠㅠ form.resetFields(); 도 먹히지 않았었다..ㅠㅠㅠㅠ.. HTML&CSS 2021. 4. 30.

• 

  [React] useState 활용해서 사전에 객체의 Template 설정해야 하는 이유 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 에러 메시지 antd table Each child in a list should have a unique "key" prop. Check the render method of `Body`. 작업 도중에 위와 같은 메세지가 떴다. ㅎㅎ 상큼하다. 초급 개발자인 나는 한동안 해메이다 답을 찾았는데, useState로 객체를 설정해두어야 한다는 것이다. const [data, setData] = useState({ res.. React & TypeScript/React 2021. 4. 28.

• 

  [open source] react quill (text editor) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com quill텍스트에디터 를 기반으로 오픈소스 활동을 조금했다. Quill - Your powerful rich text editor Sailec Light Sofia Pro Slabo 27px Roboto Slab Inconsolata Ubuntu Mono Quill Rich Text Editor Quill is a free, open source WYSIWYG editor built for the modern web... 개발 다이어리 2021. 4. 16.

• 

  [방법론] Scaffolding 스케폴딩 간단하게 생각하면, library 같은 것을 말한다. 프로그래밍을 시작하는데 있어서 지지대 역할을 하는 것을 말한다. 자전거를 배울때 도움을 주는 보조바퀴 같은 존재이다. 어떤 그림을 그릴 때, 하나부터 열까지 전부다 할 수는 없다. 캔버스는 누가 만들어 놓은 것을 쓰는게 좋다. 붓도 그렇다. 음식도 그렇다. 모든 재료를 다 재배해서 음식을 만들 수는 없다. scaffolding 도 같은 개념이다. 개발자가 무언가 개발을 시작할 때, 처음부터하자면, 너무 힘들다. 그래서 템플릿이나, 주변에서 누군가 만들어둔 library 같은 것을 이용해서 만들곤 한다. 이렇게 하다보면, 혼자서 library나 template을 만들 수 있는 개발자가 될 수 있게 되는 것이다. (스캐폴딩의 목적) 목적을 이해하고 만들어.. Dev-Basic/Programming 2021. 4. 16.