프론트엔드9 [221030-221107] 일주일간 뚝딱거리며 포폴만든 이야기 자고로 우리 교수님이 그랬다. (코드를) 만지작거릴거면 적어도 예뻐야 만질맛이 난다고. 만지고있는데 재미가 없다면 그 이유 중에 하나는 안 예쁘다는 이유일거라고. 나도 그렇다. 디자이너는 아니지만 막 화려하게 예쁘진 않아도 마음에 들게 깔끔하면 코드 두들긴 결과물이 별게 아니더라도 마음에 참 들더라. 어쨌든 포폴을 만들어야해서 무료로 공개해놓은 포폴들 보고 있는데 내가 원하는 스타일이 없었다. 분명히 내 성격상 마음에 드는 디자인 찾을때까지 포폴 내용도 작성 안하고 구글링할게 뻔해서 호다닥 만들기로 했음. 1. 페이지 구성 구상 만들 페이지를 정하고, 나에 대해서 작성할 키워드를 작성했다. 정리 끝. 2. 레퍼런스 찾기 + 무한 구글링 마음에 드는 느낌을 가진 레퍼런스를 찾을때까지 찾아본다. 머리속에 희.. 2022. 10. 7. [220414] 빙고게임 완성하기 - 01 1-9까지 채워진 숫자판 만들기 클릭하면 X가 표시되는 숫자판 변형본 (Square, Board 컴포넌트만) class Square extends React.Component{ render(){ //{this.props.value} 부모에게서부터 던져준 데이터를 보여주겠다!!!! return( { this.props.onClick() } } > {this.props.value} ) } } class Board extends React.Component{ state = { // square:[null,null,null,null,null,null,null,null,null] squares : Array(9).fill(null) } handleClick = (i) => { const squares = [..... 2022. 4. 17. [220414] 리액트에서 이벤트 생성하기 1. 이벤트명은 Camel 형태로 쓰기 html에서 이벤트를 만들때 버튼 리액트에서 이벤트를 만들때는 지정되어있는 함수를 쓸때는 Camel 형태로 사용해야한다. Camel형태로 안 쓰면 실행 자체가 안 된다. class Login extends React.Component{ state = { name:'ingoo2' } render(){ return( {this.state.name} ) } } 2. 이벤트는 익명함수로 감싸기 render() 자체가 내 안에 있는 코드는 모두 실행할게!!라는 함수다. 따라서 onClick함수가 바로 실행되기때문에, 사이트가 렌더되자마자 클릭하기도 전에 알람창이 뜨게된다. 버튼할때 클릭을 하려면 익명함수로 감싸게 되면 된다. 왜? 함수가 호출되지 않으면 실행이 될 수 없기 .. 2022. 4. 16. [220326] 연극 예매사이트 팀플 기록) 8. 깨지는 css 수정, git commit message 수정,삭제, git 원상복구하기 현재 하고있는 것 1) margin, padding까지 계산해서 vh 만드는거 고침 아아ㅏㅏㅏ https://velog.io/@edie_ko/Tip-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-100vh-%EC%A0%81%EC%9A%A9-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-iosandroid 2) 깃 왜이래ㅐㅐ 충돌일어났는데 오도가도못하고 오류만 뿜어냄 깃 리베이스 https://gamsungcoding.tistory.com/entry/Git-Git-Advanced-Rebase-i-%ED%99%9C%EC%9A%A9%EB%B2%95 https://blog.appkr.dev.. 2022. 3. 27. [220325] 연극 예매사이트 팀플 기록) 7. 통일성 있는 디자인을 위해 수정하기 현재 하고있는것 1) 통일성 있는 디자인을 위해 컬러칩, 전체적인 nav툴 작성 완료. 후보로 만들었던 nav 디자인들. 2) list/grid/calendar 형태를 url 이동 없이 ajax를 사용해서 그려야함. 일단... 저 3개를 통일성 있는 형태로 꾸겨 넣어보자. 버튼식으로 클릭할때마다 리스트형, 앨범형, 캘린더형으로 바뀌도록. 3) 공용폰트 지정함 사용자/개발자/브라우저렌더링-들을 다 체크하고 폰트를 정하는게 맞구나... 이거 안 정하고 진행했다가 폰트이슈 처절.. 이슈 발생 배경 웹폰트가 사용자 컴퓨터에서 구동되지 않을때 폰트가 깨지는 것을 방지하고자, 서버에 폰트를 업로드함. 이슈 발생 다운로드 받은 폰트명이 프로그램상에서 보이는 폰트명이랑 안 맞음. 이슈 해결과정 공통적으로 웹폰트를 받은.. 2022. 3. 25. [220321] 연극 예매사이트 팀플 기록) 2. 초기설계 220321 초기 설계 teamProject-gardenSite 팀 주제 : 정원 페이지 목적 정원이라면 역시 나무 -> 가드닝하는 커뮤니티 페이지를 만든다 가정 페이징 기능 덧글 작성 기능 쿠키 기능 DB 스키마 적극 활용 컬러칩 (아직 이미징 단계. 구체적 컬러칩 못 정함) 명도 낮고 채도가 살짝 낮은 진초록이 깨끗한 이미지를 주기 위해서 흰색 아주 연한 회색, 검은색 중심 디자인 상징적 숫자: 6, six 대체로 곡선의 유려한 디자인. 동글 둥글. 자연적인 이미지니까. 페이지 홈 팀 소개 팀원 소개 페이지 3장 2-1. 주제가 정원이니까 각자 탄생목+좋아하는 물체/자신 상징 이미지 받아서 이미징. 2-2. 팀 3명이니까 S/I/X를 하나씩 나눠가져서 2-1에서 받은 물체로 이미징 board 기능 b.. 2022. 3. 23. [220317] websocket (웹소켓) 구현하기 / 채팅창 만들기 목록 1. websocket 사용환경 만들기 2. 요청/응답 코드 작성하기 3. websocket의 이벤트 4. string 형식으로 데이터를 주고받는 websocket 5. 채팅창 완성하기 외부 라이브러리 ws 설치하기 $npm install ws 라이브러리 가져와서 세팅하기 const webSocket = require('ws') 백엔드에서 요청을 받아주는 코드 작성하기 handshake를 만들고 Connection을 이루는곳까지 코드로 구현했다. //socket.js const webSocket = require('ws') module.exports = (server) =>{ // 클래스 문법이니까 new로 선언 const wss = new webSocket.Server({server}) //응답이.. 2022. 3. 18. [211222] CSS 이미지, 링크 넣기, position, 클론코딩 더보기 더보기 더보기 목차 1. 엘리먼트 안에 같은 엘리먼트를 넣기 1-1. div 1-2. ul, li 1-3. inline-block의 단점 1-4. float 2. 이미지 넣기 3. 메뉴 만들기 1. 엘리먼트 안에 같은 엘리먼트를 넣기 1-1. div 원래 모든 엘리먼트는 기본적으로 여백을 어느정도 가지고있다. 처음에 시작할때 margin, padding을 0으로 놓고 시작하면 편하다. 코드가 실행되는 위치 무조건 왼쪽 상단 꼭지점부터 시작해서 생성됨. 같은 위치에서 생성될 경우 나중에 실행된 코드가 위에 덮어씌워진다. 후발 생성된 엘리먼트는 속한 엘리먼트 기준으로 생성되는 위치가 달라진다 ex) 가운데 정렬된 1번 박스 안에 2번 박스를 생성한다. -> 가운데 정렬된 1번 박스의 왼쪽 상단 꼭지점.. 2021. 12. 22. [211221] table과 CSS 기초 목차 1. 지난 수업에 대한 보충 설명 파일명을 작성하는 법 html 작성을 줄이는 단축키 id란? 2. table table의 기능 table을 만드는 법 (개인과제) 회원가입폼을 만들어보기 3. css css의 기능 css의 적용방법 인라인 스타일 스타일 엘리먼트 사용 외부파일 생성 css 살펴보기 1. 지난 수업에 대한 보충 설명 1-1. 파일명을 작성하는 법 영어로 작성하고 확장자'html'을 붙인다. ex) file.html 특수문자, 띄어쓰기 x, 예외특수문자 - _ 가능, ex) file_name.html 1-2. html을 작성할때 조금 더 편하게 하는 단축키 !를 치고 엔터 1-3. id란?(어제 질문에 대한 답이므로 오늘거에 링크 연결해놓기) 특정 엘리먼트 안에서 고유한 값을 가지기 위.. 2021. 12. 21. 이전 1 다음
