얼음저장소

연말쯤 부터 처음으로 회고를 써볼까, 말까, 고민만 하고있었는데 2022년 찐 마지막 날인 12월 31일 간단하게나마 기록용으로 작성을 시작해봅니다. 🍞 토이프로젝트 1월에는 42서울 내에서 지원하는 오픈 프로젝트를 하면서 mki, wopark 님과 함께 '뭐먹었니?'라는 토이프로젝트를 진행했었습니다. (작년부터 진행햇었지만..) 기획부터 배포까지 확실하게 진행되었던 첫 프로젝트였기 때문에 의미가 깊지만, 그만큼 더 완성도 있게 만들걸 이라는 아쉬움도 남는 프로젝트 였네요. 담당 멘토로 꾸준하게 도와주셨던 정윤원 멘토님, 틈틈히 피드백을 주셨던 허광남 멘토님께 아주 많은 도움을 받았습니다. 프로젝트 깃헙 : https://github.com/42openproject/whatdidyoueat GitHub ..

REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 의미한다. REST 는 Representational State Transfer 의 줄임말 SOAP (Simple Object Access Protocol) 컴퓨터 네트워크 상에서 http, https 등을 통해 XML기반 메세지를 교환하는 프로토콜 SOA를 구현하는 규약이다. SOA?서비스가 중심이되는 소프트웨어 아키텍처의 한 종류이다. Service Oriented Architecture 구성 : 모든 data가 XML로 표현되고 data와 data를 다루는 operation이 WSDL로 정의되면 UDDI에 등록되어 누구라도 서비스를 검색, 접근할 수 있도록 공개한다. WSDL(Web Service Description La..

정의 자바스크립트가 실행될 때 필요한 변수, 스코프의 정의, this 값 등이 정의되는 환경 종류 GEC (Global execution context) JS가 실행될때 맨 처음에 시작되는 실행 컨텍스트 JS 는 싱글 스레드이기 때문에 무조건 하나만 존재함 FEC (Functional execution context) 실행 컨텍스트는 함수마다 생길 수 있음 함수가 호출되고 실행될 때 만들어지는 실행 컨텍스트 Eval eval 함수가 실행될 때 만들어지는 실행 컨텍스트 execution context stack 콜스택과 비슷한 구조 실행 컨텍스트 생성 과정 Creation Phase Create the Activation object / Variable Object Activation object : 글로..

SEO가 왜 그렇게 중요한가? SEO는 브랜드에 대한 전환율과 자신감을 높이기 위한 키이다. 더 높은 검색순위 배치는 더 많은 방문자로 연결된다. 검색엔진 유기적 트래픽(검색 엔진에서 사이트를 방문하는 방문자)은 다음과 같은 세가지 이유로 많은 비즈니스의 핵심이다. 정성적 - 방문자가 고객으로 전환될 가능성이 높다 신뢰할 수 있는 - 브랜드에 대한 더 높은 신뢰도 저비용 - 소요된 시간과 노력을 제외하고 검색 엔진 순위를 높이는 좋은 SEO 관행을 무료로 할 수 있다. 상위 자연 검색 결과 위치에 표시되는데 직접적인 비용이 없다. ** SEM(검색 엔진 마케팅)과는 다름 웹사이트 최적화 프로세스 기술 - 크롤링 및 웹 성능을 위해 웹사이트를 최적화 생성 - 특정 키워드를 대상으로 하는 콘텐츠 전략을 만든..

이 글은 Next.js 공식 튜토리얼을 참고하여 정리한 글입니다. 동적 경로 (Dynamic Routes) 동적 경로로 페이지를 정적 생성 하는 방법 각 게시물에 경로가 있어야함 ‘/posts/’, 여기서 id 는 최상위 posts 디렉토리 아래에 있는 마크다운 파일의 이름이다 pages/posts 폴더 내에 [id].js 라는 파일을 생성 대괄호로 묶인 파일 이름은 동적경로를 나타냄 getStaticPaths 를 이용 객체 배열이 들어옴 (params 내에 id 값이 있어야함) // Returns an array that looks like this: // [ // { // params: { // id: 'ssg-ssr' // } // }, // { // params: { // id: 'pre-rend..

3주차 다섯번째 과제는 Redux에 대한 짧은 강의와 함께 Redux 를 이용하여 간단한 메신저 페이지를 만드는 과제가 나왔다. 처음 Redux 를 써야했어서 간단하게 강의를 듣고 오긴 했지만 아직 모르는게 많은 느낌이라 프로젝트에 잘 적용시킬 수 있을지 조금 걱정이였다. 구현해야하는 기능 🖼 레이아웃 대화목록은 상단에, 입력창은 하단에 위치 대화목록 스크롤 기능 입력창 왼쪽에는 입력란, 오른쪽에는 보내기 버튼 메세지 프로필 이미지는 원형으로 왼쪽에 위치 오른쪽 컨텐츠 영역 상단에는 이름, 보낸 날짜, 하단에는 메세지 출력 메세지 오른쪽 하단에 삭제, 답장 버튼 🔥 기능 입력창 엔터키로 전송 가능 / 입력시 전송버튼 활성화 컨텐츠를 입력하지 않으면 전송할 수 없는 기능 입력란은 멀티라인 / 출력도 그대로..

기본적으로 Next.js 는 모든 페이지를 미리 렌더링한다. 즉, Next.js 는 클라이언트 측 JavaScript 로 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성한다. 생성된 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결된다. 브라우저에서 페이지를 로드하면 해당 JavaScript 코드가 실행되고 페이지가 완전히 대화식으로 만들어진다 (이 과정을 hydration, 수화 라고 함) 사전 렌더링이 진행중인지 확인하는 방법 브라우저에서 JavaScript 를 비활성화한다 (개발자도구 → 커맨드+Shift+P → 자바스크립트 검색 후 사용중지) 다음 페이지에 액세스 → https://next-learn-starter.vercel.app/ 앱 UI 가 제대로 ..

이 글은 Next.js 공식 튜토리얼을 참고하여 정리한 글입니다. 0. 설치 npx create-next-app nextjs-blog --use-npm --example "" 1. 라우팅 page 폴더 내 폴더나 파일 생성 ex ) /posts/first-post 경로를 만들고싶다면 pages/posts/first-post.js 이런식으로 파일 생성하면 자동으로 라우팅이 된다. import Link from 'next/link'; // .. 이동하기 ⇒ 위와 같은 예제로 링크 라우팅이 가능 Link 를 이용하면 client-side Navigation 이 가능하다. 브라우저 내 개발자도구로 style 을 변경한 후 페이지 이동하고 돌아와도 바꾼 스타일이 그대로 적용되어있음! a 태그를 쓴다면 브라우저가 ..

이번 수업에는 Core JavaScript 강의를 간단하게 듣게 되었다. 동기,비동기와 콜백함수 그리고 Promise 와 이벤트 루프 등 개념적으로는 이해해도 머리속에서 정리가 아직 안된것들이였는데 이번 기회에 정리를 할 수 있어서 아주 좋은 도움이 되었다 (멘토님 짱!!) 🥳 과제 시작! 이번과제는 평소의 과제와는 느낌이 사뭇 다른 과제였다. 두개 중에 선택을 할 수 있었는데, 우리팀이 선택한 과제는 물류처리를 위한 많은 데이터를 어떻게 효과적으로 화면에 보여줄 수 있는가 였다. 기존의 과제들은 이미 어떻게 보여질지가 다 정해져서 나왔더라면 이번 과제는 그 이전의 어떻게 화면에 뿌려줘야 하는가에 대한 고민이 많이 필요해보였다. 테이블의 칼럼은 30개가 넘었고 로우 역시도 길게 나온다면 몇십개가 될 수 ..

웹 크롤러란? 웹 크롤러(web crawler)는 조직적, 자동화된 방법으로 월드 와이드 웹을 탐색하는 컴퓨터 프로그램이다. 웹 크롤러가 하는 작업을 '웹 크롤링'(web crawling) 혹은 '스파이더링'(spidering)이라 부른다. 검색 엔진과 같은 여러 사이트에서는 데이터의 최신 상태 유지를 위해 웹 크롤링한다. 웹 크롤러는 대체로 방문한 사이트의 모든 페이지의 복사본을 생성하는 데 사용되며, 검색 엔진은 이렇게 생성된 페이지를 보다 빠른 검색을 위해 인덱싱한다. 또한 크롤러는 링크 체크나 HTML 코드 검증과 같은 웹 사이트의 자동 유지 관리 작업을 위해 사용되기도 하며, 자동 이메일 수집과 같은 웹 페이지의 특정 형태의 정보를 수집하는 데도 사용된다. - 위키백과 간단하게 설명해서 검색 사..