1~4단계 백준 복습 1단계: 입출력과 사칙연산입출력에 대한 문제, 그리고 사칙연산을 계산시키는 문제가 주요 문제였다. 이 1단계는 쉬우니깐 그냥 넘어가겠다. (한 줄 입력은 map 함수에 spilt 함수로 공백 자르기가 키 포인트)2단계: 조건문if문에 대한 문제이다. "분별점"을 파악하고 그 부분에 if문을 이용하면 된다. if문을 축약해서 코딩이 가능하나, 일단 처음에는 공간 복잡도나 시간 복잡도를 생각하지 않고 짜는 것이 중요해 보인다. 그래야 이후 축약이 가능하기 때문3단계: 반복문for문에 대한 문제이다. 기본적으로 for i in range(~~) 가 기본 문법이 되어 준다. 이때 조건식엔 항상 "끝 숫자 - 1"이라는 점을 조심해야 한다.4단계: 1차원 배열배열이란 데이터를 리스트처럼 저장하기 위한 수단이다. .. 2024. 8. 12. 개발자 포트폴리오. 어떻게 써야 할까. 개발자의 포트폴리오는 진짜 중요하다.핵심을 말하자면 "강점"을 강조하고, "약점"은 최대한 적지 말자. 그리고 "숫자"로 이야기하자.라고 말할 수 있을 거 같다.이에 대한 자세한 사항은 밑의 영상을 참고하자.https://youtu.be/prpW7bZZoUg?si=VPdF-o-i2qVG7PLQ1. 사진은 무조건 1인 (자신)만 나와야 하며, 정면이어야 함. (이상한 고양이 같이 찍은 사진 금지...)2. 불필요한 정보는 제거하기.3. 기술 설정에 대한 고민 적기.4. 장문 금지 (간결하게 가자.)5. 난이도가 낮은 활동 삭제. 전략적으로 중요한 부분만 남겨두자.6. 프로젝트는 웬만해서는 "최신 순"으로 배열해주자.7. 프로젝트 기간은 명확하게 명시.8. 맞춤법 검사 꼼꼼히. (중요함)9. 강점 우선 순서.. 2024. 8. 12. 처음 만난 리액트 V2 (로드맵) 카카오 구름 EDU에서의 "처음 만난 리액트 V2"이다. 소플님이 진행하신 강의이다. 이 강의는 버전 1 / 버전 2가 존재한다. 버전 1은 2020년이고 버전 2는 2022년에 나왔다. 그래서 최신 버전으로 진행하게 되었다.이 글은 한 번 로드맵을 정리할 겸해서 작성하게 되었다.로드맵은 위의 사진과 같다. 물론 리액트의 "전체"는 아니지만, 그래도 많은 부분을 내포하고 있다.특히 컴포넌트와 렌더링, JSX , 엘리먼트 등등... 중요 개념들은 무조건 배우고 넘어간다고 보면 된다.배우면서 느낀 점.새로운 개념들이기는 하지만, 어디까지나 리액트는 "자바스크립트"을 좀 더 잘 다루기 위한 라이브러리이기 때문에, 어느 정도 친숙한 부분도 존재한다. 본질적으로 볼 때에는 똑같다. ("객체" / "함수"라는 본질.. 2024. 8. 11. 4. 리액트 State and Lifecycle state는 중요하다.-코딩 애플-코딩에서 "이거 왜 쓰는 거예요? 이 개념은 무엇인가요?"에 대한 질문이 중요하다. 단순 코드 따라치기로는 코드를 해석할 수 없기 때문이다. state도 마찬가지이다. 이게 왜 쓰이는 거고 무엇인지, 개념을 설명할 수 있어야 한다.State정의로는 "상태"이다. 리액트에서는 컴포넌트의 변경 가능한 데이터라고 볼 수 있다. 그리고 state는 각각의 개발자가 함수 내에 따로 따로 정의한다. 이때 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함해야 한다. 쉽게 말해서 State는 자바스크립트의 객체라고 여기면 된다.예시 코드를 보자 > 저기 네모 박스를 친 부분이 state 코드이다. (이때 클래스 컴포넌트는 constructor(생성자)를 가지게 된다.)다시 말하.. 2024. 8. 10. 4. [4단계] 제목: 1차원 배열 배열은 1차원도 있고 2차원도 있고 3차원도 있고 ~이런 식으로 N차원으로 커진다. 1차원은 그냥 "행"만 존재. 2차원은 "행" / "열"이 존재. 3차원은 "행 , 열 , 면" ~~ 이렇고 배열은 거의 3차까지만 쓰이는 듯하다.https://velog.io/@soyoun9798/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0-1.-%EB%B0%B0%EC%97%B4-Array1단계. 총 N개의 정수가 주어졌을 때, 정수 v가 몇 개인지 구하는 프로그램을 작성하시오.첫째 줄에 정수의 개수 N(1 ≤ N ≤ 100)이 주어진다. 둘째 줄에는 정수가 공백으로 구분되어 있다. 셋째 줄에는 찾으려고 하는 정수 v가 주어진다. 입력으로 주어지는 .. 2024. 8. 10. 3. 리액트 Components and Props 리액트에서의 Components 그리고 Props매우 매우 매우 중요한 개념이라고 한다.....다시 말하지만, 리액트는 컴포넌트를 레고 조립하듯 코드를 작성한다. (컴포넌트 기반 언어) 이 작은 컴포넌트가 모여서 큰 컴포넌트가 모이고 이게 모여서 하나의 웹사이트 화면이 되어준다.컴포넌트는 일종의 함수라고 생각하면 편한데, 입력은 props(프랍스)인 거고 출력은 리액트 엘리먼트인 셈. 컴포넌트만 있다면 붕어빵(엘리먼트)을 계속 찍어낼 수 있다! (실제로 컴포넌트 만들 때 "function"이라고 정의함)Props(프랍스)가 무엇인가?Props는 Prop의 복수형태를 뜻한다. 그리고 이건 리액트에서 "속성"이라는 뜻으로 사용된다.그리고 이 속성은 리액트 컴포넌트의 속성을 뜻한다.예시를 들어서 설명하자면 .. 2024. 8. 9. 3. [3단계] 제목: 반복문 https://easyjwork.tistory.com/10 1단계.N을 입력받은 뒤, 구구단 N단을 출력하는 프로그램을 작성하시오. 출력 형식에 맞춰서 출력하면 된다.출력형식과 같게 N*1부터 N*9까지 출력한다답: n = int(input())for i in range(1,10): # 1~9 print(n, '*', i, '=', n*i)반복문 하면 for 문이다. 파이썬에서는 for문을 range를 이용해서 단축해서 사용 가능하다. (문법이라 외워야 함) i가 1부터 10-1번 반복되는 for문이라고 생각하면 된다.2단계.두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오. 첫째 줄에 테스트 케이스의 개수 T가 주어진다.각 테스트 케이스는 한 줄로 이루어져 있으며, 각 .. 2024. 8. 9. 리액트 삽질 < 매우 중요 (이 삽질은 카카오 구름 강의를 들으면서 생기게 되었는데..)npm start로 리액트 앱을 가져오는데... 이때 호완성, 버전 등 여러 문제 때문에 에러가 나고 있다. 처음엔 내가 친 코드가 문제인 줄 알고 있었지만,"챗 지피"을 노동 착취한 결과 몇 가지 힌트를 얻게 되었다.이게 오류가 나고 있는 문법인데... 문제는 "챗지피"에 의거하면 현재 코드를 보면, React 18에서 ReactDOM.createRoot를 사용하지 않고 ReactDOM.render를 사용하고 있기 때문에 오류가 발생하고 있습니다. ReactDOM.render는 React 18에서 제거되었고, 대신 ReactDOM.createRoot를 사용해야 합니다.- 챗 지피티-이게 맞다면 이미 제거된 문법을 나는 배우고 있다는 셈이 되.. 2024. 8. 8. 2. 리액트 Rendering Elements Rendering Elements 의 정의와 생김새정의적으로 Elements 이란 어떤 물체를 이루는 성분을 뜻함. (리액트를 구성하는 요소 / 가장 작은 블록) 이건 곧 리액트에서 화면을 기술하는 요소이기도 하다.이때 리액트 Elements는 자바스크립트의 객체 형태로 존재한다.잘 보면 자바스크립트 객체 같은 느낌이 들 것이다. (이름이 있고 값이 있다.)(props는 뒤에서 배울 것) 순서대로 해석하자면 type을 기재하고 props 기제, 이후 자식 요소를 기재한다. Elements의 특징 및 렌더링 Elements는 불변성을 가진다. (변하지 않는 성질) 즉, 한 번 생성된 Elements의 자식 요소나 attributes를 바꿀 수 없다는 뜻이다.이때, 무언가 이상한 점을 느낄 수 있을 텐데... 2024. 8. 8. 2. [2단계] 제목: 조건문 1단계.두 정수 A와 B가 주어졌을 때, A와 B를 비교하는 프로그램을 작성하시오.첫째 줄에 다음 세 가지 중 하나를 출력한다.A가 B보다 큰 경우에는 '>'를 출력한다.A가 B보다 작은 경우에는 'A와 B가 같은 경우에는 '=='를 출력한다.답: a, b = map(int, input().split())if (a > b) : print('>') elif (a print('else : print('==') if문을 쓰면 된다. 파이썬에서는 else if 를 elif로 줄여 쓰며 조건을 쓰고 ":"을 넣어준다. 이후 그냥 코드 작성해 주면 된다.2단계.문제시험 점수를 입력받아 90 ~ 100점은 A, 80 ~ 89점은 B, 70 ~ 79점은 C, 60 ~ 69점은 D, 나머지 점수는 F.. 2024. 8. 8. 1. [1단계] 제목: 입출력과 사칙연산 (시작하기 앞서서)백준 문제를 풀 코딩 언어로 c++ 혹은 파이썬 중에 고민을 했다. 물론 자바스크립트로 작성할지도 고민했다.속도는 c++ 이 빠르고 자바스크립트는 프론트엔드 주력 언어이지만, 어디까지나 백준 문제 풀기이고 이는 알고리즘에도 얼추 걸쳐있기에.. 그리고 문법이 쉬운 파이썬으로 일단 정했다. (어차피 코테 준비 끝나면 언어 바꾸기는 1주면 된다.)1단계. Hello World!를 출력하시오.답: print("Hello World!")출력은 print로 출력한다.2단계.두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오.이때 키포인트는 "첫 번째"에 출력하는 것이다.답: a, b = map(int, input().split()) print(a+b) 입력은 input으로 .. 2024. 8. 7. 개발자가 알고 있으면 좋은 사이트 / 툴 알고 있으면 좋은 사이트 툴을 여기 블로그에 정리했음. 이것들 말고도 엄청 많음https://youtu.be/XvgoAPvFWig?si=R-J9SQw4E2B7y7FNhttps://rakjido.github.io/2020/10/21/Front-End-Useful-Sites Front End 유용한 사이트 모음Web 개발 중 디자인 측면에서 유용한 사이트들을 정리해 보았습니다.rakjido.github.iohttps://youtu.be/q_rBbcTiSC4?si=S2qXnXnSewlatxQk등등.. 엄청 많음. 2024. 8. 7. 1. 리액트 JSX 이슈(시작하기에 앞서서... 리액트 강의가 버전 1 , 버전 2가 있는데.. 버전 2가 새롭게 리뉴얼됨에 따라 버전 1 강의는 버리고 버전 2의 강의를 듣기로 결정하게 되었다. 버전 1은 나중에 시간이 날 때 볼 듯하다.) - 기준 2024년 8월 7일.정말 다행히도 버전 2는 HTML / CSS / 자바스크립트에 대한 기본적 내용이 "준비하기" 과정에 추가되었기에 기록하는 것에는 지장이 없다. 그 뒤에 리액트 소개와 연동까지는 별 지장이 없기에 JSX부터 기록을 버전 2로 시작하게 되었음.> 이에 따라 Node.js / npm 을 설치하고 React App 연동까지 하였다. 리액트를 구동하고 싶다면 터미널을 열어서 npm start 라고 작성하면 된다.JSX란 자바스크립트 파일에서도 쓰이는 html 대.. 2024. 8. 7. 0. 리액트 소개 및 실습 리액트가 무엇인가?심플하다. 화면을 만들기 위한 자바스크립트 라이브러리(참고로 라이브러리는 프레임워크보다는 조금 더 자유롭다.)리액트는 페이스북이 만들어낸 라이브러리이다.리액트의 장점빠른 업데이트 및 빠른 렌더링 속도. 또한 Virtual DOM 이 적용되어 있다. (쉽게 말해서 "스무스"하게 움직임) 그리고 레고 조립하듯이 컴포넌스 베이스인 라이브러리이다. 즉 이것은 "재사용성"이 좋다는 뜻이기도 하다. 이것은 곧 개발 속도를 빠르게 만든다. 무엇보다 "가장 많이 쓰이는 프론트엔드 라이브러리". 이것이 가장 큰 장점이다. (커뮤니티가 많음)+ (React Native 까지 배우면 모바일도 커버됨리액트의 단점뭐든 그렇지만, 새로운 기술에는 새로운 개념이 등장해서 생소함. 무엇보다 프론트엔드 시장의 기술은.. 2024. 8. 6. (프롤로그) 구름 스터디 (P.S 카카오) 정말 운이 좋게도 카카오 주관. 구름 유니브에 합격했다. 목적은 11월의 해커톤이 목적이다.다만 이 해커톤에 앞서서 스터디를 필수로 요구하게 된다. 프론트엔드로 지원했기에 HTML / CSS / JavaScript 는 기본. 리액트까지는 스터디해야 한다.스터디는 이렇게 프론트 그리고 추가 활동으로 이루어져 있다.앞으로 이 카테고리를 이용해서 기록을 남기고자 한다. 2024. 8. 6. 0. 백준 방향성 잡기 (시작에 앞서. 이 카테고리는 백준 문제 풀이임을 명시함)https://youtu.be/H6z1_tnyhp0?si=eN7m8LxWn0YXhGCx뭐든 시작이 중요하다.카카오 구름 스터디를 하면서 "EDU" 강의 하나와 개별적 활동 하나를 필수로 하게 되었는데, 개별적인 활동으로 [백준 문제 풀기]가 되었다. 백준 문제를 풀기 앞서서 전체적인 방향을 잡을 필요가 있어 보였다. 코딩은 속도도 중요하지만 무엇보다 방향이 중요하기 때문이다. (꾸준함이 제일 중요하다.)이에 영상을 참고, 가이드라인대로 한 번 백준을 풀어보고자 한다.1. 가이드라인문제 > "문제 단계별로 풀어보기"부터 시작해서 1단계 ~가 존재함.단계별로 풀어보기로는 1단계에서 12단계까지만 이용한다.12단계까지 도달했다면 그다음은 강의 > 온라인.. 2024. 8. 6. 리액트 기초 역시 형이야. 믿고 있었어https://youtube.com/playlist?list=PLfLgtT94nNq0qTRunX9OEmUzQv4lI4pnP&si=9gcW-e4b6OS_2ql4 2022 코딩애플 리액트 강의 www.youtube.com(리액트 기초로 블로그 프로젝트 만들기 영상)//https://youtu.be/qcphnSqneE0?si=mLI1Ua6dPPLv9c7f(이건 코딩 알려주는 누나 영상)더 딥한 건 다른 영상 참고하자.https://www.youtube.com/playlist?list=PLo3AHtncM26y0qX58gjc_QrkYlBCzQ2R_ 처음 만난 리액트 v2새롭게 리뉴얼 된 '소플의 처음 만난 리액트' 강의입니다.www.youtube.com(구름 - 소플) 2024. 8. 3. HTML - Sementic Tag Sementic Tag란시멘틱 태그(Sementic Tag)에서 Sementic의 사전적 의미는 "의미론적"이라는 뜻으로, HTML에서 시멘틱 태그란 "의미를 가지는 태그"를 말한다.가령 제목과 같이 큰 글씨를 나타낼 때 태그를 사용하여 나타낼 수 있다. 태그는 페이지 제목이라는 의미를 갖고 있다.반면 태그에 style을 입혀 태그와 동일한 스타일을 표시할 수 있다. 하지만 이것은 HTML 의미(Sementic)를 제대로 살리지 못한 것 이기 때문에 지양할 필요가 있다.페이지 Layout을 만들거나 HTML 마크업을 할 때 최대한 의미 있는 Sementic Tag를 사용하길 권장함.HTML Sementic Elements : 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치합니다. : 다른 .. 2024. 7. 21. 2024 부트캠프 추천 총정리 https://youtu.be/kBpqbZeFqrc?si=ETAtqvMWvUqwIxP2부트캠프는 선택이다! (영상의 기준은 2024년) 2024. 7. 20. 깃 / 깃허브이란? 사용방법은? https://youtu.be/lelVripbt2M?si=rO114iJ3vr_uhnh- 프로젝트를 위해서는 깃과 깃 허브는 필수이다. (개발을 위해서도 그냥 필수임)https://hackmd.io/@oW_dDxdsRoSpl0M64Tfg2g/ByfwpNJ-K Git 명령어 총정리집 (by 코딩알려주는 누나❤) - HackMD# Git 명령어 총정리집 (by 코딩알려주는 누나❤)  안녕하세요 여러분 :)hackmd.io(코딩알려주는 누나 / git 명령어 총정리집 참고)> 코드를 요약하자면..// main Branches 으로 올릴 때.git add .git commit -m "하고 싶은 말 적기"git push.. 2024. 7. 19. 이전 1 ··· 8 9 10 11 12 13 14 다음
