복잡한뇌구조마냥

0. 와이어프레임 - Figma를 이용한 와이어프레임 구성 * 링크 공유 https://www.figma.com/file/Bw9QKCyhOGq3JgxhAP04QU/Untitled?node-id=0%3A1 Figma Created with Figma www.figma.com 1. 프로젝트 개요 올바른 약속 문화 만들기 상호 합의간에 조건을 걸고 조건을 지키면 서로 패널티가 없으나, 한쪽 상대방이 어기면 패널티를 지급하는 사이트 자신과의 약속, 상대방과의 약속, 팀과의 약속으로 구분하여 다양한 약속을 처리하는 기능 2. 프로젝트 계획 ( 9/16 ~ 10/28 ) 1주차 API설계, 화면구성 구체화 아이디어 회의 메인기능 구현 시작 2주차 우선순위 기능 구현 시작 기능구현 점검 및 추가 기능 구현 MVP 발..

0. 개발 목표 - 와이어프레임 대신 어플리케이션을 캡쳐하여 최대한 비슷하게 구현하자 정함 - 메인기능인 마켓 거래를 위한 홈, 상세보기, 거래신청, 채팅 - 동네생활은 간단한 커뮤니티, 댓글 - 내근처는 위치기반으로 잡아야해서 시간배분상 불가능으로 판단하여 포기 - 채팅은 메인 거래기능이랑 연동하여 동작하도록 설정 - 마이페이지는 프로필, 판매내역, 구매내역, 관심목록을 만들어서 좋아요, 구매 프로세스, 판매 프로세스에 따라 구현 1. API 설계 회원가입 로그인 전화번호 중복 검사 닉네임 중복 검사 주소등록 로그아웃 게시글 작성 게시글 수정 게시글 삭제 게시글 조회 게시글 전체 조회 사진 업로드 수정사진 업로드 상품상태변경 (판매중, 예약중)_ 상품상태변경 (거래완료, 나눔완료)_ 판매글id당 채팅방..

0. 와이어프레임 1. FormData를 이용한 사진등록 // 확장자 정규식을 통한 관리 가능 var fileForm = /(.*?)\.(jpg|jpeg|png|gif|bmp|pdf)$/; const onChange = async(e) => { // input file에서 선택된 file을 img로 지정 const img = e.target.files[0]; // 이미지 파일이 아니면 이후 동작을 생략하고 경고문구 출력 if(!img.name.match(fileForm)){ alert("이미지파일(.jpg, .png, .bmp)만 올려주세요.") return } // 폼데이터 형식 선언 const formData = new FormData(); // api에서 요구하는 key값과 value값 지정 (ke..

49.javascript ES6에 추가된 것은 무엇인가요? - 1. Block scope 변수 - let, const - 2. String Literal - ` ${변수}` 기법 - 3. 객체 비구조화 객체의 특정 값을 받아오는 방식으로 작성 가능 ex ) const {id} = useParams(); es5 : useParams().id - 4. 프로퍼티 초기화 단축 : key, value가 동일 시 생략하는 기능 - 5. for in, for of 기법 - 6. 화살표 함수 (가독성 증가 | this 바인딩의 차이, 생성자 함수 사용x, arguments객체 생성x, 호이스팅x) 50. ES6에서 화살표 함수를 언제 쓰고 왜 쓰는지 설명해보세요 - 1. 코드의 간결성을 위해서 - 2. 콜백 함수 th..

37. Flexbox 사용해봤나요? 사용해봤다면 어떻게 사용했나요? - 반응형 웹을 제작하면서 헤더나 푸터의 요소의 수직정렬을 위해 사용 경험 장바구니 페이지를 연습삼아 만들어 본 경험이 있는데 요소를 수직에서 관리할 때 사용 용이 38. css margin, padding 각각 어떻게 사용하며, 차이점은 무엇인지 설명해보세요 - margin과 padding은 css 박스모델 기준으로 content를 감싸는 것은 padding, border을 감싸는 것은 margin으로 border기준 내부와 외부의 차이가 있음 39. position을 어떻게 적용했는지 설명해보세요 - static, relative, absolute, fixed설명 40. Restful API에 대해서 아는대로 설명해보세요 - Rest..

25. 브라우저 렌더링 과정에 대해 설명해보세요 - 브라우저 url을 통해 dns서버에 연결된 해당 ip로 가서 protocol 방식을 통해 통신하여 데이터를 불러옴 (여기가 핵심) → 데이터를 파싱하여 DOM트리를 불러와 화면을 구성 → 중간중간 css 형태 구성 → 자바스크립트는 후에 실행 26. 웹팩과 바벨에 대해 설명해보세요 - 웹팩 - 파일을 하나로 만들어주는 모듈 번들러 - 바벨 - 호환되지않는 문법을 최적화하게 만들어주는 트랜스 파일러 27. CSR과 SSR의 차이가 무엇인가요? - CSR - DOM 형식으로 클라이언트 기반으로 화면구성 - SSR - 서버에서 html을 변경하는 등 구성을 다루는 주체가 서버인 렌더링 28. CORS가 무엇이고 이를 처리해본 경험을 말씀해주세요 - CORS란..

13. React와 Vue, Angular의 차이점은 무엇인가요? - React - 자바스크립드 기반, 가상돔, JSX, 단방향 바인딩 - Vue - 타입스크립트 지원, 가상돔, 단방향, 양방향 바인딩 지원 - Angular - 타입스크립트, 실제돔, 양방향 바인딩 14.React에서 JSX 문법이 어떻게 사용되나요? - virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야한다는 규칙이있다. - 자바스크립트 표현식을 쓰려면 코드를 {}로 감싸주면 된다. - if, for문 대신에 삼항연산자 or map함수 허용 - 인라인스타일 적용시 카멜문법 사용 필요 15. React의 렌더링 성능 향상을 위해 어떻게 해야 하나요? - 불필..

1. var, let, const 차이를 설명해보세요 - var은 ES6이전 문법으로 지역과 함수레벨의 스코프를 지니고 있으며, let과 const는 ES6 문법에 추가된 내용으로 블록레벨의 스코프를 지니고 있습니다. let과 const의 차이는 const는 선언과 동시에 초기화를 해줘야합니다. 2. 이벤트 버블링과 캡처링에 대해 설명해보세요 - 버블링은 하위 요소에서 상위요소로 이벤트가 올라가는 과정을 얘기하고, 캡처링은 반대로 상위에서 하위로 내려가는 반응을 합니다. 버블링을 막는 방법은 stopPropagation을 활용하여 버블링이 더이상 퍼지지 않도록 할 수 있습니다. 버블링을 사용하는 이유는 하위 요소를 눌렀을 때 상위요소로 올라가기 때문에 이벤트 위임을 사용하기 용이합니다. 따라서 상위 요소..