본문 바로가기
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.
제대로 이해하는 RESTful - API API가 무엇일까REST - API를 배우기 전에 API가 무엇인지 다시 정리해보자 한다.https://codingworld2002.tistory.com/18 API가 뭘까?https://youtu.be/ckSdPNKM2pY?si=xS4cIt-5GQYixcyz 쉽게 말하자면 "메뉴판"이다.예를 들어 네이버라고 치자. 네이버에 날씨 부분이 있다. 네이버는 기상청의 API를 가져와서 화면에 띄울 것이다. 물론 하루마codingworld2002.tistory.com(정리해 둠)> 요약하자면, 결국 특정 규칙이 존재하는 "메뉴판"인 것이다. https://www.youtube.com/watch?v=fB3MB8TXNXM&t=26s(이 영상을 참고해서 정리했다. 고마워요 코딩사전!)  RESTful - API는 A.. 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.