분류 전체보기73 구조 분해 할당(Destructuring assignment) 팀원 중 한명이 버튼컴포넌트를 담당하였는데, 여러가지 상황에서 쓰이는 공통컴포넌트다 보니 매개변수가 엄청나게 많아 지는 상황이 발생하였다. 멘토님께서 구조 분해 할당을 공부해서 적용해보라는 조언을 해주셔서 자세히 알아보았다. const SelectedButton = ({ clicked, checked, id, ...props }) => { 모든 상황에서 꼭 들어가는 매개변수만 적어주고(clicked, checkd, id) 나머지 기타 상황에서 필요한 매개변수는 ' . . . props'로 대체해 준 코드이다. 구조 분해 할당 객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조이다. 키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용한.. 2023. 7. 23. position: absolute의 사용법 postion: absolute를 사용하면 그 요소를 다른 요소들에 영향받지 않고 원하는 자리에 고정시킬 수 있다. 부모요소 없이 사용하게 되면 뷰포인트 전체에서 자리를 잡게 된다. 부모요소에 postion: relative를 써서 postion: absolute를 사용하는 요소를 묶어주면(가둬주면) 부모요소 안에서만 위치하게 된다. 요약 : absolute를 사용하려면 부모요소에 postion:relative를 써서 absolute를 가둬주는 것이 대부분의 상황에서 좋다. 2023. 7. 21. overflow, text-overflow, white-space 텍스트가 길어질 경우 뒷부분을 '...' 으로 남기는 방법을 기억해두면 좋을 것 같다. ... overfolw: hidden; // 내용이 Container(Wrapper)를 넘어갈 경우 숨김 text-overflow: ellipsis; // 넘어간 텍스트를 '...'으로 표시 white-spce: nowrap; // 텍스트가 길어져도 한 줄에 나타나도록 설정 ... 2023. 7. 18. 어떤 이미지 포맷을 써야할까? PNG vs SVG 이번 메인프로젝트에서 메인페이지, 헤더, 푸터 등등 UI 구성을 위해 이미지를 써야 하는 상황이 많았다. 팀장님의 추천대로 PNG로 이미지를 다운받아서 사용하고 있었는데, 멘토님께서는 SVG을 사용하는 것을 추천하셨다. 사실, 메인프로젝트 전 프리프로젝트에서는 모든 이미지를 SVG로 써 왔었고 장점 또한 대충은 알고 있었다. 이번 기회를 통해 웹개발에서 많이 쓰이는 PNG와 SVG을 조금 더 자세히 알아보고 장단점을 제대로 알아보고 넘어가고자 한다. (+JPG) 1. JPG : 개발에 관심이 없던 '일반인' 시절 가장 많이 사용하였던 이미지 포맷이다. 언제부터인지, 왜 그랬는지는 모르겠지만, 항상 JPG로 저장하고 사용하였었다. 사진과 같은 다양하게 연결되는 톤을 가진 이미지에 적합하다. 사이즈를 줄이기.. 2023. 7. 17. async와 await 자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 비동기 처리가 기본이다. 비동기 처리는 그 결과가 언제 반환될 지 명확하게 알 수 없기 때문에 동기식으로 처리하려면 동기적인 기법들을 사용하여야한다. 대표적인 동기식 처리방식 중에는 callback, promise 등이 있다. async와 await는 promise를 사용한 코드보다 훨씬 직관적이기 때문에, promise를 대신하여 사용한다. async와 await 사용법 사용법은 간단하다. function 앞에 async를 붙여주고, promise 객체 앞에 await를 붙여주면 된다. async function getApple() { await delay(); return "apple"; } async의 예외처리 방법 promise 객체를 사용하.. 2023. 7. 16. HTML/CSS 네이밍 시에 Wrapper와 Container 차이 메인프로젝트를 진행하면서 팀원들의 코드를 리뷰하다보니, 나 포함 모든 팀원들이 container와 wrapper를 사용함에 있어서 큰 규칙없이 혼용해서 사용하고 있다는걸 문득 깨닫게 되었다. 대충 맞게 쓰고는 있지만, 명확한 기준은 없이 쓰는 느낌이 강했다. 정확한 사용법을 알고 싶어서 찾아보니 스택오버플로우에 토론 게시글이 있었다. https://stackoverflow.com/questions/4059163/css-language-speak-container-vs-wrapper CSS Language Speak: Container vs Wrapper? What's the difference between container and wrapper? And what is meant by each? stac.. 2023. 7. 13. 이전 1 2 3 4 5 ··· 13 다음
