본문 바로가기
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.
14. 리액트 미니 프로젝트 (챕터 1~2) (실습) 미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치가장 베스트는 "프로젝트"를 직접 코드를 만들어가는 것이다. 일단, 오픈 소스에 있는 데이터가 존재한다. 깃허브에 있으며 소플님이 오픈해 두었다. 코드 짤 때 도저히 모르겠으면 다음의 링크를 타고 확인하자.https://github.com/soaple/mini-blog GitHub - soaple/mini-blog: 소플의 처음 만난 리액트 실습 프로젝트소플의 처음 만난 리액트 실습 프로젝트. Contribute to soaple/mini-blog development by creating an account on GitHub.github.com이번에 기획은 미니 블로그이다. 기능은 위와 같이 만들어두면 좋을 거 같다.전체적인 모습은 다음과.. 2024. 8. 22.
12. [11단계] 제목: 시간 복잡도 (1~2챕터) 챕터를 풀기 전에, "시간 복잡도"에 대한 공부가 필요하다. 그래서 시간 복잡도가 무엇인지 먼저 이야기하고자 한다.시간 복잡도는 무엇인가?시간 복잡도란 "입력 크기에 대해 어떤 알고리즘이 실행되는 데 걸리는 시간"을 뜻한다.https://youtu.be/08TB5ZLTPu4?si=R55Fl49-sMovqdlm관련 영상또한 시간 복잡도에서 "빅오 표기법"이라는 것이 존재한다.빅오 표기법이란 입력 범위 n을 기준으로 해서 로직이 몇 번 반복되는지 나타내는 것이다.이런 시간 복잡도가 필요한 이유는 간단하다. 바로 효율적인 코드를 개선하기 위한 척도가 되어주기 때문이다.다음은 시간 복잡도의 속도를 비교한 그래프이다. 그래프의 그림처럼 n의 크기가 커질수록 시간 복잡도는 더욱 커지게 된다. 그래서 우리는 O(n*.. 2024. 8. 22.
13. 리액트 Styling CSS와 selectorCSS란?> 웹 개발 스타일에 많이 쓰이는 "마크업 언어"이다.이때 엘리먼트에 CSS 규칙이 적용되는 것을 Selector라고 부른다. (선택자라는 뜻도 있다.)규칙은 다음과 같이 그림으로 표현이 가능할 듯하다.다음은 Selector의 유형을 알아보겠다.엘리먼트 셀렉터아이디 셀렉터클래스 셀렉터유니버셜 셀렉터그루핑 셀렉터엘리먼트 상태와 관련된 셀렉터이 밖에도 엄청 많은 셀렉터가 존재한다. (MDN 참고)레이아웃과 관련된 CSS 속성레이아웃에 관련된 CSS 속성을 배워보자.레이아웃을 구성할 때 중요한 속성은 "display" 속성이다.대표적 값을 위 그림을 참고하자.그다음은 "visibility" 속성이다.visibility은 화면에서 보이게 하거나 아님 안 보이게 도와주는 속성이다... 2024. 8. 21.
11. [10단계] 제목: 기하: 직사각형과 삼각형 (5~8챕터) 5단계. 위치 N 개가 주어질 때에, 임씨에게 돌아갈 대지의 넓이를 계산하는 프로그램을 작성하시오. 단, 옥구슬의 위치는 2 차원 정수 좌표로 주어지고 옥구슬은 같은 위치에 여러 개가 발견될 수도 있으며, x 축의 양의방향을 동쪽, y 축의 양의방향을 북쪽이라고 가정한다.예를 들어 위와 같이 (2, 1), (3, 2), (5, 2), (3, 4) 네 점에서 옥구슬을 발견하였다면, 임씨에게 돌아갈 대지는 (2, 1), (5, 1), (2, 4), (5, 4)를 네 꼭짓점으로 하는 직사각형이며, 넓이는 (5 - 2) × (4 - 1) = 9 가 된다. 첫째 줄에 N 개의 점을 둘러싸는 최소 크기의 직사각형의 넓이를 출력하시오. 답: n = int(input())X, Y = [], []for i in rang.. 2024. 8. 21.
12. 리액트 Context Context란?리액트에서는 자주 쓰는 데이터를 잘 이용하기 위해 Context를 사용하게 되었다.코드도 깔끔해지고, 디버깅에도 유리해진다.여러 개의 컴포넌트에 데이터를 넣고 싶을 때 Context를 사용하면 된다.로그인 여부 / 로그인 정보 /  UI테마 / 현재 언어 등등.. 자주 쓸 기능을 깔끔하게 사용하기 위함.코드적인 예시는 다음과 같다.물론 Context는 만능이 아니다. 적합한 상황에 써야 좋다.또한 하위 컴포넌트를 여러 개의 변수로 나누어서 전달도 가능하다.결국 상황에 따라서 Context를 사용하거나 혹은 props를 이용해서 리액트를 개발해야 하는 것이다.Context API생성은 다음과 같이 한다.이후 Provider를 사용해야 한다. 이때 Provider 컴포넌트가 재렌더링될 때마다.. 2024. 8. 20.
10. [10단계] 제목: 기하: 직사각형과 삼각형 (1~4챕터) 1단계. 정수 A, B 가 주어진다. 세로 길이가 A cm, 가로 길이가 B cm 인 아래와 같은 직사각형의 넓이를 cm2 단위로 구하시오.답: a=int(input())b=int(input())print(a*b)a와 b를 입력받고 이후 곱하면 된다. (직사각형 넓이는 가로 곱하기 세로다.)2단계. 한수는 지금 (x, y)에 있다. 직사각형은 각 변이 좌표축에 평행하고, 왼쪽 아래 꼭짓점은 (0, 0), 오른쪽 위 꼭짓점은 (w, h)에 있다. 직사각형의 경계선까지 가는 거리의 최솟값을 구하는 프로그램을 작성하시오.답: x,y,w,h=map(int,input().split())print(min(x,y,w-x,h-y))x와 y와 w와 h를 다 받아준다.이후 x와 y 그리고 구하고자 하는 직사각형의 경제선 .. 2024. 8. 20.
11. 리액트 Composition vs Inheritance Composition 방법과 Inheritance Composition이란 리액트에서 "합성"을 뜻한다.컴포넌트를 여러 개 합성해서 화면을 구성하기에 알아두어야 하는 방법이다.이때 여러 방법으로 컴포넌트를 구성할 수 있다.Containment리액트에서 하위 컴포넌트를 포함하는 방식을 말한다.코드를 살짝 보자.앞에서 props 정의할 때 엘리먼트에서 자식 요소를 다룬 적이 있다.자식 요소에 props를 정의해 주면 같이 props를 쓸 수 있다.만일 여러 개의 자식 요소가 필요하다면 props를 여러 개 정의하면 된다.예시로 다음과 같이 사용할 수 있다.Specialization기존의 객체 지향에서는 상속을 이용해서 구현하게 된다. 그러나 리액트에서는 다른 방향으로 구현하게 된다.(단어 뜻은 "전문화"이다.. 2024. 8. 19.
자바스크립트 복습 (심화버전) - bom / dom / this / defer 오랜만에 자바스크립트를 복습하였다.자바스크립트에서는 여러 문법을 지원하지만, 오늘은 다음과 같은 내용을 복습하였다.BOM / DOM / 자바스크립트 파일 효과적으로 가져오기 / ThisBOMBOM이란 브라우저 객체 모델을 뜻한다. 브라우저 객체 모델이란 브라우저를 객체처럼 여기는 것을 말한다.연산자는 " . "이다. 가장 많이 쓰는 것은 document이다.  자세한 부분은 영상을 참고하자.https://youtu.be/3c4xp8U3jjM?si=9DXZHx1Ly6YAWI-A참고로 window가 가장 최상위 객체이다. BOM은 그 밑에 존재하는 객체다. 이 부분을 헷갈려하지 말자.DOMDOM이란 문서 객체 모델을 뜻한다. 문서 객체 모델이란 "문서를 객체화"한 것을 말한다. 스크립트 언어로 브라우저를 해.. 2024. 8. 18.
10. 리액트 Lifting State Up Shared State Shared State이란?공유되는 state를 말한다. 다르게 표현하면 state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통으로 사용된다고 말할 수 있다.즉, 공통된 하위 컴포넌트가 상위 컴포넌트인 부모 컴포넌트의 state를 공유하여 쓴다.하위 컴포넌트에서 State 공유하기다음은 물의 끓음 온도를 표현해 주는 코드 예시다.이를 기반으로 Shared State를 사용해보자.참고로 Lifting State Up이란 하위 컴포넌트의 state를 공통 상위 컴포넌트로 올리는 것을 말한다.코드를 전체적으로 구현하면 다음과 같을 것이다.그림으로 표현하면 다음과 같다.상위 컴포넌트 안에 값을 하위 컴포넌트가 받아서 공유한다. (온도는 25 , 스케일은 c)(실습) 섭씨온도와 화씨온.. 2024. 8. 17.
9. [9단계] 제목: 약수, 배수와 소수 단계 1단계. 4 × 3 = 12이다.이 식을 통해 다음과 같은 사실을 알 수 있다.3은 12의 약수이고, 12는 3의 배수이다.4도 12의 약수이고, 12는 4의 배수이다.두 수가 주어졌을 때, 다음 3가지 중 어떤 관계인지 구하는 프로그램을 작성하시오.1. 첫 번째 숫자가 두 번째 숫자의 약수이다.2. 첫 번째 숫자가 두 번째 숫자의 배수이다.3. 첫 번째 숫자가 두 번째 숫자의 약수와 배수 모두 아니다. 입력은 여러 테스트 케이스로 이루어져 있다. 각 테스트 케이스는 10,000이 넘지 않는 두 자연수로 이루어져 있다.마지막 줄에는 0이 2개 주어진다. 두 수가 같은 경우는 없다.테스트 케이스마다 첫 번째 숫자가 두 번째 숫자의 약수라면 factor를, 배수라면 multiple을, 둘 다 아니라면 nei.. 2024. 8. 17.