본문 바로가기

전체 글

(41)
시작부터 위기..![Open API를 찾아서..] 프로젝트의 이름을 지었다. 바로 "냉장고 비우기" 주된 서비스는 냉장고 속 재료를 입력하면 그 재료만 들어가는 레시피를 제공하는 것이다. 만약 양파와 감자만 입력한다면 다른 재료없이 단 양파와 감자만을 이용한 레시피가 나와야 한다. (소스류 등은 제외) 좋아! 이제 이러한 레시피를 제공하는 Open API 를 검색해보자..! 검색해보자... 죄다..주부 백단 재료 만땅 레시피를 제공하는 Open API 밖에 존재하지 않았다.. 벌써부터 프로젝트의 위기를 맞이하는 것 같았다.. 직접 레시피를 구성해서 API 를 생성하는 건 정말 말도 안되는 일이었다... 그렇게 한참을 고민하고 검색해보다가 나와 비슷한 주제의 프로젝트를 하는 분의 블로그를 발견하였고 "만개의 레시피" 사이트를 크롤링하여 API 사용하고 계..
개인 프로젝트를 시작하다...! [프로젝트의 발단] 웹 퍼블리셔에서 프론트엔드로 전향하기 위해 앨리스 부트캠프에 참여하였고 무사히 수료하였다. 부트캠프에서 진행한 3번의 프로젝트 동안 본의아니게 프론트엔드와 백엔드 둘 다 경험하게 되었고 "혼자서 풀스택 프로젝트를 해볼까....?" 하는 이상한 자신감을 얻게 되었다. 당장 취업도 쉽게 되는 것 같지 않았기에 취업이 되기 전까지 프로젝트를 진행하면 기획부터 제작에서 운영까지 경험할 수 있고 포트폴리오로도 사용할 수 있을 것 같아 여러모로 유용할 것 같았다. 그렇다면 어떤 프로젝트를 할까? 사실 옛날부터 만들고 싶었던 서비스가 있었다. 나는 요리를 좋아하기 때문에 가끔 feel 받으면 음식 재료들을 와랄라 사와서 맛난 음식을 해먹곤 한다. 하지만 꾸준히 성실하게 요리를 하는 편은 아니라서 이벤트성 요리가 끝나..
useRef 가 DOM 선택하는 것 외에 또 다른 용도 [Today I Learned - React] 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있음 useRef 로 관리하는 변수는 값이 바뀐다고 컴포넌트가 리렌더링 되지 않음 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회할 수 있음. useRef 로 만든 변수로 관리할 수 있는 것 1. setTimeout, setInterval을 통해 만들어진 id 2. 외부 라이브러리를 사용하여 생성된 인스턴스 3. scroll 위치....!! 요기서 잠깐! 그냥 일반 변수를 안만들고 왜 굳이 useRef 로 변수를 만드느냐? 컴포넌트는 그 컴포넌트의 state나 props가 변경될 때마다 호출되는데(re-ren..
map 을 사용할 때 왜 key 설정을 해야하나? [Today I Learned - React] 설정해줘야하는 이유 각 고유 원소에 key 가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있음 만약 설정해주지 않으면 map 을 설정한 초기 배열에서 요소를 하나 더 추가하게되면 배열의 요소가 추가되지 않고 배열의 요소들이 교체되듯이 동작한다. 즉, [a,b,c,d]라는 배열에서 [a,b,z,c,d]로 업데이트하면 DOM 에서는 c 가 z로 바뀌고, d 는 c 로 바뀌고, 맨 마지막에 d 가 새로 삽입되는 형태가 되어버림 ==> 문제는 없지만 아주 비효율적으로 동작하는 것! key 설정을 해준다면? 수정되지 않는 기존의 값은 그대로 두고, 원하는 곳에 내용을 삽입하거나 삭제함! 즉, 배열을 렌더링 할 때 key 값은 매우 중요함.
useState 객체로 사용하기(input 예시) [Today I Learned - React] input의 개수가 여러개가 되었을 때, 단순히 useState 를 여러번 사용하고 onChange 도 여러개 만들어서 구현할 수 있지만 => 좋은 방법이 아님! 여기 더 좋은 방법 설명 시작! 01 일단, 위와 같이 input 태그에 name 속성을 설정하고 이벤트가 발생되었을 때 이 값을 참조하도록 설정. 02 const [inputs, setInputs] = useState({ name: '', nickname: '' }); useState 에는 문자열이 아니라 객체 형태의 상태를 관리해주기 03 const onChange = (e) => { const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출 setInputs({ ...inp..
정규식에 익숙해지자..[코딩테스트 연습] 코딩테스트 연습을 시작하게 되었습니다. 프로그래머스의 레벨 0단계 부터 시작을 하였는데..... 아니??? 나 이정도로 빡대가리였던건가???.... 무슨 문제인지 파악하는 데만 10분정도 쓴 것같아요..... 대략 문제의 내용은 이러하였습니다. ["data", "object", "array"] 라는 배열이 있는데 내가 함수에다가 ["datata", "dataobject", "arrayarr", "data"] 처럼 이상하게 집어넣어 볼테니까 너가 "data", "object", "array" 만 걸러서 옳은 문자가 몇개인지 개수를 좀 알려줘봐 아 근데, dataobject 와 같이 옮은 문자가 나열된것도 개수에 포함시켜야함 ㅇㅋ? 처음에는 아니 뭐...배열이랑 파라미터로 들어온 배열이랑 비교하도록 filt..
브라우저는 어떻게 동작하는가? [Today I Learned - 배경지식] 브라우저에서 URL을 입력하게되면 이러한 순서로 진행이 됩니다. 먼저 브라우저가 서버에게 HTML 파일을 요청합니다. (request) 파일을 서버에게 받아서 로딩을 합니다. (loading) 파일을 한줄씩 읽어 DOM 요소로 변환하는 과정을 scripting 이라고 합니다. (scripting) DOM 요소로 변환하고, CSS 요소를 CSSOM으로 변환합니다. (scripting) 변환한 것을 window에 표기하기 위해 Rendering Tree를 만듭니다. (rendering) Render Tree의 각 요소들이 어떤 위치에 어떤 크기로 표기되는지 계산을 합니다 (layout) 화면에 요소들을 그립니다. (painting) 출처 블로그 : https://velog.io/@moonshadow/ IP ..
변수는 무엇이고, 왜 필요할까? [Today I Learned - JS] 여러 날에 걸쳐 공부한 걸 한번에 정리해서 글이 많이 길다... 변수 예시 var a = 10; 변수를 알아보기에 앞서, 컴퓨터는 어떻게 메모리에 값을 저장하고 계산하는가? 예를 들어 10 + 20 = 30 이라는 식을 계산하고 저장하려면? 👉컴퓨터는 CPU 를 사용해 연산하고, 메모리(memory)를 사용해 데이터를 기억한다. 01. 메모리(Memory)란? => 데이터를 저장할 수 있는 메모리 셀의 집합체 1. 메모리 셀 1개는 1바이트 각 셀은 고유의 메모리 주소를 갖는다. 메모리 주소 : 메모리 공간의 위치를 의미 2. 컴퓨터는 즉, 1바이트 단위로 데이터를 저장하거나 읽어들인다. 3. 컴퓨터는 모든 데이터를 2진수로 처리 메모리에 저장되는 데이터는 데이터의 종류(숫자, 텍스트, 이미지, 동영상)..