본문 바로가기

전체 글166

맛집검색기 리팩터링 기존 코드 웹 개발 시작한 지 1달도 되지 않았을 때 만든 사이트이다 보니, 각 HTML 파일마다 JS 파일 하나씩 만들어 연결하여 사용하는 구조로 코드를 작성하였었다. 하지만 함수 속 해시태그 내용만 바뀔 뿐 모든 코드가 중복되어, 새로운 그룹 페이지를 추가할 때마다 기존의 JS 파일을 복사 붙여넣기 하여 해시태그 내용만 수정하는 방식으로 서비스를 운영하고 있었다. 그룹 수가 늘어남에 따라 JS 파일도 같이 늘어났고, 코드를 수정할 때 파일을 찾는 것이 번거로워지기 시작했다. 개선한 코드 하나의 JS 파일에 모든 그룹의 해시태그를 담았다. 함수로 구분하여 querySelector가 그 페이지의 그룹 명을 가져오면, 조건문을 사용하여 그 그룹의 해시태그를 모은 링크를 열어주도록 수정하였다. 그 결과 30.. 2022. 10. 1.

[JS] location.reload() 사용법 내 코드 검색창에 값을 입력한 후 submit 버튼이 눌리고 나면 검색창만 사라진 페이지가 남는 상황이었다. 사용자가 다시 창으로 돌아와서 다른 값을 검색해보고 싶은 경우에는 불편한 상황이었기에 이를 개선하고자 submit 버튼이 눌리고 나면 창을 새로고침시켜주기로 했다. 오류 내용 loaction.reload()를 js 파일 함수 밖에 썼더니, 조건에 관계없이 계속해서 새로고침이 발생했다. 문제 해결 submit 버튼 클릭시 연결된 함수 안에, 그 함수의 작업들이 모두 끝난 후에 loaction.reload()를 통해서 페이지가 새로고침 될 수 있도록 해주었다. 함수 내에 새로고침 함수 넣어주기!!! 2022. 9. 30.

[JS] Uncaught TypeError: Cannot read property 'addEventListener' of null 내 코드 submit 버튼을 누르면 addEventListner가 작동하여 입력된 값들을 가지고 다음 페이지로 넘겨주어야 하는데 제대로 작동하지 않았다. 오류 내용 Uncaught TypeError: Cannot read property 'addEventListener' of null addEventListner가 null 값을 받아오고 있었다. 문제 해결 js 파일을 살펴보니 문제가 없었고, 문제는 html 파일에 있었다. html 파일과 js 파일을 연결해주는 script 코드를 html 파일의 header 태그 안에 작성하여서 페이지가 렌더링되기도 전에 작동이 되었던 것이다. 그렇기 때문에 addEventListner가 제대로 작동할 수 없었던 것이다. 그래서 script 코드를 body 밖으로 빼.. 2022. 9. 30.

[React] Hooks & Custom Hooks Hook은 리액트 버전 16.8부터 새로 추가된 요소로, class를 작성하지 않고도 state와 다른 react 기능을 사용할 수 있도록 해준다. 리액트로 개발을 할 때 자주 사용하는 useState() 와 useEffect()도 Hook의 한 종류이다. Hook을 사용하는 이유 hook을 사용하지 않고 리액트로 개발 시, 크게 3가지의 문제점이 있다고 한다. 1. 컴포넌트 사이에서 상태 로직을 재사용하기 어려움 하지만 hook을 사용하면 상태 관련 로직을 재사용할 수 있으며, 독립적인 테스트와 재사용이 가능해진다. 2. 복잡한 컴포넌트들은 이해하기 어려움 서로 비슷한 일을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다. 3. class는 사람과 기계를 혼동시킴 class를 사용하.. 2022. 9. 19.

[SOFTWARE 028] 구글 같은 서비스는 어떻게 개발할까? 현실에서 프로그래밍은 대규모로 이루어지는 경향이 있다. 프로그래밍에서 작업 하나의 크기는 보통 한 사람이 프로그래밍 언어로 정확한 처리 단계를 작성할 수 있는 정도다. 라이브러리, 인터페이스, 개발 키트 라이브러리 (library) 연관된 함수들의 모음 API (Application Programming Interface) 함수 라이브러리가 제공하는 서비스 포함하는 함수, 함수의 용도, 사용법, 입력 데이터의 형태, 만들어지는 값의 형태를 나열 시스템 내부에서 주고받는 데이터의 구조를 의미하는 자료 구조와 기타 세부사항 기술 가능 구문과 관련된 기본 명세 뿐만 아니라, 시스템을 효과적으로 사용하도록 돕는 지원 문서도 포함 SDK (Software Development Kit) 대규모 시스테이 프로그래머들.. 2022. 9. 2.

[SOFTWARE 025] 다른 프로그램을 처리하기 위한 프로그램 어셈블러 (assembler) 특정한 처리를 수행하는 프로그램 어셈블리 언어 특정 프로세서 아키텍처에서 사용되는 어셈블리 언어는 그 아키텍처에 특화된 언어다. 어셈블리 언어는 대개 프로세서의 명령어와 일대일로 연결되고, 명령어가 이진수로 인코딩되는 특정한 방식과 메모리에 정보가 배치되는 방식 등을 알고 있다. 특정 프로세서용 어셈블리 언어 프로그램을 다른 프로세서용으로 변환하고 싶다면 프로그램을 완전히 새로 작성해야 한다. 어셈블리 언어 프로그래밍 1일 1로그 100일 완성 IT 지식 복잡한 IT 세상을 선명하게 읽는 디지털 문해력 기르기 챌린지IT 지식은 분명 복잡하지만 인생처럼 혼잡하지는 않다. 필요한 지식을 습득하면 막연한 불안감에서 벗어나 디지털 지구가 제시하는 book.naver.com 2022. 8. 26.

[React] Carousel (반응형 이미지 / 가로 스크롤) 사용법 (JS) http://react-responsive-carousel.js.org/ http://react-responsive-carousel.js.org/ React Responsive Carousel Storybook Check it out these cool demos created using storybook. The source code for each example is available here. Summary Installing npm install react-responsive-carousel --save Demo Carousel Code: Contributing Please, feel fre react-responsive-carousel.js.org 물론 직접 구현할 수도 있지만.. 잘 나와있는 .. 2022. 8. 23.

[2022 멋쟁이사자처럼 연합해커톤] 지금 뭐해? 지난 8월 20, 21일 이틀 간 멋쟁이사자처럼 연합 해커톤을 진행했다. 무사히 잘 마무리되었고, 여러 방면으로 배운 점이 많았던 해커톤이어서 글로 적어본다. 아이디어톤 지난 5월 해커톤과는 달리, 이번에는 아이디어톤 당일에 랜덤으로 뽑은 키워드 3가지를 가지고 아이템을 정하는 방식으로 진행되었다. 우리팀은 필기구, 히어로, 군대를 뽑았는데 정말 막막했다. (내가 뽑았다... 똥손이다...) 아이들 처음에는 우리 팀원들의 공통 관심사가 '교육'이었고 아이들을 좋아했기 때문에 그 두가지에 대한 방향으로 가려고 생각했었다. (아이들은 우리들의 '히어로' 이런 느낌..) 아이디어를 내는 과정에서 몇 가지 문제에 부딪혔는데, 우선 아이들은 핸드폰을 많이 사용하기는 하지만 어른들처럼 다양한 서비스를 골고루 사용하.. 2022. 8. 23.

[SOFTWARE 018] 알고리즘과 초콜릿 케이크 레시피 2부 소프트웨어 시작~~~ 알고리즘 (algorithm) 효율적인 알고리즘의 설계, 분석, 구현은 컴퓨터과학이라는 학문에서도 매우 핵심적인 부분이다. 알고리즘은 지능이나 상상력이 없는 개체가 수행하더라도 연산의 의미와 수행 방법에 의심의 여지가 없을 정도로 상세하고 정확하게 일련의 연산을 명시해야 한다는 것이다. 그 뒤에 여러 가지 알고리즘 얘기가 나오긴 하는데, 알고리즘은 어차피 따로 공부하니,,, 간단하게 읽기만 하고 넘어가야징.. 1일 1로그 100일 완성 IT 지식 복잡한 IT 세상을 선명하게 읽는 디지털 문해력 기르기 챌린지IT 지식은 분명 복잡하지만 인생처럼 혼잡하지는 않다. 필요한 지식을 습득하면 막연한 불안감에서 벗어나 디지털 지구가 제시하는 book.naver.com 2022. 8. 19.

이전 1 ··· 10 11 12 13 14 15 16 ··· 19 다음

티스토리툴바