728x90 728x90 전체 글153 자바스크립트 개발 환경 설정 자바스크립트 개발 환경 설정 편집 도구 웹문서를 다루고 그 안에 스크립트 코드를 넣어야 하기 때문에 웹문서를 편집할 수 있는 편집기가 필요하다. 코드 에디터를 사용하면 코드 자동완성, 문법 오류 감지, git 연동 등의 편리한 기능을 사용할 수 있고 가장 인기 있는 에디터는 마이크로소프트의 비주얼 스튜디오 코드(VS Code) 이다. 브라우저 모든 브라우저와 node.js는 자바스크립트 엔진을 내장하고 있으며 자바스크립트는 브라우저와 node.js 환경에서 실행할 수 있다. 브라우저의 호환성, 상호 운용성 등을 확인하기 위해서 브라우저는 웬만하면 모두 준비하는 것이 좋다. 개발자 입장에서는 개발자 도구가 편리해야하는데 크롬 브라우저가 제공하는 개발자 도구가 가장 막강하기 때문에 많이 사용된다. 개발자 도.. 2023. 3. 13. 자바스크립트의 탄생 배경 1995년 당시 약 90%의 시장 점유율로 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈는 정적인 HTML을 동적으로 표현하기 위해 경량의 프로그래밍 언어를 도입할 필요성을 느꼈다. 그래서 탄생한 것이 브렌던 아이크가 개발한 자바스크립트이다. 자바스크립트는 1996년 3월 넷스케이프 커뮤니케이션즈 웹 브라우저인 Netscape Navigator 2에 탑재되어 Mocha라는 이름으로 명명되었다가 LiveScript로 이름이 변경되었고 최종적으로 JavaScript로 명명되었다. 웹에서는 form에 아이디와 패스워드를 입력하면 post된 데이터를 웹서버가 받아 처리하게 되는데 아이디와 패스워드를 아무렇게 넣거나 아무것도 입력하지 않고 입력한다면 서버에 요청은 가게 되고 그 값을 확인 하기 위해서.. 2023. 3. 12. 리액트 Failed to load resource : the server responded with a status of 404 () 문제 상황 react에서 작성했던 코드를 next로 옮기는 과정에서 api호출 시 404에러가 발생했다. react에서는 문제없이 get호출을 했으나 옮겨서 실행해보니 404에러가 발생하면서 컴포넌트를 렌더링하지 못했다. Failed to load resource : the server responded with a status of 404 () 잘못된 코드 처음에는 next의 param으로 username을 받아오는 문제가 있는 줄 알고 useEffect를 통해서 username을 잘 받아오는지 확인해보았다. username은 잘 받아오는데 GitHubCalendar 컴포넌트에 props로 username을 전달 할 때는 전달이 안되는 것 같았다. GET 요청을 자세히 보니까 username에 unde.. 2023. 3. 10. Next.js 설치 방법 및 기본 사용법 Next.js 설치 방법 및 기본 사용법 Next.js 설치 방법 간단히 아래의 명령어를 실행하면 설치 할 수 있다. 이 명령을 실행하려면 먼저 NodeJS가 설치되어 있어야 한다. npx create-next-app@latest # or yarn create next-app # or pnpm create next-app 타입스크립트 기반으로 프로젝트를 설치하고 싶다면 —typescript 플래그를 추가한다. npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript 먼저 pages 폴더에서 보여줄 페이지를 설정한다. const Home = () => {.. 2023. 3. 9. tailwind template literal 사용 시 스타일 적용 문제 상황 tailwind를 사용하여 sns 로그인 버튼의 color를 sns의 종류에 맞게 설정하기 위해서 props로 color를 넘겨주고 템플릿 문자열을 사용했지만 color가 적용되지 않았다. 잘못된 코드 tailwind에서 background를 스타일링 하기 위해서는 앞에 bg를 붙여야 하는데 템플릿 문자열과 함께 쓰니 문제가 생겼다. tailwind 공식 문서에 따르면 Dynamic class name을 설정할 때는 항상 완전한 클래스 이름으로 설정해야 한다. 존재하지 않는 클래스 이름은 생성하지 않기 때문이다. props를 이용하여 color를 설정하고 싶다면 다음과 같이 설정한다. function Button({ color, children }) { const colorVariants = .. 2023. 3. 6. Next.js 사용하는 이유 Next.js 사용하는 이유 Next.js란 NextJS는 대규모의 양산형 React 앱을 더 편리하게 구축할 수 있도록 많은 기능을 제공하는 React 프레임워크이다. 하지만 대규모의 React 프로젝트를 구축하려면 보통 라우팅에 필요한 라이브러리나 인증에 필요한 라이브러리들을추가해야 한다. NextJS는 React를 기반으로 하는 프레임워크로 라이브러리보다 더 크고 기능이 많다. 또한 코드를 작성하는 방법이나 파일을 구성하는 방법에 관한 명확한 규칙과 지침이 있다. 이를 이용해서 대규모 React 앱을 편리하게 구축할 수 있다. Next.js의 주요 기능 1. 서버사이드 렌더링 NextJS에서 추가된 가장 중요한 기능은 서버 사이드 렌더링을 내장하고 있다는 것이다. React만 이용해서 만든 일반적인.. 2023. 3. 3. 이전 1 ··· 15 16 17 18 19 20 21 ··· 26 다음 728x90 728x90
