본문 바로가기
728x90

코딩40

Js복습 pt.4 API와 이벤트 버블링, 캡쳐링 오래간만에 글 저장 안 하고 신나게 쓰다가 음악 바꾸려고 뒤로 가기 잘못 눌러서 두 번째 쓴다 ^_^ 몸뚱이야 미안해 뇌가 실수했어. 1.API(어플리케이션 프로그래밍 인터페이스) 맨 마지막에 인터페이스는 무엇일까 UI 유저 인터페이스도 많이 들어봤는데... 상호(사물-사물 또는 사물-인간 인간-인간) 간의 소통을 위해 만들어진 접점이라고 생각하면 편하다.리모컨을 생각해보면, 우리가 TV보고 음량을 키워!라고 한다 해서 음량은 커지지 않을 것이다.(음성인식 배제)리모컨 음량 버튼을 누르면 소리가 커지고, 여기서 리모컨이 인터페이스의 기능을 한다. (하드웨어적인 인터페이스)+ 배달앱 같은 경우는 소프트웨어 인터페이스라고보면 된다. + 위에서 내가 궁금한 UI의 경우 사용자가 사용하는 인터페이스이다. 인터페.. 2022. 7. 26.
Js복습 pt.3 this 최근에 잠들기 전 영화를 가끔 보곤 한다. 하나에 오래 집중 못하고, 금세 졸려서 이용하는 방법이다. 강의에서의 코드 캡쳐본은 내가 듣는 강의인 짐코딩에서 가져왔다. https://www.youtube.com/channel/UCZ30aWiMw5C8mGcESlAGQbA 짐코딩의 CODING GYM 실용적인 코딩채널 CODING GYM 💪🏋️‍♀️ 【짐코딩 클럽 온라인 강의 🎉】 👉 https://edu.gymcoding.co 【광고 및 제휴 문의 😙】 👉 bruce.lean17@gmail.com 【커피 한잔 후원 🙂】 👉 https://toon.at/donate www.youtube.com 내 기억이 맞다면 과거 await async, arrow function을 복습하는 과정 중에 this를 봤었다. 그.. 2022. 7. 24.
Js복습 pt.2 script, defer, async 요번 시간에 자바스크립트 코드를 html에 가져올 때 사용하는 script 그리고 defer async에 대해서 배워보자. 참고로 async await 같은 동기, 비동기 처리에관해 한번 정리한 경험이 있는 터라 밑의 글을 참고하자. 2022.06.23 - [코딩/REACT] - React 부록 async, await, arrow function(1편) React 부록 async, await, arrow function(1편) 이제껏 강의를 들으면서 잘 모르고 넘어간 것들 제목에 쓰여있는 3가지를 오늘 정리 + 이해해 볼 것이고 지금부터는 내가 직접 코드 작성하고, 파일도 분할해야 하기에 어떤 기능을 위해 쓰였는 minkyunoori.tistory.com html 파일을 보통 위에서 아래로 파싱하는데 s.. 2022. 7. 20.
Js복습 pt.1 DOM과 BOM 리액트 중단 선언 \(´◓Д◔`)/한지 이주일 물론 말이 선언이지 Slider랑 slick에 대해서 검색하는데, 새끼손톱 하나 삐져나온 걸 보면 손톱 전부 깍듯이 내가 모자란 부분 + 보충하고 넘어가고 싶은 부분이 여러 개 보였다. 리액트를 배우다 보니 내가 자바스크립트를 무지한 상태로 넘어온 게 아닌가 싶다. 프론트엔드에 있어 필요한 내용이 담긴 강의 정리 + 새로 산 책인 도마뱀 자바스크립트를 차차 리뷰해보려 한다. 언제까지 작성하고 언제 또 중단하고 리액트로 넘어갈지는 모르겠다. 그리고 css도 좀 제대로 정리하고 배우고 넘어가려 한다. 이것도 언제 바뀔지 모름 ヘ(。□°)ヘ 내가 계속 배우고 있는 자바스크립트는 html을 조작하기 위해 만들어진 언어이다. 이렇게 조작한 html은 브라우저에 표현이.. 2022. 7. 20.
React 부록 async, await, arrow function(2편) 오늘은 arrow function에 대해서 이해해보려 한다. 대학생활을 하며 c, c++, python 등 여러 프로그래밍 언어들을 배우면서 함수 선언은 function 민규() ~~ 이런식으로 선언하다가 강의를 들으면서 arrow function을 애용하는 것을 많이 봤다. 실제로 지금은 arrow function을 쓰는 것이 더 간단하고, 가독성도 좋게 느껴질 정도로 익숙해졌지만, 구조라던가 왜 여기선 이게 쓰이는지 저기선 저게 쓰이는지 정확히 알 필요가 있음을 느껴 정리를 한다. Arrow function = () = > { } 기존의 함수와는 다른 방법으로 함수를 선언한다. 따라오는 장점들, 단점들, 제한사항에 대하여 알아보자. 1. 보통 함수 선언 방법 - 이거 말고도 다양한 방법이 있다. fu.. 2022. 6. 24.
React 부록 async, await, arrow function(1편) 이제껏 강의를 들으면서 잘 모르고 넘어간 것들 제목에 쓰여있는 3가지를 오늘 정리 + 이해해 볼 것이고 지금부터는 내가 직접 코드 작성하고, 파일도 분할해야 하기에 어떤 기능을 위해 쓰였는지 왜 이렇게 작성되었는지 알아야 해서 정리한다 가보자. 아 그리고 여러 블로그, 공식 사이트를 참조했지만 대부분의 내용은 이 두 분의 글을 통해 이해했다. 여러 가지 프런트엔드 관련 좋은 글이 많으니 심심하거나 궁금한 게 있으면 들어가서 보도록 하자. https://joshua1988.github.io/ 캡틴판교 joshua1988.github.io https://velog.io/@change change (Change) - velog velog.io async, await를 이해하려면 비동기 처리, promise나인.. 2022. 6. 23.
~0615 REACT 강의(완) 앞으로의 계획 강의를 다 들었다. 들어서 리액트를 마스터했냐? 절~대 아니다 알바를 시작할 때 불편할 거 같아서 옆에서 지켜보세요~하면 다음주에 혼자 일하면 하나도 기억 안 나고 어렵다. 이런 너낌으로 나도 강의 자체가 클론 코딩인 만큼 보고 배운 부분은 머릿속에 어느 정도 넣은 상태이고, 이걸 다시 내 입맛에 정리해보면서 만드는 시간이 필요하다. 어떤식으로? 내가 한 강의의 최종 목적은 넷플릭스 같은 영화 사이트 만들기 많은 영화들을 사람들의 입맛에 맞게 + 보기 좋게 정리한 것이 많은 OTT사이트들의 특징이다. 이 정도는 아니어도 비슷하게끔 만들어 볼 것이다. 내 사이트의 현재 상태는? 흰 도화지 같은 상태인 이 페이지를 내 입맛에 맞게 + OTT페이지답게 만들어 볼 것이다. 중간중간 무슨 작업했는지 올릴 수도 있.. 2022. 6. 15.
~0613 React Publishing 칠전팔기(七顚八起) 퍼블리싱이 하도 안돼서 이 방법, 저 방법 끙끙 대가가 겨우 해결해 글을 작성한다. 고생했어 본인 토닥 이번 시간에 해볼 건 내가 만든 사이트 배포하기 기껏 만들었는데 남들이 보게끔 만들어야 한다. 오늘은 배포하는 방법을 알아보려 한다. 가장 먼저 할건 gh-pages 설치하기 터미널 창에 npm i gh-pages입력 우리 결과물을 깃허브 페이지에 업로드하게끔 해준다. (우리가 만든 파일들 gh-pages의 branch에 publish) 두번째 여러 가지 정보들이 있는 package.json으로 이동해보면 scripts에 build라는 것이 보이는데 build를 실행시 우리의 웹사이트의 production ready code(코드 압축 + 최적화)를 생성하게 됨 즉 브라우저가 인식하기에 최적화된 코드로.. 2022. 6. 14.
~0602 React - parameter 풍비박산 어제, 수업을 마치고 10시 어간이 되어 나가 보니, 집이 물바다가 됐다. 처음에 냉장고 밑에서 물이 새서 아 냉장고 문제겠거니 조금 물 막고, 내일 사람을 불러야겠다. 했는데.. 그랬는데 상황이 심각해져서 무슨 여름시즌 한정 이벤트인지 물이 계속 나와서 거실을 흥건히 적셨다. 집이 1층인게 죄인지는 몰라도 오늘 아침에 배수구 수리업체에서 오셔서 조치해주고 가셨다. 아직도 쿰쿰한 냄새가 난다 하필 아버지 내려가셨을 때 이런 일이 벌어지다니 난 역시 아직 얼라야. 이런 나를 향한 세상의 억까 속에서도 글을 작성해보자. 고 react-router는 동적 url을 지원한다. (url에 변수를 투입 가능) 이를 통해 저번 시간 발만 담갔던 Detail페이지 구현이 가능해졌다. 영화 페이지에서 제목을 클릭하면 그.. 2022. 6. 3.
728x90