본문 바로가기
CSS 애니메이션 사이트 https://youtu.be/OWaHfpHxgb8?si=NxfAguBRGPu8U2Lx(사용방법)https://animista.net/play Animista - On-Demand CSS Animations LibraryAnimista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.animista.net(사이트) 2024. 9. 3.
알아두면 좋은 자바스크립트 애니메이션 라이브러리 (드림코딩을 참고함)https://www.youtube.com/watch?v=wbDpZwDRgRk 이런 라이브러리 등, 애니메이션을 주면 뭔가 있어보이는 사이트가 탄생한다...+ (리액트에서도 잘 적용하게 만들 수 있다. 리액트는 자바스크립트을 잘 빌딩하기 위한 "라이브러리"라는 것을 기억해두자. 그건 알아서 구글링하고, 사이트를 참고해보자.)  - (리액트의 풀 네임은 React.js임 ㅇㅇ) 2024. 9. 3.
리액트에서 외부링크 열기 온클릭 이벤트를 이용해서 외부링크 여는 법. React에서 클릭시 외부링크로 열기React에서 Link태그는 Router와 연관되어 내부의 route로 이동시키기 때문에 다른 외부 링크를 연결하기위해 a태그를 사용할 수 있다. 그렇지만 a태그 없이 클릭 이벤트로 외부링크를 연결하고 싶다면velog.io window.open("외부링크 URL")} ~~ 2024. 9. 3.
자바스크립트 - Intersection Observer(무한스크롤) 자바스크립트에서 스크롤 관련 이벤트 함수를 복기함.(스크롤에 따라 특정 이벤트를 발생시킴, 무한스크롤을 만들 수 있고, 이벤트가 일어나는 시간, 지연 시간도 전부 컨트롤할 수 있게 됨.)https://youtu.be/OrG1wGgGfcI?si=D5850ERYMdg-OtJF(자세한 건 영상을 참고하자.) 2024. 9. 3.
0. 자바스크립트 완전 끝내기: ES6+ 심화 [강좌 소개, 범위] 리액트가 끝나서, 자바스크립트에 대한 심화과정의 강좌를 더 듣게 되었다. 베이스는 리액트라서, 조금은 가벼운 마음으로 듣고자 한다. (그러나 내용은 가볍지 않다...)1. 강좌 소개, 범위: 바이블 강좌, 강좌의 상위 레벨 키워드, 비동기 11단계앞으로 강좌는 어떻게 진행이 될 것인지, 비동기가 무엇인지, 어떤 식으로 단계가 이루어지는지 알려준 강좌였다.2. 강좌 접근, ES6+ 위치, 저서 강좌를 접근할 때 어떤 식으로 접근을 할 건지를 알려주었다.또한 API에 대한 이야기를 많이 할 것이며, API를 가져오고 또 서버에 전송하는 "통신"에 대한 이야기도 한다.결론자바스크립트의 심화버전이며, API에 대한 이야기를 많이 할 것이다. 2024. 9. 2.
17. 스택(10828) 스택을 풀기 전, 스택이 무엇인지 짧게 배우고, 이 부분을 코드로 구현해보자. (구글링은 사랑입니다. 구글링 없이 자신이 직접 바로 코드를 노베이스로 짤 수 있다면, 아마 당신은 천재일 것이다.)스택이란 일종의 "그릇"이다. 그릇에는 데이터가 저장되어 있고, push나 pop을 이용해 데이터를 삽입하거나 뺄 수 있게 된다. 또한 가장 마지막에 들어간 데이터가 가장 처음 나오는 성질을 가지고 있는 자료구조이다.재귀적인 함수, 알고리즘에 사용되며, 웹 브라우저 방문 기록등에도 사용이 된다. 삽입 및 삭제에 O(1), 탐색에 O(n)이 걸리는 시간 복잡도를 가지고 있다.이런 자료들을 로우적인 부분부터 제어하고 싶으면 c언어를 써주면 된다. 그러나 난 백준을 파이썬 언어로 설정해두고 풀어왔으니, 일단은 파이썬으.. 2024. 9. 2.
자바스크립트 복습 (심화버전) - 모듈 시스템 / 버블링&캡쳐링 모듈 시스템모듈(Module) 이란?개발하는 애플리케이션의 규모가 커지면 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 하나의 파일을 모듈(module)이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 여러 개의 함수를 포함하는 라이브러리로 구성되어 있다. 이 모듈을 이용해서 코드를 효율적으로 제어할 수 있게 된다.모듈 장점유지보수용이 - 기능들이 모듈화가 잘 되어 있는 경우, 의존성을 줄일 수 있기 때문에 기능을 개선이나 수정이 용이.네임스페이스화 - 코드의 양이 많아질수록 전역스코프에 존재하는 변수명이 겹치는 경우가 존재. 이때 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제를 해결할 수 있음.재사용성 - 같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 .. 2024. 8. 29.
16. [12단계] 제목: 브루트 포스 (5~6챕터) 5단계. 종말의 수란 어떤 수에 6이 적어도 3개 이상 연속으로 들어가는 수를 말한다. 제일 작은 종말의 수는 666이고, 그 다음으로 큰 수는 1666, 2666, 3666, .... 이다. 따라서, 숌은 첫 번째 영화의 제목은 "세상의 종말 666", 두 번째 영화의 제목은 "세상의 종말 1666"와 같이 이름을 지을 것이다. 일반화해서 생각하면, N번째 영화의 제목은 세상의 종말 (N번째로 작은 종말의 수) 와 같다.숌이 만든 N번째 영화의 제목에 들어간 수를 출력하는 프로그램을 작성하시오.첫째 줄에 N이 주어진다. N은 10,000보다 작거나 같은 자연수이다.첫째 줄에 N번째 영화의 제목에 들어간 수를 출력한다.답:n = int(input())theEndNumber = 666 #종말번호count .. 2024. 8. 29.
CSS 전체적인 복습 (시작하기에 앞서서, 짐코딩님의 무료 강의를 참고하였음을 알림)https://github.com/gymcoding/learn-html-css GitHub - gymcoding/learn-html-cssContribute to gymcoding/learn-html-css development by creating an account on GitHub.github.com(오픈 소스는 다음과 같음. 고마워요 짐코딩!!) HTML/CSS 강의 www.youtube.com  CSS란? CSS란?Cascading Style Sheets의 약자로, HTML문서를 꾸밀 때 사용하는 스타일을 잘 정리한 시트(문서)이다. HTML로 웹 페이지의 뼈대를 만들고, CSS로 웹 페이지를 예쁘게 꾸미는 역할을 한다.CSS 구조C.. 2024. 8. 28.
15. [12단계] 제목: 브루트 포스 (3~4챕터) 3단계. 정수 a, b, c, d, e, f가 공백으로 구분되어 차례대로 주어진다.문제의 답인 x와 y를 공백으로 구분해 출력한다.답: a, b, c, d, e, f = map(int, input().split())print((c*e-b*f)//(a*e-b*d), (a*f-d*c)//(a*e-b*d))x와 y를 구하려면 연립방정식을 구하면 된다. 구하는 법은 되게 쉽다. x를 구하고 싶으면 y값을 동일하게 만들고 빼주면 되며, y를 구하고 싶으면 x값을 동일하게 만들어주고 빼면 된다. 어차피 정수들은 숫자로 입력이 될 것이라 상관없다.(참고로 for문을 돌리는 방법이 있지만, 이렇게 푸는 게 더 쉽고 효율적)4단계. 지민이는 자신의 저택에서 MN개의 단위 정사각형으로 나누어져 있는 M×N 크기의 보드를 .. 2024. 8. 28.
HTML 전체적인 복습 (시작하기에 앞서서, 짐코딩님의 무료 강의를 참고하였음을 알림)https://github.com/gymcoding/learn-html-css GitHub - gymcoding/learn-html-cssContribute to gymcoding/learn-html-css development by creating an account on GitHub.github.com(오픈 소스는 다음과 같음. 고마워요 짐코딩!!) HTML/CSS 강의 www.youtube.com개발환경 구축시작하기 앞서서, 프론트엔드 언어들을 잘 사용하기 위해 에디터를 하나 만들게 되었다. 에디터는 유명한 에디터인 "비주얼 스튜디오 코드" 이다.이후 몇 가지 확장 프로그램도 깔아줘야 한다.HTML이란? HTML이란, Hyper Text.. 2024. 8. 27.
14. [12단계] 제목: 브루트 포스 (1~2챕터) 브루트 포스에 대한 공부는 다음 포스팅을 참고하자.https://codingworld2002.tistory.com/107 브루트 포스 알고리즘백준 문제를 풀기 전에, "브루트 포스" 알고리즘에 대한 공부를 선행하였다.브루트 포스(brute force)brute: 무식한, force: 힘   무식한 힘으로 해석할 수 있다.완전탐색 알고리즘. 즉, 가능한 모든 경codingworld2002.tistory.com1단계. 딜러는 N장의 카드를 모두 숫자가 보이도록 바닥에 놓는다. 그런 후에 딜러는 숫자 M을 크게 외친다.이제 플레이어는 제한된 시간 안에 N장의 카드 중에서 3장의 카드를 골라야 한다. 블랙잭 변형 게임이기 때문에, 플레이어가 고른 카드의 합은 M을 넘지 않으면서 M과 최대한 가깝게 만들어야 한다.. 2024. 8. 27.
[8/26] 프론트엔드 스터디 후기 1. 참여한 과정구름톤 유니브에 프론트엔드로 지원하게 되었고, 운이 좋게도 뽑히게 되었다.이후 리액트를 배우게 되었다.2. 어떻게 진행했는가진행은 파트 스터디와 전체 스터디로 나뉘게 되었다.두 개의 스터디 모두 일단은 온라인으로 진행이 되었으며, 일요일에 파트 스터디, 월요일에 전체 스터디를 진행한다. 시간은 오후 8시이다.또한, 개강 이후에 전체 스터디는 오프라인으로 진행하게 된다.이후 시간은 바뀔 수 있다.3. 어떤 내용을 공부했는가리액트에 대한 공부를 진행하였다.Composition부터 미니 블로그인 미니 프로젝트까지 배웠다.(물론 이 전 내용도 포함되지만, 일단 주간에 대한 것만 올리겠다. 그 동안 배운 것은 티스토리에 전부 기록을 해두었다.)  4. 활동 사진위는 완성된 블로그이다. 조금 더 스.. 2024. 8. 26.
[8/12] 프론트엔드 스터디 후기 1. 참여한 과정구름톤 유니브에 프론트엔드로 지원하게 되었고, 운이 좋게도 뽑히게 되었다.2. 어떻게 진행했는가진행은 파트 스터디와 전체 스터디로 나뉘게 되었다.두 개의 스터디 모두 일단은 온라인으로 진행이 되었으며, 일요일에 파트 스터디, 월요일에 전체 스터디를 진행한다. 시간은 오후 8시이다.3. 어떤 내용을 공부했는가리액트에 대한 공부를 진행하였습니다.기초적인 부분부터 진행하여서 state까지 진행이 되었다.https://codingworld2002.tistory.com/category/%EC%B9%B4%EC%B9%B4%EC%98%A4_%EA%B5%AC%EB%A6%84 '카카오_구름' 카테고리의 글 목록코딩은 어려워..codingworld2002.tistory.com4. 활동 사진const elem.. 2024. 8. 26.
브루트 포스 알고리즘 백준 문제를 풀기 전에, "브루트 포스" 알고리즘에 대한 공부를 선행하였다.브루트 포스(brute force)brute: 무식한, force: 힘   무식한 힘으로 해석할 수 있다.완전탐색 알고리즘. 즉, 가능한 모든 경우의 수를 모두 탐색하면서 요구조건에 충족되는 결과만을 가져온다.이 알고리즘의 강력한 점은 예외 없이 100%의 확률로 정답만을 출력한다.즉, 요약하자면 "모든 경우의 수를 모두 탐색"하는 알고리즘인 것이다. (전문 용어로 노가다....)경우의 수를 다 찾는 거라, 시간 복잡도는 높아질 수밖에 없다."모든 경우의 수" 탐색이기에,대부분 브루트 포스는 반복문과 조건문을 이용해서 알고리즘을 만들게 된다.쓰는 이유그럼 이 "알고리즘"을 사용하는 이유가 뭘까?간단하다.예외 없이 100%의 확률로.. 2024. 8. 25.
리액트 삽질...(타입 검사) 미니 프로젝트인 블로그를 만들면서 3시간 정도 삽질을 했다. (살려줘....)이 삽질에 대한 정리를 짧게 하고자 한다.일단 문제의 파일은 "페이지" 부분이었다.문제는 간단하다.useParms의 타입은 문자열이지만 postid의 타입은 숫자인 것이다.문제는 내가 코드를 "==="으로 해두었다는 것이다.자바스크립트에서는 타입 검사를 엄격하게 하거나 혹은 좀 더 유하게 검사할 수 있다.문법은 "==" 혹은 "==="이다. 전자는 그냥 값만 같으면 True가 되지만, 후자는 타입도 같아야 True가 된다.당연히 문자열과 숫자는 다른 타입이니 False가 나오고, 이는 곧 오류를 뜻한다.tilte를 가져오지 못하는 이유는 tilte의 타입은 "문자열"이기 때문이다. 근데 나는 이게 숫자 타입도 같아야만 데이터를 .. 2024. 8. 25.
16. 리액트 미니 프로젝트 (챕터 5~6) (실습) Page 컴포넌트 구현 및 각 페이지별 경로 구성하기(아, 참고로 하나의 "페이지"를 리액트에서 컴포넌트로 따로 정의해서 관리하기도 한다... 좀 이상하게 들릴 수 있지만, 이렇게 페이지 자체를 컴포넌트 화하면 유지 보수가 좋아진다고 한다.)+ (그리고, 확장 마켓플레이스에서 vscode-styled-components 을 설치했다. 비로소 스타일할 때 vscode의 에디터 도움을 받게 되었다. 개꿀)일단 코드를 오픈하기 전에, 몇 가지 알고 가야 하는 개념이 있다. 웹 페이지 이동우리는 웹에서 다른 웹 페이지로 많이 이동한다. 페이지 이동이 없는 웹은 그냥 문서인 셈.예시로 페이스북이 있다. 보면 facebook.com 이후에 슬레쉬하고 games가 존재한다.이 의미는 "메인 페이지인 face.. 2024. 8. 24.
자바스크립트 복습 (심화버전) - npm / webpack NPM이 무엇인가 NPM(Node Package Manager)은 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저이라고 정의할 수 있다. 이 패키지 매니저를 이용해서 자주 쓰는 기능을 모듈화 해서 사용하게 된다. 재사용성도 높아지고 관리도 쉬워지기에 정말 많은 개발자들이 사용한다.왜 npm을 사용해야 하는가?프로젝트에서 필요한 라이브러리를 쉽게 다운받을 수 있다. (npm install로 프로젝트에서 필요한 라이브러리를 한꺼번에 다운로드한다.)프로젝트에서 사용하는 많은 라이브러리의 버전과 의존성 관리가 편하다.필요한 라이브러리를 CDN 보다 편하게, npm 명령어를 통해 프로젝트 로컬 환경 및 전역 환경에 쉽게 설치하고 관리할 수 있다.빌드하는 명령어를 자동화해 프로젝트를 관리할.. 2024. 8. 24.
15. 리액트 미니 프로젝트 (챕터 3~4) (실습) UI 컴포넌트 및 List 컴포넌트 구현하기바텀 업 방식으로 작은 기능부터 만들어가는 것이 좋다.일단 코드를 몇 개 만들어주자.코드는 일단 6개가 존재한다.코드가 많으니 간략하게 포인트를 설명하면 다음과 같을 것이다.  UI 컴포넌트 만들기  List 컴포넌트 만들기버튼과 텍스트를 넣을 수 있는 기능이 존재하는 컴포넌트를 2개 만들었다. 이 컴포넌트는 UI라는 파일 안에 존재한다.그다음 리스트에 대한 컴포넌트를 4개 만들었다. 이 컴포넌트는 List라는 파일 안에 존재한다.이 리스트들은 댓글 또는 글 목록의 보기 기능이 될 것이다.(실습) 가짜 데이터 만들기이 강의는 리액트 강의이라서 백엔드 부분은 가짜 데이터로 처리하게 되었다.https://raw.githubusercontent.com/soa.. 2024. 8. 23.
13. [11단계] 제목: 시간 복잡도 (3~7챕터) 시간 복잡도에 대한 개념은 다음 글을 참고하길 바람)https://codingworld2002.tistory.com/100 12. [11단계] 제목: 시간 복잡도 (1~2챕터)챕터를 풀기 전에, "시간 복잡도"에 대한 공부가 필요하다. 그래서 시간 복잡도가 무엇인지 먼저 이야기하고자 한다.시간 복잡도는 무엇인가?시간 복잡도란 "입력 크기에 대해 어떤 알고리즘이codingworld2002.tistory.com3단계. 오늘도 서준이는 알고리즘의 수행시간 수업 조교를 하고 있다. 아빠가 수업한 내용을 학생들이 잘 이해했는지 문제를 통해서 확인해보자.입력의 크기 n이 주어지면 MenOfPassion 알고리즘 수행 시간을 예제 출력과 같은 방식으로 출력해보자.MenOfPassion 알고리즘은 다음과 같다.MenO.. 2024. 8. 23.