운동과 개발

한줄요약 : 천천히 읽으니, 이해가 된다. 이해가되니, 재밌다. 0. 들어가며... 이번 글은 스터기 2주차 회고록이다. [6.18 -6.24] 진행 이번 글은 여러가지 일로 스케줄이 빠듯해서 느낌점과 생각정리 위주로 짧게 글을 마무리 하겠다. 첫번쨰, 자바스크립트, 프로그래밍 자체의 기본 개념들에대한 이해도가 높아지는걸 느꼈다. 우선 혼자 1회독할때, 이해안되고 넘어갔던 부분들이, (물론 빠르게 전체를 훑자는 느낌으로 대충 읽긴했지만) 라이브세션 시간이 낭비되지 않기 위해 천천히 읽고, 이해가 안된다 싶으면, 다시읽기를 반복하니 깊이있게 이해하진 못했겠지만, 책 내용자체는 대부분 이해가 됬다. ( 현재 18장까지 읽었다. 사실 이제 진짜 어려운것 , 예를들어 prototype 개념이 기다리고 있다는걸 ..

한줄요약 : 남에게 설명하지 못하는 지식은 진짜 아는 지식이 아니다. 0. 들어가며... 이번 제로베이스 프론트엔드스쿨 11주차부터 이웅모저자님과 함께하는 모던 자바스크립트 Deep Dive 스터디에 참여할 수 있는 기회가 주어져서, 기회를 잡고 참여하게되었다. 이번 글은 스터디 1주차 회고록이다. [6.14 작성을 시작 - 6.17까지 수정할 예정] 기본적으로 이 과정은 2달(8주)간 모던자바스크립트 Deep Dive책을 1회독을 하며 저자및 팀원들과 토의하며 공부하는 과정이다. 1. 첫 라이브 세션 [6.13(화) pm2:00 - pm5:00] 첫 라이브 세션에서는 기본적인 OT를 진행했다. 라이브 세션중 강사님의 요구사항? 은 다음과같다. 1. 카메라는 무조건 키기 : 우리의 목적은 남에게 잘보이기..

기본 code 세팅 .carousel-wrapper { overflow: hidden; width: 90%; margin: auto; } .carousel-wrapper * { box-sizing: border-box; } .carousel { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .carousel_item { opacity: 0; position: absolute; top: 0; width: 100%; margin: auto; padding: 1rem 4rem; z-index: 100; transition: transform 0.5s, opacity 0...

## infinite scroll - 무한스크롤 구현 - 컨텐츠의 끝이 화면 끝에 닿으면 api가 호출되게 구현 - todolist 와 달리 외부 api 연동 - fetch, async, await ## API 연동 https://jsonplaceholder.typicode.com/ - 프로토타이핑용 api - /posts 활용 - [json-server](https://www.npmjs.com/package/json-server) 만든 곳에서 만들었기 때문에 사용 방법은 json-server와 동일 1. 기본 html 구성 API 연동 https://jsonplaceholder.typicode.com/ 이 사이트의 api는 test나 prototyping을 위한 API이다. 사이트에 들어가서 Resou..

드래그 앤 드롭을 직접 구현하며, 어떤 기능 등을 작성해야 되는지에 대해서 작성 0. 드래그 앤 드롭이란? 1. 드래그 앤 드롭은 사용자 인터페이스 디자인과 상호작용에서 일반적으로 사용되는 기술이다. 2. 이는 마우스나 터치 기반 장치를 사용하여 객체를 클릭하고 드래그하여 다른 위치로 이동시키는 것을 의미한다. 3. 드래그 앤 드롭은 사용자가 콘텐츠를 쉽게 이동하고 조작할 수 있도록 도와주는 직관적인 방법이다. 4. 드래그 앤 드롭은 웹 애플리케이션, 데스크톱 애플리케이션, 모바일 앱 등 다양한 플랫폼에서 사용된다. 일반적으로 드래그 앤 드롭은 객체나 아이콘을 선택한 후 원하는 위치로 드래그하여 놓는 것으로 구현된다. 이를 통해 파일 및 폴더의 이동, 이미지 및 텍스트의 드래그 앤 드롭 등 다양한 작업을..

[RESTful API] 해당 프로토콜의 정의와 사용하는 이유에 대해서 작성 및 적용 방법 등에 대해서 작성 1. REST API 의 정의? (Representational State Transfer API) REST API란 REST를 기반으로 만들어진 API를 의미한다. 1-1. REST에대해 먼저 알아보기 REST는 (Representational State Transfer)의 약자로 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다. 즉, 자원(resource)의 표현(representation)에 의한 상태 전달을 뜻한다. **잠깐 용어정리** 자원 : 해당 소프트웨어가 관리하는 모든 것 ( 문서, 그림, 데이터, 해당 소프트웨어 자체 등 ) 표현 : 그 자..

1. HTTP와 HTTPS의 차이점 차이점 HTTP HTTPS 1. 보안 HTTP 메시지는 일반 텍스트이므로, 권한이 없는 당사자가 인터넷을 통해 쉽게 액세스하고 읽을 수 있다. 따라서 누군가가 네트워크 상에서 데이터를 가로채면 내용을 쉽게 확인할 수 있다. HTTPS는 보안 소켓 계층(SSL 또는 TLS)을 통해 데이터를 암호화하여 전송한다. 이는 데이터의 기밀성을 유지하고, 가로채기를 방지한다. 2. 인증서 인증서를 사용하지 않기 때문에, 서버의 신원을 확인할 수 없다. 따라서 공격자가 중간에 가로채서 가짜 서버로 위장하는 것을 막을 수 없다. 서버 인증서를 사용하여 서버의 신원을 확인한다. 서버 인증서는 신뢰할 수 있는 제3자 기관(CA, Certificate Authority)에 의해 발급되며, ..

0.들어가며... 제로베이스 프론트엔드 스쿨을 들을까 독할을 계속 진행할까 고민하던 시기가 얼마 안된것 같은데 어느새 제로베이스 커리큘럼 8주차의 마지막날이 다가와 5주차 ~ 8주차까지의 기록을 남기려고한다. 이전 4주간의 기록이 궁금하다면 이 글을.. https://adeveloperstory.tistory.com/entry/%EC%A0%9C%EB%A1%9C%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EC%B2%AB-4%EC%A3%BC-%EA%B0%84%EC%9D%98-%EA%B8%B0%EB%A1%9D [제로베이스] 첫 4주 간의 기록 지난 4주간의 기록 코딩테스트 알고리즘 / CS 지식 / 블로그작성 / html / css / javascript 1. 코딩테스트 (알고리즘 공부) 와 첫 연습코..

0. 들어가며... 브라우저에는 웹사이트에서 관리할 수 있는 저장소들이 존재한다. 이 저장소는 html5부터 제공하는 특정 데이터를 서버가 아니라 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 기능이다. 즉, 사용자의 컴퓨터에 있으며, JavaScript를 통한 접근이 가능하다. 브라우저가 가지고 있는 저장소는 다음과 같다. 1. LocalStorage & Session Storage 2. Cookie 3. IndexedDB 4. Memory & Cahce 이중에서 LocalStorage & Session Storage에 대해 알아보겠다. 1. LocalStorage & Session Storage의 기본 1. localStorage와 SessionStorage는 같은 인터페이스를 공유한다. 인터페..

0. 들어가며... CSS 의 Flexbox와 grid는 웹 페이지의 레이아웃을 만드는 데 사용할 수 있는 (예시로, float와 비교해서) 비교적 최신 기술이다. (flexbox는 2012년등장, 2017년 10월 17일 Microsoft Edge 브라우저는 CSS Grid 구현을 출시 했다.) flexbox와 grid의 사용법에 대해 자세히 정리된 글들은 이미 많이 있으므로 둘을 비교하며 어떤상황에서 어떤 기술을 사용할지에 대한 고민을 담은 글이고, 이에 대해서는 정답은 없다고 생각한다. 혹시나 flexbox와 grid에 대해 아직 잘 모르겠다면, 제대로 공부해보고 싶다면 아래 사이트(1분코딩) 에 들어가서 천천히 익혀보기를 추천한다. (내가 도움을 많이 받은 사이트이다.) https://studio..