Who I really am
쿠키 (Cookie) - 브라우저(클라이언트)에 저장되는 작은 파일 - 클라이언트의 상태 정보를 로컬에 저장했다가 참조 - 300개까지 저장 가능 - 하나의 도메인 당 20개의 값을 가질 수 있음 (하나 당 4KB까지 저장 가능) - 대부분의 브라우저가 지원 - 인증 유효 시간을 지정할 수 있고, 유효 시간이 정해지면 브라우저가 종료되어도 인증을 유지 - 사용 예시 : 로그인 자동완성, 쇼핑몰 장바구니, 오늘 더 이상 창을 보지 않음 팝업 등 로컬 스토리지 (Local Storage) - 브라우저 창을 닫더라도 데이터가 유지됨 (데이터 영구 저장 가능) - 서버에 불필요한 데이터를 저장하지 않음 - 약 5MB의 큰 용량 - 사용 예시 : 자동로그인 세션 스토리지 (Session Storage) - 로컬스..
CSR(Client Side Rednering) 과정 👉 유저가 앱에 접속한다 👉 앱은 브라우저에게 javascript 정보가 들어있는 빈 html 문서를 전달 👉 브라우저가 javascript 파일을 다운로드하고, 유저는 그동안 빈 화면을 봄 👉 다운로드가 끝나면 브라우저는 리액트 코드가 들어있는 js 파일을 실행 (=document.createElement과 같이 JS에서 HTML 태그를 생성하기 때문에, JS 파일이 실행되기 전까지는 빈화면인 것이다) 장점 새로고침이 발생하지 않아 자연스러운 UX 서버 부담이 적다 단점 첫페이지 로딩이 SSR에 비해서 느리다 SEO에 취약하다 SSR(Server Side Rendering) 과정 👉 유저가 앱에 접속한다 👉 서버에서 리액트를 실행하고, 리액트는 UI..
벡터 x, y를 묶어서 계산해주는 개념 기본 캐릭터 코드 function setup() { createCanvas(400, 400); } function draw() { background("tomato"); face(width/2, height/2); } function face(x,y) { push(); translate(x, y); //귀 ellipse(-150,0,60,60); ellipse(150,0,60,60); //얼굴 ellipse(0,0,300,300); //흰자 ellipse(-60,0,100,100); ellipse(60,0,100,100); //검은자 fill("black"); ellipse(-60,0,60,60); ellipse(60,0,60,60); //입 ellipse(0,80..
* rect 함수의 5,6,7,8번째 인자를 넘겨주면 모서리가 둥근 사각형을 만들 수 있다 * p5.js의 시스템변수 frameCount를 활용해서 자동으로 차체가 들썩거리는 듯한 모션을 주었다. frameCount 시스템 변수 frameCount는 프로그램 시작 이후 화면에 나타난 프레임의 개수를 측정합니다. setup() 함수의 기본값은 0이고, draw() 함수의 첫 번째 반복 실행이 마치면 1씩 증가하는 식입니다. 소스코드 function setup() { createCanvas(400, 400); } let carX = -90; function draw() { background(220); carX += 5; if(carX > width+90) { carX = -90; } car(carX, he..
사운드 크기에 반응해서, 소리가 클 땐 크게 움직이고 작을 땐 작게 움직이는 개체다. [기본세팅 - geometry, camera, speed 오퍼레이터] 1. sphere 오퍼레이터(원 모양)를 불러온 뒤, geometry 오퍼레이터와 연결해준다 2. 그 사이에 noise 오퍼레이터를 연결해준다 (=꾸물꾸물한 모양으로 움직임) 3. 그러면 따로 뭘 건들지 않아도 구체가 꾸물거리며 움직이는데, 터치디자이너 프로그램에서 미리 기본 코딩을 해놨기 때문이다. 미리 세팅된 아래 부분을 지워준다. 4. 사운드파일을 드래그해서 터치디자이너로 가져온다 5. audio device out 오퍼레이터를 가져온 후 사운드파일과 연결하면 음악을 들으면서 작업할 수 있다 (필수는 아님) 6. 사운드파일과 analyze 오퍼레..
정육면체 살펴보기 1) sob > box 오퍼레이터 불러오기 2) box 오퍼레이터의 view active를 켠 상태에서 우클릭 > toggle shaded / wireframe 클릭 (면 처리가 되지 않은 뼈대를 보여줌) * box 우클릭 > display options 박스에서 정점들의 내용을 볼 수 있다 3) 우측 상단 UI에서 x,y,z축 기준 사이즈, 위치, 회전, 배율 등을 조절해볼 수 있다. 원통 모양 개체 살펴보기 1) sob > 튜브 오퍼레이터 불러오기 2) 우측 상단 UI 중 Tube > radius의 값을 0, 1로 설정하면 원뿔 형태가 된다. 3) 우측 상단 UI 중 detail > end caps를 on해주면 위아래가 막힌 원통 형태가 된다. 4) view active 켜준 상태에..
이제 포트폴리오 페이지에 어떤 내용을 담을지, 또 어떤 기술을 써서 만들지 정해본다. 구성할 내용 내 소개 링크 작업물 리스트 간단한 인적사항 경력 기술 스택 성격(성향) 깃헙 블로그 작업물에 대한 간략한 소개 캡쳐화면 개발 기간 나의 기여도 사용기술 + 특정 기술을 사용했을 경우, 왜 그 기술을 선택했는가 + 사용 과정에서 어떤 어려움을 겪었는가 + 사용자에 대해 고민했는가 + 다양한 상황에 대한 고민이 있었는가 사용할 기술 💡 Next.js VS React 이전 회사를 다니면서 10개 정도의 프로젝트를 리액트로 만들어왔기에 사용에 익숙한데 비해, next.js로는 2개 프로젝트 + 개인 연습용 프로젝트에서 잠깐 써본 수준이기에 스스로 아직 연습이 더 필요한 상황.. 그래서 개인적으로 next.js를 ..
text() 함수는 화면에 텍스트를 나타낼 수 있도록 하는 함수 // 들어갈 text, x, y text("내용", 200, 200) // 캔버스의 크기가 바뀌더라도 항상 중간에 위치하도록 함 text("내용", width/2, height/2) text() 함수를 적용하기 전에 //폰트사이즈 textSize(100); //폰트컬러 fill("red"); //폰트테두리 stroke(0); strokeWeight(5); // 첫번째인자: CENTER, RIGHT, LEFT // 두번째인자: TOP, CENTER, BOTTOM (기본값은 BASELINE) textAlign(가로정렬, 세로정렬); 등의 함수를 이용해서 글꼴 속성을 정의해줄 수 있다. 클릭할 때마다 10씩 늘어나는 텍스트 예제 //전역변수 le..
