본문 바로가기
반응형

개발이야기37

[React] 사진첩 게시판 저번에 작업했던 vue2_photo_board와 컴포넌트 구조, 스타일링, 변수, 함수를 최대한 동을하게 구성하여 해서 진행하였다. 목차 1. 환경 2. 반응형 화면 3. 기능 4. 프로젝트 구조 5. 컴포넌트 구조 6. 통신과 랜더링 7. 전체소스 1. 환경 node v18.12.1 react v18 (useContext, react-query) 2. 반응형 화면 3. 기능 1. 사진 상세보기 (모달창 활성화) 2. 페이징 처리 3. 상세페이지 닫기( 모달창 비활성화) 4. 프로젝트 구조 src ⌞ api ⌞ board.js : context방식의 api 인스턴스 ⌞ boardClient.js : axios로 직접적인 통신 ⌞ components ⌞ layout ⌞ImageLoading.jsx : 이미.. 2023. 1. 4.
[Vue] 사진첩 게시판 목차 1. 환경 2. 반응형 화면 3. 기능 4. 프로젝트 구조 5. 컴포넌트 구조 6. 주요 메서드 7. 전체소스 1. 환경 node v16.15.0 or v18.12.0 vue2 vue/cli 5.0.8 2. 반응형 화면 3. 기능 1. 사진 상세보기 (모달창 활성화) 2. 페이징 처리 3. 요청 게시물 개수 설정 (설정값 로컬스토리지에 저장) 4. 상세페이지 닫기( 모달창 비활성화) 4. 프로젝트 구조 src ⌞ api ⌞ ContactsAPI.ts : API 호출 및 데이터 반환. ⌞ components ⌞ Layout ⌞Loading.vue : 로딩 애니메이션 ⌞ Item.vue : 게시물1개에 대한 컴포넌트 ⌞ List.vue : 게시물의 목록 컴포넌트 ⌞ Modal.vue : 모달창 컴포넌트.. 2022. 11. 17.
[React] 이벤트 핸들링 HTML과 비교 리액트가 만들어주는 가상DOM Element와 HTML DOM Element 에서 사용되는 이벤트 핸들러의 사용법을 비교해 보았다. 1. onClick 이벤트 HTML HTML onClick function htmlHandleClick() { console.log('You clicked onClick.'); } 일반적인 함수 호출형 방식 React React onClick function handleClick() { console.log('You clicked onClick.'); } 리액트에서는 onClick={ } 안에서 자바스크립트 함수를 동작시킬 수 있는데, 함수 선언 으로 함수의 이름으로 연결해 주는 방식을 사용한다. 만약 onClick={ handleClick() } 처럼 함수 호출식으로 사용.. 2022. 11. 10.
견적서 설정화면 보호되어 있는 글 입니다. 2022. 11. 1.
언매니지드 언어와 매니지드 언어 프로그래밍 언어는 메모리 관리 방식에 따라 언매니지드 언어와 매니지드 언어로 분류할 수 있다. C언어 같은 언매니지드 언어는 개발자가 명시적으로 메모리를 할당하고 해제하기 위해 malloc()과 free()같은 저수준(low-level)메모리 제어 기능을 제공한다. 언매니지드 언어는 메모리 제어를 개발자가 주도적으로 할 수 있으므로 개발자의 역량에 따라 최적의 성능을 확보할 수 있지만 그 반대의 경우 치명적 오류를 생산할 가능성도 있다. 자바스크립트 같은 매니지드 언어는 메모리의 할당 및 해제를 위한 메모리 관리 기능을 언어 차원에서 담당하고, 개발자가의 직업적인 메모리 제어를 허용하지 않는다. 즉, 개발자가 명시적으로 메모리를 할당하고 해제할 수 없다. 더 이상 사용하지 않는 메모리의 해제는 가비지 콜.. 2022. 9. 29.
인터프리터 언어, 컴파일러 언어 비교 컴파일러 언어 인터피리터 언어 코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신 코드로 변환한 후 실행한다. 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간 코드인 바이트코드로 변환한 후 실행한다. 실행 파일을 생성한다. 실행 파일을 생성하지 않는다. 컴파일 단계와 실행 단계가 분리되어 있다. 명시적인 컴파일 단계를 거치고, 명시적으로 실행 파일을 실행한다. 인터프리트 단계와 실행 단계가 분리되어 있지 않다. 인터프리터는 한 줄씩 바이트코드로 변환하고 즉시 실행한다. 실행에 앞서 컴파일은 단 한번 수행된다. 코드가 실행될 때마다 인터프리트 과정이 반복 수행된다. 컴파일 실행 단계가 분리되어 있음으로 코드 실행 속도가 빠르다. 인터프리트 단계와 실행 단계가 분리되어 있지 않고 .. 2022. 9. 29.
HTTPS HTTP의 취약점 1. 암호화 되지 않은 통신이기 때문에 도청 가능 HTTP를 사용한 리퀘스트, 리스폰스 통신 내용은 암호화 되지 않고 평문으로 통신하게 된다. 2. 통신 대상을 확인하지 않기 때문에 위장 가능 HTTP에 의한 통신은 상대가 누구인지 확인하는 처리가 없기 때문에 누구든지 리퀘스트를 보낼수 있고, 리퀘스트가 오면 상대가 누구든지 리스폰스를 반환하게 된다. 3. 완전성을 증명할 수 없기 때문에 변조 가능 리퀘스트, 리스폰스가 발신 된 후에 상대가 수신하는 사이에 메시지 내용이 변조되어도 알수가 없다. HTTP + 암호화 + 인증 + 완전성 보조 == HTTPS HTTPS HTTP통신을 담당하는 소켓이 SSL(Secure Socket Layer) 또는 TLS(Transport Layer Sec.. 2022. 9. 27.
HTTP헤더 필드 General Header Fields 헤더 필드 명 설명 Cache-Control 캐시 동작 지정 Connection Hop-by-hop 헤더, 커넥션 관리 Date 메시지 생성 날짜 Pragma 메시지 제어 Trailer 메시지 끝에 있는 헤더(청크전송 인코딩) Upgrade 다른 프로토콜에 업그레이드 Via 프록시 서버에 관한 정보 Warring 에러 통지 Request Header Fields 헤더 필드명 설명 Accept 유저 에이전트가 처리 가능한 미디어 타입 Accept-Charset 문자셋 우선 순위 Accept-Encoding 콘텐츠 인코딩 우선 순위 Accept-Language 자연어 우선 순위 Authorization 웹 인증을 위한 정보 Expect 서버에 대한 특정 동작의 기대 F.. 2022. 9. 27.
TCP/IP의 계층(Layer) 구조 - 애플리케이션 계층 애플리케이션 계층은 사용자들에게 직접적으로 제공되는 프로토콜이 준비되는 계층 (HTTP, FTP, DNS, SMTP, TELNET...등등) - 트랜스포트 계층 트랜스포트 계층은 네트워크로 접속되어 있는 서버와 클라이언트의 데이터 흐름을 담당한다. TCP, UDP 두가지 프로토콜이 준비되어 있다. TCP(Transmission Control Protocol) 신뢰성있는 바이트 스트림 서비스, 용량이 큰 데이터를 보내기 쉽게 TCP 세그먼트라고 불리는 단위 패킷으로 작게 분해 하여 수신측에 전송 하고, 정확하게 전송 됐는지 확인하는 역할을 한다. Three way handshaking 패킷 데이터가 정확하게 전송 됐는지 확인하기 위한 기능, 1. 송신측에서는 최초 SYN 플래그로 수신.. 2022. 9. 27.
[VanilaJs] 게시판 만들기 (5) - 댓글 조회 및 등록 1. 댓글 데이터 구조 댓글 데이터 구조는 게시물 1개에서 commentList 배열 형식으로 진행 하였다. { "no":1, "title":"Bird of Paradise", "content":"Change Packing Material on Right Foot", "commentList": [ { "no": 1, "name": "작성자1", "comment": "ㅋㅋ", "date": "2022-02-20" }, { "no": 2, "name": "작성자2", "comment": "ㅎㅎㅎ", "date": "2022-02-20" } ], "date":"2021-07-12" } 2. 댓글 개수 출력 댓글이 존재하면 게시물 제목 옆에 댓글의 개수가 출력되게 된다. //로컬스토리지의 내용을 읽어서 테이블에.. 2022. 7. 7.
반응형

티스토리툴바