hyunsix의 개발블로그

1. UI 및 UX 설계 피그마를 사용할까 하다가 빠르게 구현하고자 카카오 오븐을 통해 만들었다. 글자들이 좀 짤린 부분이 있는 것 같은데 이제 봤네... 다음번에는 현업에서 더 자주 사용된다고 하는 피그마를 사용할까 한다. 2. 실제 구현 / FE 🤔어려웠던 점 로그인 후 회원정보를 저장할 때 redux를 사용했었는데 redux는 새로고침하면 초기화된다는 치명적인 단점이 있었다. 예를 들어 로그인을 하게 되면 TodoList페이지에 's TodoList이 부분에서 가 userID로 설정을 해놓은 것인데 redux만을 이용해 유저정보를 저장하니 새로고침시 userID를 찾을 수 없는 상태가 되었다. 💥해결방안으로 로컬스토리에도 유저정보를 저장하기로 하였다. 이를 통해 새로고침 후에도 로컬 스토리지에 담겨..

1. if ... else 문 vs 삼항 조건 연산자 위와 같은 if ... else문을 요렇게 삼항조건연산자를 통해 간편하게 만들 수 있다! 하지만 조금 다른점! 위의 if ... else문과 다르게 삼항연산자는 result라는 변수에다가 할당을 한다. 여기서 두 조건문의 차이점이 나온다. "var % 2 ? '홀수' : '짝수' "는 표현식이다. 즉, 삼항 조건 연산자는 값으로 평가되는 표현식을 만든다. 따라서 삼항 조건 연산자 표현식은 값처럼 사용할 수 있기 때문에 변수에 할당할 수 있다. 하지만 if... else 문은 말 그대로 문이다. 따라서 값처럼 사용할 수 없기 때문에 변수에 할당할 수 없다. 조건에 따라 단순히 값을 결정하여 변수에 할당하는 경우 : 삼항 조건 연산자! 조건에 따라 실행해..

문제점 react에서 type=file인 input 태그에 사진을 넣고 그 결과물을 console창에 찍어보면 아래와 같이 여러 정보가 나오는데 정작 미리보기할 때 띠울 로컬상대경로는 안보임! react에서 자동적으로 보안상의 이유로 상대경로를 블러처리해버려서 그럼! 해결방안 그래서 우리는 URL.createObjectURL() 이라는 친구를 이용해서 상대경로를 만들어주면됨! const nowImageUrl = URL.createObjectURL(내가 방금 올린 파일) 한 후 nowImageUrl을 뽑아보면 아래와 같이 경로가 들어간 blob type의 친구가 딱 하고 보임! 그래서 이 친구를 이미지 미리보기 할 때 띄워주면 됨 응용해서 만든 페이지 * input 태그는 label을 이용해서 css를 먹..

1. 산술 연산자 2. 할당 연산자 할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다. 3. 삼항 조건 연산자 삼항 조건 연산자는 첫 번째 피연산자가 true로 평가되면 두 번째 피연산자를 반환하고, 첫 번째 피연산자가 false로 평가되면 세 번째 피연산자를 반환한다. 이 밖에도 비교, 논리, 타입, 지수 연산 등 다양한 연산자들이 있지만 직관적으로 이해가 가능한 부분이다.

why 데이터 타입이 필요할까?? 값은 메모리에 저장하고 참조할 수 있어야 한다. 메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야하는데 데이터 타입을 통해 몇 바이트의 메모리 공간을 낭비와 손실 없이 이용할지 결정할 수 있다. 또한 2진수로 저장되어 있는 메모리에서 2진수를 읽고 이것을 사람들이 이해할 수 있는 언어로 표시할 때 이 2진수를 어떻게 해석할지 결정하기 위해서도 데이터타입이 필요하다. 자바스크립트는 7개의 데이터 타입을 제공한다. 종류 설명 숫자 타입 숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열 타입 문자열 불리언 타입 논리적 참(true)와 거짓(false) undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입..

1. 표현식 표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조한다. 쉽게 생각해서 값으로 평가될 수 있는 문은 모두 표현식이다. 아래의 문 모두 표현식이다. 2. 문(statement) 문은 프로그램을 구성하는 기본단위이자 최소 '실행' 단위이다. 최소의 문장이라고 생각하면 좋을 것 같다. 이러한 문의 집합으로 이뤄진 것이 바로 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다. 문은 여러개의 token으로 이루어졌다. token이란 문법적인 의미를 가지며, 더 이상 나눌 수 없는 코드의 기본요소를 말한다.

1. 변수란 무엇이고 왜 사용하는가? 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체, 또는 그 메모리공간을 식별하기 위해 붙인 이름이다. 개발자가 직접 메모리 주소를 통해 값을 저장하고 치환할 경우 시스템 오류가 날 수 있기 때문이다. 변수(식별자)는 값이 아니라 메모리 주소를 기억하고 있다. 2. 키워드란 ? 자바스크립트 엔진은 키워드를 만나면 자신이 수행해야 될 약속된 동작을 수행한다. 키워드 ex) var, let, const, function, class var라는 키워드의 경우 var 뒤에 오는 변수이름으로 새로운 변수를 생성하고, 값을 지정하지 않은 경우 초기값을 undefined로 설정하는 '약속된 동작'을 수행한다. 3. 변수 호이스팅 자바스크립트는 기본적으로 코드를 인터프리터..

오늘은 댓글기능을 구현하기로 했다. 대략적인 댓글 구현에 더해서 세부적으로 구현하고 싶은 부분이 있는데, 다음과 같다. 우선 댓글은 전체게시글 페이지와 상세보기 페이지에서 모두 작성이 가능하게 한다. 전체게시글 페이지에선 가장 최신 댓글 2개만 보이게 하고 댓글 모두보기를 클릭하면 모든 댓글이 보이게 만든다. 좋아요 하트 버튼 오른쪽에 댓글달기 버튼을 만든다! 우선 제일 어려웠던 부분이 댓글을 2개만! 보이게 하는 방법인데 django 공식문서를 통해 해답을 찾을 수 있었다. 우선 mathfilters install한 후 위와 같이 settings.py와 원하는 html페이지에 등록을 시켜준다. 그리고 공식문서를 참고하자면 출처 : pypi.org/project/django-mathfilters/ dja..

오늘은 SSAFY 수업이 너무 빡셌...고! 약간 둘다 지쳐있는 상태라서 간단하게 좋아요 기능 / 팔로우 기능으로 나눠서 코딩을 하기로 했다! 내가 맡은 part는 좋아요 기능!1) 전체 게시글 목록에서 좋아요기능 / 2) 세부 게시글에서 좋아요 기능 / 3) 좋아요 카운팅 까지 구현하기로 하였다. 1. 좋아요 기능 우선 결과물을 보자면 요런 상태 ( 좋아요 아직 안누름 ! ) 에서 저 하트를 뿅! 하고 누르면! 머스크형 ㅎㅇ... 하트 채워지고 명수도 증가하는! 빠밤 views.py 코드를 염탐하자면 전체목록보기에서도 좋아요를 구현해야하고 / 게시글상세보기에서도 좋아요를 구현해야하는데, 현재 좋아요를 누르면 어떠한 페이지로 보내야 하는 상황이다. 그래서 전체목록에서 누르면 전체목록으로 보내야하고 / 상..

어느새 삼성 청년 SW아카데미 1학기도 1달밖에 남지 않고 django를 통한 WEB 개발에 대한 어느정도의 숙련도가 쌓이자 웹페이지를 만들어보고 싶다는 욕구가 끓어올랐다! 그래서 같이 공부하는 용재님!과 함께 인스타그램 클론 코딩을 하기로 하였다! 우선은 백엔드단의 로직을 구현하고 프론트엔드의 디자인 부분은 후에 차근차근 구현하기로 했다 그래서 첫 날 우리의 목표는 초기 django 설정 및 로그인, 회원가입 구현 // 초기의 설정이라 구글미트를 통해 화면을 공유하며 같이 코드를 작성해 나갔다. 기본이 되는 Navbar 구현 및 약간의 디자인 ? // 내가 맡은 파트! 게시글 CRUD + 간단한 프로필 페이지 만들기 // 용재님이 맡은 파트! ( 뭔가 더 많아 보이는..?) 1. 초기 django 설정..