진주의 개발괴발

크리스마스 전 주에는 마음이 어수선했다. 공부를 하려고 해도 하기 싫고 왠지 놀고만 싶어져서 너무 힘들었다. 하고 싶어서 하는 공부랑 하기 싫은데 해야만 하는 것의 차이가 정말 크구나 새삼 느꼈다. 그래도 한 주 푹 쉬어서인지 이번 주는 벌써 시작이 좋다. 전 주에 밀린 공부를 오늘 다 해두어야겠다. 이제 곧 한 해가 끝나고 또 새로운 해가 온다. 새로운 해를 맞이하며, 새로운 정신으로 다시 시작해야지! 파이티잉!! 🎄 이번 주 KPT Keep 필라테스 꾸준히 다니기 코딩 테스트 꾸준히 풀기 블로깅 전 제대로 내용 암기 건강한 음식 먹기 모던 자바스크립트 읽기 Problem 주말 공부 시간 부족 남자친구 너무 자주 만남 집 깨끗하게 유지하기 코딩 테스트 안 풀었음! 늦게 일어나기 시작했음 Try 일요일에..

📌 UI (User Interface, 사용자 인터페이스) 사용자가 컴퓨터와 상호작용하는 시스템 물리적 요소 : 마우스, 키보드, 폴더폰의 버튼 등 그래픽 요소 GUI (Graphic User Interface, 그래픽 사용자 인터페이스) 사용자가 그래픽을 통해 컴퓨터와 정보를 주고 받는 환경 📌 UX (User Experience, 사용자 인터페이스) 사용자가 시스템, 제품, 또는 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험 UX에 영향을 미치는 요소에는 UI도 포함되어 있지만, 좋은 UI가 반드시 좋은 UX를 만들진 않는다. 반대로 좋은 UX가 좋은 UI를 갖는다는 보장 역시 없다. 하지만 UI를 발전시켜서 더 나은 UX를 만들 수 있다.

생각을 안하고 살다보니 쓸 게 별로 없다.그냥 바깥은 겨울이고, 겨울 냄새가 나고, 볼이 아릴만큼 춥다.겨울 냄새가 좋다.차가운 공기를 들이마시면 입 안부터 몸 속까지 차가운 공기가 느껴지는 게 좋다. 옹기종기 따뜻함을 나누는 것도 좋고 눈이 내리는 것도 좋다.벌써 겨울 한가운데에서 크리스마스를 기다리고 있다니. 지금은 섹션이 끝나게 될 2월이 까마득하지만 나중엔 또 빨리 지나갔다고 느끼겠지?그냥 나는 생각하지말고 열심히 해야겠다. ⛄ 저번 주 KPT Keep 필라테스 꾸준히 다니기 ⭕ 코딩 테스트 꾸준히 풀기 ⭕ 블로깅 전 제대로 내용 암기 ⭕ 마음 굳게 먹기 ⭕ Problem 주말 공부 시간 부족 남자친구 너무 자주 만남 집 깨끗하게 유지하기 몸무게 증가... Try 건강한 음식 먹기 ⭕ 음식량 줄이..

📌 JSON(Javascript Object Notation) : 자바스크립트 객체 표기법 데이터 교환을 위한 객체 형태의 포맷 자바스크립트를 포함한 많은 언어에서 범용적으로 사용한다. JSON 탄생 배경 데이터를 교환하려면? 같은 프로그램 사용할 것 또는 문자열처럼 범용적으로 읽을 수 있어야 함 Javascript의 문자열 변환 메서드 : 대상.toString() 형 변환 : String(대상) 하지만 객체를 문자열 변환하면 [object Object]가 반환된다. 📌 JSON.stringify : 객체를 JSON으로 변환 stringity 하는 과정을 직렬화(serialize)라고 부름 let message = { sender:"진주", receiver:"춘식이", message:"춘식이는 너무 귀여..

📌 재귀 함수 (recursive function) : 함수 내에서 스스로를 호출하는 함수 ❓ 재귀함수 언제 사용할까 1. 반복문의 중첩이 많거나, 반복문의 중첩이 예측 불가능할 때 2. 반복문을 간결하게 적고 싶을 때 3. 함수에서 해야할 일을 작게 나눌 수 있을 때 📝 재귀함수 만드는 순서 1. 함수의 인자와 리턴하는 값을 생각해본다. ex) 정수가 들어있는 배열을 받아서 배열의 요소를 다 더한 값을 반환해야 할 때 recursive([number]) => number 2. 문제를 쪼갠다. : 입력값과 실행 순서를 기반으로 반복되는 부분을 나누어 본다. ex) 정수가 들어있는 배열 받아서 배열의 요소를 다 더한 값 반환 => 배열[0] + 배열[1]부터 끝까지 더한 값 => 배열[0] + 배열[1] ..

Section 2를 돌아보며... 섹션 1 회고를 적을 때만 해도 섹션 2는 언제 끝나나 했는데, 벌써 섹션 2 회고를 적고 있다. 막상 회고를 적으려니까 뭘 적어야 할지, 어디서부터 이야기해야 할지 잘 모르겠다. 섹션 1에서는 정말 아무것도 모르던 나였기에 오히려 당당하게 모른다고 얘기할 수 있었다. 그런데 이번 섹션에 들어서면서 잘해야 할 것 같다는 압박감이 들었다. 나름 배웠는데도 기억 안나는 것들이 늘어가면서 회피를 했던 것 같다. 공부 시간도 제대로 안 지키고... 첫 지각도 했다. 레퍼런스도 살펴보지 않았다... ㅠㅠ 꼭 앞으로는 레퍼런스 확인하고 코드 읽어야지. 자꾸 스스로한테 ‘이 정도는 쉬어줘야 나중에 안 지쳐^^’ 라던지, ‘마라톤 완주하려면 페이스 조절해야지^^’ 같은 변명을 하며 주..

📌 Express : Node.js 환경에서 웹 서버, API 서버 제작하기 위해 사용되는 프레임워크 1. Express 설치 🔗 npm install express 2. 간단한 웹 서버 만들기 Node.js const http = require('http'); const PORT = 5000; const ip = 'localhost'; const server = http.createServer((req, res) => { res.writeHead(200, defaultCorsHeader); res.end('Hello World!'); }); server.listen(PORT, ip, () => { console.log(`http server listen on ${ip}:${PORT}`); }); con..

📌 SOP (Same-Origin Policy : 동일 출처 정책) : 같은 출처의 리소스만 공유 가능 => 잠재적으로 해로울 수 있는 문서를 분리하여 공격 경로를 줄여줌 동일 출처 정책의 출처란? : 프로토콜, 호스트, 포트로 구성 📌 CORS (Cross-Origin Resource Sharing : 교차 출처 리소스 공유) : 추가 헤더를 사용하여 다른 출처 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에게 알리는 체제 CORS의 동작 방식 1. 프리플라이트 요청 (Preflight Request) : 실제 요청을 보내기 전, OPTIONS 메소드로 사전 요청을 보내 해당 리소스에 접근 권한이 있는지 확인하는 것 실제 요청을 보내기 전, 미리 권한 확인을 할 수 있기 때문에 리소스 면에서 효율..

이번 주는 꽤 평탄하게 흘러갔다. 그만큼 나태해졌던 한 주였다. 마음이 느슨해지면서 어느 정도 내가 감당할 수 있다는 기분이 들었다. 자만했던 것 같다. 수업이 끝나면 그냥 그대로 퍼져있었다. 주말에도 공부를 안 하고 남자 친구랑 놀았다. 생각해보니 내가 이럴 때가 아닌데... 싶다. 다시 마음을 다잡고 더 노력해야지. 👍 저번 주 KPT Keep 필라테스 꾸준히 다니기 ⭕ : 일주일에 두 번씩 꾸준히 다니는 중! 10시 샤워, 11시 30분 잠자리에 들기 ❌ : 요즘 너무 늦게 자고 있다... 다시 기강 잡기! 코딩 테스트 꾸준히 풀기 ⭕ : 프로그래머스 1단계에 접어들었다. 점점 어려워져서 푸는 문제 개수를 줄였다. 조급해하지 않기 ⭕ : 손으로 외우고 블로깅하기 ⭕ Problem 다른 사람이랑 비교..

목록 내에서 필터링이 필요할 때 사용할 수 있는 두가지 방법이 있다. 1. 컴포넌트 내에서 필터링 : 서버에서 가져온 데이터를 컴포넌트 내에서 직접 필터링 하는 방식 장점 : HTTP요청의 빈도가 줄어듦 단점 : 브라우저의 메모리에 모든 데이터를 갖게 되므로 클라이언트(브라우저)의 부담이 늘어남 2. 컴포넌트 밖에서 필터링 : 서버에서 데이터를 가져올 때 query parameter를 사용해 필터링 한 상태로 가져오는 방식 장점 : 클라이언트가 따로 필터링 구현하지 않아도 됨. 단점 : 서버가 필터링을 처리하므로 서버의 부담이 늘어남. useEffect로 fetch 구현 (컴포넌트 밖에서 필터링) useEftect(() => { fetch('url?q={filter}') .then(response => ..