달과 함께하는 IT

시작하기에 앞서 코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고 요점을 적어두고 다시 활용하기 위한 글입니다. CSS visivility에 관해 개인 프로젝트를 진행하다가 보면 배치한 컴포넌트와 모듈이 첫 시작때 배치 이동되면서 화면이 어그러지는 경우를 많이 보게된다. 이를 해결하기 로딩이나 스피너등으로 유저 이탈을 막는 경우가 있는데 최근에는 스켈레톤 UI (컴포넌트)를 많이 사용한다. 하지만 로딩이 길지않고 사이트 로딩자체의 시간이 아주 길지 않은 경우 => 일반적으로 유저가 빈 화면등을 보고 이탈하는 시간인 3초 이내 굳이 스켈레톤 리소스를 활용하는 것 보다 간단하게 CSS를 활용하는 방법을 찾아서 공유한다. // CSS body { visibility: ..

시작하기에 앞서 코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고 요점을 적어두고 다시 활용하기 위한 글입니다. JSON.parse() 와 JSON.stringify() JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용됩니다. 이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포멧입니다. JSON은 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 많이 사용되기 때문에 어렵지 않게 접할 수 있습니다. 이중 자바스크립트 내장객체인 JSON.parse()와 JSON.stringify()를 이용해..

https://school.programmers.co.kr/learn/courses/14595 [스터디/6기] 실무와 가까워지는 Node.js 백엔드 개발(feat.TypeScript) ⏰마감되었습니다. 7기 오픈 알림 신청하고 최저가에 수강하세요! 오픈 알림 신청 실무와 가까워지는 Node.js백엔드 개발 (feat. TypeScript) 비교적 쉬운 기술 스택으로 백엔드 구조의 핵심을 짚어보 school.programmers.co.kr 이번 회차에서는 GET , POST , PUT을 사용하여 간단하게 파이어베이스와 통신해보고 이러한 결과를 불러와서 눈으로 확인할 수 있는 절차였다. 본격적으로 백엔드로 들어가서 그런지 모르는 용어들도 많았고 전체적인 흐름이 조금 빨랐다고 생각한다. 새로운 용어 스키마 ..

시작하기에 앞서 코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고 요점을 적어두고 다시 활용하기 위한 글입니다. CSS로 말 줄임 (text-overflow: ellipsis) See the Pen Untitled by zerosial (@zerosial) on CodePen. 코드의 width를 조절하면 박스 크기를 조절할 수 있습니다. display : block 이거나 시멘틱 태그가 블록 속성인 경우에만 사용할 수 있습니다. white-space: nowrap; // 여러줄이라도 한줄로 모아줌 text-overflow: ellipsis;// 일정 이상 벗어낫을 경우 말줄임 overflow: hidden;// 넘어가는 라인은 숨김 이미지 스프라이트 기능 See..

시작하기에 앞서 코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고 요점을 적어두고 다시 활용하기 위한 글입니다. 사이트 타당성 검사 https://validator.w3.org/nu/#textarea Ready to check - Nu Html Checker This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change validator.w3.org WAI - ARIA 현제는 HTML 5로 많이 흡수가 됬으나 과거 HTML4 시절 장애를 가진 일부 유저 (시각장애인 등) 을 위한 네비게이션 리딩 안내등을 위한 기술들이다. 스크린리더에게 읽히지 ..

https://school.programmers.co.kr/learn/courses/14595 [스터디/6기] 실무와 가까워지는 Node.js 백엔드 개발(feat.TypeScript) ⏰마감되었습니다. 7기 오픈 알림 신청하고 최저가에 수강하세요! 오픈 알림 신청 실무와 가까워지는 Node.js백엔드 개발 (feat. TypeScript) 비교적 쉬운 기술 스택으로 백엔드 구조의 핵심을 짚어보 school.programmers.co.kr 드디어 기다리던 백엔드 강의가 시작됬다! 인원수는 30명정도로 다같이 모여서 줌으로 첫주차 OT를 마쳣다. 첫주차에는 가벼운 백엔드의 설명 사용하게 될 기술들과 코드리뷰 방식 그리고 강사님들의 소개와 코스의 안내등을 같이 진행하게 되었다. 사용하는 기술 스택 TypeS..

프로그래머스와 다르게 엘리스 플렛폼의 경우 기존 백준과 비슷하게 입 출력을 직접 조절하던지 명령어로 관리해야 되는 것이 있다. 줄바꿈 , 출력 , ' " ` 등 백틱 콤마정리등 몇가지 따로 기억해둬야 될 것들이 있어서 시험 전 한번 훌터보기 위해 정리한다. 1. 출력 시 줄바꿈 // 출력을 원하는 결과값 400 bus like // 입력시 "400\nbus\nlike" 먼저 줄바꿈의 경우 \n ->백스페이스 아래에 있는 || (OR)키 버튼을 그냥 누르면 된다. 1 - 1. \n이 포함된 값을 정제하기 // 출력을 원하는 결과값 const input = [ 'elice', 'rabbit', 'cheshire', 'dood', 'hatter' ] // 입력 값 elice rabbit cheshire doo..

프로그래머스 - 신규 아이디 추천 [정규 표현식 , replace] 사용한 메소드 replace 정규식 하단부에서 개선된 코드와 활용법에 대해 작성하겠다. 최종적으로 제출한 코드 function solution(new_id) { var answer = ''; new_id = new_id.toLowerCase(); new_id = new_id.. zerosial.tistory.com 이전 정규표현식의 활용 편에서 적었던 글의 연장선상으로 좀더 활용적인 정규 표현식을 적어본다. 알고리즘 (프로그래머스) 1lv을 거의 완료한 시점에서 느끼는 점은 결국 어떠한 입력값 (xx던 xxx던)이 주어지면 이러한 배열값을들 정렬 , 처리 , 가공해서 내가 원하는 자료화 한 다음 그 자료들을 for if 등의 반복문과 조..

https://programmers.co.kr/learn/courses/30/lessons/81301 코딩테스트 연습 - 숫자 문자열과 영단어 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자 programmers.co.kr 변경점 금일부터 알고리즘 문제풀이 (공부)중 알아두면 좋은 방식 , 참고할만한 사용법을 중심으로 차후에 다시 활용할 수 있는 글을 작성하고자 한다 코드 function solution(s) { let numbers = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "n..

사용한 메소드 replace 정규식 하단부에서 개선된 코드와 활용법에 대해 작성하겠다. 최종적으로 제출한 코드 function solution(new_id) { var answer = ''; new_id = new_id.toLowerCase(); new_id = new_id.replace(/[^a-z0-9-_.]/g, ""); let id = ""; for(let i = 0 ; i < new_id.length ; i++){ if(new_id[i] === "." && new_id[i] === new_id[i+1]) { }else{ id += new_id[i]; } } new_id = id; if(new_id[0] === ".") new_id = new_id.slice(1); if(new_id.length ..