프론트엔드✏️/코드캠프

라이브러리와 프레임워크, JSX(JavaScript XML)

JSX (JavaScript + XML) JSX는 JavaScrpit 확장 문법이다. HTML과 JavaScrpit를 합친 것이다. 브라우저는 내부적으로 JSX를 읽을 수 있는 구조가 아니다. 애초에 JSX는 엔진이나 브라우저가 바로 구현할 수 있게끔 만들어진 것이 아니라, 다양한 변환 프로그램을 통해 사용되도록 만들어진 것이기 때문이다. 자바스크립트와 약간 문법이 다르다. ex. class="" 라고 쓰지 않고 className="", onclick이 아니라 onClick 등 ㄴ 이유는?! classr가 자바스크립트에서 예약어기 때문에 HTML 의 엘리먼트 class를 정의하려면 다른 이름을 써야한다. 리액트 컴포넌트는 일반적으로 JSX로 작성된다. 라이브러리, 프레임워크 [공통점] 다른 사람이 쓴 코..

220514 프론트엔드 부트캠프 6일차 : 첫 주말

첫 주말! 집에서 쉬다가 5시쯤 학원 갔다가 10시쯤 집에 왔다. 지금은 블로그 서식 만져 보는 중 학원은 자리가 바꼈는데 뭔가 안정적이다^_^ 옆에 사과님이 없는 건 슬픈 일이지만...ㅁ8a8 오늘은 따로 글 쓸 거라서,,, 주말 집 가는 길은 휑해 일요일 ↓ 달이 짱 컸어! 슈퍼문일까 했는데

220513 프론트엔드 부트캠프 5일차 :

첫번째 조건문 통과 후 두번째 조건문에서 걸려서 이런 결과가 나온 것 같다. 처음에 score >= 90 만 주거나 밑에 조건들에 score

2205112 프론트엔드 부트캠프 - 4일차

Unhandled Runtime Error Error: Objects are not valid as a React child (found: object with keys {id, name, username, email, phone, website, province, city, district, street, zipcode, createdAt, updatedAt}). If you meant to render a collection of children, use an array instead. 컴포넌트로 받은 데이터와 출력하려는 데이터의 타입이 일치하지 않아서 발생 랜더링 할 때는 오브젝트 타입을 맞춰서 적어야한다. 더보기 오늘은 아파서 지각... 집에서 줌으로 들으려고 했는데 제대로 못 들어서 수업 다 놓..

220511 프론트엔드 부트캠프 - 3일차 : Rest, GraphQL

알고리즘 문제 풀기 GRAPHQL 문제 풀기 오늘은 숙제가 적었다~ 알고리즘 문제풀이 중 실수했던 것 오늘 배운 것 : 데이터 전송 방법/Rest, Graphql 파일 - FTP, File Transfer Protocol 간단한 메일 - SMTP, Simple Mail Transfer, Protocol 텍스트/하이퍼텍스트(HTML같은 것들) - HTTP, Hyper Text Transfer, Protocol 프론트엔드 컴퓨터 - 백엔드 컴퓨터(서버 컴퓨터) DB(DB컴퓨터) 프론트엔드→백엔드 메세지 : 게시물 등록해줘~ 요청 백엔드→프론트엔드 메세지 : 성공했습니다. + 상태코드(컴퓨터가 알아볼 수 있도록) * 상태코드는 구글에 HTTP 상태코드 라고 치면 위키백과에 나와있다. [API] 각각의 요청마다..

220510 프론트엔드 부트캠프 2일차

5분 지각ㅠㅠ state 기존의 것 문제 있어서 개선하기 위해 나왔다. 우편번호 검색 주소에 read only(= true) 하기 리액트의 핵심 Component! UI 또는 기능을 부품화해서 재사용 가능하게 하는 것 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) 대소문자 확인, 없는데 태그로 쓴 것 있는지/태그엔 썼는데 정의 안해준 것 있는지 확인 투명도 부여하기 헥사코드 투명도 검색 100% = FF 70% = B3 50% = 80 20% = 33 0% = 00 #헥사코드 뒤에 붙여준다. 더보기 오늘 점심 도원 6500원 그냥 계속 앉아서 하..

220509 프론트엔드 부트캠프 1일차 : 리액트, 얀, 깃

😊수업 실무형 자바스크립트 리액트, 같이 쓰는 것 Next.js GUI : 마우스 클릭으로 폴더를 만드는 등 기존의 그래픽 UI CLI : 터미널 이용 관리자 권한은 앞에 sudo를 붙인다. 보일러 플레이트 : 초기 폴더구조 JSX : 리액트 전용 HTML CSS-IN-JS : 리액트 인기 css 방식 Emotion : 간결한 코드, 태그에 의미를 부여하고 코드의 재사용성을 증가시킨다. (styled-component) _app.js : 설정 파일, 모든 페이지가 시작되기 전에 한 번 시작되는 파일 (Initialize 느낌인가?) [패키지 매니저] - 앱스토어, 플레이 스토어, npm, yarn(JS 런타임 패키지 관리) 런타임 - 프로그램이 실행되고 있는 환경 Node.js 웹브라우저 밖, 로컬에서도..

부트캠프 - precamp 5일차 💛final 회원가입💛

5월 6일자로 5일차 프리캠프가 끝났다~ 지금 눈이 너무 피곤하고 졸리고, 내일은 엠티가는 날이어서 자고 싶지만 기능구현을 조금이라도 해보고 싶어서 vscode,,만지는 중...음 아직은 이걸 개발이라고 하기엔 민망하다..ㅎㅎ 더보기 질의응답 9시-10시 : 알고리즘 셀프 스터디 오후 데일리 스크럼, 자바스크립트 기초-메소드 10시~1시 : 메인 수업 1시~3시 : 식사 블로깅, 코드리뷰, 스크럼, 알고리즘 테스트(금), 알고리즘 수업 9시-6시30분 정규는 구라다. 집에 가도되지만! 갈 수 없어. 몸이 안 좋다, 병원가야할 것 같으면. 결제내역 메세지나 약봉지 영수증 보여주면 됩니다. 방금 해결한 문제 000000 인증번호 전송 원랜 class="button" 부분이 없었다. id="button"만 지..

부트캠프 - precamp 4일차 : 끝말잇기, 로또, 쥬크박스

하나도 몰랐는데... 이젠 display, flex-direction, justify-contents, align-items 거의 생각없이 쓸 수 있게 되었다. 쥬크박스 만드는 게 블럭이 많아서 처음에 펜 없이 하려니까 너무 불편했는데 그거 하니까 술술됐다. 너무 재밌다...! 계속 이러면 좋을텐데 헤헤. 아 노트랑 펜을 들고다녀야겠다. 아무래도 쓰면서 하는 게 더 생각이 잘 돼. 쥬크박스 진짜 노래 나오게 하고 싶은데 오늘은 할 힘이 없다...핳하핳 너무 시간이 늦어버렸어. 따라하면서 내가 바꿀 수 있는 부분은 바꾸면서 하는 게 너무 재밌다! 근데 변수 이름 생각하는 거랑 어떤 걸로 할지 생각하는 시간이 더 걸리는 것 같다ㅎㅎㅎ 수업 사이 틈틈이 이것저것 해보면서 로또기능이랑 끝말잇기 기능도 만들었다!..

부트캠프 - precamp 3일차

발받침이 없으니까 불편해~ 웹앱 서비스 기본구조에 대해 배웠다. 프론트엔드는 데이터 생성 및 사용을하고 백엔드는 데이터 검증과 보완, 데이터 저장과 관리를 한다. 프론트엔드는 DL, Data Logic/Biding / 백엔드는 BL, Business Logic 자바스크립트 데이터 타입과 연산자 Object 배열도 객체 타입 중 하나. 객체에서 타생된 것임 문자열 + 문자열 : 문자열 합쳐짐 숫자 + 문자열 : 계산 안되고 문자열로 합쳐짐 어제 피어싱 끼우면서 봤던 자바 스크립트 안 쓰는 이유가 생각났다. 너무 많은 것을 허용해주기는 한다 싶었다. (근데 내가 쓸 때는 편함ㅎㅎ) 싸이월드 게임 부분 만들기 css를 끝내놓고 기능도 구현해보고 싶어서 js를 좀 만져봤다. 일단 로또에서 숫자 바꾸는 기능. c..

부트캠프 - precamp 2일차

자전거 후미등 달다가 늦을뻔...! 안장 바로 밑에도 달아보고 싶은데 어떻게 하는지 몰라서 일단 그냥 왔다. 자전거 타고 갈까 하다가, 자전거를 어디에 세워놓을지도 모르겠고 지각할 것 같아서 버스타구 옴! 한 3분 전에 도착한 것 같다. hdmi 선 등이 정리되어있고, 키보드랑 마우스를 놓고 갔더니 기존의 것은 없어져있었다. 오늘은 데스크탑에서 써야해서 키보드 갖고 왔는데 내일은 어떻게 되어있으려나? 개발기술에 대해서 배우고 자바스크립트를 배웠다. 자바스크립트는 크롬이나 웨일같은 브라우저에서 f12(개발자 모드) 콘솔에서 코드를 치는데 틀린 것에 밑줄 쳐주고 디버깅하면 눈에 뙇 보였던 비주얼 스튜디오와는 사뭇...다른 느낌이라 좀 낯설었다. 솔직히 브라우저에서 치는 거,,, 간z가 안나잖아..-_ㅠ 커스..

부트캠프 - precamp 1일차

... 프로기 같은 건 누가 만든걸까, 너무 귀엽고 깜찍하게 배울 수 있다. 대단해! 까먹기 전에 쓰는 내가 만들고 싶은 것 - 키워드를 남기고, 그 키워드를 보려면 그것을 쓴 사람에게 키워드를 남겨야한다. 아니면 익명으로 남길 수도 있고... 그리고 다른 사람이 남긴 키워드에 공감을 해서 글씨를 크고 아름답게 키워줄 수도 있음. 오후 2시까지라서 여유로울 줄 알았는데, 요즘 생활패턴이 엉망이어서 그런지 꽤 졸렸다... usb허브가 없는지라 블루투스 키보드, 블루투스 마우스 두 개 다 챙겼다. 전에 다녔던 학원이 근처인지라 익숙한 등원길이었다. 심지어 그 학원보다 더 가까워짐. 도착해서 면접 왔을 때 뵀던 분 안내받고 카드 결제를 했다. 이용한도가 정해져있어서 오늘은 500먼저 하고, 내일 나머지를 결제..